#96 Update proposal pages

app/assets/stylesheets/base/_layout.scss

@@ -7,3 +7,23 @@ body {
   margin-left: auto;
   margin-right: auto;
 }
+
+.page-header {
+  &.page-header-slim {
+    margin-top: 20px;
+  }
+
+  h1 {
+    margin-bottom: 0;
+  }
+
+  // force page-header actions to sit bottom-flush with h1 for now
+  // until a page-header refactor using flexbox or display: table
+  .toolbox {
+    margin-top: 28px;
+  }
+
+  .label {
+    vertical-align: middle;
+  }
+}

app/assets/stylesheets/modules/_comments.scss

@@ -1,11 +1,5 @@
-.comment {
-  border: 0 solid #ddd;
-  border-left-width: 5px;
-  padding-left: 0.5em;
-  margin-bottom: 0.5em;
-}
 
-.speaker-comment {
+.speaker-comment .message_wrap {
   border-color: #9ACFEA;
 }
 

app/assets/stylesheets/modules/_discussions.scss

@@ -5,15 +5,24 @@ ul.messages_layout {
   position: relative;
 }
 ul.messages_layout li {
-  float: left;
   list-style: none;
-  position: relative
+  position: relative;
+
+  &:before,
+  &:after {
+    content: "";
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
 }
 ul.messages_layout li.left {
-  padding-left: 75px
+  padding-left: 35px
 }
 ul.messages_layout li.right {
-  padding-right: 75px
+  padding-right: 35px
 }
 ul.messages_layout li.right .avatar {
   right: 0;
@@ -44,8 +53,9 @@ ul.messages_layout li a.avatar img {
 }
 ul.messages_layout li .message_wrap {
   background: #fefefe;
-  border: 1px solid $brand-primary;
+  border: 1px solid $gray-light;
   float: left;
+  width: 100%;
   margin-bottom: 20px;
   padding: 10px;
   position: relative;
@@ -67,10 +77,19 @@ ul.messages_layout li .message_wrap .arrow {
   top: 13px
 }
 ul.messages_layout li .message_wrap .info {
-  float: left;
   width: 100%;
   border-bottom: 1px solid #fff;
-  line-height: 23px
+  line-height: 23px;
+
+  &:before,
+  &:after {
+    content: "";
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
 }
 ul.messages_layout li .message_wrap .info .name {
   color: $brand-primary;
@@ -83,7 +102,6 @@ ul.messages_layout li .message_wrap .info .time {
   margin-left: 6px
 }
 ul.messages_layout li .message_wrap .text {
-  float: left;
   width: 100%;
   border-top: 1px solid #cfcfcf;
   padding-top: 5px

app/assets/stylesheets/modules/_events.scss

@@ -38,6 +38,10 @@
 
 $event-meta-padding: 10px;
 
+.event-info-bar {
+  margin-top: 20px;
+}
+
 .event-info {
   font-size: $font-size-base;
 

app/assets/stylesheets/modules/_forms.scss

@@ -40,6 +40,15 @@ span[title="required"] {
   color: darken(#edd1d1, 50%);
 }
 
+.control-label {
+  display: block;
+  max-width: 100%;
+  margin-bottom: 5px;
+  margin-top: 0;
+  font-size: $font-size-base;
+  font-weight: bold;
+}
+
 .cancel-form {
   margin-right: .5em;
-}
+}

app/assets/stylesheets/modules/_labels.scss

@@ -21,3 +21,7 @@
 .label-danger {
   @include label-variant($label-danger-bg);
 }
+
+.label-mini {
+  font-size: $font-size-small;
+}

app/assets/stylesheets/modules/_proposal.scss

@@ -8,12 +8,12 @@
   }
 }
 
-.proposal {
+.proposal,
+.proposal-section {
   margin-bottom: 1em;
 }
+
 .speaker {
-  border-bottom: 1px solid $gray-light;
-  margin-top: 1em;
   > h1, > h2, > h3, > h4 {
     margin-top: 0;
   }
@@ -134,10 +134,6 @@ div.col-md-4 {
   margin-top: 10px;
 }
 
-.new-speaker-invite {
-  margin-top: 20px;
-}
-
 .speaker-invite-form {
   display: none;
   form {

app/assets/stylesheets/modules/_widgets.scss

@@ -115,3 +115,34 @@
     background: #FFF;
   }
 }
+
+.widget-card {
+  background: #f9f6f1;
+  padding: 15px;
+
+  .widget-header,
+  .widget-content {
+    background: #f9f6f1;
+    border: none;
+    border-radius: 0;
+    padding: 15px 0;
+  }
+
+  .widget-header {
+    border-bottom: 1px solid #ccc;
+    height: auto;
+    line-height: 1;
+
+    > [class^="fa-"], > [class*=" fa-"],
+    > [class^="glyphicon-"], > [class*=" glyphicon-"] {
+      margin: 0;
+    }
+
+    h3 {
+      margin: 0;
+      top: auto;
+      left: auto;
+      line-height: 1;
+    }
+  }
+}

app/decorators/proposal_decorator.rb

@@ -95,7 +95,8 @@ def state_label(small: false, state: nil, show_confirmed: false)
 
     classes = "label #{state_class(state)}"
     classes += ' status' unless small
-
+    classes += ' label-mini' if small
+
     state += ' & confirmed' if proposal.confirmed? && show_confirmed
 
     h.content_tag :span, state, class: classes

app/helpers/comments_helper.rb

@@ -1,11 +1,11 @@
 module CommentsHelper
   def choose_class_for(comment)
     if comment.proposal.has_speaker?(comment.user)
-      'speaker-comment'
+      'by_myself right speaker-comment'
     elsif comment.user.organizer_for_event?(comment.proposal.event)
-      'organizer-comment'
+      'from_user left organizer-comment'
     elsif comment.user.reviewer_for_event?(comment.proposal.event)
-      'reviewer-comment'
+      'from_user left reviewer-comment'
     end
   end
 end

app/views/proposals/_comments.html.haml

@@ -1,13 +1,17 @@
-%p.count
-  = pluralize(comments.count, 'comment')
-- comments.order(:created_at).each do |comment|
-  .comment.markdown{ class: choose_class_for(comment) }
-    =markdown(comment.body)
+%ul.messages_layout
+  - comments.order(:created_at).each do |comment|
+    %li.comment.markdown{ class: choose_class_for(comment) }
+      %a.avatar
+        = image_tag("https://www.gravatar.com/avatar/#{comment.user.gravatar_hash}?s=25")
+      .message_wrap
+        - if comment.user.present?
+          .info{ title: comment.created_at.to_s }
+            %a.name #{proposal.has_speaker?(comment.user) ? 'speaker' : comment.user.name}
+            %span.time #{comment.created_at.to_s(:day_at_time)}
+        .text
+          =markdown(comment.body)
 
-    - if comment.user.present?
-      .meta
-        %small{ title: comment.created_at.to_s }
-          #{proposal.has_speaker?(comment.user) ? 'speaker' : comment.user.name} - #{comment.created_at.to_s(:day_at_time)}
+
 
 = form_for comments.new do |f|
   = f.hidden_field :proposal_id

app/views/proposals/_contents.html.haml

@@ -1,23 +1,40 @@
-%h3 Title
-.markdown{ data: { 'field-id' => 'proposal_title' } }
-  = proposal.title
+.proposal-section
+  %h3 Title
+  .markdown{ data: { 'field-id' => 'proposal_title' } }
+    = proposal.title
 
-%h3 Abstract
-.markdown{ data: { 'field-id' => 'proposal_abstract' } }
-  = proposal.abstract
+.proposal-section
+  %h3 Session Format
+  = proposal.session_format.try(:name)
 
-%h3 Details
-.markdown{ data: { 'field-id' => 'proposal_details' } }
-  = proposal.details
+- if proposal.track
+  .proposal-section
+    %h3 Track
+    = proposal.track.name
 
-%h3 Pitch
-.markdown{ data: { 'field-id' => 'proposal_pitch' } }
-  =proposal.pitch
+.proposal-section
+  %h3 Abstract
+  .markdown{ data: { 'field-id' => 'proposal_abstract' } }
+    = proposal.abstract
 
-  - if proposal.custom_fields.any?
-    - proposal.proposal_data[:custom_fields].select do |key,value|
+.proposal-section
+  %h3 Tags
+  = proposal.tags
+
+.proposal-section
+  %h3 Details
+  .markdown{ data: { 'field-id' => 'proposal_details' } }
+    = proposal.details
+
+.proposal-section
+  %h3 Pitch
+  .markdown{ data: { 'field-id' => 'proposal_pitch' } }
+    =proposal.pitch
+
+- if proposal.custom_fields.any?
+  - proposal.proposal_data[:custom_fields].select do |key,value|
+    .proposal-section
       %h3= key.capitalize
       %div
       = value.capitalize
       %div
-