Merge pull request #1767 from codebar/update-grid-container-on-member…

…-facing-pages Replace container-fluid class with container on member facing pages
codebar · Jun 10, 2022 · 06d9497 · 06d9497
2 parents 7924337 + f0b6c61
commit 06d9497
Show file tree

Hide file tree

Showing 13 changed files with 123 additions and 138 deletions.
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
@@ -1,5 +1,4 @@
-#banner,
-#chapter {
+#banner {
   margin-top: 30px;
 }
 
@@ -111,19 +110,6 @@ u {
   padding: 50px 0;
 }
 
-.events-list {
-  margin-bottom: 30px;
-
-  &--past-events {
-    h3.date {
-      opacity: 0.5;
-    }
-    .event {
-      opacity: 0.5;
-    }
-  }
-}
-
 .admin_margin {
   margin-top: 15px;
 }

diff --git a/app/views/chapter/show.html.haml b/app/views/chapter/show.html.haml
@@ -1,17 +1,17 @@
-.container-fluid
+.container
   .row.align-items-center
-    .col-md-6.pt-4.pb-4
+    .col-md-6.py-4
       %h1= @chapter.name
-      - if @chapter.description
+      - if @chapter.description.present?
         %p.lead= @chapter.description
       - else
         %p.lead.mb-0= t('chapters.intro_html')
     - if @chapter.image.present?
       .col-md-6
-        = image_tag @chapter.image.bg, alt: "#{@chapter.name} chapter"
+        = image_tag @chapter.image.bg, alt: "#{@chapter.name} chapter", class: 'mw-100'
 
 .alert-primary.pt-4.pb-4
-  .container-fluid
+  .container
     .row.align-items-center
       .col-md-6.mb-4.mb-md-0
         = t('chapters.info', email: h(@chapter.email)).html_safe
@@ -21,41 +21,41 @@
         - else
           =link_to 'Sign up', new_member_path, class: 'btn btn-primary'
 
-.container.stripe.reverse#chapter
+.container.py-4.py-lg-5
   .row
     .col-md-8.col-sm-12
       - if @upcoming_workshops.any?
-        .events-list.events-list--upcoming
+        .pt-4
           %h3 Upcoming Events
           - @upcoming_workshops.each do |date, workshops|
             .grouped-events
               = render workshops
 
       - if @latest_workshops.any?
-        .events-list.events-list--past
+        .pt-4
           %h3 Past Events
           - @latest_workshops.each do |date, workshops|
             .grouped-events
               = render workshops
 
-    .col-md-4.col-sm-12
+    .col-md-4.col-sm-12.mt-4
       - if @chapter.twitter_handle
         %a.twitter-timeline{href: "https://twitter.com/#{@chapter.twitter_handle}", "data-widget-id" => @chapter.twitter_id }="Tweets by #{@chapter.twitter_handle}"
       - else
         %a.twitter-timeline{href: "https://twitter.com/codebar", "data-widget-id" => @chapter.twitter_id, "data-height" => "500" }="Tweets by codebar"
-
       %script(async src="https://platform.twitter.com/widgets.js" charset="utf-8")
 
 - if @recent_sponsors.any?
-  .container-fluid.stripe.reverse
-    .row
-      .col
-        %h2.text-center Sponsors
-    = render partial: 'shared/sponsors', object: @recent_sponsors
-
-.container-fluid.stripe.reverse
+  .py-4.py-lg-5.bg-light
+    .container
+      .row
+        .col
+          %h2.text-center Sponsors
+      = render partial: 'shared/sponsors', object: @recent_sponsors
+
+.container.py-4.py-lg-5
   = render partial: 'members/organisers_grid', locals: { members: @chapter.organisers.shuffle, show_info: false, title: t('chapters.team') }
 
-  .row.mt-5
-    .col.alert.alert-primary.mb-0
+  .mt-5
+    .alert.alert-primary.mb-0
       = t('chapters.contact', city: @chapter.name, email: @chapter.email)
diff --git a/app/views/coach/_coach.html.haml b/app/views/coach/_coach.html.haml
@@ -1,23 +1,22 @@
-.stripe.reverse
-  .row
-    - coaches.each do |coach|
-      .col-sm-6.col-md-3.coach
-        .row
-          .col
-            .text-center.mb-4
-              =link_to twitter_url_for(coach.twitter), class: 'border-0' do
-                =image_tag(coach.avatar(50), class: 'rounded-circle', title: coach.full_name, alt: coach.full_name)
+.py-4.py-lg-5.bg-light
+  .container
+    .row
+      - coaches.each do |coach|
+        .col-sm-6.col-md-3.coach.mb-4
+          .text-center.mb-4
+            = link_to twitter_url_for(coach.twitter), class: 'border-0' do
+              = image_tag(coach.avatar(50), class: 'rounded-circle', title: coach.full_name, alt: coach.full_name)
 
