From 94aea594506f277739a34cfc6399afd46161a6f3 Mon Sep 17 00:00:00 2001 From: Lisa Passing Date: Mon, 23 Feb 2015 17:51:41 +0100 Subject: [PATCH] prepare org filter markup and styles --- app/styles/app.scss | 1 + app/styles/app/components/dropdown.sass | 113 ++++++++++++++++++++++ app/styles/app/layouts/dashboard.sass | 116 ++--------------------- app/templates/dashboard/repositories.hbs | 14 ++- 4 files changed, 126 insertions(+), 118 deletions(-) create mode 100644 app/styles/app/components/dropdown.sass diff --git a/app/styles/app.scss b/app/styles/app.scss index 53cd7d5d..de03a250 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -49,6 +49,7 @@ @import "app/components/buttons"; @import "app/components/icons"; @import "app/components/search"; +@import "app/components/dropdown"; @import "app/layout"; @import "app/layouts/dashboard"; diff --git a/app/styles/app/components/dropdown.sass b/app/styles/app/components/dropdown.sass new file mode 100644 index 00000000..b9ae6ea9 --- /dev/null +++ b/app/styles/app/components/dropdown.sass @@ -0,0 +1,113 @@ +/* + * Dashboard Activation Dropdown + */ + +$dropdown-border: #C3D9DB + +.dropdown--db + @include resetul + @extend %br-4px + position: absolute + padding: .8em .5em + z-index: 90 + width: 12.5em; + right: 0; + top: 4em; + border: 2px $dropdown-border solid; + background-color: $white + display: none + a + display: block + padding: 0.4em 1em .2em + &:hover + background-color: $dropdown-color + color: $white + &:before + content: "" + width: 1.2em + height: 1.2em + display: block + position: absolute + top: -0.7em; + right: 1.1em; + background-color: $white + border-top: solid 2px $dropdown-border; + border-left: solid 2px $dropdown-border; + transform: rotate(45deg); + + +/* + * Dashboard Organizations Dropdown + */ + +.current-org-avatar + display : inline-block + height : 20px + width : 20px + vertical-align: top + margin : -5px 5px 0 0 + +.dropdown--org + float : left + +.dropdown--org ul + text-align : left + display : inline + margin : 0 + padding : 0 + list-style : none + z-index : 1000 + +.dropdown--org ul li + background : $white + position : relative + display : inline-block + padding : 10px 0 10px 0 + margin-right : -4px + margin-top : 0 + cursor : pointer + border-radius : 0px + +.dropdown--org li.filters-start:hover + background-color : #fff + +.dropdown--org ul li ul + padding : 0 + position : absolute + top : 35px + left : 0 + width : 200px + display : none + opacity : 0 + visibility : hidden + box-shadow : 2px 1px 4px 0px rgba(148,145,138,0.4) + +.dropdown--org ul li ul li + display : block + line-height : 23px + padding-left : 20px + +.dropdown--org ul li ul li:first-child + border-top-left-radius : 4px + border-top-right-radius : 4px + +.dropdown--org ul li ul li:last-child + border-bottom-left-radius : 4px + border-bottom-right-radius : 4px + +.dropdown--org ul li ul li div + display : inline-block + width : 20px + height : 20px + margin-right : 5px + text-indent : -9999px + border-radius : 100px + +.dropdown--org ul li ul li:hover + background : #5e869a + color : $white + +.dropdown--org ul li:hover ul + display : block + opacity : 1 + visibility : visible diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass index cad0f568..b80404a9 100644 --- a/app/styles/app/layouts/dashboard.sass +++ b/app/styles/app/layouts/dashboard.sass @@ -1,6 +1,5 @@ /* - * Dashboard - * @todo: split into components: filter, search + * Dashboard List */ @mixin colorDbelements($color) @@ -19,7 +18,6 @@ $db-gray: #C9C9C9 $db-text-color: #ACAAAA -$dropdown-border: #C3D9DB .dashboard color: $db-text-color @@ -97,7 +95,6 @@ $dropdown-border: #C3D9DB left: 0 height: 100% width: 2.5em - // background-color: $db-gray border-top-left-radius: 4px border-bottom-left-radius: 4px @@ -160,40 +157,12 @@ $dropdown-border: #C3D9DB height: 2em right: 0 -.db-burger:hover ~ .dropdown, -.dropdown:hover - display: block - -.dropdown - @include resetul - @extend %br-4px - position: absolute - padding: .8em .5em - z-index: 90 - width: 12.5em; - right: 0; - top: 4em; - border: 2px $dropdown-border solid; - background-color: $white +.dropdown--db display: none - a - display: block - padding: 0.4em 1em .2em - &:hover - background-color: $dropdown-color - color: $white - &:before - content: "" - width: 1.2em - height: 1.2em - display: block - position: absolute - top: -0.7em; - right: 1.1em; - background-color: $white - border-top: solid 2px $dropdown-border; - border-left: solid 2px $dropdown-border; - transform: rotate(45deg); + +.db-burger:hover ~ .dropdown--db, +.dropdown--db:hover + display: block .dashboard-starred, .dashboard-active, @@ -244,79 +213,6 @@ $dropdown-border: #C3D9DB h2, h3, p, button, .db-status opacity: .7 - -// .current-org-avatar -// display : inline-block -// height : 20px -// width : 20px -// vertical-align: top -// margin : -5px 5px 0 0 - -// #filters -// float : left - -// #filters ul -// text-align : left -// display : inline -// margin : 0 -// padding : 0 -// list-style : none -// z-index : 1000 - -// #filters ul li -// background : $white -// position : relative -// display : inline-block -// padding : 10px 0 10px 0 -// margin-right : -4px -// margin-top : 0 -// cursor : pointer -// border-radius : 0px - -// #filters li.filters-start:hover -// background-color : #fff - -// #filters ul li ul -// padding : 0 -// position : absolute -// top : 35px -// left : 0 -// width : 200px -// display : none -// opacity : 0 -// visibility : hidden -// box-shadow : 2px 1px 4px 0px rgba(148,145,138,0.4) - -// #filters ul li ul li -// display : block -// line-height : 23px -// padding-left : 20px - -// #filters ul li ul li:first-child -// border-top-left-radius : 4px -// border-top-right-radius : 4px - -// #filters ul li ul li:last-child -// border-bottom-left-radius : 4px -// border-bottom-right-radius : 4px - -// #filters ul li ul li div -// display : inline-block -// width : 20px -// height : 20px -// margin-right : 5px -// text-indent : -9999px -// border-radius : 100px - -// #filters ul li ul li:hover -// background : #5e869a -// color : $white - -// #filters ul li:hover ul -// display : block -// opacity : 1 -// visibility : visible - // #views // float : left diff --git a/app/templates/dashboard/repositories.hbs b/app/templates/dashboard/repositories.hbs index caf56bde..532cad29 100644 --- a/app/templates/dashboard/repositories.hbs +++ b/app/templates/dashboard/repositories.hbs @@ -1,7 +1,6 @@
- - +
--}}
{{filter-input placeholder="Search all repositories" class="search-field" action="updateFilter" on="key-up"}} @@ -57,7 +55,7 @@
-