Port main Contact page to Bootstrap

app/assets/stylesheets/aspects.css.scss

@@ -1,3 +1,5 @@
+$bluebg: #e7f2f7;
+
 .aspect_dropdown {
   
   li {
@@ -56,6 +58,10 @@
   }
 }
 
+#aspect_nav {
+  list-style-type: none;
+}
+
 .contact_visibility_padlock {
   height: 16px;
   width: 16px;
@@ -267,3 +273,54 @@
     }
   }
 }
+
+#leftNavBar {
+  color: #222222;
+
+  ul {
+    margin: 0px;
+    padding: 0px;
+  }
+
+  a {
+    color: $link-grey;
+    font-weight: bold;
+    text-decoration: none;
+  }
+
+  .selected { color: $black; }
+  .selected a { color: $black; }
+
+  .hoverable {
+    display: block;
+    margin-right: 6px;
+    padding: 4px;
+    &:hover { background-color: $bluebg; }
+
+    .label {
+      background-color: $background-grey;
+      color: $text-grey;
+      float: right;
+      padding: 3px 5px;
+    }
+  }
+
+  .selectable {
+    display: block;
+    margin-left: 21px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .action {
+    width: 12px;
+    height: 12px;
+    display: none;
+    float: right;
+    margin: 3px;
+  }
+
+  .hoverable:hover  > .action {
+    display: block;
+  }
+}

app/assets/stylesheets/contacts.css.scss

@@ -0,0 +1,37 @@
+#section_header {
+  h3 {
+    border-bottom: 1px solid $border-grey;
+  }
+}
+
+#people_stream {
+  .bd {
+    font-size: 13px;
+    line-height: 19.5px;
+  }
+
+  .btn-group {
+    margin-top: 5px;
+
+    .caret {
+      margin-top: 8px;
+    }
+
+    .text {
+      text-shadow: none;
+    }
+  }
+
+  .info {
+    font-size: 11px;
+    line-height: 16.5px;
+  }
+
+  .stream_element {
+    border-bottom: 1px solid $border-grey;
+
+    .media {
+      margin: 10px;
+    }
+  }
+}

app/assets/stylesheets/new-templates.css.scss

@@ -58,3 +58,6 @@
 
 /* stream */
 @import 'tag';
+
+/* contacts */
+@import 'contacts';

app/controllers/contacts_controller.rb

@@ -5,6 +5,8 @@
 class ContactsController < ApplicationController
   before_filter :authenticate_user!
 
+  use_bootstrap_for :index
+
   def index
     respond_to do |format|
 

app/views/contacts/_aspect_listings.haml

@@ -6,13 +6,13 @@
   %li.all_aspects{:class => ("active" if params["set"] != "all" && params["set"] != "only_sharing" && !@spotlight)}
     %a.home_selector.hoverable{:href => contacts_path, :class => ("sub_selected" if params["a_id"])}
       = t('contacts.index.my_contacts')
-      .item_count
+      .label
         = my_contacts_count
 
     %ul.sub_nav#aspects_list
       - all_aspects.each do |aspect|
         %li.hoverable{:data => {:aspect_id => aspect.id}, :class => ("active" if params["a_id"].to_i == aspect.id)}
-          .item_count
+          .label
             = aspect.contacts.size
           .icons-check_yes_ok{:class => ("selected" if params["a_id"].to_i == aspect.id) }
           %a.selectable{:href => contacts_path(:a_id => aspect.id)}
@@ -24,7 +24,7 @@
   %li.all_contacts{:class => ("active" if params["set"] == "all" || params["set"] == "only_sharing")}
     %a.home_selector.hoverable{:href => contacts_path(:set => "all"), :class => ("sub_selected" if params["set"] == "only_sharing")}
       = t('contacts.index.all_contacts')
-      .item_count
+      .label
         = all_contacts_count
 
     %ul.sub_nav
@@ -32,6 +32,5 @@
         .icons-check_yes_ok{:class => ("invisible" if params["set"] == "only_sharing")}
         %a.selectable{:href => contacts_path(:set => "only_sharing")}
           = t('contacts.index.only_sharing_with_me')
-          .item_count
+          .label
             = only_sharing_count
-

app/views/contacts/_contact.html.haml

@@ -1,6 +1,6 @@
 .stream_element{:id => contact.person_id}
   .media
-    .float-right
+    .pull-right
       = contact_aspect_dropdown(contact)
     .img
       = person_image_link(contact.person, :size => :thumb_small)

app/views/contacts/index.html.haml

@@ -8,39 +8,42 @@
 - content_for :head do
   = javascript_include_tag :people
 
-#section_header
+.row
-  %h2
+  .span12
-    = t('.title')
+    #section_header
+      %h3
+        = t('.title')
 
-= render 'shared/contact_sidebar'
+.row
+  = render 'shared/contact_sidebar'
 
-.span-18.last
+  .span9
-  #people_stream.stream.contacts
+    #people_stream.stream.contacts
-    - if @aspect
+      - if @aspect
-      #aspect_controls
+        #aspect_controls
-        - if @contacts_size > 0 && @contacts_size < 20
+          - if @contacts_size > 0 && @contacts_size < 20
-          = start_a_conversation_link(@aspect, @contacts_size)
+            = start_a_conversation_link(@aspect, @contacts_size)
-        = link_to edit_aspect_path(@aspect), rel: "facebox", class: "button" do
+          = link_to edit_aspect_path(@aspect), rel: "facebox", class: "button" do
-          = t('aspects.edit.manage')
+            = t('aspects.edit.manage')
-          %span.modify_aspect
+            %span.modify_aspect
-        = aspect_visibility_link(@aspect)
+          = aspect_visibility_link(@aspect)
-        = link_to @aspect, method: "delete", data: { confirm: t('aspects.edit.confirm_remove_aspect') }, class: 'button delete' do
+          = link_to @aspect, method: "delete", data: { confirm: t('aspects.edit.confirm_remove_aspect') }, class: 'button delete' do
-          = t('delete')
+            = t('delete')
-          %span.icons-monotone_close_exit_delete
+            %span.icons-monotone_close_exit_delete
 
-    - if @contacts_size > 0
+      - if @contacts_size > 0
-      = render @contacts
+        = render @contacts
 
-      = will_paginate @contacts
+        = will_paginate @contacts
-    - else
+      - else
-      %h3.no_contacts
+        .no_contacts
-        = t('.no_contacts')
+          %h3
-        %br
+            = t('.no_contacts')
-        %br
+          %p
-        - if @aspect
+            - if @aspect
-          != t('.no_contacts_message_with_aspect',
+              != t('.no_contacts_message_with_aspect',
-              :community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path),
+                  :community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path),
-              :add_to_aspect_link => link_to(t('.add_to_aspect_link', :name => @aspect.name), edit_aspect_path(@aspect), :rel => "facebox"))
+                  :add_to_aspect_link => link_to(t('.add_to_aspect_link', :name => @aspect.name), edit_aspect_path(@aspect), :rel => "facebox"))
-        - else
+            - else
-          != t('.no_contacts_message',
+              != t('.no_contacts_message',
-               :community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path))
+                   :community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path))

app/views/shared/_contact_sidebar.html.haml

@@ -2,7 +2,7 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-#leftNavBar.span-5.append-1
+#leftNavBar.span3
   = render 'contacts/aspect_listings'
 
   - if AppConfig.settings.community_spotlight.enable?