Bootstrap member admin page

app/assets/stylesheets/_bootstrap-custom.scss

@@ -26,7 +26,7 @@ $enable-negative-margins: true;
 @import "bootstrap/buttons";
 @import "bootstrap/transitions";
 @import "bootstrap/dropdown";
-// @import "bootstrap/button-group";
+@import "bootstrap/button-group";
 @import "bootstrap/nav";
 @import "bootstrap/navbar";
 @import "bootstrap/card";

app/views/admin/attendance_warnings/_attendance_warning.html.haml

@@ -1,8 +1,8 @@
-.attendance-warning
-  %span.fa-stack.fa-lg
-    %i.fa.fa-circle.fa-stack-2x.alert
-    %i.fa.fa-clock-o.fa-stack-1x
-  .details{ style: 'display: inline-grid' }
+.row.d-flex.align-items-center.attendance-warning
+  .col-2.col-md-1
+    %span.fa-stack.fa-lg
+      %i.fa.fa-clock-o.fa-stack-1x.bg-warning.rounded-circle
+  .col-9.col-md-11.details
     %strong Sent attendance warning email by #{link_to(action.issued_by.full_name, admin_member_path(action.issued_by))}
     .date
       #{l(action.created_at, format: :website_format)}

app/views/admin/bans/_ban.html.haml

@@ -1,8 +1,9 @@
-.suspension
-  %span.fa-stack.fa-lg
-    %i.fa.fa-user.fa-stack-1x
-    %i.fa.fa-ban.fa-stack-2x.warning
-  .details
+.row.d-flex.align-items-center.suspension
+  .col-2.col-md-1
+    %span.fa-stack.fa-lg
+      %i.fa.fa-user.fa-stack-1x
+      %i.fa.fa-ban.fa-stack-2x.warning
+  .col-9.col-md-11.details
     %strong
       - if action.permanent?
         Suspended indefinitely

app/views/admin/eligibility_inquiries/_eligibility_inquiry.html.haml

@@ -1,8 +1,8 @@
-.eligibility-inquiry
-  %span.fa-stack.fa-lg
-    %i.fa.fa-circle.fa-stack-2x.alert
-    %i.fa.fa-paper-plane-o.fa-stack-1x
-  .details
+.row.d-flex.align-items-center.eligibility-inquiry
+  .col-2.col-md-1
+    %span.fa-stack.fa-lg
+      %i.fa.fa-paper-plane-o.fa-stack-1x.bg-warning.rounded-circle
+  .col-9.col-md-11.details
     %strong Sent eligibility inquiry email by #{link_to(action.issued_by.full_name, action.issued_by)}
     .date
       = l(action.created_at, format: :website_format)

app/views/admin/events/_event.html.haml

@@ -1,41 +1,36 @@
-- if event.date_and_time.past?
-  .attendance
-    - if (invitation.is_a?(WorkshopInvitation) && invitation.attended?)
-      .attended
-        attended
-    - elsif (invitation.is_a?(WorkshopInvitation) && !invitation.attended?)
-      .not-attended
-        not attended
-    - else
-      .no-attendance
-        No attendance data
-.event
-  .event__col-1
-    %header.event__header
-      %h3.title
-        = link_to event.to_s, [:admin, event]
-        - if event.venue.present?
-          at
-          = event.venue.name
-    .event__details
-      .date
-        %i.material-icons
-          calendar_today
-        = event.date
-      .time
-        %i.material-icons
-          access_time
-        = event.time
-
-  .event__col-2
-    .event__labels
-      - if event.chapter
-        %span.label.status
-          = event.chapter.name
-        %span.label.success= invitation.role
-    - if event.organisers.any?
-      .event__organisers
-        .event__organisers-list
+.col.event
+  .card.mb-4
+    - if event.date_and_time.past?
+      .attendance
+        - if (invitation.is_a?(WorkshopInvitation) && invitation.attended?)
+          .attended.p-1.bg-success
+            Attended
+        - elsif (invitation.is_a?(WorkshopInvitation) && !invitation.attended?)
+          .not-attended.p-1.bg-danger
+            Not attended
+        - else
+          .no-attendance.p-1.bg-danger
+            No attendance data
+    .card-body
+      .d-md-flex.justify-content-md-between
+        .order-md-2
+          %span.badge.bg-success
+            = invitation.role
+          - if event.chapter
+            %span.badge.bg-primary.mb-3.mb-md-0
+              = event.chapter.name
+        .order-md-1
+          %h3.h5
+            = link_to event.to_s, [:admin, event]
+          .mb-3
+            %p.mb-0
+              %i.fa.fa-calendar-o
+              = event.date
+            %p
+              %i.fa.fa-clock-o
+              = event.time
+      - if event.organisers.any?
+        .d-md-flex.align-items-md-center
           - event.organisers.each do |organiser|
