Update grid container on admin workshop pages

app/assets/stylesheets/partials/_attendances.scss

@@ -3,11 +3,6 @@
         margin-bottom: 0;
     }
 
-    .verify_attendance,
-    .cancel_attendance {
-        border: none;
-    }
-
     a .fa {
         color: black;
 
@@ -19,10 +14,6 @@
             text-shadow: -2px 1px 1px #999;
         }
     }
-
-    .attendee {
-        padding: 0.5em 0;
-    }
 }
 
 label.signed-in {

app/assets/stylesheets/partials/_layout.scss

@@ -4,12 +4,6 @@
   margin-top: 82px;
 }
 
-@media (min-width: 991.98px) {
-  #top {
-    margin-top: 77px;
-  }
-}
-
 .main-footer {
   background-color: $dark-codebar-blue;
   color: $white;

app/views/admin/workshop/_attendances.html.haml

@@ -1,7 +1,7 @@
 .row
   .col.attendances
     - invitations.each do |invitation|
-      .row.attendee.mb-3
+      .row.attendee.mt-3
         .col-1
           - if (invitation.parent.date_and_time - 30.minutes).past?
             - if invitation.attended.nil?
@@ -23,7 +23,7 @@
               %i.fas.fa-exclamation-circle
 
           - if invitation.member.recent_notes.any?
-            %span{'data-bs-toggle': 'tooltip', 'data-bs-placement': 'bottom', title: "Note recently added"}
+            %span{'data-bs-toggle': 'tooltip', 'data-bs-placement': 'bottom', title: 'Note recently added'}
               %i.fas.fa-comment
 
           = link_to admin_member_path(invitation.member) do
@@ -32,15 +32,15 @@
             - else
               = invitation.member.full_name
         .col-6
-          -if invitation.tutorial?
+          - if invitation.tutorial?
             %p.mb-1 Tutorial: #{invitation.tutorial}
-          -if invitation.note?
-            %p.mb-1=invitation.note
+          - if invitation.note?
+            %p.mb-1 Note: #{invitation.note}
           - if invitation.rsvp_time.present?
             %span{'data-bs-toggle': 'tooltip', 'data-bs-placement': 'bottom', title: 'Time of RSVP'}
               %p.mb-1.small
                 %i.fas.fa-history
-                =l(invitation.rsvp_time)
+                = l(invitation.rsvp_time)
             - if invitation.automated_rsvp?
               %span{'data-bs-toggle': 'tooltip', 'data-bs-placement': 'bottom', title: 'Waiting list or admin addition'}
                 %p.mb-1.small
@@ -49,4 +49,4 @@
             %span{'data-bs-toggle': 'tooltip', 'data-bs-placement': 'bottom', title: 'Reminder emailed at'}
               %p.mb-1.small
                 %i.far.fa-clock
-                =l(invitation.reminded_at)
+                = l(invitation.reminded_at)

app/views/admin/workshop/_waiting_list.html.haml

@@ -1,35 +1,36 @@
 - if waiting_list.list.any?
-  .mt-4
-    %strong Waiting list
+  .row.mt-4
+    .col
+      %strong Waiting list
 
-    %table.table.table-borderless.mt-3
-      %colgroup
-        %col
-        %col
-        %col{style: 'width: 40%;'}
-        %col
-      %tbody
-        - waiting_list.list.each do |list|
-          - invitation = list.invitation
-          %tr
-            %td
-              = link_to admin_workshop_invitation_path(@workshop, invitation, attending: true), class: 'waiting_list border-0', method: :put, remote: true, title: 'Add to attendees' do
-                %i.far.fa-plus-square
-            %td
-              = link_to admin_workshop_invitation_path(@workshop, invitation, attending: false), class: 'waiting_list_remove border-0', method: :put, remote: true, title: 'Remove from waitlist' do
-                %i.far.fa-minus-square
-            %td
-              - if MemberPresenter.new(invitation.member).newbie?
-                %span{'data-bs-toggle': 'tooltip', 'data-bs-placement': 'bottom', title: 'New attendee'}
-                  %i.fas.fa-paw
-              = link_to admin_member_path(invitation.member), class: 'border-0' do
-                - if invitation.member.full_name.blank?
-                  = invitation.member.email
-                - else
-                  = invitation.member.full_name
-            %td
-              - if invitation.tutorial?
-                %small Tutorial: #{invitation.tutorial}
-                %br
-              - if invitation.note?
-                %small Note: #{invitation.note}
+      %table.table.table-borderless.mt-3
+        %colgroup
+          %col
+          %col
+          %col{style: 'width: 40%;'}
+          %col
+        %tbody
+          - waiting_list.list.each do |list|
+            - invitation = list.invitation
+            %tr
+              %td
+                = link_to admin_workshop_invitation_path(@workshop, invitation, attending: true), class: 'waiting_list border-0', method: :put, remote: true, title: 'Add to attendees' do
+                  %i.far.fa-plus-square
+              %td
+                = link_to admin_workshop_invitation_path(@workshop, invitation, attending: false), class: 'waiting_list_remove border-0', method: :put, remote: true, title: 'Remove from waitlist' do
+                  %i.far.fa-minus-square
+              %td
+                - if MemberPresenter.new(invitation.member).newbie?
+                  %span{'data-bs-toggle': 'tooltip', 'data-bs-placement': 'bottom', title: 'New attendee'}
+                    %i.fas.fa-paw
+                = link_to admin_member_path(invitation.member), class: 'border-0' do
+                  - if invitation.member.full_name.blank?
+                    = invitation.member.email
+                  - else
+                    = invitation.member.full_name
+              %td
+                - if invitation.tutorial?
+                  %small Tutorial: #{invitation.tutorial}
+                  %br
+                - if invitation.note?
+                  %small Note: #{invitation.note}

app/views/admin/workshops/_invitation_management.html.haml

@@ -1,40 +1,39 @@
-- if @workshop.invitations.any?
-  .row.mb-4
-    .col
-      - if @workshop.invitations.any?
-        .card.bg-light.border-success
-          .card-body
-            %p.mb-0
-              <strong>#{@workshop.invitations.count}</strong> members have been invited to this event.
-              %br
-              <strong>#{@attending_students.count}</strong> are attending as students and <strong>#{@attending_coaches.count}</strong> as coaches.
-              - if @student_waiting_list.any? or @coach_waiting_list.any?
-                There is also a waiting list of <strong>#{@student_waiting_list.count}</strong> students and <strong>#{@coach_waiting_list.count}</strong> coaches.
+.row.mb-4
+  .col
+    - if @workshop.invitations.any?
+      .card.bg-light.border-success
+        .card-body
+          %p.mb-0
+            <strong>#{@workshop.invitations.count}</strong> members have been invited to this event.
+            %br
+            <strong>#{@attending_students.count}</strong> are attending as students and <strong>#{@attending_coaches.count}</strong> as coaches.
+            - if @student_waiting_list.any? or @coach_waiting_list.any?
+              There is also a waiting list of <strong>#{@student_waiting_list.count}</strong> students and <strong>#{@coach_waiting_list.count}</strong> coaches.
 
-  = simple_form_for :workshop, url: admin_workshop_invitations_path(@workshop, attending: true), remote: true, method: :put do |f|
-    .row
-      .col-6
-        = f.select :invitations,
-                    @workshop.invitations.includes(:member).not_accepted.all.map { |u| [ "#{u.member.full_name} (#{u.role})", u.token] },
-                    { include_blank: true },
-                    { class: 'chosen-select', required: true,
-                    data: { placeholder: t('messages.invitations.select_a_member_to_rsvp') } }
-      .col
-        %span{'data-bs-toggle': 'tooltip', 'data-bs-placement': 'bottom', title: t('admin.workshop.manage_rsvps.text')}
-          %i.fas.fa-info-circle
+= simple_form_for :workshop, url: admin_workshop_invitations_path(@workshop, attending: true), remote: true, method: :put do |f|
+  .row.mb-4
+    .col-auto
+      = f.select :invitations,
+                  @workshop.invitations.includes(:member).not_accepted.all.map { |u| [ "#{u.member.full_name} (#{u.role})", u.token] },
+                  { include_blank: true },
+                  { class: 'chosen-select', required: true,
+                  data: { placeholder: t('messages.invitations.select_a_member_to_rsvp') } }
+    .col-auto
+      %span{'data-bs-toggle': 'tooltip', 'data-bs-placement': 'bottom', title: t('admin.workshop.manage_rsvps.text')}
+        %i.fas.fa-info-circle
 
-  .row.mt-4
-    .col-12.col-md-6
-      %h4
-        Students
-      %span.badge.rounded-pill.bg-primary #{@attending_students.count} of #{@workshop.student_spaces} students have RSVP'd
-      %span.badge.rounded-pill.bg-success #{ @attending_students.count(&:attended) } students have been signed in
-      = render partial: 'admin/workshop/attendances', locals: { invitations: @attending_students }
-      = render partial: 'admin/workshop/waiting_list', locals: { waiting_list: @student_waiting_list }
-    .col-12.col-md-6
-      %h4
-        Coaches
-      %span.badge.rounded-pill.bg-primary #{@attending_coaches.count} of #{@workshop.coach_spaces} coaches have RSVP'd
-      %span.badge.rounded-pill.bg-success #{ @attending_coaches.count(&:attended) } coaches have been signed in
-      = render partial: 'admin/workshop/attendances', locals: { invitations: @attending_coaches }
-      = render partial: 'admin/workshop/waiting_list', locals: { waiting_list: @coach_waiting_list }
+.row
+  .col-12.col-md-6
+    %h4
+      Students
+    %span.badge.rounded-pill.bg-primary #{@attending_students.count} of #{@workshop.student_spaces} students have RSVP'd
+    %span.badge.rounded-pill.bg-success #{ @attending_students.count(&:attended) } students have been signed in
+    = render partial: 'admin/workshop/attendances', locals: { invitations: @attending_students }
+    = render partial: 'admin/workshop/waiting_list', locals: { waiting_list: @student_waiting_list }
+  .col-12.col-md-6
+    %h4
+      Coaches
+    %span.badge.rounded-pill.bg-primary #{@attending_coaches.count} of #{@workshop.coach_spaces} coaches have RSVP'd
+    %span.badge.rounded-pill.bg-success #{ @attending_coaches.count(&:attended) } coaches have been signed in
+    = render partial: 'admin/workshop/attendances', locals: { invitations: @attending_coaches }
+    = render partial: 'admin/workshop/waiting_list', locals: { waiting_list: @coach_waiting_list }

app/views/admin/workshops/edit.html.haml

@@ -1,4 +1,4 @@
-.container-fluid.pt-3
+.container.py-4.py-lg-5
   .row.mb-4
     .col
       %h1 Edit Workshop

app/views/admin/workshops/index.html.haml

@@ -1,13 +1,13 @@
-.container-fluid.pt-3
-  .row
+.container.py-4.py-lg-5
+  .row.mb-4
     .col
-      %h1.mb-3
+      %h1
         Workshops
         %small.text-muted= @chapter.name
 
   .row
     .col
-      %table.table
+      %table.table.table-striped.table-hover
         %thead
           %td Date
           %td Attendances
@@ -17,13 +17,13 @@
           - @workshops.each do |workshop|
             %tr
               %td
-                = link_to admin_workshop_path(workshop), class: 'border-0' do
+                = link_to admin_workshop_path(workshop) do
                   = humanize_date(workshop.date_and_time, with_time: true, with_year: true)
               %td
                 = workshop.invitations.accepted.count
               %td
                 - workshop.sponsors.each do |sponsor|
-                  = link_to sponsor.name, sponsor.website, class: 'border-0'
+                  = link_to sponsor.name, sponsor.website
               %td
                 - if workshop.date_and_time.future?
                   %span.badge.bg-primary Upcoming

app/views/admin/workshops/new.html.haml

@@ -1,4 +1,4 @@
-.container-fluid.pt-3
+.container.py-4.py-lg-5
   .row.mb-4
     .col
       %h1 New Workshop

app/views/admin/workshops/send_invites.html.haml

@@ -1,22 +1,21 @@
-.container-fluid
-  .stripe.reverse
-    .row
-      .col
-        %h1
-          Workshop
-          = link_to [:admin, @workshop.chapter] do
-            %small=@workshop.chapter.name
-    .row
-      - unless @workshop.virtual?
-        .col-3
-          %h2.h4
-            = @workshop.venue.name
-      .col-3
-        %h2.h5
-          #{l(@workshop.date_and_time)}
+.container.py-4.py-lg-5
+  .row
+    .col
+      %h1
+        Workshop
+        = link_to [:admin, @workshop.chapter] do
+          %small=@workshop.chapter.name
+  .row.align-items-center
+    - unless @workshop.virtual?
+      .col-auto
+        %h2.h4
+          = @workshop.venue.name
+    .col-auto
+      %h2.h5
+        #{l(@workshop.date_and_time)}
 
-.container-fluid
-  .stripe
+.py-4.py-lg-5.bg-light
+  .container
     .row
       .col
         %h3

app/views/admin/workshops/show.html.haml

@@ -1,4 +1,4 @@
-.container-fluid.btn-group.p-0
+.container-fluid.btn-group.p-0{ role: 'group' }
   = link_to edit_admin_workshop_path(@workshop), class: 'btn btn-primary py-3 rounded-0' do
     %i.fas.fa-pencil-alt
     %label.text-white Edit
@@ -30,7 +30,7 @@
     %i.fas.fa-times
     %label.text-white Destroy
 
-.container-fluid.mt-5
+.container.py-4.py-lg-5
   .row
     .col
       %h2
@@ -72,7 +72,7 @@
               %br
               #{t('admin.workshop.virtual.details.more_html', slack_channel: link_to('#organisers', 'https://codebar.slack.com/archives/G08CQ5KFD'))}
 
-  .row.my-4
+  .row.mt-4
     .col-6.col-md-3#host
       - if @workshop.venue.present?
         %h4 Venue
@@ -93,6 +93,7 @@
         %span{'data-bs-toggle': 'tooltip', 'data-bs-placement': 'bottom', title: organiser.full_name}
           = image_tag(organiser.avatar(40), alt: organiser.full_name)
 
-.container-fluid.bg-light.pt-4
-  .row.mt-4#invitations
-    = render partial: 'invitation_management'
+- if @workshop.invitations.any?
+  .py-4.py-lg-5.bg-light
+    .container#invitations
+      = render partial: 'invitation_management'

spec/support/shared_examples/behaves_like_an_invitation_route.rb

@@ -22,7 +22,7 @@
       # admin view
       login_as_admin(member)
       visit admin_workshop_path(invitation.workshop)
-      within 'div.row.attendee.mb-3' do
+      within 'div.row.attendee.mt-3' do
         expect(page).to have_content(member.full_name)
         expect(page).to have_selector('i.fa-history')
         expect(page).to_not have_selector('i.fa-magic')