Merge pull request #1742 from codebar/remove-container-fluid-in-places

Remove container fluid on some pages

app/assets/stylesheets/main.scss

@@ -1,7 +1,3 @@
-#banner {
-  margin-top: 30px;
-}
-
 nav a.menu {
   margin: 20px;
   top: 20px;

app/views/dashboard/show.html.haml

@@ -3,14 +3,15 @@
 .homepage-hero.d-flex.align-items-center
   .container.d-flex
     .col-md-4.offset-md-1.p-3.text
-      %p= raw t('homepage.intro')
+      %p.mb-0= raw t('homepage.intro')
 
-.container-fluid.py-4.py-lg-5.bg-light
-  .row.justify-content-md-center
-    .col-md-8
-      %p.lead.mb-0= raw t('homepage.explanation')
+.py-4.py-lg-5.bg-light
+  .container
+    .row.justify-content-md-center
+      .col-md-8
+        %p.lead.mb-0= raw t('homepage.explanation')
 
-.container-fluid.py-4.py-lg-5
+.container.py-4.py-lg-5
   .row
     .col-md-4.mb-4.mb-md-0
       .card.h-100.text-md-center.border-0
@@ -48,10 +49,11 @@
         .card-footer.border-0.bg-transparent
           = mail_to 'hello@codebar.io', t('homepage.participate.workshop_button'), subject: t('homepage.participate.workshop_email_subject'), class: 'btn btn-primary'
 
-.container-fluid.py-4.py-lg-5.bg-light
-  = render partial: 'shared/donation_platforms'
+.py-4.py-lg-5.bg-light
+  .container
+    = render partial: 'shared/donation_platforms'
 
-.container-fluid.py-4.py-lg-5
+.container.py-4.py-lg-5
   .row
     .col-lg-8
       - if @upcoming_workshops.empty?
@@ -74,10 +76,11 @@
             = link_to chapter.name, chapter_path(chapter.slug)
 
 - if @testimonials.any?
-  .container-fluid.py-4.py-lg-5.bg-light
-    .row.justify-content-md-center
-      .col-md-8
-        = render partial: 'members/testimonials'
+  .py-4.py-lg-5.bg-light
+    .container
+      .row.justify-content-md-center
+        .col-md-8
+          = render partial: 'members/testimonials'
 
-%section.container-fluid.py-4.py-lg-5
+.container.py-4.py-lg-5
   = render partial: 'shared/newsletter'

app/views/events/index.html.haml

@@ -1,13 +1,13 @@
 - title t('events.title')
 
-.container-fluid{'data-test': 'upcoming-events'}
+.container{'data-test': 'upcoming-events'}
   .row
     .col
       - if @events.any?
         %h3.mb-4 Upcoming Events
   = render partial: 'events', locals: { grouped_events: @events }
 
-.container-fluid{'data-test': 'past-events'}
+.container{'data-test': 'past-events'}
   .row
     .col
       - if @past_events.any?

app/views/events/show.html.haml

@@ -1,4 +1,4 @@
-.container-fluid.stripe.reverse
+.container.py-4.py-lg-5
   .row
     .col-12
       %h1
@@ -12,40 +12,45 @@
     .col
       = render partial: 'event_actions'
 
-.container-fluid.stripe.reverse
-  .row
-    = render partial: 'shared/venue', locals: { venue: @event.venue, address: @host_address}
-
-  .row.mt-4
-    .col
-      - if @event.announce_only
-        %h3 Information
-      - else
-        %h3= t('events.schedule')
-      = dot_markdown(@event.schedule)
-
-- if @event.show_faq?
-  .container-fluid.stripe.reverse
+.py-4.py-lg-5.bg-light
+  .container
     .row
+      = render partial: 'shared/venue', locals: { venue: @event.venue, address: @host_address}
+
+    .row.mt-4
       .col
-        %h2.text-center FAQ
         - if @event.announce_only
-          %p.text-center If you have any questions, #{mail_to(@event.email, "get in contact")}
-    - unless @event.announce_only
-      = render partial: 'events/faq'
+          %h3 Information
+        - else
+          %h3= t('events.schedule')
+        = dot_markdown(@event.schedule)
+
+- if @event.show_faq?
+  .py-4.py-lg-5.section
+    .container
+      .row
+        .col
+          %h2.text-center FAQ
+          - if @event.announce_only
+            %p.text-center If you have any questions, #{mail_to(@event.email, "get in contact")}
+      - unless @event.announce_only
+        = render partial: 'events/faq'
 
 - if @event.sponsors?
-  .container-fluid.stripe.reverse#sponsors
-    = render partial: 'event_sponsors', locals: { event: @event }
+  .py-4.py-lg-5.section#sponsors
+    .container
+      = render partial: 'event_sponsors', locals: { event: @event }
 
 - if @event.verified_coaches.any?
-  .container-fluid.stripe.reverse
-    .row
-      .col
-        %h2.text-center= t('events.coaches')
-    .row.text-center
-      = render partial: 'members/avatar_listing', locals: { member: @event.verified_coaches, show_info: false }
+  .py-4.py-lg-5.section
+    .container
+      .row
+        .col
+          %h2.text-center= t('events.coaches')
+      .row.text-center
+        = render partial: 'members/avatar_listing', locals: { member: @event.verified_coaches, show_info: false }
 
 - if @event.organisers.any?
-  .container-fluid.stripe.reverse
-    = render partial: 'members/organisers_grid', locals: { members: @event.organisers, show_info: false }
+  .py-4.py-lg-5.section
+    .container
+      = render partial: 'members/organisers_grid', locals: { members: @event.organisers, show_info: false }

app/views/shared/_donation_platforms.html.haml

@@ -6,28 +6,28 @@
   .d-flex.col-sm-12.col-md-6.col-lg-3
     .card.mt-1.border-0
       %div.card-header.bg-white.border-0.pb-0.pt-4
-        =image_tag("logo.png", style: "max-height: 50px;", alt: "codebar logo")
+        = image_tag("logo.png", style: "max-height: 50px;", alt: "codebar logo", class: "mw-100")
       %div.card-body
-        %h3.h6=link_to(t("donation_platforms.donation_form.title"), new_donation_path)
+        %h3.h6= link_to(t("donation_platforms.donation_form.title"), new_donation_path)
         %p= t("donation_platforms.donation_form.text")
   .d-flex.col-sm-12.col-md-6.col-lg-3
     .card.mt-1.border-0
       %div.card-header.bg-white.border-0.pb-0.pt-4
-        =image_tag("amazon-smile-logo.png", style: "max-height: 50px;", alt: "Amazon Smile logo")
+        = image_tag("amazon-smile-logo.png", style: "max-height: 50px;", alt: "Amazon Smile logo", class: "mw-100")
       %div.card-body
-        %h3.h6=link_to(t("donation_platforms.amazon_smile.title"), "https://smile.amazon.co.uk")
+        %h3.h6= link_to(t("donation_platforms.amazon_smile.title"), "https://smile.amazon.co.uk")
         %p= t("donation_platforms.amazon_smile.text")
   .d-flex.col-sm-12.col-md-6.col-lg-3
     .card.mt-1.border-0
       %div.card-header.bg-white.border-0.pb-0.pt-4
-        =image_tag("open-collective-logo.png", style: "max-height: 50px;", alt: "Open Collective logo")
+        = image_tag("open-collective-logo.png", style: "max-height: 50px;", alt: "Open Collective logo", class: "mw-100")
       %div.card-body
-        %h3.h6=link_to(t("donation_platforms.open_collective.title"), "https://opencollective.com/codebar")
+        %h3.h6= link_to(t("donation_platforms.open_collective.title"), "https://opencollective.com/codebar")
         %p= t("donation_platforms.open_collective.text")
   .d-flex.col-sm-12.col-md-6.col-lg-3
     .card.mt-1.border-0
       %div.card-header.bg-white.border-0.pb-0.pt-4
-        =image_tag("benevity-logo.png", style: "max-height: 50px;", alt: "Benevity logo")
+        = image_tag("benevity-logo.png", style: "max-height: 50px;", alt: "Benevity logo", class: "mw-100")
       %div.card-body
-        %h3.h6=link_to(t("donation_platforms.benevity.title"), "https://www.benevity.com/")
+        %h3.h6= link_to(t("donation_platforms.benevity.title"), "https://www.benevity.com/")
         %p= t("donation_platforms.benevity.text")

app/views/virtual_workshops/show.html.haml

@@ -2,17 +2,17 @@
 
 = render partial: 'virtual_workshops/meta_tags', locals: { workshop: @workshop }
 
-.container-fluid.stripe.reverse
+.container.py-4.py-lg-5
   .row
     .col
-      %h2
+      %h1
         = t('workshops.virtual.title', chapter: @workshop.chapter.name)
         %br
         %small #{humanize_date(@workshop.date_and_time, @workshop.ends_at, with_time: true)} #{@workshop.distance_of_time}
       - if @workshop.date_and_time.past?
         %span.badge.bg-danger= t('messages.already_taken_place')
 
-  .row.mt-3#banner
+  .row.mt-3{'data-test': 'workshop-info'}
     .col.col-md-9
       %p.lead
         = t('workshops.virtual.lead')
@@ -24,11 +24,13 @@
       = render 'workshops/actions' unless current_user&.banned?
 
 - if @workshop.sponsors.any?
-  .container-fluid.stripe.reverse#sponsors
-    .row
-      .col
-        %h3.text-center Sponsors
-    = render partial: 'shared/sponsors', object: @workshop.sponsors
+  .py-4.py-lg-5.section#sponsors
+    .container
+      .row
+        .col
+          %h2.text-center Sponsors
+      = render partial: 'shared/sponsors', object: @workshop.sponsors
 
-.container-fluid.stripe.reverse
-  = render partial: 'members/organisers_grid', locals: { members: @workshop.organisers, show_info: false }
+.py-4.py-lg-5.section
+  .container
+    = render partial: 'members/organisers_grid', locals: { members: @workshop.organisers, show_info: false }

app/views/workshops/show.html.haml

@@ -2,10 +2,10 @@
 
 = render partial: 'meta_tags', locals: { workshop: @workshop }
 
-.container-fluid.stripe.reverse
+.container.py-4.py-lg-5
   .row
     .col
-      %h2
+      %h1
         = t('workshops.title', host: @workshop.host.name)
         %br
         %small #{humanize_date(@workshop.date_and_time, @workshop.ends_at, with_time: true)} #{@workshop.distance_of_time}
@@ -21,14 +21,16 @@
           = sanitize(@workshop.description)
       = render 'actions' unless current_user&.banned?
 
-.container-fluid.stripe.reverse
-  = render partial: 'shared/venue', locals: { venue: @workshop.host, address: @workshop.address}
+.py-4.py-lg-5.bg-light
+  .container
+    = render partial: 'shared/venue', locals: { venue: @workshop.host, address: @workshop.address}
 
-.container-fluid.stripe.reverse#sponsors
+.container.py-4.py-lg-5#sponsors
   .row
     .col
-      %h3.text-center Sponsors
+      %h2.text-center Sponsors
   = render partial: 'shared/sponsors', object: @workshop.sponsors
 
-.container-fluid.stripe.reverse
-  = render partial: 'members/organisers_grid', locals: { members: @workshop.organisers, show_info: false }
+.py-4.py-lg-5.bg-light
+  .container
+    = render partial: 'members/organisers_grid', locals: { members: @workshop.organisers, show_info: false }

spec/features/viewing_a_workshop_spec.rb

@@ -44,7 +44,7 @@
         end
 
         scenario 'workshop info' do
-          within '#banner' do
+          within '*[data-test=workshop-info]' do
             expect(page).to have_content('Participate in our workshops')
             expect(page).to have_content('Our virtual workshops take place online')