From 9d1d97cb89f40befee2b4ee6e7e803e661629000 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Sch=C3=A4ffner-Gurney?= Date: Thu, 9 Jul 2015 17:19:04 -0400 Subject: [PATCH] added scout logo, updated sidebar to brand slate color --- images/logo-scout-on-dark.png | Bin 0 -> 4066 bytes src/home/collection.jade | 2 + src/sidebar/collection-filter.jade | 2 +- src/sidebar/index.jade | 1 + src/sidebar/sidebar-controls.jade | 2 +- styles/palette.less | 7 +++- styles/sidebar.less | 65 +++++++++++++++++------------ 7 files changed, 49 insertions(+), 30 deletions(-) create mode 100644 images/logo-scout-on-dark.png diff --git a/images/logo-scout-on-dark.png b/images/logo-scout-on-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..a363c2c2a5d1dadacbf7e0182f2136ec14f6a785 GIT binary patch literal 4066 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 UCu0Ae;s5{u07*qoM6N<$f=vdi761SM literal 0 HcmV?d00001 diff --git a/src/home/collection.jade b/src/home/collection.jade index da60805dd61..679e8e76baa 100644 --- a/src/home/collection.jade +++ b/src/home/collection.jade @@ -14,10 +14,12 @@ .splitter button.btn.btn-link.splitter-button.splitter-button-open i.fa.fa-caret-left + | i.fa.fa-file-text-o button.btn.btn-link.splitter-button.splitter-button-close i.fa.fa-file-text-o + | i.fa.fa-caret-right .column.side div(data-hook='documents-subview') diff --git a/src/sidebar/collection-filter.jade b/src/sidebar/collection-filter.jade index c5ea5998ea5..590b7f0633f 100644 --- a/src/sidebar/collection-filter.jade +++ b/src/sidebar/collection-filter.jade @@ -1,3 +1,3 @@ -.panel-heading.list-filter +.list-filter i.search.octicon-search input(type='search', placeholder='filter sources', data-hook='search') diff --git a/src/sidebar/index.jade b/src/sidebar/index.jade index c537fff5b62..889792f5617 100644 --- a/src/sidebar/index.jade +++ b/src/sidebar/index.jade @@ -1,5 +1,6 @@ div .sidebar.panel + div.scout-logo div(data-hook='collection-filter-subview') div(data-hook='collection-list-subview') div(data-hook='sidebar-control-subview') diff --git a/src/sidebar/sidebar-controls.jade b/src/sidebar/sidebar-controls.jade index 437ba0ce60c..9f0afe37fec 100644 --- a/src/sidebar/sidebar-controls.jade +++ b/src/sidebar/sidebar-controls.jade @@ -1,4 +1,4 @@ .sidebar-controls - .panel-heading.list-filter + .list-filter i.search.octicon-search input(type='search', placeholder='filter fields', data-hook='search') diff --git a/styles/palette.less b/styles/palette.less index 6de8cb559a1..840a0261318 100644 --- a/styles/palette.less +++ b/styles/palette.less @@ -2,8 +2,8 @@ /* commented colors have been deprecated */ @green0: #365221; @green1: #507b32; -@green2: #6ba442; -@green3: #89b668; +@green2: #67b144; +@green3: #86bc63; @green4: #a6c88e; @green5: #c4dbb3; @@ -19,6 +19,9 @@ @gray7: #ebebed; @gray8: #f5f6f7; +@slate0: #4c5259; +@slate1: #70757a; + @blue3: #5b81a9; // TODO: deprecate @blue4: #84a1bf; // TODO: deprecate @blue5: #adc0d4; // TODO: deprecate diff --git a/styles/sidebar.less b/styles/sidebar.less index ec190f65943..9934dd0a448 100644 --- a/styles/sidebar.less +++ b/styles/sidebar.less @@ -1,5 +1,4 @@ -@sidebar-bg: @pw; -@sidebar-border: @gray7; +@sidebar-bg: @slate0; @sidebar-width: 220px; .sidebar { @@ -9,58 +8,72 @@ -webkit-transform: translateZ(0); margin-bottom: 0; + .scout-logo { + background: @slate1 url("/images/logo-scout-on-dark.png") center center no-repeat; + background-size: 140px 28px; + width: @sidebar-width; + height: 72px; + } + .list-filter { - margin: 12px 0; + padding: 12px; + box-shadow: 0 2px 0 rgba(0,0,0,0.2); i.search { .octicon; position: absolute; margin-top: 9px; margin-left: 10px; - color: @gray3; + color: @gray5; } input { - .form-control; padding: 5px 5px 5px 30px; height: auto; - background: @pw; - // border-color: @gray6; + background: @slate0; + color: @pw; + width: 100%; + border: 1px solid lighten(@slate0, 5%); } input[type=search] { border-radius: 18px; } } + .panel-title { + color: @gray5; + } .list-group { line-height: 24px; - // height: 100%; position: absolute; - top: 72px; - bottom: 180px; + top: 128px; + bottom: 60px; overflow-y: auto; width: 100%; + z-index: -1; .list-group-item { cursor: pointer; border-top-width: 0; border-bottom-width: 0; - padding: 0 6px; - color: @gray3; - border-left: 4px solid transparent; + padding: 0; + background: none; + color: @gray5; a { display: block; - color: @gray3; + color: @gray5; + padding: 0 6px; text-decoration: none; - max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + border-left: 4px solid transparent; &:hover { - color: @gray3; + color: @pw; text-decoration: none; - background: @gray8; + background: lighten(@slate0, 5%); + border-left: 4px solid lighten(@slate0, 5%); } } i { @@ -70,13 +83,13 @@ } &.active { background: none; - border-left: 4px solid @green2; a { - color: @green2; + color: @green3; + border-left: 4px solid @green3; } i { - color: @green2; + color: @green3; } .list-group-item-heading { color: @green2; @@ -88,12 +101,13 @@ } .sidebar-controls { position: absolute; + width: @sidebar-width; bottom: 0; - width: 218px; - height: 174px; - border-top: 2px solid @sidebar-border; - // background: url(/images/fake-sidebar-controls.png) 0 0 no-repeat; - // background-size: 218px 174px; + height: 60px; + + .list-filter { + box-shadow: 0 -2px 0 rgba(0,0,0,0.2); + } } } @@ -103,7 +117,6 @@ bottom: 0; width: 220px; background: @sidebar-bg; - border-right: 2px solid @sidebar-border; border-left-width: 0; border-top-width: 0; border-bottom-width: 0;