Port people search to Bootstrap

Changelog.md

@@ -4,6 +4,7 @@
 * Port help pages to Bootstrap [#5050](https://github.com/diaspora/diaspora/pull/5050)
 * Refactor Notification#notify [#4945](https://github.com/diaspora/diaspora/pull/4945)
 * Port getting started to Bootstrap [#5057](https://github.com/diaspora/diaspora/pull/5057)
+* Port people search page to Bootstrap [#5077](https://github.com/diaspora/diaspora/pull/5077)
 
 ## Bug fixes
 * Fix hiding of poll publisher on close [#5029](https://github.com/diaspora/diaspora/issues/5029)

app/assets/javascripts/main.js

@@ -40,5 +40,6 @@
 //= require bootstrap-popover
 //= require bootstrap-dropdown
 //= require bootstrap-scrollspy-custom
+//= require bootstrap-modal
 //= require osmlocator
 //= require flexime

app/assets/stylesheets/application.css.sass

@@ -19,6 +19,7 @@
 @import 'popover'
 @import 'stream_element'
 @import 'report'
+@import 'tag'
 
 /* ====== media ====== */
 .media
@@ -851,37 +852,6 @@ ul#press_logos
   .avatar
     :float left
 
-.tag
-  :display inline-block
-  :max-width 100%
-  &:hover
-    :text
-      :decoration underline
-    :background
-      :color lighten($blue, 47%)
-
-  :font
-    :weight bold
-
-h1.tag
-  :border
-    :bottom 2px dotted $blue
-  &:hover
-    :border
-      :bottom 2px dotted $blue
-
-.info
-  .tag
-    :background
-      :color #efefef
-    :color $text-grey
-    :border
-      :bottom 1px dotted $border-dark-grey
-
-    &:hover
-      :border
-        :bottom 1px solid $border-dark-grey
-
 .diaspora_handle
   :font
     :size 12px

app/assets/stylesheets/invitations.css.scss

+#invite_code {
+  cursor: text;
+  display: block;
+  margin-top: 5px;
+}
+
+#invitationsModal {
+  #paste_link { font-weight: 700; }
+  #invite_code { margin-top: 10px; }
+  #codes_left { color: $text-grey; }
+  .control-label { width: 120px; }
+  .controls { margin-left: 140px; }
+  #email_invitation {
+    padding-top: 10px;
+    margin-top: 20px;
+    border-top: 1px dashed $border-grey;
+    label { font-weight: 700; }
+    #already_sent {
+      color: $text-grey;
+      font-size: 12px;
+    }
+  }
+}

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

@@ -47,4 +47,11 @@
 @import 'help';
 
 /* getting started */
-@import 'getting-started'
+@import 'getting-started';
+
+/* people */
+@import 'people';
+@import 'invitations';
+
+/* stream */
+@import 'tag';

app/assets/stylesheets/new_styles/_base.scss

@@ -151,6 +151,24 @@ $bring-dark-accent-forward-color: #DDD;
   padding-top: 40px;
 }
 
+
+#back-to-top {
+  display: block;
+  color: white;
+  position: fixed;
+  z-index: 49;
+  right: 20px;
+  bottom: 20px;
+  opacity: 0;
+  font-size: 2.9em;
+  padding: 0 12px 0 12px;
+  border-radius: 10px;
+  background-color: #aaa;
+  &:hover { opacity: 0.85 !important; }
+  &.visible { opacity: 0.5; }
+  line-height: 1.5;
+}
+
 /* responsive */
 @media (max-width: 767px) {
   body {

app/assets/stylesheets/people.css.scss

+#people_search {
+  #people_stream {
+    .stream_element {
+      border-bottom: 1px solid $border-grey;
+      padding-right: 10px;
+      .avatar {
+        width: 50px;
+        height: 50px;
+      }
+      .info { font-size: 11px; }
+    }
+  }
+  #search_title {
+    .term { font-weight: 700; }
+    small { margin-left: 15px; }
+  }
+}

app/assets/stylesheets/tag.css.scss

+.tag {
+  display: inline-block;
+  font-weight: bold;
+  &:hover {
+    text-decoration: underline;
+    background-color: lighten($blue, 47%);
+  }
+}
+
+h1.tag {
+  border-bottom: 2px dotted $blue;
+  &:hover { border-bottom: 2px dotted $blue; }
+}
+
+.info {
+  .tag {
+    background-color: #efefef;
+    color: $text-grey;
+    border-bottom: 1px dotted $border-dark-grey;
+    &:hover { border-bottom: 1px solid $border-dark-grey; }
+  }
+}