-            = link_to twitter_url_for(organiser.twitter), class: 'user-link' do
-              = image_tag(organiser.avatar(26), class: 'th radius', title: organiser.full_name, alt: organiser.full_name)
+            = link_to twitter_url_for(organiser.twitter), class: 'border-0 d-inline-block mx-1' do
+              = image_tag(organiser.avatar(26), class: 'rounded-circle', title: organiser.full_name, alt: organiser.full_name)

app/views/admin/member_notes/_member_note.html.haml

@@ -1,9 +1,9 @@
-.note
-  %span.fa-stack.fa-lg
-    %i.fa.fa-circle.fa-stack-2x.info
-    %i.fa.fa-pencil.fa-stack-1x
-  .details
+.row.d-flex.align-items-start.note
+  .col-2.col-md-1
+    %span.fa-stack.fa-lg
+      %i.fa.fa-pencil.fa-stack-1x.bg-primary.rounded-circle
+  .col-9.col-md-11
     %strong Note added by #{link_to(action.author.full_name, admin_member_path(action.author))}
-    %blockquote=action.note
+    %blockquote.blockquote.mb-0=action.note
     .date
       = l(action.created_at, format: :website_format)

app/views/admin/members/_actions.html.haml

@@ -1,20 +1,20 @@
-.icon-bar.four-up
-  = link_to '#', class: 'item', 'data-reveal-id': 'note-modal' do
-    %i.fa.fa-pencil
-    %label
+.container-fluid.p-0.mb-4
+  .btn-group.d-flex
+    = link_to '#', class: 'btn btn-primary d-block py-4', 'data-reveal-id': 'note-modal' do
+      %i.fa.fa-pencil.d-block
       Add note
-    = link_to admin_member_send_eligibility_email_path(@member), data: {confirm: "Clicking OK will send an automated email to this user now to verify their eligibility for codebar. This cannot be undone. Are you sure?"}, class: 'item' do
-      %i.fa.fa-paper-plane-o
-      %label Send eligibility inquiry
-  - if @member.attendance_warnings.empty?
-    = link_to admin_member_send_attendance_email_path(@member), data: {confirm: "Clicking OK will send an automated email to this user now to warn them about missing too many workshops. This cannot be undone. Are you sure?"}, class: 'item' do
-      %i.fa.fa-clock-o
-      %label Send attendance warning
-  - else
-    = link_to admin_member_send_attendance_email_path(@member), data: {confirm: "#{@member.name} has already received a warning about missing too many workshops on #{@member.attendance_warnings.last.created_at.strftime("%Y-%m-%d at %H:%M")}. Are you sure you want to proceed with sending another one?"}, class: 'item' do
-      %i.fa.fa-clock-o
-      %label Send attendance warning
-  = link_to new_admin_member_ban_path(@member), class: 'item' do
-    %i.fa.fa-ban.warning
-    %label Suspend
-  = render 'note'
+      = link_to admin_member_send_eligibility_email_path(@member), data: {confirm: "Clicking OK will send an automated email to this user now to verify their eligibility for codebar. This cannot be undone. Are you sure?"}, class: 'btn btn-primary d-block py-4' do
+        %i.fa.fa-paper-plane-o.d-block
+        Send eligibility inquiry
+    - if @member.attendance_warnings.empty?
+      = link_to admin_member_send_attendance_email_path(@member), data: {confirm: "Clicking OK will send an automated email to this user now to warn them about missing too many workshops. This cannot be undone. Are you sure?"}, class: 'btn btn-primary d-block py-4' do
+        %i.fa.fa-clock-o.d-block
+        Send attendance warning
+    - else
+      = link_to admin_member_send_attendance_email_path(@member), data: {confirm: "#{@member.name} has already received a warning about missing too many workshops on #{@member.attendance_warnings.last.created_at.strftime("%Y-%m-%d at %H:%M")}. Are you sure you want to proceed with sending another one?"}, class: 'btn btn-primary d-block py-4' do
+        %i.fa.fa-clock-o.d-block
+        Send attendance warning
+    = link_to new_admin_member_ban_path(@member), class: 'btn btn-primary d-block py-4' do
+      %i.fa.fa-ban.warning.d-block
+      Suspend
+    = render 'note'

app/views/admin/members/_note.html.haml

@@ -3,6 +3,6 @@
   = simple_form_for [:admin, MemberNote.new] do |f|
     = f.input :note, label: false, placeholder: 'e.g. very enthusiastic student.'
     = f.hidden_field :member_id, value: @member.id
-    = f.submit 'Save', class: 'button small'
+    = f.button :button, 'Save', class: 'btn btn-primary'
   = link_to '#', class: 'close-reveal-modal', 'aria-label': 'Close' do
     ×

app/views/admin/members/_profile.html.haml

@@ -1,47 +1,47 @@
 #profile
-  = image_tag(@member.avatar(200), class: 'th', title: @member.full_name, alt: @member.full_name)
-  .name= @member.full_name
-  .email= mail_to @member.email, @member.email
-  %dt= @member&.mobile
-  %p.lead= @member.about_you
-
-  %hr
+  = image_tag(@member.avatar(200), title: @member.full_name, alt: @member.full_name)
+  %span.d-block= @member.full_name
+  %span.d-block= mail_to @member.email, @member.email
+  %span.d-block= @member&.mobile
+  %span.d-block
+    %p.lead= @member.about_you
 
   - if @member.skills.any?
