diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss index 892571d67..32d257b56 100644 --- a/app/assets/stylesheets/_application.scss +++ b/app/assets/stylesheets/_application.scss @@ -26,6 +26,9 @@ /* font overrides */ @import 'typography'; +// layout +@import 'sidebar'; + /* login */ @import 'login'; @import 'registration'; diff --git a/app/assets/stylesheets/base.scss b/app/assets/stylesheets/base.scss index dd7ed1791..0993dc8a9 100644 --- a/app/assets/stylesheets/base.scss +++ b/app/assets/stylesheets/base.scss @@ -10,6 +10,24 @@ body { > .container-fluid { max-width: 100%; } } +// These names are generated by a rails controller +// scss-lint:disable SelectorFormat +.page-contacts, +.page-conversations, +.page-notifications, +.page-people.action-show, +.page-people.action-contacts, +.page-photos, +.page-profiles.action-edit, +.page-services.action-index, +.page-streams, +.page-user_applications, +.page-users.action-edit, +.page-users.action-privacy_settings { + background-color: $sidebars-background; +} +// scss-lint:enable SelectorFormat + // Overflow h1, h2, diff --git a/app/assets/stylesheets/bootstrap-variables.scss b/app/assets/stylesheets/bootstrap-variables.scss index c9a41ba94..bca512cff 100644 --- a/app/assets/stylesheets/bootstrap-variables.scss +++ b/app/assets/stylesheets/bootstrap-variables.scss @@ -668,9 +668,9 @@ $navbar-collapse-max-height: 480px; // //## //** Background color on `.list-group-item` -$list-group-bg: $sidebars-background; +$list-group-bg: $white; //** `.list-group-item` border color -$list-group-border: $border-grey; +$list-group-border: transparent; //** List group border radius $list-group-border-radius: 0; diff --git a/app/assets/stylesheets/contacts.scss b/app/assets/stylesheets/contacts.scss index f466d5519..31e7c1151 100644 --- a/app/assets/stylesheets/contacts.scss +++ b/app/assets/stylesheets/contacts.scss @@ -1,21 +1,29 @@ +.page-contacts { + .sidebar { padding-bottom: 10px; } + + .header { + border-bottom: 1px solid $border-grey; + min-height: 55px; + form { margin: 0; } + input, + .btn { + margin-bottom: 11px; + margin-top: 11px; + } + + .aspect-controls { margin: 7px -10px 7px 0; } + } +} + #contacts_container { #people_stream.contacts { .header { - border-bottom: 1px solid $border-grey; - margin-top: 10px; - min-height: 53px; #change_aspect_name { cursor: pointer; } #aspect_name_form { display: none; - form { margin: 0px; } - input { - margin-bottom: 0px; - margin-top: 10px; - } - .btn { margin-top: 10px; } } #contact_list_search { - margin: 6px 30px 0 0; + margin: 11px 30px 0 0; width: 150px; &:focus { width: 250px; } } diff --git a/app/assets/stylesheets/conversations.scss b/app/assets/stylesheets/conversations.scss index 508209095..01540628e 100644 --- a/app/assets/stylesheets/conversations.scss +++ b/app/assets/stylesheets/conversations.scss @@ -1,22 +1,8 @@ .page-conversations { - background-color: $sidebars-background; + .framed-content { padding: 0 10px 10px; } + .sidebar-header .pull-right { margin-top: 12px; } - .left-pane, - .new-conversation, - .stream_container .conversation-participants { - background-color: $white; - border: 1px solid $light-grey; - box-shadow: $card-shadow; - margin-top: -10px; - } - - .new-conversation, - .left-pane-header, - .stream_container .conversation-participants { - padding: 10px; - } - - .left-pane { + .sidebar { margin-bottom: 50px; .pagination { margin: 5px; } } diff --git a/app/assets/stylesheets/notifications.scss b/app/assets/stylesheets/notifications.scss index 48c7a1b95..f12336584 100644 --- a/app/assets/stylesheets/notifications.scss +++ b/app/assets/stylesheets/notifications.scss @@ -2,27 +2,22 @@ .stream { .header { border-bottom: 1px solid $border-grey; - .btn-toolbar { margin: 11px 0; } margin-bottom: 10px; } - .year_container { margin-top: 40px; } + .btn-toolbar { margin: 11px 0; } + .year { background-color: $white; color: $text-grey; font-size: 40px; line-height: 40px; - margin-bottom: -20px; + margin-bottom: 20px; + margin-top: 40px; text-align: center; } - .year_container + .day_group { - border-top: 1px solid $border-grey; - padding-top: 60px; - } - .day_group + .day_group { - border-top: 1px dashed $border-grey; margin-top: 10px; padding-top: 10px; } diff --git a/app/assets/stylesheets/people.scss b/app/assets/stylesheets/people.scss index 213598372..66dcb7082 100644 --- a/app/assets/stylesheets/people.scss +++ b/app/assets/stylesheets/people.scss @@ -31,11 +31,12 @@ #blocked_people { .blocked_person { border-bottom: 1px solid $border-grey; - padding: 10px; - margin: 0px; font-size: 13px; line-height: 16px; + margin: 0; min-height: 50px; + padding: 10px 0; + &:last-of-type { border-bottom: 0; } .avatar { width: 50px; height: 50px; diff --git a/app/assets/stylesheets/profile.scss b/app/assets/stylesheets/profile.scss index 590a979bd..727c99fee 100644 --- a/app/assets/stylesheets/profile.scss +++ b/app/assets/stylesheets/profile.scss @@ -1,7 +1,3 @@ -body.page-people.action-show, body.page-people.action-contacts { - background-color: $sidebars-background; -} - #profile_container { .profile_header { margin-bottom: 15px; @@ -109,11 +105,8 @@ body.page-people.action-show, body.page-people.action-contacts { } #profile { - background-color: $white; padding: 20px; - margin-top: -10px; margin-bottom: 35px; - box-shadow: $card-shadow; #profile_photo { margin-top: 10px; diff --git a/app/assets/stylesheets/settings.scss b/app/assets/stylesheets/settings.scss index c6bcf19f5..e51edfd36 100644 --- a/app/assets/stylesheets/settings.scss +++ b/app/assets/stylesheets/settings.scss @@ -1,4 +1,19 @@ // Specific styles for the settings pages (profile, user account, privacy, services) + +// These names are generated by a rails controller +// scss-lint:disable SelectorFormat +.page-profiles.action-edit, +.page-services.action-index, +.page-user_applications, +.page-users.action-edit, +.page-users.action-privacy_settings { + .framed-content { + padding-left: 10px; + padding-right: 10px; + } +} +// scss-lint:enable SelectorFormat + .enclosed-checkbox label { margin-bottom: 0; } diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/sidebar.scss new file mode 100644 index 000000000..9242840e6 --- /dev/null +++ b/app/assets/stylesheets/sidebar.scss @@ -0,0 +1,21 @@ +.sidebar, +.framed-content { + background-color: $white; + border: 1px solid $light-grey; + box-shadow: $card-shadow; + margin-top: -10px; + padding-top: 10px; + + .header, + .sidebar-header { + padding-left: 10px; + padding-right: 10px; + + h3 { + line-height: 40px; + margin: 7px 0; + } + } + + .list-group { margin-bottom: 0; } +} diff --git a/app/assets/stylesheets/stream.scss b/app/assets/stylesheets/stream.scss index a1f98a137..355ff8e9a 100644 --- a/app/assets/stylesheets/stream.scss +++ b/app/assets/stylesheets/stream.scss @@ -1,7 +1,3 @@ -body.page-streams, body.page-photos { - background-color: $sidebars-background; -} - .stream_container { #publisher { margin-bottom: 15px; diff --git a/app/assets/templates/contact_tpl.jst.hbs b/app/assets/templates/contact_tpl.jst.hbs index 9dd218f12..beddbdc3b 100644 --- a/app/assets/templates/contact_tpl.jst.hbs +++ b/app/assets/templates/contact_tpl.jst.hbs @@ -1,4 +1,4 @@ -
+
{{{aspectMembershipIndicator this in_aspect}}}
diff --git a/app/views/api/openid_connect/user_applications/index.html.haml b/app/views/api/openid_connect/user_applications/index.html.haml index a6ed67d69..667abc218 100644 --- a/app/views/api/openid_connect/user_applications/index.html.haml +++ b/app/views/api/openid_connect/user_applications/index.html.haml @@ -4,9 +4,11 @@ .container-fluid.applications-page .row .col-md-3 - = render "shared/settings_nav" + .sidebar + = render "shared/settings_nav" .col-md-9 - %h3= t(".title") - .row - .col-md-12 - = render "add_remove_applications" + .framed-content + %h3= t(".title") + .row + .col-md-12 + = render "add_remove_applications" diff --git a/app/views/contacts/_header.html.haml b/app/views/contacts/_header.html.haml index cec592c66..56107363e 100644 --- a/app/views/contacts/_header.html.haml +++ b/app/views/contacts/_header.html.haml @@ -1,6 +1,6 @@ -.header +.header.clearfix - if @aspect - #aspect_controls.pull-right + .aspect-controls.pull-right#aspect_controls - if @aspect.contacts.size > 0 && @aspect.contacts.size < 20 = start_a_conversation_link(@aspect, @aspect.contacts.size) @@ -19,7 +19,7 @@ = link_to @aspect, method: "delete", data: { confirm: t("aspects.edit.confirm_remove_aspect") }, class: "delete contacts_button", id: "delete_aspect" do %i.entypo-trash.contacts-header-icon{title: t("delete")} - .pull-right + .pull-right.contact-list-search = search_field_tag :contact_search, "", id: "contact_list_search", class: "search-query form-control", placeholder: t("contacts.index.user_search") %h3 %span#aspect_name diff --git a/app/views/contacts/_sidebar.html.haml b/app/views/contacts/_sidebar.html.haml index 5d42397e9..15ec29812 100644 --- a/app/views/contacts/_sidebar.html.haml +++ b/app/views/contacts/_sidebar.html.haml @@ -1,5 +1,6 @@ -%h3 - = t("contacts.index.title") +.sidebar-header.clearfix + %h3 + = t("contacts.index.title") = render "contacts/aspect_listings" %hr - if AppConfig.settings.community_spotlight.enable? diff --git a/app/views/contacts/index.html.haml b/app/views/contacts/index.html.haml index 365537d3d..ebc6d2e43 100644 --- a/app/views/contacts/index.html.haml +++ b/app/views/contacts/index.html.haml @@ -4,10 +4,11 @@ .container-fluid#contacts_container .row .col-md-3 - = render 'contacts/sidebar' + .sidebar + = render "contacts/sidebar" .col-md-9 - #people_stream.stream.contacts + .stream.contacts.framed-content#people_stream = render 'contacts/header' - if @contacts_size > 0 diff --git a/app/views/conversations/_show.haml b/app/views/conversations/_show.haml index 149afc0db..bb6c3361f 100644 --- a/app/views/conversations/_show.haml +++ b/app/views/conversations/_show.haml @@ -2,7 +2,7 @@ -# licensed under the Affero General Public License version 3 or later. See -# the COPYRIGHT file. -.conversation-participants +.conversation-participants.framed-content .control-icons.pull-right - if conversation.participants.count > 1 = link_to content_tag(:i, nil, class: "entypo-cross"), diff --git a/app/views/conversations/index.haml b/app/views/conversations/index.haml index 2b04a898d..47c1e76d6 100644 --- a/app/views/conversations/index.haml +++ b/app/views/conversations/index.haml @@ -7,12 +7,12 @@ .container-fluid#conversations_container .row .col-md-4 - .left-pane#left_pane - .left-pane-header#left_pane_header + .sidebar#left_pane + .sidebar-header.clearfix#left_pane_header + .pull-right + = link_to t(".new_conversation"), conversations_path, class: "btn btn-default" %h3 - .pull-right{ class: ("hidden" unless @visibilities)} - = link_to t('.new_conversation'), conversations_path, class: 'btn btn-default' - = t('.inbox') + = t(".inbox") .conversation-inbox#conversation_inbox .stream.conversations @@ -34,7 +34,7 @@ - else .stream_container.hidden #conversation_show - #conversation_new + .framed-content#conversation_new .new-conversation %h3.text-center = t("conversations.index.new_conversation") diff --git a/app/views/conversations/show.js.erb b/app/views/conversations/show.js.erb index 70e2a0ed5..c07578ee4 100644 --- a/app/views/conversations/show.js.erb +++ b/app/views/conversations/show.js.erb @@ -1,7 +1,6 @@ if($('.stream_container').hasClass('hidden')){ $('#conversation_new').hide(); $('.stream_container').removeClass('hidden'); - $('#left_pane_header .pull-right').removeClass('hidden'); } $('#conversation_show').html("<%= escape_javascript(render('conversations/show', :conversation => @conversation)) %>"); diff --git a/app/views/notifications/index.html.haml b/app/views/notifications/index.html.haml index 7722fbcf4..6acc3fa98 100644 --- a/app/views/notifications/index.html.haml +++ b/app/views/notifications/index.html.haml @@ -1,68 +1,79 @@ .container-fluid#notifications_container .row .col-md-3 - %h3 - = t('.notifications') - .list-group - %a.list-group-item{class: ('active' unless params[:type] && @grouped_unread_notification_counts.has_key?(params[:type])), href: '/notifications' + (params[:show] == 'unread' ? '?show=unread' : '') } - %span.pull-right.badge{class: ("hidden" unless @unread_notification_count > 0)} - = @unread_notification_count - = t('.all_notifications') - - @grouped_unread_notification_counts.each do |key, count| - %a.list-group-item{class: ('active' if params[:type] == key), data: { type: key }, href: '/notifications?type=' + key + (params[:show] == 'unread' ? '&show=unread' : '') } - %span.pull-right.badge{class: ("hidden" unless count > 0)} - = count - - case key - - when 'also_commented', 'comment_on_post' - %i.entypo-comment - - when 'liked' - %i.entypo-heart - - when 'mentioned' - %span.mentionIcon - @ - - when 'reshared' - %i.entypo-reshare - - when 'started_sharing' - %i.entypo-add-user - = t('.'+key) + .sidebar + .sidebar-header.clearfix + %h3 + = t(".notifications") + .list-group + %a.list-group-item{href: "/notifications" + (params[:show] == "unread" ? "?show=unread" : ""), + class: ("active" unless params[:type] && @grouped_unread_notification_counts.has_key?(params[:type]))} + %span.pull-right.badge{class: ("hidden" unless @unread_notification_count > 0)} + = @unread_notification_count + = t(".all_notifications") + - @grouped_unread_notification_counts.each do |key, count| + %a.list-group-item{class: ("active" if params[:type] == key), + data: {type: key}, + href: "/notifications?type=" + key + (params[:show] == "unread" ? "&show=unread" : "")} + %span.pull-right.badge{class: ("hidden" unless count > 0)} + = count + - case key + - when "also_commented", "comment_on_post" + %i.entypo-comment + - when "liked" + %i.entypo-heart + - when "mentioned" + %span.mentionIcon + @ + - when "reshared" + %i.entypo-reshare + - when "started_sharing" + %i.entypo-add-user + = t("." + key) .col-md-9.stream.notifications - .row.header - .col-md-12 - .btn-toolbar.pull-right - .btn-group - %a.btn.btn-default{class: ('active' unless params[:show] == 'unread'), href: '/notifications' + (params[:type] ? '?type=' + params[:type] : '') } - = t('.show_all') - %a.btn.btn-default{class: ('active' if params[:show] == 'unread'), href: '/notifications?show=unread' + (params[:type] ? '&type=' + params[:type] : '') } - = t('.show_unread') - %a.btn.btn-default.btn-group{href: read_all_notifications_path(type: params[:type] ),class: ('disabled' unless @unread_notification_count > 0)} - -if params[:type] - = t('.mark_all_shown_as_read') - -else - = t('.mark_all_as_read') - - if @group_days.length > 0 - - year = nil - - @group_days.each do |date, notes| - - if display_year?(year, date) - - year = the_year(date) - .row.year_container - .col-md-4.col-md-offset-4.year= year + .framed-content + .row + .col-md-12 + .header.clearfix + .btn-toolbar.pull-right + .btn-group + %a.btn.btn-default{class: ("active" unless params[:show] == "unread"), + href: "/notifications" + (params[:type] ? "?type=" + params[:type] : "")} + = t(".show_all") + %a.btn.btn-default{class: ("active" if params[:show] == "unread"), + href: "/notifications?show=unread" + (params[:type] ? "&type=" + params[:type] : "")} + = t(".show_unread") + %a.btn.btn-default.btn-group{href: read_all_notifications_path(type: params[:type]), + class: ("disabled" unless @unread_notification_count > 0)} + - if params[:type] + = t(".mark_all_shown_as_read") + - else + = t(".mark_all_as_read") + - if @group_days.length > 0 + - year = nil + - @group_days.each do |date, notes| + - if display_year?(year, date) + - year = the_year(date) + .row.year_container + .col-md-4.col-md-offset-4.year= year - .day_group.row - .date.col-md-2 - .day= the_day(date) - .month= the_month(date) + .day_group.row + .date.col-md-2 + .day= the_day(date) + .month= the_month(date) - .notifications_for_day.col-md-10 - - notes.each do |note| - = render partial: 'notifications/notification', locals: { note: note } + .notifications_for_day.col-md-10 + - notes.each do |note| + = render partial: "notifications/notification", locals: {note: note} - = will_paginate @notifications, renderer: WillPaginate::ActionView::BootstrapLinkRenderer + .center-block.text-center + = will_paginate @notifications, renderer: WillPaginate::ActionView::BootstrapLinkRenderer - - else - .no_notifications.well - %h4 - = t('.no_notifications') + - else + .no_notifications.well + %h4 + = t(".no_notifications") :javascript $(document).ready(function(){ diff --git a/app/views/people/show.html.haml b/app/views/people/show.html.haml index d980b2281..bfb10872c 100644 --- a/app/views/people/show.html.haml +++ b/app/views/people/show.html.haml @@ -14,7 +14,7 @@ .container-fluid#profile_container .row .col-md-3 - .profile-sidebar#profile + .sidebar.profile-sidebar#profile -# here be JS .col-md-9 diff --git a/app/views/profiles/_edit_private.haml b/app/views/profiles/_edit_private.haml index bc76b868a..42e29375a 100644 --- a/app/views/profiles/_edit_private.haml +++ b/app/views/profiles/_edit_private.haml @@ -65,5 +65,5 @@ .small-horizontal-spacer -.submit_block +.submit_block.form-group = yield(:submit_block) diff --git a/app/views/profiles/edit.haml b/app/views/profiles/edit.haml index 844af392b..8eee45d2a 100644 --- a/app/views/profiles/edit.haml +++ b/app/views/profiles/edit.haml @@ -5,12 +5,14 @@ .container-fluid .row .col-md-3 - = render "shared/settings_nav" + .sidebar + = render "shared/settings_nav" .col-md-9 - - content_for :submit_block do - = link_to t("cancel"), local_or_remote_person_path(current_user.person), class: "btn btn-default" - = submit_tag t(".update_profile"), class: "btn btn-primary pull-right", id: "update_profile" + .framed-content + - content_for :submit_block do + = link_to t("cancel"), local_or_remote_person_path(current_user.person), class: "btn btn-default" + = submit_tag t(".update_profile"), class: "btn btn-primary pull-right", id: "update_profile" - = form_tag profile_path, method: :put, multipart: true, id: "update_profile_form" do - = render "edit_public", profile: @profile, aspect: @aspect, person: @person, mobile: false - = render "edit_private", person: @person, profile: @profile, aspect: @aspect, step: @step + = form_tag profile_path, method: :put, multipart: true, id: "update_profile_form" do + = render "edit_public", profile: @profile, aspect: @aspect, person: @person, mobile: false + = render "edit_private", person: @person, profile: @profile, aspect: @aspect, step: @step diff --git a/app/views/services/index.html.haml b/app/views/services/index.html.haml index 8afad2b83..3828b102f 100644 --- a/app/views/services/index.html.haml +++ b/app/views/services/index.html.haml @@ -8,14 +8,16 @@ .container-fluid .row .col-md-3 - = render "shared/settings_nav" + .sidebar + = render "shared/settings_nav" .col-md-9 - %h3= t(".title") - .row - .col-md-12 - = render "add_remove_services" + .framed-content + %h3= t(".title") + .row + .col-md-12 + = render "add_remove_services" - .row - .col-md-12 - %p - = t(".services_explanation") + .row + .col-md-12 + %p + = t(".services_explanation") diff --git a/app/views/shared/_settings_nav.haml b/app/views/shared/_settings_nav.haml index 561a49920..7c4b74460 100644 --- a/app/views/shared/_settings_nav.haml +++ b/app/views/shared/_settings_nav.haml @@ -1,5 +1,5 @@ #section_header - %h2 + %h3.sidebar-header = t("settings") .list-group#settings_nav = link_to t("profile"), edit_profile_path, diff --git a/app/views/users/edit.html.haml b/app/views/users/edit.html.haml index 3c56ff7c8..0f883935f 100644 --- a/app/views/users/edit.html.haml +++ b/app/views/users/edit.html.haml @@ -1,6 +1,8 @@ .container-fluid .row .col-md-3 - = render "shared/settings_nav" + .sidebar + = render "shared/settings_nav" .col-md-9 - = render "edit" + .framed-content + = render "edit" diff --git a/app/views/users/privacy_settings.html.haml b/app/views/users/privacy_settings.html.haml index ef4f865a4..fc0fa4c8c 100644 --- a/app/views/users/privacy_settings.html.haml +++ b/app/views/users/privacy_settings.html.haml @@ -8,6 +8,8 @@ .container-fluid .row .col-md-3 - = render "shared/settings_nav" + .sidebar + = render "shared/settings_nav" .col-md-9 - = render "privacy_settings" + .framed-content + = render "privacy_settings" diff --git a/features/step_definitions/aspects_steps.rb b/features/step_definitions/aspects_steps.rb index f9126e628..0cfeb8242 100644 --- a/features/step_definitions/aspects_steps.rb +++ b/features/step_definitions/aspects_steps.rb @@ -98,7 +98,7 @@ When /^I drag "([^"]*)" (up|down)$/ do |aspect_name, direction| native_aspect = aspect.base.native native_target = target.base.native mouse.down native_aspect - mouse.move_to native_target, native_target.size.width / 2, 0 + mouse.move_to native_target sleep 1 mouse.up expect(page).to have_no_css "#aspect_nav .ui-sortable.syncing"