diff --git a/Changelog.md b/Changelog.md index 27a231d45..8d991089b 100644 --- a/Changelog.md +++ b/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) diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index ec6219e7c..05056e4d5 100644 --- a/app/assets/javascripts/main.js +++ b/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 diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index 36243e1ce..d0f0ef083 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/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 diff --git a/app/assets/stylesheets/invitations.css.scss b/app/assets/stylesheets/invitations.css.scss new file mode 100644 index 000000000..b83677a66 --- /dev/null +++ b/app/assets/stylesheets/invitations.css.scss @@ -0,0 +1,23 @@ +#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; + } + } +} diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss index 1292f4e9b..533c6bc3e 100644 --- a/app/assets/stylesheets/new-templates.css.scss +++ b/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'; diff --git a/app/assets/stylesheets/new_styles/_base.scss b/app/assets/stylesheets/new_styles/_base.scss index 93ae671ba..5c3eee467 100644 --- a/app/assets/stylesheets/new_styles/_base.scss +++ b/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 { diff --git a/app/assets/stylesheets/people.css.scss b/app/assets/stylesheets/people.css.scss new file mode 100644 index 000000000..682d412a9 --- /dev/null +++ b/app/assets/stylesheets/people.css.scss @@ -0,0 +1,17 @@ +#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; } + } +} diff --git a/app/assets/stylesheets/tag.css.scss b/app/assets/stylesheets/tag.css.scss new file mode 100644 index 000000000..3c5b54cc5 --- /dev/null +++ b/app/assets/stylesheets/tag.css.scss @@ -0,0 +1,22 @@ +.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; } + } +} diff --git a/app/controllers/invitations_controller.rb b/app/controllers/invitations_controller.rb index 4bbd21c94..ffcae4a0c 100644 --- a/app/controllers/invitations_controller.rb +++ b/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 diff --git a/app/controllers/people_controller.rb b/app/controllers/people_controller.rb index 34ee2129a..1616c80f2 100644 --- a/app/controllers/people_controller.rb +++ b/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] diff --git a/app/helpers/aspect_global_helper.rb b/app/helpers/aspect_global_helper.rb index 34641505f..c525ebf9b 100644 --- a/app/helpers/aspect_global_helper.rb +++ b/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) diff --git a/app/helpers/tags_helper.rb b/app/helpers/tags_helper.rb index 32e4b3de6..a01acd361 100644 --- a/app/helpers/tags_helper.rb +++ b/app/helpers/tags_helper.rb @@ -1,10 +1,8 @@ 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 diff --git a/app/views/invitations/new.html.haml b/app/views/invitations/new.html.haml index 5b8eb88a5..ff972bf5a 100644 --- a/app/views/invitations/new.html.haml +++ b/app/views/invitations/new.html.haml @@ -1,34 +1,29 @@ -.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') diff --git a/app/views/invitations/new_blueprint.html.haml b/app/views/invitations/new_blueprint.html.haml new file mode 100644 index 000000000..ac9cc323f --- /dev/null +++ b/app/views/invitations/new_blueprint.html.haml @@ -0,0 +1,34 @@ +.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') diff --git a/app/views/people/_relationship_action.haml b/app/views/people/_relationship_action.haml index 98119128c..8a73875b5 100644 --- a/app/views/people/_relationship_action.haml +++ b/app/views/people/_relationship_action.haml @@ -1,6 +1,6 @@ - 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') diff --git a/app/views/people/index.html.haml b/app/views/people/index.html.haml index 308178bea..9ede109c1 100644 --- a/app/views/people/index.html.haml +++ b/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? +.bootstrap_header_padding - / TODO this is gross, and should be extracted! - :javascript - $(document).ready( function() { - List.startSearchDelay('#{@background_query}') - } ); +.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('.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) - -- 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" diff --git a/app/views/shared/_invitations.haml b/app/views/shared/_invitations.haml index b903a0e62..9c2a51a9b 100644 --- a/app/views/shared/_invitations.haml +++ b/app/views/shared/_invitations.haml @@ -1,3 +1,9 @@ = 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') diff --git a/app/views/shared/_invitations_blueprint.haml b/app/views/shared/_invitations_blueprint.haml new file mode 100644 index 000000000..dbdd24a61 --- /dev/null +++ b/app/views/shared/_invitations_blueprint.haml @@ -0,0 +1,3 @@ += 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' diff --git a/app/views/shared/_modal.haml b/app/views/shared/_modal.haml new file mode 100644 index 000000000..a102ddfcd --- /dev/null +++ b/app/views/shared/_modal.haml @@ -0,0 +1,12 @@ +.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 diff --git a/app/views/shared/_right_sections.html.haml b/app/views/shared/_right_sections.html.haml index 3a9bea11e..6e08a54c2 100644 --- a/app/views/shared/_right_sections.html.haml +++ b/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