From e7ec3d495f873bc8427e29baeac2944a356545e9 Mon Sep 17 00:00:00 2001 From: Steffen van Bergerem Date: Sun, 15 Mar 2015 23:17:31 +0100 Subject: [PATCH] Refactor and improve sidebar css --- app/assets/stylesheets/getting-started.scss | 4 + app/assets/stylesheets/leftnavbar.scss | 93 +++++++++++++---- app/assets/stylesheets/sidebar.scss | 99 +++---------------- app/assets/templates/aspect_tpl.jst.hbs | 2 +- .../templates/tag_following_tpl.jst.hbs | 2 +- app/views/shared/_right_sections.html.haml | 5 +- 6 files changed, 93 insertions(+), 112 deletions(-) diff --git a/app/assets/stylesheets/getting-started.scss b/app/assets/stylesheets/getting-started.scss index eaaaf1317c9..57b4d0a6fdf 100644 --- a/app/assets/stylesheets/getting-started.scss +++ b/app/assets/stylesheets/getting-started.scss @@ -38,6 +38,10 @@ } } } + + .as-results .as-list { + box-shadow: 0px 1px 1px #666; + } } .popover h3 { diff --git a/app/assets/stylesheets/leftnavbar.scss b/app/assets/stylesheets/leftnavbar.scss index 136297604fa..6bee6e8d638 100644 --- a/app/assets/stylesheets/leftnavbar.scss +++ b/app/assets/stylesheets/leftnavbar.scss @@ -1,24 +1,16 @@ #leftNavBar { - - .avatar { - width: 50px; - height: 50px; + a { + color: $link-grey; + font-weight: bold; + text-decoration: none; } - color: #222222; - ul { margin: 0px; padding: 0px; list-style: none; } - a { - color: $link-grey; - font-weight: bold; - text-decoration: none; - } - .selected { color: $black; } .selected a { color: $black; } @@ -27,11 +19,6 @@ margin-right: 6px; padding: 4px; &:hover { background-color: $background-blue; } - - .label { - background-color: $background-grey; - color: $text-grey; - } } .selectable { @@ -41,13 +28,40 @@ text-overflow: ellipsis; } + #home_user_badge { + border-bottom: 1px dashed $border-grey; + margin-bottom: 10px; + min-height: 50px; + padding-bottom: 10px; + padding-left: 4px; + + .avatar { + float: left; + height: 50px; + width: 50px; + } + + h4 { + margin-left: 60px; + padding-top: 15px; + overflow: hidden; + text-overflow: ellipsis; + + a { color: $black; } + } + } + + #stream_selection { + & > li { + margin-bottom: 5px; + } + } + #aspects_list, #tags_list { .hoverable > .action { visibility: hidden; - float: right; margin: 0 3px; } - .hoverable:hover > .action { visibility: visible; } @@ -59,7 +73,6 @@ visibility: hidden; &.selected { visibility: visible; } } - .selected + a { color: #333333; } @@ -70,5 +83,45 @@ font-size: 20px; line-height: 15px; } + + #new_tag_following { + margin-left: 20px; + margin-top: 5px; + } + + /* ---- override app/stylesheets/vendor/autoSuggest.css ---- */ + ul.as-selections { padding: 1px 5px 4px 5px; } + .tag_input { + line-height: $font-size-text; + vertical-align: top; + width: 100%; + } + + .as-result { + margin-top: -1px; + margin-left: 1px; + } + + .as-list { + em { + background-color: #aabbcc; + color: black; + padding: 0px; + } + + color: black; + position: static; /* override absolute */ + margin: 0px; + border-radius: 0px 0px 3px 3px; + box-shadow: 0px 1px 1px #666; + } + + .as-result-item.active { + color: black; + text-shadow: none; + background-color: $background-blue; + border-color: $background-blue; + } + /* ---- end override app/stylesheets/vendor/autoSuggest.css ---- */ } } diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/sidebar.scss index ca1c486ae60..57f4fe1053d 100644 --- a/app/assets/stylesheets/sidebar.scss +++ b/app/assets/stylesheets/sidebar.scss @@ -1,121 +1,44 @@ -#home_user_badge { - min-height: 50px; - margin-bottom: 20px; - margin-left: 4px; - - img { - float: left; - } - - h4 { - margin-left: 60px; - padding-top: 15px; - overflow: hidden; - text-overflow: ellipsis; - - a { - color: inherit; - font-weight: bold; - } - } -} - -#stream_selection { - & > li { - margin-bottom: 10px; - } -} - -#tags_list { - /* ---- override app/stylesheets/vendor/autoSuggest.css ---- */ - .tag_input { - width: 100%; - } - - .as-result { - margin-top: -1px; - margin-left: 1px; - } - - .as-list { - em { - background-color: #aabbcc; - color: black; - padding: 0px; - } - - color: black; - position: static; /* override absolute */ - margin: 0px; - border-radius: 0px 0px 3px 3px; - box-shadow: 0px 1px 1px #666; - } - - .as-result-item.active { - color: black; - text-shadow: none; - background-color: $background-blue; - border-color: $background-blue; - } - /* ---- end override app/stylesheets/vendor/autoSuggest.css ---- */ -} - .rightBar { - padding-top: 20px; .section { margin-bottom: 20px; - .title { - position: relative; + > .title { border-bottom: 1px solid $border-grey; padding-bottom: 2px; &.no_icon { padding-left: 8px; } - .right { - right: 4px; - top: 3px; - font-size: smaller; - font-weight: bold; - color: $text-dark-grey; - } - - h5.title-header { - margin-left: 5px; - } - h5 { - font-size: 12px; - margin: 0; color: $text-dark-grey; font-weight: bold; + font-size: 13px; + margin: 0; + &.title-header { margin-left: 5px; } } } .content { - padding: 8px; color: $text-grey; font-size: 11px; + line-height: 18px; + padding: 5px; - p, ul { - margin: 5px 0px; - } + p, ul { margin: 0; } ul { + margin-bottom: 5px; padding-left: 0; - - li { - list-style: none; - } + li { list-style: none; } } & > #invite_code { - width: 100%; + background-color: $white; box-sizing: border-box; font-size: 11px; height: 30px; + width: 100%; } } } diff --git a/app/assets/templates/aspect_tpl.jst.hbs b/app/assets/templates/aspect_tpl.jst.hbs index bba71a86f65..840ee584e77 100644 --- a/app/assets/templates/aspect_tpl.jst.hbs +++ b/app/assets/templates/aspect_tpl.jst.hbs @@ -1,4 +1,4 @@ - + {{#if selected}} diff --git a/app/assets/templates/tag_following_tpl.jst.hbs b/app/assets/templates/tag_following_tpl.jst.hbs index 1453d60d467..1f269a095d0 100644 --- a/app/assets/templates/tag_following_tpl.jst.hbs +++ b/app/assets/templates/tag_following_tpl.jst.hbs @@ -1,4 +1,4 @@ -× +× #{{ name }} diff --git a/app/views/shared/_right_sections.html.haml b/app/views/shared/_right_sections.html.haml index b51f78330a3..fb64a3e83f2 100644 --- a/app/views/shared/_right_sections.html.haml +++ b/app/views/shared/_right_sections.html.haml @@ -93,6 +93,7 @@ .section .title - %ul.content - = render "shared/links" + .content + %ul + = render "shared/links"