Fix layout bugs on & improve overall look of new Boostrap homepage

app/views/dashboard/show.html.haml

@@ -1,49 +1,52 @@
 - title t('homepage.title')
 
-%div.homepage-hero.d-flex.align-items-center
-  %row.container.d-flex
-    %div.col-md-4.offset-md-1.p-3.text
+.homepage-hero.d-flex.align-items-center
+  .container.d-flex
+    .col-md-4.offset-md-1.p-3.text
       %p= raw t('homepage.intro')
 
 .container-fluid.stripe.reverse
-  %row
-    %div.col-md-7.mx-auto
-      %p.lead= raw t('homepage.explanation')
+  .row.justify-content-md-center
+    .col-md-8
+      %p.lead.mb-0= raw t('homepage.explanation')
 
 .container-fluid.stripe.reverse
   .row
-    .col-md-4
-      .text-center
-        %h4
-          = t('homepage.participate.students_title')
-      %p
-        = t('homepage.participate.students_explanation_p1')
-      %p
-        = t('homepage.participate.students_explanation_p2')
-      .text-center.mt-5.mb-5.mb-md-0
-        = link_to t('homepage.participate.students_button'), new_member_path, class: 'btn btn-primary'
+    .col-md-4.mb-4.mb-md-0
+      .card.h-100.text-md-center.border-0
+        .card-body
+          %h3.h4.card-title
+            = t('homepage.participate.students_title')
+          %p.card-text
+            = t('homepage.participate.students_explanation_p1')
+          %p.card-text
+            = t('homepage.participate.students_explanation_p2')
+        .card-footer.border-0.bg-transparent
+          = link_to t('homepage.participate.students_button'), new_member_path, class: 'btn btn-primary'
 
-    .col-md-4
-      .text-center
-        %h4
-          = t('homepage.participate.coaches_title')
-      %p
-        = raw t('homepage.participate.coaches_explanation_p1')
-      %p
-        = t('homepage.participate.coaches_explanation_p2')
-      .text-center.mt-5.mb-5.mb-md-0
-        = link_to t('homepage.participate.coaches_button'), new_member_path, class: 'btn btn-primary'
+    .col-md-4.mb-4.mb-md-0
+      .card.h-100.text-md-center.border-0
+        .card-body
+          %h3.h4.card-title
+            = t('homepage.participate.coaches_title')
+          %p.card-text
+            = raw t('homepage.participate.coaches_explanation_p1')
+          %p.card-text
+            = t('homepage.participate.coaches_explanation_p2')
+        .card-footer.border-0.bg-transparent
+          = link_to t('homepage.participate.coaches_button'), new_member_path, class: 'btn btn-primary'
 
     .col-md-4
-      .text-center
-        %h4
-          = t('homepage.participate.workshop_title')
-      %p
-        = t('homepage.participate.workshop_explanation_p1')
-      %p
-        = t('homepage.participate.workshop_explanation_p2')
-      .text-center.mt-5.mb-5.mb-md-0
-        = mail_to "hello@codebar.io", t('homepage.participate.workshop_button'), subject: t('homepage.participate.workshop_email_subject'), class: 'btn btn-primary'
+      .card.h-100.text-md-center.border-0
+        .card-body
+          %h3.h4.card-title
+            = t('homepage.participate.workshop_title')
+          %p.card-text
+            = t('homepage.participate.workshop_explanation_p1')
+          %p.card-text
+            = t('homepage.participate.workshop_explanation_p2')
+        .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.stripe.reverse
   = render partial: 'shared/donation_platforms'
@@ -60,13 +63,10 @@
       - if @upcoming_workshops.any?
         %h2.h3.mb-4= t('homepage.events.upcoming')
         - @upcoming_workshops.each do |date, workshops|
-          %row.ml-0
-            .col
-              %h3.h5.mb-3
-                = date
+          %h3.h5.mb-3= date
           = render workshops
 
-    .col-lg-4.pl-5
+    .col-lg-4.pl-lg-5
       %h3
         = t('homepage.chapters.title')
       %ul.list-unstyled.ml-0
@@ -76,9 +76,9 @@
 
 - if @testimonials.any?
   .container-fluid.stripe.reverse
-    .row
-      .offset-md-1.col-md-10
+    .row.justify-content-md-center
+      .col-md-8
         = render partial: 'members/testimonials'
 
-%section.stripe.reverse
+%section.container-fluid.stripe.reverse
   = render partial: 'shared/newsletter'

app/views/events/_event.html.haml

@@ -1,44 +1,43 @@
-.container
-  .row.event.border.p-4.mb-4
-    .col-9
-      %div
+.card.event.mb-4
+  .card-body
+    .d-md-flex.justify-content-md-between
+      .order-md-2
+        - if event.chapter
+          %span.badge.bg-primary
+            = event.chapter.name
+        - if @user
+          - if @user.attending?(event.__getobj__)
+            %span.badge.bg-success.ml-2
+              = link_to "Attending", event.path, class: "text-light border-0"
+          - if @user.event_organiser?(event)
+            %span.badge.bg-secondary.ml-2
+              = link_to "Manage", event.admin_path, class: "text-light border-0"
+      .order-md-1
         %h3.event__header
           = link_to event.to_s, event.path
           - if event.venue.present?
             at
             = link_to event.venue.name, event.venue.website
-      %div.mt-3
-        %p.date.mb-0
-          %i.material-icons
-            calendar_today
-          = event.date
-        %p.time
-          %i.material-icons
-            access_time
-          = event.time
 
+    .mt-3
+      %p.date.mb-0
+        %i.material-icons
+          calendar_today
+        = event.date
+      %p.time
+        %i.material-icons
+          access_time
+        = event.time
+    - if event.organisers.any? || event.sponsors.any?
+      .d-md-flex.justify-content-md-between.align-items-md-center
         - if event.organisers.any?
-          %div.mt-3
+          %div
             - event.organisers.each do |organiser|
-              = link_to twitter_url_for(organiser.twitter), class: 'border-0' do
-                = image_tag(organiser.avatar(26), class: 'rounded-circle', title: organiser.full_name, alt: organiser.full_name)
+              = link_to twitter_url_for(organiser.twitter), class: "border-0 d-inline-block" do
+                = image_tag(organiser.avatar(26), class: "rounded-circle", title: organiser.full_name, alt: organiser.full_name)
 
-    .col-3.d-flex.flex-column.align-items-end.justify-content-between
-      .mb-3.d-flex
-        - if event.chapter
-          %span.badge.bg-primary.text-light
-            = event.chapter.name
-        - if @user
-          - if @user.attending?(event.__getobj__)
-            %span.badge.bg-success.ml-2
-              = link_to event.path, class: "text-light border-0" do
-                Attending
-          - if @user.event_organiser?(event)
-            %span.badge.bg-secondary.ml-2
-              = link_to event.admin_path, class: "text-light border-0" do
-                Manage
-      .d-flex
         - if event.sponsors.any?
-          - event.sponsors.each do |sponsor|
-            = link_to sponsor.website, class: "border-0" do
-              = image_tag(sponsor.avatar.thumb, class: 'sponsor-sm', alt: sponsor.name)
+          %div
+            - event.sponsors.each do |sponsor|
+              = link_to sponsor.website, class: "border-0 d-inline-block" do
+                = image_tag(sponsor.avatar.thumb, class: "sponsor-sm", alt: sponsor.name)

app/views/shared/_newsletter.html.haml

@@ -1,5 +1,5 @@
-.row
-  .medium-10.medium-offset-1.columns
+.row.justify-content-md-center
+  .col-md-8
     %h2= t('homepage.newsletter.title')
     %p= t('homepage.newsletter.description')
 
@@ -29,7 +29,6 @@
           -# real people should not fill this in and expect good things - do not remove this or risk form bot signups
           %div{ style: 'position: absolute; left: -5000px;', 'aria-hidden': 'true' }
             %input{ type: 'text', name: 'b_b4652d85b385945c79f2ffa2e_3798974cb3', tabindex: '-1', value: '' }
-          .clear
-            %input.button.small#mc-embedded-subscribe{ type: 'submit', value: 'Subscribe', name: 'subscribe' }
-
-          %a{ href: 'https://us8.campaign-archive.com/home/?u=b4652d85b385945c79f2ffa2e&id=3798974cb3' } View previous newsletters.
+          .d-flex.justify-content-between.align-items-center
+            %input.btn.btn-primary#mc-embedded-subscribe{ type: 'submit', value: 'Subscribe', name: 'subscribe' }
+            %a{ href: 'https://us8.campaign-archive.com/home/?u=b4652d85b385945c79f2ffa2e&id=3798974cb3' } View previous newsletters.