-            =link_to twitter_url_for(coach.twitter) do
-              = coach.full_name
-            %p.small.mt-3.mb-3= coach.about_you
-            - if coach.skills.any?
-              %p
-                skills:
-                - coach.skills.each do |skill|
-                  = skill.name
-  .row
-    .col-6.float-left
-      = page_entries_info(@coaches, model: 'coaches')
-    .col-6.float-right
-      = will_paginate(@coaches)
+          = link_to twitter_url_for(coach.twitter) do
+            = coach.full_name
+          %p.small.mt-3= coach.about_you
+          - if coach.skills.any?
+            %p.small
+              Skills:
+              - coach.skills.each do |skill|
+                = skill.name
+    .row
+      .col-6.float-left
+        = page_entries_info(@coaches, model: 'coaches')
+      .col-6.float-right
+        = will_paginate(@coaches)
diff --git a/app/views/dashboard/dashboard.html.haml b/app/views/dashboard/dashboard.html.haml
@@ -1,9 +1,9 @@
-.container-fluid.stripe.reverse
+.container.py-4.py-lg-5
   .row
     .col
-      %h2 Dashboard
+      %h1 Dashboard
 
-.container-fluid
+.container.pb-4.pb-lg-5
   .row
     .col-12.col-lg-3.mb-4
       .bg-light.p-3

diff --git a/app/views/dashboard/wall_of_fame.html.haml b/app/views/dashboard/wall_of_fame.html.haml
@@ -1,20 +1,19 @@
-.stripe.reverse
+.container.py-4.py-lg-5
   .row
-    .col
-      %h2 Coaches
+    .col-md-10.col-lg-8
+      %h1 Coaches
       %p.lead
         Here you can find a list of the #{ @coaches_count } volunteers who have coached at codebar.
-      %p.lead
+      %p.lead.mb-4
         If you’d like to start coaching at a workshop near you, read our #{ link_to "teaching guide", teaching_guide_path } and then #{ link_to "sign up", new_member_path } as a coach. It’s easier than you think!
-
-  .row
-    .col
+    .col-12
       .float-right
-        %ul.inline-list
+        %ul.list-inline
           - Time.zone.now.year.downto(2013).each do |year|
-            %li
+            %li.list-inline-item
               - if page_year?(year)
                 .btn.btn-sm.btn-outline-success= year
               - else
                 = link_to year, coaches_path(year: year), class: 'btn btn-sm btn-success'
-  = render partial: '/coach/coach', locals: { coaches: @coaches }
+
+= render partial: '/coach/coach', locals: { coaches: @coaches }
diff --git a/app/views/events/_event.html.haml b/app/views/events/_event.html.haml
@@ -8,10 +8,10 @@
         - if @user
           - if @user.attending?(event.__getobj__)
             %span.badge.bg-success.mb-3.mb-md-0
-              = link_to 'Attending', event.path, class: 'text-light border-0'
+              = link_to 'Attending', event.path, class: 'text-light text-decoration-none'
           - if @user.event_organiser?(event)
             %span.badge.bg-secondary.mb-3.mb-md-0
-              = link_to 'Manage', event.admin_path, class: 'text-light border-0'
+              = link_to 'Manage', event.admin_path, class: 'text-light text-decoration-none'
       .order-md-1
         %h3.h5
           = link_to event.to_s, event.path
@@ -32,10 +32,10 @@
         - if event.organisers.any?
           .mb-3.mb-md-0
             - event.organisers.each do |organiser|
-              = link_to twitter_url_for(organiser.twitter), class: 'border-0 d-inline-block mx-1' do
+              = link_to twitter_url_for(organiser.twitter), class: 'd-inline-block mx-1' do
                 = image_tag(organiser.avatar(26), class: 'rounded-circle', title: organiser.full_name, alt: organiser.full_name)
         - if event.sponsors.any?
           %div
             - event.sponsors.each do |sponsor|
-              = link_to sponsor.website, class: 'border-0 d-inline-block' do
+              = link_to sponsor.website, class: 'd-inline-block' do
                 = image_tag(sponsor.avatar.thumb, class: 'sponsor-sm mx-1', alt: sponsor.name)
