Refactor and organize styles

app/assets/stylesheets/application.scss

@@ -15,18 +15,21 @@
  */
 
 :root {
-  --main-dark-blue-color: #0047AB;
-  --main-font-family: Helvetica, sans-serif;
+  --dark-blue: #0047AB;
+  --font-family: Helvetica, sans-serif;
+  --default-spacing: 15px;
+  --medium-spacing: 30px;
+  --large-spacing: 60px;
 }
 
 html {
+  box-sizing: border-box;
+  font-size: 16px;
+  height: -webkit-fill-available;
   margin: 0;
+  overflow-x: hidden;
   padding: 0;
-  height: -webkit-fill-available;
   width: 100vw;
-  font-size: 16px;
-  overflow-x: hidden;
-  box-sizing: border-box;
 }
 
 *,
@@ -37,14 +40,13 @@ html {
 
 body {
   align-items: center;
-  background-attachment:fixed;
+  background-attachment: fixed;
   background-color: #2a2a72;
   background-image: linear-gradient(315deg, #2a2a72 0%, #0098f0 74%);
   color: #333;
   display: flex;
   flex-direction: column;
-  font-family: var(--main-font-family);
-  justify-content: flex-start;
+  font-family: var(--font-family);
   margin: 0;
   min-height: 100vh;
   min-height: -webkit-fill-available;
@@ -54,10 +56,13 @@ body {
 main {
   background-color: #e4e4e4;
   border-radius: 10px;
-  height: auto;
-  margin: 30px;
-  padding-top: 15px;
-  max-width: 1024px;
+  margin: var(--default-spacing);
+  padding-top: var(--default-spacing);
+  max-width: 960px;
+}
+
+.content-container {
+  padding: var(--default-spacing);
 }
 
 .flash-message {
@@ -67,7 +72,7 @@ main {
 }
 
 .notice {
-  background-color: var(--main-dark-blue-color);
+  background-color: var(--dark-blue);
 }
 
 .alert {
@@ -83,18 +88,27 @@ p.sub-title {
   font-weight: 600;
 }
 
-@media (min-width: 600px) {
+@media (min-width: 425px) {
   main {
-    margin: 30px;
-    padding-top: 30px;
+    margin: var(--medium-spacing);
+    padding-top: var(--medium-spacing);
+  }
+
+  .content-container {
+    padding: var(--medium-spacing);
   }
 }
 
 @media (min-width: 900px) {
   main {
-    margin: 60px;
+    margin: var(--large-spacing);
+  }
+
+  .content-container {
+    padding: var(--large-spacing);
   }
 }
 
-// Booking Show page into two columns
-// Change wording on submit booking on booking new page
+// Change wording on submit booking on booking new page
+// styles for form errors
+// Page Names like "Your Booking: Origin - Destination"

app/assets/stylesheets/bookings.scss

@@ -2,51 +2,24 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: https://sass-lang.com/
 
-.booking-container {
-  padding: 30px;
-}
-
-.results-summary {
-  margin-top: 30px;
-}
-
-.booking-results {
-  display: flex;
-  flex-wrap: wrap;
-}
-
 @media (min-width: 600px) {
-  .passenger-container {
+  .new-passenger-container {
     display: flex;
     flex-direction: row;
     > * { flex: 1 1 auto; }
   }
 
-  .passenger-container :first-child {
-    margin-right: 15px;
-  }
-
-  .booking-container .form-button {
-    margin: 0 auto;
-  }
-
-  .flight-details, .passenger-details {
-    margin: 0 30px;
+  .new-passenger-container :first-child {
+    margin-right: var(--medium-spacing);
   }
-}
 
-@media (min-width: 900px) {
-  .booking-container  {
-    padding: 60px;
-    max-width: 768px;
-    margin: 0 auto;
+  .booking-section-container {
+    display: grid;
+    grid-template-columns: 150px 1fr;
   }
 
-  .booking-container .form-button input {
-    margin-top: 20px;
-  }
-
-  .booking-results {
-    display: flex;
+  // Offset the difference of 1.2em font in the section heading
+  .booking-section-summary {
+    margin-top: 4px;
   }
 }

app/assets/stylesheets/flights.scss

@@ -5,15 +5,14 @@
 .flight-container {
   display: flex;
   flex-direction: column;
-  padding: 30px;
   > * { flex: 0 1 auto; }
 }
 
 .flight-results {
   background-color: white;
   border-radius: 10px;
-  padding: 15px 30px;
-  margin-top: 30px;
+  margin-top: var(--medium-spacing);
+  padding: 0 15px;
 }
 
 p.results-placeholder {
@@ -24,6 +23,12 @@ p.results-placeholder {
   margin: 30px 0 15px;
 }
 
+@media (min-width: 425px) {
+  .flight-results {
+    padding: 15px 30px;
+  }
+}
+
 @media (min-width: 600px) {
   .flight-container {
     flex-direction: row;
@@ -36,12 +41,8 @@ p.results-placeholder {
 }
 
 @media (min-width: 900px) {
-  .flight-container {
-    padding: 60px;
-  }
-
   .flight-results {
     margin: 18px 0 0 60px;
     padding: 30px 45px;
   }
-}
+}

app/assets/stylesheets/forms.scss

@@ -5,18 +5,18 @@ form {
 }
 
 .form-field {
-  padding-bottom: 15px;
+  padding-bottom: var(--default-spacing);
 }
 
 .form-field select,
 .form-field input {
-  font-family: var(--main-font-family);
+  font-family: var(--font-family);
   padding: 3px;
   width: 100%;
 }
 
 .form-button input {
-  background-color: var(--main-dark-blue-color);
+  background-color: var(--dark-blue);
   border: none;
   border-radius: 4px;
   color: white;
@@ -29,7 +29,7 @@ form {
 
 .radio-button-container {
   display: grid;
-  grid-row-gap: 10px;
+  grid-row-gap: var(--default-spacing);
   grid-template-columns: 30px 1fr;
 }
 
@@ -38,7 +38,7 @@ form {
 }
 
 @media (min-width: 600px) {
-  .flight-results .form-button {
+  .form-button {
     margin: 0 auto;
   }
-}
+}

app/models/flight.rb

@@ -40,6 +40,6 @@ def estimated_departure_time
   end
 
   def humanize_date
-    departure_date.strftime("%A, %B %d, %Y")
+    departure_date.strftime("%B %d, %Y")
   end
 end

app/views/bookings/_form.html.erb

@@ -16,7 +16,7 @@
   <%= f.hidden_field :passenger_count, :value => params[:passenger_count] %>
 
   <%= f.fields_for :passengers do |passenger_form| %>
-    <div class="passenger-container">
+    <div class="new-passenger-container">
       <div class="form-field">
         <%= passenger_form.label :name %><br />
         <%= passenger_form.text_field :name,

app/views/bookings/_summary.html.erb

@@ -2,6 +2,7 @@
   <p>
     <strong>Departure:</strong>
     <%= flight.estimated_departure_time %>
+    on <%= flight.humanize_date %>
     from <%= flight.origin_airport.code %> (<%= flight.origin_airport.location %>)
 
   </p>

app/views/bookings/new.html.erb

@@ -1,6 +1,6 @@
-<div class="booking-container">
+<div class="new-booking-container">
   <p class="sub-title">
-    <%= pluralize(@flights.count, "Flight") %> on <%= @flights.first.humanize_date %>:
+    <%= pluralize(@flights.count, "Flight") %>:
   </p>
   <% @flights.each do |flight| %>
     <%= render partial: 'summary', locals: { flight: flight } %>

app/views/bookings/show.html.erb

@@ -1,24 +1,27 @@
-<div class="booking-container">
-  <div class="booking-results">
-    <div class="passenger-details">
-      <p class="sub-title">
-        <%= pluralize(@booking.passengers.count, "Passenger") %>:
+<div class="booking-section-container">
+  <div class="booking-section-title">
+    <p class="sub-title">
+      <%= pluralize(@booking.passengers.count, "Passenger") %>:
+    </p>
+  </div>
+  <div class="booking-section-summary">
+    <% @booking.passengers.each do |passenger| %>
+      <p>
+        <%= passenger.name %>
       </p>
-      <div class="results-summary">
-        <% @booking.passengers.each do |passenger| %>
-          <p>
-            <%= passenger.name %>
-          </p>
-        <% end %>
-      </div>
-    </div>
-    <div class="flight-details">
+    <% end %>
+  </div>
+</div>
+<br />
+<div class="booking-section-container">
+  <div class="booking-section-title">
     <p class="sub-title">
       <%= pluralize(@booking.flights.distinct.count, "Flight") %>:
     </p>
+  </div>
+  <div class="booking-section-summary">
     <% @booking.flights.distinct.each do |flight| %>
       <%= render partial: 'summary', locals: { flight: flight } %>
     <% end %>
-    </div>
   </div>
-</div>
+</div>

app/views/layouts/application.html.erb

@@ -16,7 +16,9 @@
     <% end %>
     <main>
       <%= image_tag('flight-booker-logo.png', height: 'auto', width: '100%') %>
-      <%= yield %>
+      <div class="content-container">
+        <%= yield %>
+      </div>
     </main>
   </body>
 </html>

spec/features/creating_passengers_spec.rb

@@ -13,7 +13,7 @@
     fill_in("booking_passengers_attributes_0_name", with: "Example Name")
     fill_in("booking_passengers_attributes_0_email", with: "name@example.com")
     click_on("Submit Booking")
-    within(".booking-results") do
+    within(".content-container") do
       expect(page).to have_content("Example Name")
       expect(page).to have_content("NYC")
     end

spec/system/add_booking_spec.rb

@@ -29,7 +29,7 @@
     fill_in("booking_passengers_attributes_1_name", with: "Example Two")
     fill_in("booking_passengers_attributes_1_email", with: "two@example.com")
     click_on("Submit Booking")
-    within(".booking-results") do
+    within(".content-container") do
       expect(page).to have_content("Example One")
       expect(page).to have_content("Example Two")
       expect(page).to have_content("NYC")