Responsive activity view

app/assets/javascripts/buttonhandlers.jsx.js

@@ -100,6 +100,12 @@ function activity_changed(data, textStatus, xhr)
       .html(new_confirm_icon);
     $(`.btn-absent[data-person-id=${target.person}][data-activity-id=${target.activity}]`)
       .html(new_decline_icon);
+
+    // Add text to all 'wide' buttons
+    $(`.btn-present[data-person-id=${target.person}][data-activity-id=${target.activity}][data-wide=1]`)
+      .append(" Present");
+    $(`.btn-absent[data-person-id=${target.person}][data-activity-id=${target.activity}][data-wide=1]`)
+      .append(" Absent");
 }
 
 function alert_failure(data, textStatus, xhr)

app/assets/stylesheets/application.scss

@@ -66,3 +66,25 @@ table .btn-group {
 .editable.editable-empty {
   color: inherit;
 }
+
+/* https://stackoverflow.com/questions/26923543/why-does-a-table-in-a-collapsible-bootstrap-panel-change-width */
+table.collapse.in {
+  display: table;
+}
+
+/* Toggles visibility based on aria-expanded of parent. */
+[aria-expanded="true"] > .sv-show-expanded {
+  display: inline;
+}
+
+[aria-expanded="true"] > .sv-show-collapsed {
+  display: none;
+}
+
+[aria-expanded="false"] > .sv-show-expanded {
+  display: none;
+}
+
+[aria-expanded="false"] > .sv-show-collapsed {
+  display: inline;
+}

app/controllers/activities_controller.rb

@@ -17,6 +17,14 @@ class ActivitiesController < ApplicationController
       .joins(:person)
       .order(attending: :desc)
       .order('people.first_name ASC')
+    @organizers = @activity.participants
+      .joins(:person)
+      .where(is_organizer: true)
+      .order('people.first_name ASC')
+      .map{|p| p.person.full_name}
+      .join(', ')
+    @ownparticipant = @activity.participants
+      .find_by(person: current_person)
     @counts = @activity.state_counts
     @num_participants = @counts.values.sum
   end

app/views/activities/_wide_presence_buttons.haml

@@ -0,0 +1,16 @@
+.btn-group.btn-group-justified{role: "group"}
+  .btn-group
+    %button.btn.btn-success.btn-present.btn-presence{data: {wide: 1, person_id: person.id, activity_id: activity.id, group_id: activity.group.id, new_state: "present"}}
+      - if !state
+        %i.fa.fa-check
+      - else
+        %i.fa.fa-check-circle
+      Present
+
+  .btn-group
+    %button.btn.btn-danger.btn-absent.btn-presence{data: {wide: 1, person_id: person.id, activity_id: activity.id, group_id: activity.group.id, new_state: "absent"}}
+      - if state == false
+        %i.fa.fa-times-circle
+      - else
+        %i.fa.fa-times
+      Absent

app/views/activities/show.html.erb

@@ -1,35 +0,0 @@
-<h2><%= @activity.public_name %></h2>
-
-<ul>
-  <% if @activity.secret_name %>
-  <li>Secretly <%= @activity.secret_name %></li>
-  <% end %>
-  <li>Description:<%= @activity.description %></li>
-  <li>Location:<%= @activity.location %></li>
-  <li>Start: <%= @activity.start %> - <%= @activity.end %></li>
-  <li>Deadline: <%= @activity.deadline %></li>
-</ul>
-
-<h2>
-  <%= @num_participants %> participants
-  <%= render partial: "state_counts", locals: {counts:@counts}%>
-</h2>
-<table class="table table-bordered">
-  <% @participants.each do |p| %>
-    <tr class="<%= p.row_class %>" data-person-id="<%= p.person.id %>" data-activity-id="<%= @activity.id %>">
-      <td>
-        <%= p.person.full_name %>
-        <% if p.is_organizer %><i class="fa fa-star-o"></i><% end %>
-      </td>
-      <td>
-        <%=
-          editable p, :notes, url: presence_group_activity_path(@activity.group, @activity, person_id: p.person_id), title: "Notes", value: p.notes, emptytext: "--"
-        %>
-      </td>
-      <td>
-        <%= render partial: "activities/presence_buttons", locals: {activity: @activity, person: p.person, state: p.attending} %>
-  <% end %>
-</table>
-
-<%= link_to 'Edit', edit_group_activity_path(@group, @activity) %> |
-<%= link_to 'Back', group_activities_path(@group) %>

app/views/activities/show.html.haml

@@ -0,0 +1,180 @@
+.row
+  .col-md-9
+    .panel.panel-default
+      .panel-heading
+        = @activity.public_name
+        - if @activity.may_change?(current_person)
+          = link_to edit_group_activity_path(@group, @activity), class: 'pull-right' do
+            %i.fa.fa-pencil
+
+
+      %table.table
+        %tr
+          %td
+            Organizers:
+          %td
+            = @organizers
+        %tr
+          %td
+            Description:
+          %td
+            = @activity.description
+
+        %tr
+          %td
+            Location:
+          %td
+            = @activity.location
+
+        %tr
+          %td
+            When:
+
+          %td
+            = @activity.start
+            \-
+            = @activity.end
+
+        %tr
+          %td
+            Deadline:
+
+          %td
+            = @activity.deadline
+
+  - if @ownparticipant
+    .col-md-3
+      .panel.panel-default
+        .panel-heading
+          Your response
+        .panel-body
+          = render partial: "activities/wide_presence_buttons", locals: {activity: @activity, person: @ownparticipant.person, state: @ownparticipant.attending}
+
+          -#.btn-group.btn-group-justified
+            -#.btn-group
+              -#%button.btn.btn-success
+                -#Present
+
+            -#.btn-group
+              -#%button.btn.btn-danger
+                -#Absent
+
+          = editable @ownparticipant,
+            :notes,
+            url: presence_group_activity_path(@activity.group, @activity, person_id: @ownparticipant.person_id),
+            title: "Notes",
+            value: "",
+            emptytext: "Add notes..."
+
+.hidden-xs
+  %h2
+    = @num_participants
+    participants
+    = render partial: "state_counts", locals: {counts: @counts}
+
+  %table.table.table-bordered
+    - @participants.each do |p|
+      %tr{class: p.row_class, data: {person_id: p.person.id, activity_id: @activity.id}}
+        %td
+          = p.person.full_name
+          - if p.is_organizer
+            %i.fa.fa-star-o
+
+        %td
+          = editable p, :notes, url: presence_group_activity_path(@activity.group, @activity, person_id: p.person_id), title: "Notes", value: p.notes, emptytext: "--"
+
+        %td
+          = render partial: "activities/presence_buttons", locals: {activity: @activity, person: p.person, state: p.attending}
+
+.hidden-sm.hidden-md.hidden-lg
+  .panel.panel-default.panel-success
+    .panel-heading
+      -#%button.btn.btn-default.btn-sm{data: {toggle: 'collapse', target: '#present-collapse'}}
+        -#%i.fa.fa-arrows-v
+
+      %a{role: 'button', href: '#present-collapse', data: {toggle: 'collapse'}, 'aria-expanded': 'false'}
+
+        %span.sv-show-collapsed
+          %i.fa.fa-angle-down
+
+        %span.sv-show-expanded
+          %i.fa.fa-angle-up
+
+        Present
+        %span.badge
+          = @counts[true]
+
+    %table.table.collapse#present-collapse
+      %tbody
+        - @participants.where(attending: true).each do |p|
+          %tr{data: {person_id: p.person.id, activity_id: @activity.id}}
+            %td
+              = p.person.full_name
+              - if p.is_organizer
+                %i.fa.fa-star-o
+
+            %td
+              = render partial: "activities/presence_buttons", locals: {activity: @activity, person: p.person, state: p.attending}
+
+          %tr{data: {person_id: p.person_id, activity_id: @activity.id}}
+            %td{colspan: "2"}
+              = editable p, :notes, url: presence_group_activity_path(@activity.group, @activity, person_id: p.person_id), title: "Notes", value: p.notes, emptytext: "--"
+
+
+  .panel.panel-default
+    .panel-heading
+      %a{role: 'button', href: '#unknown-collapse', data: {toggle: 'collapse'}, 'aria-expanded': 'false'}
+
+        %span.sv-show-collapsed
+          %i.fa.fa-angle-down
+
+        %span.sv-show-expanded
+          %i.fa.fa-angle-up
+        No reaction
+        %span.badge
+          = @counts[nil]
+
+    %table.table.collapse#unknown-collapse
+      %tbody
+        - @participants.where(attending: nil).each do |p|
+          %tr{data: {person_id: p.person.id, activity_id: @activity.id}}
+            %td
+              = p.person.full_name
+              - if p.is_organizer
+                %i.fa.fa-star-o
+
+            %td
+              = render partial: "activities/presence_buttons", locals: {activity: @activity, person: p.person, state: p.attending}
+
+          %tr{data: {person_id: p.person_id, activity_id: @activity.id}}
+            %td{colspan: "2"}
+              = editable p, :notes, url: presence_group_activity_path(@activity.group, @activity, person_id: p.person_id), title: "Notes", value: p.notes, emptytext: "--"
+
+  .panel.panel-default.panel-danger
+    .panel-heading
+      %a{role: 'button', href: '#absent-collapse', data: {toggle: 'collapse'}, 'aria-expanded': 'false'}
+
+        %span.sv-show-collapsed
+          %i.fa.fa-angle-down
+
+        %span.sv-show-expanded
+          %i.fa.fa-angle-up
+        Absent
+        %span.badge
+          = @counts[false]
+
+    %table.table.collapse#absent-collapse
+      %tbody
+        - @participants.where(attending: false).each do |p|
+          %tr{data: {person_id: p.person.id, activity_id: @activity.id}}
+            %td
+              = p.person.full_name
+              - if p.is_organizer
+                %i.fa.fa-star-o
+
+            %td
+              = render partial: "activities/presence_buttons", locals: {activity: @activity, person: p.person, state: p.attending}
+
+          %tr{data: {person_id: p.person_id, activity_id: @activity.id}}
+            %td{colspan: "2"}
+              = editable p, :notes, url: presence_group_activity_path(@activity.group, @activity, person_id: p.person_id), title: "Notes", value: p.notes, emptytext: "--"