Replace container-fluid class with container on rest of the member pages

app/assets/stylesheets/_bootstrap-custom.scss

@@ -50,3 +50,8 @@ $enable-negative-margins: true;
 // Utilities
 @import "bootstrap/utilities/api";
 // scss-docs-end import-stack
+
+// TODO: move this somewhere better
+.section:nth-child(odd) {
+  background-color: $light;
+}

app/views/contact_preferences/show.html.haml

@@ -1,4 +1,4 @@
-.container-fluid.stripe.reverse
+.container.py-4.py-lg-5
   .row.justify-content-md-center
     .col-md-10.col-lg-8
       %h1 Contact Preferences

app/views/feedback/show.html.haml

@@ -1,19 +1,19 @@
-.container-fluid.stripe.reverse
+.container.py-4.py-lg-5
   .row.justify-content-md-center
-    .col-md-8
+    .col-md-10.col-lg-8
       %h1= t('feedback_form.title')
       %p.lead.text-muted= humanize_date(@workshop.date_and_time, with_time: true)
 
-.container-fluid
+.container.pb-4.pb-lg-5
   .row.justify-content-md-center
-    .col-md-8
+    .col-md-10.col-lg-8
       %p
         = t('feedback_form.description')
         %br
         %small= t('feedback_form.note')
 
   .row.justify-content-md-center
-    .col-md-8
+    .col-md-10.col-lg-8
       = simple_form_for @feedback, url: submit_feedback_path(params[:id]), html: { method: 'patch' } do |f|
         .row
           = f.hidden_field :token, value: params[:id]

app/views/invitation/show.html.haml

@@ -1,6 +1,6 @@
 - title t('workshop.invitation.title', date: humanize_date(@workshop.date_and_time))
 
-.container-fluid.stripe.reverse
+.container.py-4.py-lg-5
   .row
     .col
       %h1
@@ -10,12 +10,12 @@
       - if @workshop.date_and_time.past?
         %span.badge.bg-danger= t('messages.already_taken_place')
 
-.alert.alert-info.rounded-0
+.alert.alert-info.rounded-0.mb-0
   .row
     .col
       This link can be accessed without authentication so please don't share it with others. You can access and share the <strong>#{link_to("public listing", workshop_url(@workshop), class: 'alert-link')}</strong> of the workshop.
 
-.container-fluid.mb-4
+.container.py-4.py-lg-5
   - if @announcements.any?
     .row
       = render partial: 'shared/announcements', locals: { announcements: @announcements }
@@ -102,39 +102,43 @@
             Read our #{link_to "attendance policy", attendance_policy_path}.
 
 - unless @workshop.virtual?
-  .container-fluid.stripe.reverse
-    = render partial: 'shared/venue', locals: { venue: @workshop.host, address: @workshop.address}
+  .py-4.py-lg-5.section
+    .container
+      = render partial: 'shared/venue', locals: { venue: @workshop.host, address: @workshop.address}
 
 - if @workshop.sponsors.any?
-  .container-fluid.stripe.reverse#sponsors
-    .row
-      .col
-        %h2.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: true }
+.py-4.py-lg-5.section
+  .container
+    = render partial: 'members/organisers_grid', locals: { members: @workshop.organisers, show_info: true }
 
