page layout with form + time added

OmerGeva · Nov 25, 2019 · 92ce7b3 · 92ce7b3
1 parent 960bb32
commit 92ce7b3
Show file tree

Hide file tree

Showing 12 changed files with 109 additions and 58 deletions.
diff --git a/.gitignore b/.gitignore
@@ -40,3 +40,4 @@ yarn-debug.log*
 *.swp
 .DS_Store
 .env*
+.env*
diff --git a/app/assets/stylesheets/components/_cards.scss b/app/assets/stylesheets/components/_cards.scss
@@ -27,11 +27,18 @@
   padding: 16px;
 }
 
+.content {
+  padding: 24px 16px;
+}
+
 .listing-card {
-  background: white;
-  box-shadow: 2px 2px 15px rgba(0,0,0,0.1);
+  margin: 0;
 }
 
-.content {
-  padding: 24px 16px;
+.description {
+  padding: 12px;
+}
+
+.img-layout {
+  width: 100%;
 }
diff --git a/app/assets/stylesheets/components/_forms.scss b/app/assets/stylesheets/components/_forms.scss
@@ -0,0 +1,9 @@
+.booking-form {
+  position: sticky;
+  top: 24px;
+}
+
+.booking-form-wrapper {
+  position: relative;
+  padding: 24px;
+}
diff --git a/app/assets/stylesheets/components/_index.scss b/app/assets/stylesheets/components/_index.scss
@@ -6,3 +6,4 @@
 @import "cards";
 @import "searchbar";
 @import "filterbar";
+@import "forms";
diff --git a/app/assets/stylesheets/listings/_index.scss b/app/assets/stylesheets/listings/_index.scss
@@ -1,4 +1,4 @@
-.main-container {
+.index-container {
   display: flex;
   flex-direction: column;
   // height: calc(100vh - 70px);

diff --git a/app/assets/stylesheets/listings/_show.scss b/app/assets/stylesheets/listings/_show.scss
@@ -1,3 +1,8 @@
+.show-container {
+  width: 95%;
+  display: inline-flex;
+}
+
 .big-img {
   width: 100%;
 }
@@ -18,3 +23,15 @@
   display: inline-block;
   border-radius: 4px;
 }
+
+.listing-wrapper {
+  background: white;
+  box-shadow: 2px 2px 15px rgba(0,0,0,0.1);
+  margin: 0;
+  padding: 0;
+}
+
+.reviews {
+  padding: 16px;
+}
+
diff --git a/app/models/booking.rb b/app/models/booking.rb
@@ -3,4 +3,5 @@ class Booking < ApplicationRecord
   belongs_to :listing
 
   validates :date, uniqueness: true
+  validates :duration, numericality: { greater_than_or_equal_to: 0 }
 end
diff --git a/app/views/listings/index.html.erb b/app/views/listings/index.html.erb
@@ -1,4 +1,4 @@
-<div class="main-container">
+<div class="index-container">
 <h1>Naps available</h1>
   <div class="searchbar">
     <form>

diff --git a/app/views/listings/show.html.erb b/app/views/listings/show.html.erb
@@ -1,61 +1,48 @@
-<div class="d-flex">
+<div class="show-container">
 
-<div>
-<div class="container">
+<div class="row">
 
-  </div>
-  <p><%= @listing.category %></p>
-  <p><%= @listing.price %></p>
-  <p><%= @listing.address %></p>
-</div>
-<div class="description">
-  <p>
-    Pellentesque habitant morbi tristique senectus et netus et malesuada
-    fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
-    ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
-    quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat
-    eleifend leo.
-  </p>
-</div>
-
-</div>
-<div class="container mt-5">
-  <%= simple_form_for [@listing, @booking] do |f| %>
-  <%= f.input :date %>
-  <%= f.input :message, placeholder: "Can't wait to nap on your couch!"%>
-  <%= f.input :duration, placeholder: "1.5" %>
-  <%= f.submit "Nap Here!", class: "btn btn-primary btn-block" %>
-<% end %>
-</div>
-
-  <div class="row listing-card">
-
-    <div class="col-6 img-layout">
-      <div class="row mb-2">
-        <img class='big-img' src="https://images.unsplash.com/photo-1540991825428-5b54b09f7338?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1197&q=80" alt="big img">
+  <div class="col-8 listing-wrapper">
+    <div class="row listing-card">
+      <div class="col-6 img-layout">
+        <div class="row mb-2">
+          <img class='big-img' src="https://images.unsplash.com/photo-1540991825428-5b54b09f7338?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1197&q=80" alt="big img">
+        </div>
+        <div class="row d-flex flex-nowrap">
+          <div>
+            <img class="small-img pr-1" src="https://images.unsplash.com/photo-1540991825428-5b54b09f7338?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1197&q=80" alt="small img">
+          </div>
+          <div>
+            <img class="small-img pl-1" src="https://images.unsplash.com/photo-1540991825428-5b54b09f7338?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1197&q=80" alt="small img">
+          </div>
+        </div>
       </div>
-      <div class="row d-flex flex-nowrap">
-        <div>
-          <img class="small-img pr-1" src="https://images.unsplash.com/photo-1540991825428-5b54b09f7338?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1197&q=80" alt="small img">
+      <div class='col-6 content'>
+        <div class="details">
+          <div class='stars'>
+            <% 5.times do %>
+            <i class="fas fa-star"></i>
+            <% end %>
+          </div>
+          <p class='category'><%= @listing.category %></p>
+          <p><%= @listing.address %></p>
         </div>
-        <div>
-          <img class="small-img pl-1" src="https://images.unsplash.com/photo-1540991825428-5b54b09f7338?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1197&q=80" alt="small img">
+        <div class="description">
+          <p>
+            Pellentesque habitant morbi tristique senectus et netus et malesuada
+            fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
+            ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
+            quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat
+            eleifend leo.
+          </p>
         </div>
       </div>
     </div>
 
-    <div class='col-6 content'>
-      <div class="details">
-        <div class='stars'>
-              <% 5.times do %>
-                <i class="fas fa-star"></i>
-              <% end %>
-        </div>
-        <p class='category'><%= @listing.category %></p>
-        <h3><%= @listing.price %>$</h3>
-        <p><%= @listing.address %></p>
-      </div>
-      <div class="description">
+    <div class="reviews">
+      <% 10.times do %>
+      <div class='review'>
+        <strong>Review</strong>
         <p>
           Pellentesque habitant morbi tristique senectus et netus et malesuada
           fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
@@ -64,7 +51,24 @@
           eleifend leo.
         </p>
       </div>
-
+      <% end %>
     </div>
+
+  </div>
+
+
+  <div class="col-4 booking-form-wrapper">
+
+      <div class="booking-form">
+        <h3><%= @listing.price %>$ <span>per hour</span></h3>
+        <%= simple_form_for [@listing, @booking] do |f| %>
+        <%= f.input :date, value: Date.today %>
+        <%= f.input :time, value: Time.now %>
+        <%= f.input :duration, label: 'Duration (hours)'.html_safe, input_html: { min: '0', step: '0.5' }, placeholder: "0.5" %>
+        <%= f.input :message, placeholder: "Can't wait to nap on your couch!"%>
+        <%= f.submit "Nap Here!", class: "btn btn-primary btn-block" %>
+        <% end %>
+      </div>
+
   </div>
 </div>
diff --git a/db/migrate/20191125104630_add_time_to_bookings.rb b/db/migrate/20191125104630_add_time_to_bookings.rb
@@ -0,0 +1,5 @@
+class AddTimeToBookings < ActiveRecord::Migration[5.2]
+  def change
+    add_column :bookings, :time, :datetime
+  end
+end
diff --git a/db/migrate/20191125105446_change_time_in_bookings.rb b/db/migrate/20191125105446_change_time_in_bookings.rb
@@ -0,0 +1,5 @@
+class ChangeTimeInBookings < ActiveRecord::Migration[5.2]
+  def change
+    change_column :bookings, :time, :time
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2019_11_24_154835) do
+ActiveRecord::Schema.define(version: 2019_11_25_105446) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -23,6 +23,7 @@
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.text "message"
+    t.time "time"
     t.index ["listing_id"], name: "index_bookings_on_listing_id"
     t.index ["user_id"], name: "index_bookings_on_user_id"
   end
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,3 +40,4 @@ yarn-debug.log* @@
     *.swp
     .DS_Store
     .env*
+    .env*