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

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

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

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

@ -40,4 +40,14 @@
.icon-burger
background-image: inline-image('dashboard/burger.svg')
&: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
font-size: $font-size-normal
padding: .65em 0 0
.section--white
background-color: $white
.section--maxheight
min-height: 3.3rem
max-height: 4rem
height: 3.3em

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

@ -213,76 +213,3 @@ $db-text-color: #ACAAAA
h2, h3, p, button, .db-status
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

2
app/styles/app/top.sass
View File

@ -174,4 +174,4 @@ $top-height: 55px
outline: none !important
@include clearfix
&:hover
cursor: pointer
cursor: pointer

38
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="small-6 medium-3 large-2 columns dropdown--org" id="filters">
<ul>
<li class="filters-start">
<div class="current-org-avatar org-travisci"></div>Travis CI <div class="arrow-down"></div>
<ul>
<li class="org-all">All organizations</li>
<li class="currently-selected"><div class="org-avatar org-travisci">Travis CI</div>Travis CI</li>
<li><div class="org-avatar org-saltinejustine">Justine Arreche</div>Justine Arreche</li>
<li><div class="org-avatar org-openkarma">Open Karma</div>Open Karma</li>
<li><div class="org-avatar org-eurucamp">eurucamp</div>eurucamp</li>
</ul>
</li>
</ul>
<div class="filter filter--org">
<div class="filter-current">
<img src="https://placehold.it/30x30" alt="">something else</a><span class="icon-arrow-down"></span>
</div>
<ul class="filter-dropdown">
<li><a href="#" title="">All organizations</a></li>
<li class="is-selected"><a href="#" title=""><img src="https://placehold.it/30x30" alt="">something else</a></li>
<li><a href="#" title=""><img src="https://placehold.it/30x30" alt="">something</a></li>
<li><a href="#" title=""><img src="https://placehold.it/30x30" alt="">eurucamp</a></li>
</ul>
</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">
{{filter-input placeholder="Search all repositories" class="search-field"
action="updateFilter" on="key-up"}}