diff --git a/app/views/invitations/index.html.haml b/app/views/invitations/index.html.haml
@@ -1,4 +1,4 @@
-.container-fluid.stripe.reverse
+.container.py-4.py-lg-5
   .row
     .col-12
       %h1 Invitations
@@ -7,7 +7,7 @@
       \|
       = link_to 'Attended', '#attended'
 
-.container-fluid
+.container.pb-4.pb-lg-5
   .row
     .col.col-md-8
       %h3#upcoming Upcoming workshops

diff --git a/app/views/layouts/_footer.html.haml b/app/views/layouts/_footer.html.haml
@@ -1,41 +1,42 @@
 %footer.main-footer
-  .row.pt-5
-    .col-sm-12.col-lg-3
-      %p.mb-1
-        &#169; #{Date.today.year} codebar
-      %p
-        = t("footer.email_us")
-        -# encoded email address
-        <a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#104;&#101;&#108;&#108;&#111;&#64;&#99;&#111;&#100;&#101;&#98;&#97;&#114;&#46;&#105;&#111;&#63;&#83;&#117;&#98;&#106;&#101;&#99;&#116;&#61;&#72;&#101;&#108;&#108;&#111;&#32;&#99;&#111;&#100;&#101;&#98;&#97;&#114;">&#104;&#101;&#108;&#108;&#111;&#64;&#99;&#111;&#100;&#101;&#98;&#97;&#114;&#46;&#105;&#111;</a>.
+  .container
+    .row.pt-5
+      .col-sm-12.col-lg-3
+        %p.mb-1
+          &#169; #{Date.today.year} codebar
+        %p
+          = t("footer.email_us")
+          -# encoded email address
+          <a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#104;&#101;&#108;&#108;&#111;&#64;&#99;&#111;&#100;&#101;&#98;&#97;&#114;&#46;&#105;&#111;&#63;&#83;&#117;&#98;&#106;&#101;&#99;&#116;&#61;&#72;&#101;&#108;&#108;&#111;&#32;&#99;&#111;&#100;&#101;&#98;&#97;&#114;">&#104;&#101;&#108;&#108;&#111;&#64;&#99;&#111;&#100;&#101;&#98;&#97;&#114;&#46;&#105;&#111;</a>.
 
-    .col-sm-12.col-md-6.col-lg-3
-      %ul.list-unstyled.ml-0
-        %li= link_to t("navigation.code_of_conduct"), code_of_conduct_path
-        %li= link_to t("navigation.breach_code_of_conduct"), breach_code_of_conduct_path
-        %li= link_to t("navigation.coach_guide"), teaching_guide_path
-        %li= link_to t("navigation.student_guide"), student_guide_path
-        %li= link_to t("navigation.tutorials"), "http://tutorials.codebar.io"
-        %li= link_to t("navigation.becoming_sponsor"), "http://manual.codebar.io/becoming-a-sponsor"
-        %li= link_to t("navigation.faq"), faq_path
+      .col-sm-12.col-md-6.col-lg-3
+        %ul.list-unstyled.ml-0
+          %li= link_to t("navigation.code_of_conduct"), code_of_conduct_path
+          %li= link_to t("navigation.breach_code_of_conduct"), breach_code_of_conduct_path
+          %li= link_to t("navigation.coach_guide"), teaching_guide_path
+          %li= link_to t("navigation.student_guide"), student_guide_path
+          %li= link_to t("navigation.tutorials"), "http://tutorials.codebar.io"
+          %li= link_to t("navigation.becoming_sponsor"), "http://manual.codebar.io/becoming-a-sponsor"
+          %li= link_to t("navigation.faq"), faq_path
 
-    .col-sm-12.col-md-6.col-lg-3
-      %ul.list-unstyled.ml-0
-        %li= link_to t("navigation.stats"), "http://stats.codebar.io/"
-        %li= link_to t("navigation.blog"), "https://medium.com/the-codelog"
-        %li= link_to t("navigation.codebar_stories"), "https://medium.com/codebar-stories"
-        %li= link_to t("navigation.coaches"), coaches_path
-        %li= link_to t("navigation.sponsors"), sponsors_path
-        %li= link_to t("navigation.events"), events_path
-        %li= link_to t("navigation.jobs"), jobs_path
-        %li.active= link_to t("navigation.donate"), new_donation_path
+      .col-sm-12.col-md-6.col-lg-3
+        %ul.list-unstyled.ml-0
+          %li= link_to t("navigation.stats"), "http://stats.codebar.io/"
+          %li= link_to t("navigation.blog"), "https://medium.com/the-codelog"
+          %li= link_to t("navigation.codebar_stories"), "https://medium.com/codebar-stories"
+          %li= link_to t("navigation.coaches"), coaches_path
+          %li= link_to t("navigation.sponsors"), sponsors_path
+          %li= link_to t("navigation.events"), events_path
+          %li= link_to t("navigation.jobs"), jobs_path
+          %li.active= link_to t("navigation.donate"), new_donation_path
 
