Commit 267d98f1 authored by Pablo Cuadrado's avatar Pablo Cuadrado Committed by augier

leftnavbar with full sized clickable anchors, better padding, weight font...

leftnavbar with full sized clickable anchors, better padding, weight font reduced, overall looks polished
fixed background added for contrast, hideable on SM or XS bootstrap-based sizes.
parent c38da4c7
......@@ -36,3 +36,6 @@ $lime-green : rgb(143, 199,10);
$orange : rgb(237, 165, 13);
$turquoise : rgb(8, 224, 173);
$sand : rgb(245, 239, 237);
$left-navbar-background: #f0f0f0;
$left-navbar-drawer-background: darken($left-navbar-background, 6%);
\ No newline at end of file
/* Fixed backgrounds are a common practice to avoid height issues */
#left-navbar-fixed-background {
background: $left-navbar-background;
position: fixed;
height: 100%;
}
#leftNavBar {
background: $left-navbar-background;
a {
color: $link-grey;
font-weight: bold;
text-decoration: none;
outline: 0;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
&#stream_selection {
margin: 0px -15px; /* -15px overrides Bootstrap's default gutter width */
}
}
.selected { color: $black; }
......@@ -16,21 +28,36 @@
.hoverable {
display: block;
margin-right: 6px;
padding: 4px;
&:hover { background-color: $background-blue; }
&.selected a, &.selected a:hover {
color: white;
background: #666;
}
}
.all_aspects a.hoverable.selected {
color: white;
background: #666;
}
.hoverable a, .all_aspects a.hoverable, .followed_tags_sidebar a.hoverable {
padding: 10px 20px;
display: block;
font-weight: normal;
color: $link-grey;
border-bottom: 1px solid #ddd;
&:hover {
background-color: $background-blue;
color: $black;
}
}
.selectable {
display: block;
margin-left: 21px;
overflow: hidden;
text-overflow: ellipsis;
}
#home_user_badge {
border-bottom: 1px dashed $border-grey;
margin-bottom: 10px;
min-height: 50px;
padding-bottom: 20px;
padding-left: 4px;
......@@ -51,27 +78,47 @@
}
}
#stream_selection {
& > li {
margin-bottom: 5px;
#aspects_list {
.hoverable {
position: relative;
}
.selectable {
padding-left: 40px;
}
}
#aspects_list, #tags_list {
background: $left-navbar-drawer-background;
.hoverable > .action {
visibility: hidden;
margin: 0 3px;
margin: 0;
position: absolute;
right: 0;
top: 0;
z-index: 200;
padding: 10px 15px;
border: none;
}
.hoverable:hover > .action {
.hoverable:hover > .action {
visibility: visible;
background: none;
}
}
#aspects_list {
.entypo-check {
float: left;
.selectable {
padding-right: 40px;
}
.entypo.check {
visibility: hidden;
&.selected { visibility: visible; }
margin: 0;
position: absolute;
left: 20px;
top: 10px;
z-index: 200;
&.selected {
visibility: visible;
}
}
.selected + a {
color: #333333;
......@@ -79,14 +126,23 @@
}
#tags_list {
li {
position: relative;
}
.selectable {
padding-left: 30px;
padding-right: 30px;
}
.delete_tag_following {
font-size: 20px;
line-height: 15px;
}
#new_tag_following {
margin-left: 20px;
margin-top: 5px;
padding: 10px 20px 10px 30px;
}
/* ---- override app/stylesheets/vendor/autoSuggest.css ---- */
......
.stream_container {
border-left: 1px solid $border-grey;
padding-left: 10px;
padding-top: 20px;
margin-left: -10px;
......
......@@ -24,6 +24,7 @@
#right-sidebar-fixed-sub-background.col-md-3.visible-lg
#right-sidebar-fixed-background.col-md-3.col-lg-2.hidden-sm.hidden-xs
.row
#left-navbar-fixed-background.col-md-offset-1.col-md-2.hidden-sm.hidden-xs
.col-md-offset-1.col-md-2#leftNavBar
#home_user_badge
= owner_image_link
......@@ -39,7 +40,7 @@
= link_to t("streams.mentions.title"), mentioned_stream_path, rel: "backbone", class: "hoverable"
%li.all_aspects
= render "aspects/aspect_listings", stream: @stream
%li
%li.followed_tags_sidebar
= render "tags/followed_tags_listings"
.col-md-6
......
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