-.container-fluid.stripe.reverse
-  .row
-    .col-12.col-md-6
-      %h3 Students (#{@workshop.attending_and_available_student_spots})
-      %ul.list-unstyled.ml-0
-        - @workshop.attending_students.each do |invitation|
-          %li.mt-4
-            .d-flex.align-items-center
-              = image_tag(invitation.member.avatar(56), class: 'rounded-circle', title: invitation.member.full_name, alt: invitation.member.full_name)
-              .ml-3
-                = invitation.member.full_name
-                %br
-                %small.text-muted= invitation.note
+.py-4.py-lg-5.section
+  .container
+    .row
+      .col-12.col-md-6
+        %h3 Students (#{@workshop.attending_and_available_student_spots})
+        %ul.list-unstyled.ml-0
+          - @workshop.attending_students.each do |invitation|
+            %li.mt-4
+              .d-flex.align-items-center
+                = image_tag(invitation.member.avatar(56), class: 'rounded-circle', title: invitation.member.full_name, alt: invitation.member.full_name)
+                .ml-3
+                  = invitation.member.full_name
+                  %br
+                  %small.text-muted= invitation.note
 
-    .col-12.col-md-6.mt-5.mt-md-0
-      %h3 Coaches (#{@workshop.attending_and_available_coach_spots})
-      %ul.list-unstyled.ml-0
-        - @workshop.attending_coaches.each do |invitation|
-          %li.mt-4
-            .d-flex.align-items-center
-              = image_tag(invitation.member.avatar(56), class: 'rounded-circle', title: invitation.member.full_name, alt: invitation.member.full_name)
-              .ml-3
-                = invitation.member.full_name
+      .col-12.col-md-6.mt-5.mt-md-0
+        %h3 Coaches (#{@workshop.attending_and_available_coach_spots})
+        %ul.list-unstyled.ml-0
+          - @workshop.attending_coaches.each do |invitation|
+            %li.mt-4
+              .d-flex.align-items-center
+                = image_tag(invitation.member.avatar(56), class: 'rounded-circle', title: invitation.member.full_name, alt: invitation.member.full_name)
+                .ml-3
+                  = invitation.member.full_name

app/views/invitations/show.html.haml

@@ -1,4 +1,4 @@
-.container-fluid.stripe.reverse
+.container.py-4.py-lg-5
   .row
     .col-12
       %h1
@@ -60,50 +60,56 @@
                   To complete signing up for the event, you must #{link_to("complete our questionnaire", @event.questionnaire(@invitation), class: 'alert-link border-0 text-decoration-underline')} as we need to know a couple of things in advance to plan the day.
                   %strong You will receive an email when your attendance is verified.
 
-.container-fluid.stripe.reverse
-  .row
-    .col-12.col-lg-6
-      %h3 Schedule
-      = dot_markdown(@event.schedule)
-    .col-12.col-lg-6
-      %h3 Location
-      .row
-        .col-12.col-md-8
-          %address= @host_address.to_html
-        .col-12.col-md-4
-          = image_tag(@event.venue.avatar, class: 'small-image', alt: @event.venue.name)
-      .row
-        .col
-          %iframe{ width: '100%', height: '250', frameborder: '0', scrolling: 'no', marginheight: '0', marginwidth: '0', src: %{https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=#{@host_address.for_map}&ie=UTF8&t=m&z=15&output=embed} }
-          = link_to 'View larger map', %{https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=#{@host_address.for_map}&ie=UTF8&hq=&t=m&z=15}, style: "color:#0000FF;text-align:left"
+.py-4.py-lg-5.bg-light
+  .container
+    .row
+      .col-12.col-lg-6
+        %h3 Schedule
+        = dot_markdown(@event.schedule)
+      .col-12.col-lg-6
+        %h3 Location
+        .row
+          .col-12.col-md-8
+            %address= @host_address.to_html
+          .col-12.col-md-4
+            = image_tag(@event.venue.avatar, class: 'small-image mw-100 mb-4', alt: @event.venue.name)
+        .row
+          .col
+            %iframe{ width: '100%', height: '250', frameborder: '0', scrolling: 'no', marginheight: '0', marginwidth: '0', src: %{https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=#{@host_address.for_map}&ie=UTF8&t=m&z=15&output=embed} }
+            = link_to 'View larger map', %{https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=#{@host_address.for_map}&ie=UTF8&hq=&t=m&z=15}, style: "color:#0000FF;text-align:left"
 
 - if @event.show_faq
-  .container-fluid.stripe.reverse
-    .row
-      .col
-        %h2.text-center FAQ
-    = render partial: 'events/faq'
+  .py-4.py-lg-5.section
+    .container
+      .row
+        .col
+          %h2.text-center FAQ
+      = render partial: 'events/faq'
 
 - if @event.sponsors?
-  .container-fluid.stripe.reverse
-    = render partial: 'events/event_sponsors', locals: { event: @event }
+  .py-4.py-lg-5.section
+    .container
+      = render partial: 'events/event_sponsors', locals: { event: @event }
 
 - if @event.verified_coaches.any? && @event.display_coaches
-  .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.verified_students.any? && @event.display_students
-  .container-fluid.stripe.reverse
-    .row
-      .col
-        %h2.text-center= t('events.students')
-    .row.text-center
-      = render partial: 'members/avatar_listing', locals: { member: @event.verified_students, show_info: false }
+  .py-4.py-lg-5.section
+    .container
+      .row
+        .col
+          %h2.text-center= t('events.students')
+      .row.text-center
+        = render partial: 'members/avatar_listing', locals: { member: @event.verified_students, 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/meetings/show.html.haml

@@ -1,29 +1,30 @@
 - title t('meeting.title', name: @meeting.name, date: humanize_date(@meeting.date_and_time))
 
-.stripe.reverse
+.container.py-4.py-lg-5
   .row
     .col
-      %h2
+      %h1
         = @meeting.name
-      %h3
+        %br
         %small= humanize_date(@meeting.date_and_time, @meeting.ends_at, with_time: true)
 
-  .row
-    .col-md-4.col-sm-12
+  .row.mt-3
+    .col-md-5.col-sm-12
       = render partial: 'meeting_actions'
 
-    .col-md-8.col-sm-12
+    .col-md-7.col-sm-12
       %h4 Agenda
       %p= @meeting.description.html_safe
 
-.stripe.reverse
-  .row
-    .col
-      %iframe{ width: '100%', height: '250', frameborder: '0', scrolling: 'no', marginheight: '0', marginwidth: '0', src: %{https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=#{@host_address.for_map}&ie=UTF8&t=m&z=15&output=embed} }
-        = link_to 'View larger map', %{https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=#{@host_address.for_map}&ie=UTF8&hq=&t=m&z=15}, style: "color:#0000FF;text-align:left"
+.py-4.py-lg-5.bg-light
+  .container
+    .row
+      .col
+        %iframe{ width: '100%', height: '250', frameborder: '0', scrolling: 'no', marginheight: '0', marginwidth: '0', src: %{https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=#{@host_address.for_map}&ie=UTF8&t=m&z=15&output=embed} }
+          = link_to 'View larger map', %{https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=#{@host_address.for_map}&ie=UTF8&hq=&t=m&z=15}, style: "color:#0000FF;text-align:left"
 
 - if @attendees.any?
-  .container-fluid.stripe.reverse.text-center
+  .container.py-4.py-lg-5.text-center
     .row
       .col
         %h3 Who else will be there?
@@ -33,5 +34,6 @@
           = image_tag(attendee.member.avatar(56), class: 'rounded-circle', title: attendee.member.full_name, alt: attendee.member.full_name)
           %p.mt-3= attendee.member.full_name
 
-.stripe.reverse
-  = render partial: 'members/organisers_grid', locals: { members: @meeting.organisers, show_info: false }
+.py-4.py-lg-5{ class: ('bg-light' if @attendees.any?) }
+  .container
+    = render partial: 'members/organisers_grid', locals: { members: @meeting.organisers, show_info: false }

app/views/payments/create.html.haml

@@ -1,4 +1,4 @@
-.container-fluid.stripe.reverse
+.container.py-4.py-lg-5
   .row
     .col
       %p Your payment has been processed. Thank you for supporting our effort to create a more diverse tech community.

app/views/payments/new.html.haml

@@ -4,19 +4,20 @@
   = javascript_include_tag 'payments'
   %script{ :src => 'https://checkout.stripe.com/checkout.js', :type => 'text/javascript', 'data-cfasync' => 'false' }
 
-.container-fluid.stripe.reverse
+.container.py-4.py-lg-5
   .row
     .col
       %h1 Payments
 
-.container-fluid.stripe.reverse.payment-container
-  .row
-    .col-md-6
-      %p.lead By submitting a job to the codebar #{link_to 'job board', jobs_path} you are helping promote diversity in the tech industry so that more women, non-binary, LGBTQA and other minority groups will be able to get started with their tech career.
-    .col-md-6
-      = simple_form_for :payment, url: payments_path, method: :post do |f|
-        = f.input :name, placeholder: 'Name', required: false
-        = f.input :amount, placeholder: '50.00', required: true
-        = f.button :button, 'Confirm', class: 'btn btn-primary', id: 'donate'
-        .message
+.py-4.py-lg-5.bg-light.payment-container
+  .container
+    .row
+      .col-md-6
+        %p.lead By submitting a job to the codebar #{link_to 'job board', jobs_path} you are helping promote diversity in the tech industry so that more women, non-binary, LGBTQA and other minority groups will be able to get started with their tech career.
+      .col-md-6
+        = simple_form_for :payment, url: payments_path, method: :post do |f|
+          = f.input :name, placeholder: 'Name', required: false
+          = f.input :amount, placeholder: '50.00', required: true
+          = f.button :button, 'Confirm', class: 'btn btn-primary', id: 'donate'
+          .message