Commit 5f446330 authored by fla's avatar fla Committed by Flaburgan
Browse files

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;
......
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