-    .col-sm-12.col-md-6.col-lg-3
-      = render partial: 'shared/social_media'
+      .col-sm-12.col-md-6.col-lg-3
+        = render partial: 'shared/social_media'
 
-  .row.pb-4
-    .col
-      %ul.list-inline.registration.m-0.p-0
-        %li.list-inline-item
-          Registered UK and Wales charity no. 1187776
-        %li.list-inline-item= link_to t("navigation.cookie-policy"), cookie_policy_path
-        %li.list-inline-item= link_to t("navigation.privacy-policy"), privacy_policy_path
+    .row.pb-4
+      .col
+        %ul.list-inline.registration.m-0.p-0
+          %li.list-inline-item
+            Registered UK and Wales charity no. 1187776
+          %li.list-inline-item= link_to t("navigation.cookie-policy"), cookie_policy_path
+          %li.list-inline-item= link_to t("navigation.privacy-policy"), privacy_policy_path
diff --git a/app/views/members/edit.html.haml b/app/views/members/edit.html.haml
@@ -1,10 +1,10 @@
-.container-fluid.stripe.reverse
+.container.py-4.py-lg-5
   .row
     .col
-      %h2 Update your details
+      %h1 Update your details
       %p.lead.text-muted Please make sure your details are always up to date.
 
-.container-fluid
+.container.pb-4.pb-lg-5
   .row
     .col-12.col-lg-3.mb-4
       .bg-light.p-3

diff --git a/app/views/members/show.html.haml b/app/views/members/show.html.haml
@@ -1,37 +1,37 @@
-.container-fluid.stripe.reverse
+.container.py-4.py-lg-5
   .row.align-items-center
     .col-auto
       = image_tag(@member.avatar(80), alt: @member.full_name, class: 'rounded-circle mb-2')
     .col-auto
-      %h2.mb-0= @member.full_name
+      %h1.mb-0= @member.full_name
       %small
         Member since
         %em #{l(@member.created_at, format: :website_format)}
 
-.container-fluid#member_profile
+.container.pb-4.pb-lg-5#member_profile
   .row
     .col-12.col-md-7.mb-4
       %h4 Details
       %dl
         - if @member.pronouns.present?
           %dt Pronouns
-          %dd= @member.pronouns || 'Not specified'
+          %dd.mb-3= @member.pronouns || 'Not specified'
 
         %dt Email
-        %dd= mail_to @member.email, @member.email
+        %dd.mb-3= mail_to @member.email, @member.email
 
         %dt Twitter handle
-        %dd= link_to "@#{@member.twitter}", twitter_url_for(@member.twitter)
+        %dd.mb-3= link_to "@#{@member.twitter}", twitter_url_for(@member.twitter)
 
         %dt Phone number
-        %dd= @member.mobile || 'N/A'
+        %dd.mb-3= @member.mobile.present? || 'N/A'
 
         %dt About
-        %dd= @member.about_you
+        %dd.mb-3= @member.about_you
 
         - if @member.skills.any?
           %dt Skills
-          %dd
+          %dd.mb-3
             - @member.skills.each do |skill|
               .badge.bg-secondary= skill.name
 

diff --git a/app/views/shared/_sponsors.html.haml b/app/views/shared/_sponsors.html.haml
@@ -1,4 +1,4 @@
 .row.d-flex.align-items-center.justify-content-center
   - sponsors.each do |sponsor|
     .col-4.col-md-3.col-lg-2.mt-4.d-flex.justify-content-center
-      = link_to image_tag(sponsor.avatar, alt: sponsor.name, class: 'small-image'), sponsor.website, title: sponsor.name, class: 'border-0 mw-100'
+      = link_to image_tag(sponsor.avatar, alt: sponsor.name, class: 'small-image mw-100'), sponsor.website, title: sponsor.name, class: 'border-0 mw-100'