-    %h5 Skills
-
-    - @member.skills.each do |skill|
-      %span.label= skill.name
-    %hr
+    .mb-4
+      %h5 Skills
+      - @member.skills.each do |skill|
+        .badge.bg-success= skill.name
 
   - if @workshop_attendances.positive? || @meeting_rsvps.positive? || @event_rsvps.positive?
-    .attendance-summary
+    .attendance-summary.mt-4
       %h5 Attendance summary
-      %ul.no-bullet
+      %ul.list-unstyled.ml-0
         - if @workshop_attendances.positive?
-          %label.label.round #{@workshop_attendances}
-          workshops
+          %li
+            .badge.rounded-pill.bg-secondary
+              #{@workshop_attendances}
+            workshops
 
         - if @meeting_rsvps.positive?
           %li
-            %label.label.round #{@meeting_rsvps}
+            .badge.rounded-pill.bg-secondary
+              #{@meeting_rsvps}
             meetings
 
         - if @event_rsvps.positive?
           %li
-            %label.label.round #{@event_rsvps}
+            .badge.rounded-pill.bg-secondary
+              #{@event_rsvps}
             events
-    %hr
+
   - if @member.groups.any?
-    %h4 Groups
-    %ul.no-bullet#subscriptions
+    %h5 Groups
+    %ul.list-unstyled.ml-0#subscriptions
       - @member.groups.each do |group|
         %li
           = link_to [:admin, group] do
             #{group.name} (#{group.chapter.name})
           = link_to admin_member_update_subscriptions_path(member_id: @member, group: group), data: {confirm: "Clicking OK will remove this user from this subscription. This cannot be undone. Are you sure?"} do
             %span.fa.fa-times
   - else
-    %label.label.secondary #{@member.name} is not subscribed to any groups
-
-  %hr
+    .badge.bg-primary.mb-4.mb-md-0 #{@member.name} is not subscribed to any chapters

app/views/admin/members/events.html.haml

@@ -1,10 +1,10 @@
 #admin-member
   = render 'actions'
-  %section
+  .container-fluid.mb-4.mb-md-0
     .row
-      .medium-3.columns
+      .col-12.col-md-3
         = render 'profile'
-      .medium-9.columns
+      .col-12.col-md-9
         %p
           =link_to admin_member_path(@member) do
             %i.fa.fa-arrow-left
@@ -16,7 +16,7 @@
 
         - if @member.past_rsvps.any?
           %h3 Past RSVPs
-          .digg_pagination
+          .digg_pagination.mb-3
             .page_info
               = page_entries_info(@member.past_rsvps.paginate(per_page: 20, page: params['page']), model: 'past events')
             = will_paginate(@member.past_rsvps.paginate(per_page: 20, page: params['page']))

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

@@ -1,27 +1,31 @@
 #admin-member
   = render 'actions'
-  %section
+  .container-fluid.mb-4
     .row
-      .medium-3.columns
+      .col-12.col-md-3
         = render 'profile'
-      .medium-9.columns
-        %ul.no-bullet#actions
-          - @actions.each do |action|
-            %li= render action, action: action
+      .col-12.col-md-9
+        .row
+          .col
+            %ul.list-unstyled.m-1#actions
+              - @actions.each do |action|
+                %li.border-bottom.border-light.mb-3= render action, action: action
 
-          %li
+        .row.d-flex.align-items-center
+          .col-2.col-md-1
             %span.fa-stack.fa-lg
-              %i.fa.fa-circle.fa-stack-2x.success
-              %i.fa.fa-user-o.fa-stack-1x
-            .details
-              %strong Signed up
-              .date
-                = l(@member.created_at, format: :website_format)
+              %i.fa.fa-pencil.fa-stack-1x.bg-success.rounded-circle
+          .col-9.col-md-11
+            %strong Signed up
+            = l(@member.created_at, format: :website_format)
 
 
         - if @member.upcoming_rsvps.any?
-          %h3 Upcoming RSVPs
-          - @member.upcoming_rsvps.each do |invitation|
-            = render EventPresenter.decorate(invitation.event), invitation: invitation
-
-        = link_to 'View all RSVPS', admin_member_events_path(@member), class: 'button expand'
+          .row
+            .col
+              %h3.mt-4 Upcoming RSVPs
+              - @member.upcoming_rsvps.each do |invitation|
+                = render EventPresenter.decorate(invitation.event), invitation: invitation
+        .row.mt-4
+          .col
+            = link_to 'View all RSVPS', admin_member_events_path(@member), class: 'btn btn-primary btn-block'

spec/features/admin/members_spec.rb

@@ -21,7 +21,7 @@
 
     it 'can view a summary of member event attendances' do
       within '.attendance-summary' do
-        expect(page).to have_content('1 workshops')
+        expect(page).to have_content('1 workshops', normalize_ws: true)
       end
     end