app/controllers/invitations_controller.rb

@@ -14,7 +14,7 @@ class InvitationsController < ApplicationController
 
     respond_to do |format|
       format.html do
-        render :layout => false
+        render params[:blueprint] ? 'invitations/new_blueprint' : 'invitations/new', layout: false
       end
     end
   end

app/controllers/people_controller.rb

@@ -5,6 +5,8 @@
 class PeopleController < ApplicationController
   before_filter :authenticate_user!, :except => [:show, :last_post]
 
+  use_bootstrap_for :index
+
   respond_to :html, :except => [:tag_index]
   respond_to :json, :only => [:index, :show]
   respond_to :js, :only => [:tag_index]

app/helpers/aspect_global_helper.rb

@@ -41,7 +41,7 @@ LISTITEM
   end
 
   def dropdown_may_create_new_aspect
-    @aspect == :profile || @aspect == :tag || @aspect == :search || @aspect == :notification || params[:action] == "getting_started"
+    @aspect == :profile || @aspect == :tag || @aspect == :notification || params[:action] == "getting_started"
   end
 
   def aspect_options_for_select(aspects)

app/helpers/tags_helper.rb

 module TagsHelper
   def looking_for_tag_link
     return if search_query.include?('@') || normalized_tag_name.blank?
-    content_tag('h4') do 
-      content_tag('small') do
-        t('people.index.looking_for', :tag_link => tag_link).html_safe
-      end
+    content_tag('small') do
+      t('people.index.looking_for', :tag_link => tag_link).html_safe
     end
   end
 

app/views/invitations/new.html.haml

-.span-15.last
-  .span-3
-    .icons-monotone_email_letter_round
+#paste_link
+  = t('.paste_link')
+  %span#codes_left
+    = '(' + t('.codes_left', :count => @invite_code.count) + ')'
+.form-horizontal
+  .control-group
+    .controls
+      = invite_link(@invite_code)
 
-  .span-12.last
-    %h2
-      = t('.invite_someone_to_join')
-      %br
-  .span-7.append-1.last
-    %b= t('.paste_link')
-    %br
-    %br
-    = invite_link(@invite_code)
-    = t('.codes_left', :count => @invite_code.count)
-    %br
-    %br
-    #email_invitation
-
-      = form_tag new_user_invitation_path  do
-        %h4
-          = t('email')
+#email_invitation
+  = form_tag new_user_invitation_path, :class => 'form-horizontal' do
+    
+    .control-group
+      %label.control-label{ :for => 'email_inviter_emails' }
+        = t('email')
+      .controls
         = text_field_tag 'email_inviter[emails]', @invalid_emails, :title => t('.comma_separated_plz'), :placeholder => 'foo@bar.com, max@foo.com...'
-        %p
+        #already_sent
           = t('invitations.create.note_already_sent', :emails => @valid_emails) unless @valid_emails.empty?
-        %br
-
-        %h4
-          = t('.language')
+    
+    .control-group
+      %label.control-label{ :for => 'email_inviter_locale' }
+        = t('.language')
+      .controls
         = select_tag('email_inviter[locale]',  options_from_collection_for_select(available_language_options, "second", "first", :selected => current_user.language))
-
-        %br
-
-        %p
-          = submit_tag t('.send_an_invitation'), :disable_with => t('.sending_invitation')
+    
+    .control-group
+      .controls
+        = submit_tag t('.send_an_invitation'), :class => 'btn btn-primary creation', :disable_with => t('.sending_invitation')

app/views/invitations/new_blueprint.html.haml

+.span-15.last
+  .span-3
+    .icons-monotone_email_letter_round
+
+  .span-12.last
+    %h2
+      = t('invitations.new.invite_someone_to_join')
+      %br
+  .span-7.append-1.last
+    %b= t('invitations.new.paste_link')
+    %br
+    %br
+    = invite_link(@invite_code)
+    = t('invitations.new.codes_left', :count => @invite_code.count)
+    %br
+    %br
+    #email_invitation
+
+      = form_tag new_user_invitation_path  do
+        %h4
+          = t('email')
+        = text_field_tag 'email_inviter[emails]', @invalid_emails, :title => t('invitations.new.comma_separated_plz'), :placeholder => 'foo@bar.com, max@foo.com...'
+        %p
+          = t('invitations.create.note_already_sent', :emails => @valid_emails) unless @valid_emails.empty?
+        %br
+
+        %h4
+          = t('invitaitons.new.language')
+        = select_tag('email_inviter[locale]',  options_from_collection_for_select(available_language_options, "second", "first", :selected => current_user.language))
+
+        %br
+
+        %p
+          = submit_tag t('invitations.new.send_an_invitation'), :disable_with => t('invitations.new.sending_invitation')

