suzanne.soy/travis-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

re-do org selector styles

Browse Source
This commit is contained in:
Lisa Passing 2015-02-24 17:31:36 +01:00
parent 94aea59450
commit a65c0b8aa1
6 changed files with 62 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
app/styles/app/components/dropdown.sass
View File

@ -39,75 +39,45 @@ $dropdown-border: #C3D9DB
/* /*
* Dashboard Organizations Dropdown * Dashboard Organizations Dropdown
*/ */
.filter
position: relative
img
max-width: 20px
max-height: 20px
margin-right: .5em
margin-top: -0.1em
border-radius: 50%
overflow: hidden
.current-org-avatar .filter--org
display : inline-block float: left
height : 20px
width : 20px
vertical-align: top
margin : -5px 5px 0 0
.dropdown--org .filter-current
float : left padding: .9em 0
cursor: pointer
.dropdown--org ul .filter-dropdown
text-align : left @include resetul
display : inline position: absolute
margin : 0 top: 3em
padding : 0 min-width: 12em
list-style : none background-color: $white
z-index : 1000 border-radius: 4px
overflow: hidden
.dropdown--org ul li box-shadow: 2px 1px 4px 0px rgba(148,145,138,0.4)
background : $white z-index: 40
position : relative display: none
display : inline-block a
padding : 10px 0 10px 0 display: inline-block
margin-right : -4px width: 100%
margin-top : 0 padding: 10px 10px 10px 20px
cursor : pointer &:hover
border-radius : 0px color: $white
.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 background : #5e869a
color : $white .is-selected
a
font-weight: 600
.dropdown--org ul li:hover ul .filter-current:hover ~ .filter-dropdown,
display : block .filter-dropdown:hover
opacity : 1 display: block
visibility : visible

10
app/styles/app/components/icons.sass
View File

@ -41,3 +41,13 @@
background-image: inline-image('dashboard/burger.svg') background-image: inline-image('dashboard/burger.svg')
&:hover &:hover
background-image: inline-image('dashboard/burger-hover.svg') background-image: inline-image('dashboard/burger-hover.svg')
.icon-arrow-down
width : 0
height : 0
display : inline-block
padding-top : 2px
margin-left : 5px
border-left : 5px solid transparent
border-right : 5px solid transparent
border-top : 5px solid $dashboard-text-color

4
app/styles/app/components/section.sass
View File

@ -1,10 +1,8 @@
.section .section
font-size: $font-size-normal font-size: $font-size-normal
padding: .65em 0 0
.section--white .section--white
background-color: $white background-color: $white
.section--maxheight .section--maxheight
min-height: 3.3rem height: 3.3em
max-height: 4rem

73
app/styles/app/layouts/dashboard.sass
View File

@ -213,76 +213,3 @@ $db-text-color: #ACAAAA
h2, h3, p, button, .db-status h2, h3, p, button, .db-status
opacity: .7 opacity: .7
// #views
// float : left
// #views ul
// text-align : left
// display : inline
// margin : 0
// padding : 0
// list-style : none
// z-index : 1000
// #views 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
// -webkit-border-radius : 0px
// -moz-border-radius : 0px
// #views li.views-start:hover
// background-color : #fff
// #views 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)
// #views ul li ul li
// display : block
// line-height : 23px
// padding-left : 20px
// #views ul li ul li:first-child
// border-top-left-radius : 4px
// border-top-right-radius : 4px
// #views ul li ul li:last-child
// border-bottom-left-radius : 4px
// border-bottom-right-radius : 4px
// #views ul li ul li:hover
// background : #5e869a
// color : $white
// #views ul li:hover ul
// display : block
// opacity : 1
// visibility : visible
// .currently-selected
// font-weight : 600
// .arrow-down
// width : 0
// height : 0
// display : inline-block
// padding-top : 2px
// margin-left : 5px
// border-left : 5px solid transparent
// border-right : 5px solid transparent
// border-top : 5px solid $dashboard-text-color

36
app/templates/dashboard/repositories.hbs
View File

@ -1,32 +1,16 @@
<div id="filters-search" class="section section--white section--maxheight"> <div id="filters" class="section section--white section--maxheight">
<div class="row"> <div class="row">
<div class="small-6 medium-3 large-2 columns dropdown--org" id="filters"> <div class="filter filter--org">
<ul> <div class="filter-current">
<li class="filters-start"> <img src="https://placehold.it/30x30" alt="">something else</a><span class="icon-arrow-down"></span>
<div class="current-org-avatar org-travisci"></div>Travis CI <div class="arrow-down"></div> </div>
<ul> <ul class="filter-dropdown">
<li class="org-all">All organizations</li> <li><a href="#" title="">All organizations</a></li>
<li class="currently-selected"><div class="org-avatar org-travisci">Travis CI</div>Travis CI</li> <li class="is-selected"><a href="#" title=""><img src="https://placehold.it/30x30" alt="">something else</a></li>
<li><div class="org-avatar org-saltinejustine">Justine Arreche</div>Justine Arreche</li> <li><a href="#" title=""><img src="https://placehold.it/30x30" alt="">something</a></li>
<li><div class="org-avatar org-openkarma">Open Karma</div>Open Karma</li> <li><a href="#" title=""><img src="https://placehold.it/30x30" alt="">eurucamp</a></li>
<li><div class="org-avatar org-eurucamp">eurucamp</div>eurucamp</li>
</ul>
</li>
</ul> </ul>
</div> </div>
{{!-- <div class="small-6 medium-2 large-2 columns no-padding" id="views">
<ul>
<li class="views-start">
View all repos <div class="arrow-down"></div>
<ul>
<li class="currently-selected">View all repos</li>
<li>Queued builds</li>
<li>Failed builds</li>
<li>Passed builds</li>
</ul>
</li>
</ul>
</div> --}}
<div class="search"> <div class="search">
{{filter-input placeholder="Search all repositories" class="search-field" {{filter-input placeholder="Search all repositories" class="search-field"
action="updateFilter" on="key-up"}} action="updateFilter" on="key-up"}}