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.
This commit is contained in:
Pablo Cuadrado
augier
parent
c38da4c787
commit
267d98f132
4 changed files with 77 additions and 18 deletions
|
|
@ -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%);
|
||||
|
|
@ -1,14 +1,26 @@
|
|||
/* 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 ---- */
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.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
|
||||
|
|
|
|||
Loading…
Reference in a new issue