app/views/people/_relationship_action.haml

 - unless person == current_user.person
   - contact = current_user.contacts.find_by_person_id(person.id)
   - contact ||= Contact.new(:person => person)
-  = aspect_membership_dropdown(contact, person, 'left')
+  = aspect_membership_dropdown(contact, person, 'right')
 -else
   = t('people.person.thats_you')

app/views/people/index.html.haml

@@ -9,38 +9,45 @@
   = javascript_include_tag :people
   = javascript_include_tag 'contact-list'
 
-#section_header
-  = search_header     
-.span-15.append-1
-  #people_stream.stream
-    - if @hashes.empty?
-      - if @background_query.present?
-
-        / TODO this is gross, and should be extracted!
-        :javascript
-          $(document).ready( function() {
-            List.startSearchDelay('#{@background_query}')
-          } );
-
-        %p
-          = t('.searching')
-          = image_tag('static-loader.png', :class => 'loader')
-      - else
+.bootstrap_header_padding
+
+.container-fluid#people_search
+  .row-fluid
+    .page-header
+      = search_header
+  .row-fluid
+    .span8
+      #people_stream.stream
+        - if @hashes.empty?
+          - if @background_query.present?
+
+            / TODO this is gross, and should be extracted!
+            :javascript
+              $(document).ready( function() {
+                List.startSearchDelay('#{@background_query}')
+              } );
+
+            %p
+              = t('.searching')
+              = image_tag('static-loader.png', :class => 'loader')
+          - else
+            %p
+              = t('.no_one_found')
+        - else
+          - for hash in @hashes
+            = render :partial => 'people/person', :locals => hash
+
+          = will_paginate(@people)
+
+        %a{:id=>"back-to-top", :title=>"#{t('layouts.application.back_to_top')}", :href=>"#"}
+          ⇧
+
+    .span4
+      - if AppConfig.settings.invitations.open?
+        %h4
+          = t('.couldnt_find_them')
         %p
-          = t('.no_one_found')
-    - else
-      - for hash in @hashes
-        = render :partial => 'people/person', :locals => hash
-
-      = will_paginate(@people)
-
-- if AppConfig.settings.invitations.open?
-  .span-8.last
-    %h4
-      = t('.couldnt_find_them')
-    %p
-      = t('.search_handle')
-    %h4
-      = t('.send_invite')
-    = render "shared/invitations"
-
+          = t('.search_handle')
+        %h4
+          = t('.send_invite')
+        = render "shared/invitations"

app/views/shared/_invitations.haml

 = t('.share_this')
 = invite_link(current_user.invitation_code)
-= link_to t('.by_email'), new_user_invitation_path, :title => t('.invite_someone'), :rel => 'facebox'
+.btn.btn-link{ 'data-toggle' => 'modal', 'data-target' => '#invitationsModal'}
+  = t('.by_email')
+
+= render 'shared/modal',
+    :path => new_user_invitation_path, 
+    :id => 'invitationsModal',
+    :title => t('invitations.new.invite_someone_to_join')

app/views/shared/_invitations_blueprint.haml

+= t('shared.invitations.share_this')
+= invite_link(current_user.invitation_code)
+= link_to t('shared.invitations.by_email'), new_user_invitation_path(blueprint: true), :title => t('shared.invitations.invite_someone'), :rel => 'facebox'

app/views/shared/_modal.haml

+.modal.hide.fade{ :id => id, 
+                  :tabindex => '-1', 
+                  :role => 'dialog', 
+                  'aria-labelledby' => "#{id}Label", 
+                  'aria-hidden' => 'true', 
+                  'data-remote' => path}
+  .modal-header
+    %button.close{:type => 'button', 'data-dismiss' => 'modal', 'aria-hidden' => 'true' }
+      ×
+    %h3{ :id => "#{id}Label"}
+      = title
+  .modal-body

app/views/shared/_right_sections.html.haml

@@ -10,7 +10,7 @@
       %h5.title-header
         = t('shared.invitations.invite_your_friends')
     .content
-      = render "shared/invitations"
+      = render "shared/invitations_blueprint"
 
 .section
   .title