Commit 5f446330 authored by Fla's avatar Fla Committed by Fla

collapse the sidebars to the side of the screen even on big screens

Drop right side bar, move content to left side bar

Move user avatar and name from the left nav bar to the left of the publisher
parent 49b71d30
......@@ -42,7 +42,7 @@ public/500.html
app/assets/images/branding-*.png
app/assets/images/branding/logos-*.png
app/assets/images/icons-*.png
app/assets/images/social_media_logos-*.png
app/assets/images/social-media-logos-*.png
# Documentation
.yardoc/
......
......@@ -104,9 +104,9 @@ var app = {
evt.preventDefault();
var link = $(this);
if(link.data("stream-title") && link.data("stream-title").length) {
$(".stream_title").text(link.data("stream-title"));
$(".stream-title").text(link.data("stream-title"));
} else {
$(".stream_title").text(link.text());
$(".stream-title").text(link.text());
}
$("html, body").animate({scrollTop: 0});
......
......@@ -59,7 +59,7 @@ app.views.AspectsList = app.views.Base.extend({
},
updateStreamTitle: function() {
$('.stream_title').text(this.collection.toSentence());
$(".stream-title").text(this.collection.toSentence());
},
updateAspectList: function() {
......
......@@ -87,9 +87,6 @@
@import 'oembed';
@import 'post-content';
/* right bar */
@import 'navbar_right';
/* contacts */
@import 'contacts';
@import 'navbar_left';
......
......@@ -40,6 +40,7 @@
&:hover, &:hover a, &:hover [class^="entypo"] {
background-color: $blue;
border-color: $blue;
color: $white;
}
}
......@@ -49,9 +50,11 @@
li.selected > a.hoverable {
color: $white;
background: $gray;
border-color: $gray;
}
#aspects_list, #tags_list {
#aspects_list,
#tags_list {
background: $left-navbar-drawer-background;
li { padding: 0; }
.entypo-check { visibility: hidden; }
......@@ -71,30 +74,6 @@
.hoverable:hover > .action { visibility: visible; }
}
#home_user_badge {
min-height: 90px;
padding: 20px;
margin: 0 -15px;
.avatar {
float: left;
height: 50px;
width: 50px;
}
h4 {
margin: 0 0 0 60px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 25px;
a {
color: $black;
font-weight: normal;
}
}
}
#tags_list {
#new_tag_following {
padding: 10px 20px 10px 30px;
......@@ -135,4 +114,78 @@
}
/* ---- end override app/stylesheets/vendor/autoSuggest.css ---- */
}
.info-bar {
margin-top: 25px;
.section {
margin-bottom: 20px;
> .title {
border-bottom: 1px solid $border-grey;
padding-bottom: 5px;
h5 {
color: $text-dark-grey;
font-size: $font-size-base;
margin: 0;
}
}
.content {
color: $text-grey;
font-size: $font-size-small;
line-height: 18px;
padding: 10px 0;
p,
ul {
margin: 0;
}
ul {
margin-bottom: 5px;
padding-left: 0;
li { list-style: none; }
}
.btn-link {
font-size: $font-size-small;
padding-left: 0;
}
> #invite_code {
box-sizing: border-box;
font-size: $font-size-small;
height: 30px;
width: 100%;
}
> .right-service-icons {
padding: 10px {
bottom: 0;
}
text-align: center;
.social-media-logos-facebook-24x24,
.social-media-logos-twitter-24x24,
.social-media-logos-tumblr-24x24,
.social-media-logos-wordpress-24x24 {
height: 24px;
width: 24px;
}
a {
display: inline-block;
}
}
.stream-faces {
display: flex;
flex-flow: row wrap;
img { margin: 1px; }
}
}
}
}
}
.right-sidebar-fixed-background {
height: 100%;
border-left: 1px solid $light-grey;
background: $sidebars-background;
position: fixed;
right: 0;
}
.right-sidebar-fixed-sub-background {
height: 100%;
background: $sidebars-sub-background;
position: fixed;
right: 0;
}
.right-sidebar-padder {
max-width: 400px;
}
.rightbar {
padding-top: 20px;
border-left: 1px solid $light-grey;
background: $sidebars-background;
.section {
margin-bottom: 20px;
> .title {
border-bottom: 1px solid $border-grey;
padding-bottom: 5px;
&.no_icon { padding-left: 8px; }
h5 {
color: $text-dark-grey;
font-weight: normal;
font-size: $font-size-base;
margin: 0;
}
}
.content {
color: $text-grey;
font-size: $font-size-small;
line-height: 18px;
padding: 10px 0;
p, ul { margin: 0; }
ul {
margin-bottom: 5px;
padding-left: 0;
li { list-style: none; }
}
.btn-link {
font-size: $font-size-small;
padding-left: 0;
}
& > #invite_code {
box-sizing: border-box;
font-size: $font-size-small;
height: 30px;
width: 100%;
}
& > #right_service_icons {
text-align: center;
padding: 10px {
bottom: 0;
};
.social_media_logos-facebook-24x24,
.social_media_logos-twitter-24x24,
.social_media_logos-tumblr-24x24,
.social_media_logos-wordpress-24x24 {
height: 24px;
width: 24px;
}
a {
display: inline-block;
}
}
}
}
}
@media screen and (min-width: 1200px) {
.right-sidebar-fixed-background {
margin-right: 8.33333%; /* Only for LARGE screens, same as lg-offset-1 class, BS3 does not provide right side offsetting */
}
}
......@@ -2,6 +2,7 @@
z-index: 1;
color: $text-grey;
margin: 0;
margin-bottom: 20px;
&.closed {
#button_container,
......@@ -46,7 +47,7 @@
.service_icon { padding: 6px 5px; }
.btn.btn-link.question_mark:hover .entypo-cog { color: $black; }
.dim { opacity: 0.3; }
.social_media_logos-wordpress-16x16 {
.social-media-logos-wordpress-16x16 {
display: inline-block;
height: 16px;
width: 16px;
......
/* ===== sprites ===== */
@import 'branding/logos/*.png';
@import 'social_media_logos/*.png';
@import 'social-media-logos/*.png';
@include all-logos-sprites;
@include all-social_media_logos-sprites;
@include all-social-media-logos-sprites;
body.page-streams, body.page-photos {
background-color: $sidebars-sub-background;
}
.stream_container {
.stream-title {
margin: 12px 0;
}
}
.main-stream-publisher {
padding: 0;
.avatar {
height: 50px;
width: 50px;
}
#publisher {
margin-bottom: 15px;
margin-left: 65px;
}
.well#ignore-info { text-align: center; }
}
......@@ -19,7 +19,7 @@ module PublisherHelper
maxchar: "#{service.class::MAX_CHARACTERS}",
data: {toggle: "tooltip", placement: "bottom"} do
if service.provider == "wordpress"
content_tag(:span, "", class: "social_media_logos-wordpress-16x16")
content_tag(:span, "", class: "social-media-logos-wordpress-16x16")
else
content_tag(:i, "", class: "entypo-social-#{ service.provider } small")
end
......
......@@ -3,10 +3,14 @@
-# the COPYRIGHT file.
- if user_signed_in? && @person != current_user.person
%h3#aspect_stream_header.stream_title
%h3.stream-title
= stream.title
= render 'publisher/publisher', publisher_aspects_for(stream)
.container-fluid.main-stream-publisher
.pull-left
= owner_image_link
= render "publisher/publisher", publisher_aspects_for(stream)
= render "aspects/no_posts_message"
#gs-shim{:title => popover_with_close_html("3. #{t('.stay_updated')}"), 'data-content' => t('.stay_updated_explanation')}
......
......@@ -11,7 +11,9 @@
%span#publisher-service-icons
- if current_user.services
- for service in current_user.services
= image_tag "social_media_logos/#{service.provider}-32x32.png", title: service.provider.titleize, class: "service_icon dim", id:"#{service.provider}", maxchar: "#{service.class::MAX_CHARACTERS}"
= image_tag "social-media-logos/#{service.provider}-32x32.png",
title: service.provider.titleize, class: "service_icon dim",
id: "#{service.provider}", maxchar: "#{service.class::MAX_CHARACTERS}"
%select{id: "aspect_ids_", class: "form-control", name: "aspect_ids[]"}
%option{value: 'public'}
......
-# Copyright (c) 2010-2011, Diaspora Inc. This file is
-# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file.
.right-sidebar-padder
- if AppConfig.settings.invitations.open?
.section
.title
%h5.title-header
= t('shared.invitations.invite_your_friends')
.content
= render "shared/invitations"
.section
.title
%h5.title-header
= t('aspects.index.new_here.title')
.content
!= t('aspects.index.new_here.follow', link: link_to("#"+t('shared.publisher.new_user_prefill.newhere'), tag_path(name: t('shared.publisher.new_user_prefill.newhere'))))
%br
= link_to(t('aspects.index.new_here.learn_more'), "http://wiki.diasporafoundation.org/Welcoming_Committee")
.section
.title
%h5.title-header
= t('aspects.index.help.need_help')
.content
%p
= t('aspects.index.help.here_to_help')
%p
= t('aspects.index.help.do_you')
%ul
%li
!= t('aspects.index.help.have_a_question', :link => link_to("#"+t('aspects.index.help.tag_question'), tag_path(:name => t('aspects.index.help.tag_question'))))
%li
!= t('aspects.index.help.find_a_bug', :link => link_to("#"+t('aspects.index.help.tag_bug'), tag_path(:name => t('aspects.index.help.tag_bug'))))
%li
!= t('aspects.index.help.feature_suggestion', :link => link_to("#"+t('aspects.index.help.tag_feature'), tag_path(:name => t('aspects.index.help.tag_feature'))))
%p
!= t('aspects.index.help.tutorials_and_wiki',
:faq => link_to(t('_help'), help_path),
:tutorial => link_to(t('aspects.index.help.tutorial_link_text'), "https://diasporafoundation.org/tutorials", :target => '_blank'),
:wiki => link_to('Wiki','http://wiki.diasporafoundation.org', :target => '_blank'), :target => '_blank')
- unless AppConfig.configured_services.blank? || all_services_connected?
.section
.title
%h5.title-header
= t('aspects.index.services.heading')
.content
%div
= t('aspects.index.services.content')
#right_service_icons
- AppConfig.configured_services.each do |service|
- if AppConfig.show_service?(service, current_user)
- unless current_user.services.any?{|x| x.provider == service}
= link_to(content_tag(:div, nil, :class => "social_media_logos-#{service.to_s.downcase}-24x24", :title => service.to_s.titleize), "/auth/#{service}")
.section
.title
%h5.title-header
= t('bookmarklet.heading')
.content
!= t('bookmarklet.explanation', :link => link_to(t('bookmarklet.post_something'), bookmarklet_code))
- if AppConfig.settings.paypal_donations.enable? || AppConfig.bitcoin_donation_address
.section
.title
%h5.title-header
= t('aspects.index.donate')
.content
%p
= t('aspects.index.keep_pod_running', :pod => AppConfig.pod_uri.host)
= render 'shared/donatepod'
- if AppConfig.admins.podmin_email.present?
.section
.title
%h5.title-header
= t('aspects.index.help.any_problem')
.content
%p
= t('aspects.index.help.contact_podmin')
%p
= link_to t("aspects.index.help.mail_podmin"), "mailto:#{AppConfig.admins.podmin_email}"
.section
.title
.content
%ul
= render "shared/links"
......@@ -20,16 +20,10 @@
.pull-right
= link_to '×'.html_safe, getting_started_completed_path, id: "gs-skip-x", class: "close"
%div.container-fluid
.container-fluid
.row
.left-navbar-fixed-sub-background.col-lg-1.visible-lg
.left-navbar-fixed-background.col-lg-offset-1.col-lg-2.col-md-3.hidden-sm.hidden-xs
.left-navbar.col-lg-offset-1.col-lg-2.col-md-3
#home_user_badge
= owner_image_link
%h4
= link_to current_user.first_name, local_or_remote_person_path(current_user.person)
.left-navbar-fixed-background.col-lg-2.col-sm-3.hidden-sm.hidden-xs
.left-navbar.col-lg-2.col-sm-3
%ul#stream_selection
%li{data: {stream: "stream"}}
= link_to t("streams.multi.title"), stream_path, rel: "backbone", class: "hoverable"
......@@ -44,14 +38,118 @@
%li{data: {stream: "public"}}
= link_to t("streams.public.title"), public_stream_path, rel: "backbone", class: "hoverable"
.col-md-6
#aspect_stream_container.stream_container
= render 'aspects/aspect_stream', stream: @stream
.info-bar.hidden-xs
.section#selected_aspect_contacts
.title
%h5.stream-title
= @stream.title
.content
- if AppConfig.settings.invitations.open?
.section
.title
%h5.title-header
= t("shared.invitations.invite_your_friends")
.content
= render "shared/invitations"
.section
.title
%h5.title-header
= t("aspects.index.new_here.title")
.content
!= t("aspects.index.new_here.follow",
link: link_to("#" + t("shared.publisher.new_user_prefill.newhere"),
tag_path(name: t("shared.publisher.new_user_prefill.newhere"))))
%br
= link_to(t("aspects.index.new_here.learn_more"),
"http://wiki.diasporafoundation.org/Welcoming_Committee")
.section
.title
%h5.title-header
= t("aspects.index.help.need_help")
.content
%p
= t("aspects.index.help.here_to_help")
%p
= t("aspects.index.help.do_you")
%ul
%li
!= t("aspects.index.help.have_a_question",
link: link_to("#" + t("aspects.index.help.tag_question"),
tag_path(name: t("aspects.index.help.tag_question"))))
%li
!= t("aspects.index.help.find_a_bug",
link: link_to("#" + t("aspects.index.help.tag_bug"),
tag_path(name: t("aspects.index.help.tag_bug"))))
%li
!= t("aspects.index.help.feature_suggestion",
link: link_to("#" + t("aspects.index.help.tag_feature"),
tag_path(name: t("aspects.index.help.tag_feature"))))
%p
!= t("aspects.index.help.tutorials_and_wiki",
faq: link_to(t("_help"), help_path),
tutorial: link_to(t("aspects.index.help.tutorial_link_text"),
"https://diasporafoundation.org/tutorials", target: "_blank"),
wiki: link_to("Wiki", "http://wiki.diasporafoundation.org",
target: "_blank"),
target: "_blank")
- unless AppConfig.configured_services.blank? || all_services_connected?
.section
.title
%h5.title-header
= t("aspects.index.services.heading")
.content
%div
= t("aspects.index.services.content")
.right-service-icons
- AppConfig.configured_services.each do |service|
- if AppConfig.show_service?(service, current_user)
- unless current_user.services.any? {|x| x.provider == service }
= link_to(content_tag(:div, nil,
class: "social-media-logos-#{service.to_s.downcase}-24x24",
title: service.to_s.titleize), "/auth/#{service}")
.section
.title
%h5.title-header
= t("bookmarklet.heading")
.content
!= t("bookmarklet.explanation", link: link_to(t("bookmarklet.post_something"), bookmarklet_code))
- if AppConfig.settings.paypal_donations.enable? || AppConfig.bitcoin_donation_address
.section
.title
%h5.title-header
= t("aspects.index.donate")
.content
%p
= t("aspects.index.keep_pod_running", pod: AppConfig.pod_uri.host)
= render "shared/donatepod"
- if AppConfig.admins.podmin_email.present?
.section
.title
%h5.title-header
= t("aspects.index.help.any_problem")
.content
%p
= t("aspects.index.help.contact_podmin")
%p
= link_to t("aspects.index.help.mail_podmin"), "mailto:#{AppConfig.admins.podmin_email}"
.section
.title
.content
%ul
= render "shared/links"
.right-sidebar-fixed-sub-background.col-lg-3.visible-lg
.right-sidebar-fixed-background.col-md-3.col-lg-2.hidden-sm.hidden-xs
.col-md-3.col-lg-2.hidden-xs.hidden-sm.rightbar
= render 'shared/right_sections'
.col-lg-10.col-sm-9
.stream_container#aspect_stream_container
= render "aspects/aspect_stream", stream: @stream
%a.back-to-top#back-to-top{title: "#{t('layouts.application.back_to_top')}", href: "#"}
⇧
......@@ -25,7 +25,7 @@ Feature: Keyboard navigation
Scenario: navigate downwards after changing the stream
When I go to the activity stream page
And I click on selector "[data-stream='stream'] a"
Then I should see "Stream" within ".stream_title"
Then I should see "Stream" within ".stream-title"
When I press the "J" key somewhere
Then post 1 should be highlighted
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment