start fresh markup for prgs filter
This commit is contained in:
Lisa P
parent
101a0ec71f
commit
dad5950142
|
|
@ -2,7 +2,7 @@ import Ember from 'ember';
|
|||
|
||||
export default Ember.Component.extend({
|
||||
|
||||
classNames: ['dashboard-filter'],
|
||||
classNames: ['organisation-filter'],
|
||||
actions: {
|
||||
toggleOrgFilter() {
|
||||
this.toggleProperty('showFilter');
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import config from 'travis/config/environment';
|
|||
|
||||
export default Ember.Component.extend({
|
||||
popup: Ember.inject.service(),
|
||||
classNames: ['settings-menu'],
|
||||
classNames: ['option-button'],
|
||||
classNameBindings: ['isOpen:display'],
|
||||
isOpen: false,
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
align-items: baseline
|
||||
|
||||
.dashboard-repos
|
||||
margin-bottom: 5rem
|
||||
padding-bottom: 5rem
|
||||
|
||||
.dashboard-section
|
||||
margin-bottom: 4rem
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
.owner-header
|
||||
display: flex
|
||||
flex-flow: row wrap
|
||||
justify-content: flex-start
|
||||
align-items: center
|
||||
padding: 0 $column-gutter/2
|
||||
margin-bottom: 3rem
|
||||
color: #969496
|
||||
a
|
||||
color: #969496
|
||||
.owner-title
|
||||
margin: .3em 0 .2em
|
||||
font-size: 36px
|
||||
|
|
@ -22,61 +23,26 @@
|
|||
text-decoration: underline
|
||||
img
|
||||
border-radius: 50%
|
||||
background-color: #F4F3ED
|
||||
|
||||
.sync-button
|
||||
margin-top: .8rem
|
||||
p, button
|
||||
margin: 0
|
||||
.sync-last
|
||||
color: #969496
|
||||
font-size: $font-size-sm
|
||||
|
||||
.owner-avatar,
|
||||
.owner-info
|
||||
@extend %inline-block
|
||||
vertical-align: middle
|
||||
background-color: $pebble-grey
|
||||
|
||||
.owner-avatar
|
||||
width: grid-calc(4, 12)
|
||||
flex: 0 0 20%
|
||||
@media #{$medium-up}
|
||||
width: grid-calc(2, 12)
|
||||
flex: 0 0 17%
|
||||
|
||||
.owner-info
|
||||
width: grid-calc(7, 12)
|
||||
flex: 1 0 75%
|
||||
@media #{$medium-up}
|
||||
width: grid-calc(29, 36)
|
||||
position: relative
|
||||
overflow: hidden
|
||||
&:after
|
||||
content: ""
|
||||
@include fadeOut(right, -90deg, white)
|
||||
flex: 1 0 80%
|
||||
position: relative
|
||||
overflow: hidden
|
||||
&:after
|
||||
content: ""
|
||||
@include fadeOut(right, -90deg, white)
|
||||
|
||||
.tabs--owner
|
||||
padding : 0 $column-gutter/2
|
||||
|
||||
.active,
|
||||
.active:hover,
|
||||
position: relative
|
||||
color: $oxide-blue
|
||||
&:after
|
||||
content: ""
|
||||
position: absolute
|
||||
left: 0
|
||||
bottom: -0.25em
|
||||
width: 100%
|
||||
height: 2px
|
||||
background-color: $oxide-blue
|
||||
.active
|
||||
font-weight: 600
|
||||
|
||||
.tabnav--owner
|
||||
margin-bottom: 1.5rem
|
||||
@media #{$medium-up}
|
||||
height: 2.2em
|
||||
border-bottom: solid 2px $cream-dark
|
||||
|
||||
|
||||
.owner-tiles
|
||||
padding: 0
|
||||
list-style-type: none
|
||||
|
|
|
|||
|
|
@ -131,9 +131,8 @@ p.profile-user-last
|
|||
vertical-align: middle
|
||||
.profile-settings
|
||||
display: inline-block
|
||||
padding: .2em .2em .2em .5em;
|
||||
height: 28px;
|
||||
vertical-align: bottom;
|
||||
padding: .2em .2em .2em .5em
|
||||
height: 28px
|
||||
.icon
|
||||
width: 14px
|
||||
height: 14px
|
||||
|
|
@ -145,7 +144,7 @@ p.profile-user-last
|
|||
display: inline-block !important
|
||||
|
||||
.profile-repo
|
||||
border-radius: 4px
|
||||
border-radius: 2px
|
||||
position: relative
|
||||
display: inline-block
|
||||
width: grid-calc(13, 24)
|
||||
|
|
@ -162,21 +161,22 @@ p.profile-user-last
|
|||
.sync-spinner
|
||||
vertical-align: top
|
||||
&:hover
|
||||
background-color: #ededec
|
||||
background-color: $pebble-grey
|
||||
&:after
|
||||
content: ""
|
||||
@include fadeOut(right, -90deg, #ededec)
|
||||
@include fadeOut(right, -90deg, $pebble-grey)
|
||||
.active &:hover
|
||||
background-color: #e2eee2
|
||||
background-color: $seed-green
|
||||
&:after
|
||||
content: ""
|
||||
@include fadeOut(right, -90deg, #e2eee2)
|
||||
@include fadeOut(right, -90deg, $seed-green)
|
||||
@media #{$medium-up}
|
||||
width: grid-calc(18, 24)
|
||||
height: 30px
|
||||
&:hover
|
||||
span
|
||||
display: inline-block
|
||||
color: $cement-grey
|
||||
@media #{$large-up}
|
||||
width: grid-calc(19, 24)
|
||||
|
||||
|
|
|
|||
|
|
@ -42,78 +42,8 @@
|
|||
justify-content: space-between
|
||||
border-bottom: 2px #f1f1f1 solid
|
||||
|
||||
|
||||
$dropdown-button-height: 30px
|
||||
$dropdown-button-margin: -9px
|
||||
|
||||
.settings-button
|
||||
display: block
|
||||
height: $dropdown-button-height
|
||||
padding: 0
|
||||
border: 1px solid $pebble-grey
|
||||
color: $asphalt-grey
|
||||
border-radius: 2px
|
||||
text-align: center
|
||||
line-height: 2
|
||||
font-size: 14px
|
||||
cursor: pointer
|
||||
.label-align
|
||||
padding: 0 1em
|
||||
&:hover,
|
||||
&:active,
|
||||
// .display &,
|
||||
.settings-menu:hover &
|
||||
color: $oxide-blue
|
||||
border-color: $oxide-blue
|
||||
.settings-tofu
|
||||
border-color: $oxide-blue
|
||||
background-image: inline-image('/line-icons/icon-tofuburger-teal.svg')
|
||||
|
||||
@media #{$medium-up}
|
||||
margin-top: $dropdown-button-margin
|
||||
|
||||
.settings-dropdown
|
||||
display: none
|
||||
position: absolute
|
||||
top: $dropdown-button-height + ($dropdown-button-margin * .8)
|
||||
width: 100%
|
||||
padding: 0
|
||||
margin: 6px 0 0
|
||||
list-style: none
|
||||
z-index: 60
|
||||
background-color: white
|
||||
border: 1px solid $oxide-blue
|
||||
a
|
||||
display: block
|
||||
padding: .4em 1em .5em 2.4em
|
||||
font-size: 14px
|
||||
color: $oxide-blue
|
||||
&:hover
|
||||
color: white
|
||||
background-color: $oxide-blue
|
||||
@media #{$medium-up}
|
||||
margin-top: -3px
|
||||
|
||||
.settings-tofu
|
||||
width: 2em
|
||||
height: 2em
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
background:
|
||||
image: inline-image('/line-icons/icon-tofuburger.svg')
|
||||
repeat: no-repeat
|
||||
size: 20px
|
||||
position: 50%
|
||||
@media #{$medium-up}
|
||||
border-left: 1px solid $pebble-grey
|
||||
|
||||
.settings-menu
|
||||
position: relative
|
||||
@media #{$small-only}
|
||||
&.display
|
||||
.settings-dropdown
|
||||
display: block
|
||||
@media #{$medium-up}
|
||||
&:hover
|
||||
.settings-dropdown
|
||||
display: block
|
||||
.option-button
|
||||
width: 10em
|
||||
margin-top: -9px
|
||||
.option-dropdown a
|
||||
padding-left: 2.4em
|
||||
|
|
|
|||
|
|
@ -1,38 +1,42 @@
|
|||
$dropdown-border: #C3D9DB
|
||||
|
||||
.dropdown--db
|
||||
@include resetul
|
||||
border-radius: 4px
|
||||
position: absolute
|
||||
padding: .8em .5em
|
||||
z-index: 90
|
||||
width: 12.5em;
|
||||
right: 0;
|
||||
top: 4em;
|
||||
border: 2px $oxide-blue solid;
|
||||
background-color: white
|
||||
display: none
|
||||
a
|
||||
display: block
|
||||
padding: 0.4em 1em .2em
|
||||
&:hover
|
||||
background-color: $oxide-blue
|
||||
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 $oxide-blue;
|
||||
border-left: solid 2px $oxide-blue;
|
||||
transform: rotate(45deg);
|
||||
|
||||
.filter
|
||||
.option-button
|
||||
position: relative
|
||||
width: 17em
|
||||
@media #{$small-only}
|
||||
&.display
|
||||
.option-dropdown
|
||||
display: block
|
||||
@media #{$medium-up}
|
||||
&:hover
|
||||
.option-dropdown
|
||||
display: block
|
||||
.option-display
|
||||
color: $oxide-blue
|
||||
border-color: $oxide-blue
|
||||
.option-tofu
|
||||
border-color: $oxide-blue
|
||||
background-image: inline-image('/line-icons/icon-tofuburger-teal.svg')
|
||||
|
||||
$dropdown-button-height: 30px
|
||||
$dropdown-button-margin: -9px
|
||||
|
||||
.option-display
|
||||
display: flex
|
||||
height: $dropdown-button-height
|
||||
padding: 0
|
||||
border: 1px solid $pebble-grey
|
||||
color: $asphalt-grey
|
||||
border-radius: 2px
|
||||
text-align: center
|
||||
line-height: 2
|
||||
font-size: 14px
|
||||
cursor: pointer
|
||||
text-align: left
|
||||
white-space: nowrap
|
||||
.label-align
|
||||
flex-grow: 1
|
||||
padding: 0 1em
|
||||
line-height: 2
|
||||
overflow: hidden
|
||||
img
|
||||
max-width: 20px
|
||||
max-height: 20px
|
||||
|
|
@ -41,39 +45,59 @@ $dropdown-border: #C3D9DB
|
|||
border-radius: 50%
|
||||
overflow: hidden
|
||||
|
||||
.filter--org
|
||||
float: left
|
||||
.option-tofu
|
||||
width: 2em
|
||||
height: 2em
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
background:
|
||||
image: inline-image('/line-icons/icon-tofuburger.svg')
|
||||
repeat: no-repeat
|
||||
size: 20px
|
||||
position: 50%
|
||||
@media #{$medium-up}
|
||||
border-left: 1px solid $pebble-grey
|
||||
|
||||
.filter-current
|
||||
padding: .9em 0
|
||||
cursor: pointer
|
||||
a
|
||||
color: $oxide-blue
|
||||
|
||||
.filter-dropdown
|
||||
@include resetul
|
||||
position: absolute
|
||||
top: 3em
|
||||
min-width: 14em
|
||||
background-color: white
|
||||
border-radius: 2px
|
||||
overflow: hidden
|
||||
border: 1px solid $cream-dark
|
||||
border-top: none
|
||||
z-index: 40
|
||||
.option-dropdown
|
||||
display: none
|
||||
li
|
||||
white-space: nowrap
|
||||
position: absolute
|
||||
top: $dropdown-button-height + ($dropdown-button-margin * .8)
|
||||
width: 100%
|
||||
padding: 0
|
||||
margin: 6px 0 0
|
||||
list-style: none
|
||||
z-index: 60
|
||||
background-color: white
|
||||
border: 1px solid $oxide-blue
|
||||
a
|
||||
display: inline-block
|
||||
width: 100%
|
||||
padding: 10px 10px 10px 20px
|
||||
display: block
|
||||
padding: .5em 1em
|
||||
font-size: 14px
|
||||
color: $oxide-blue
|
||||
&:hover
|
||||
color: white
|
||||
background : $oxide-blue
|
||||
.is-selected
|
||||
a
|
||||
font-weight: 600
|
||||
background-color: $oxide-blue
|
||||
|
||||
&.is-open
|
||||
|
||||
.option-search
|
||||
input[type="text"]
|
||||
display: block
|
||||
padding-left: 1em
|
||||
outline: none
|
||||
border-bottom: 1px solid $oxide-blue
|
||||
border-radius: 0
|
||||
|
||||
|
||||
.option-list
|
||||
list-style: none
|
||||
padding: 0
|
||||
margin: 0
|
||||
a
|
||||
color: $asphalt-grey
|
||||
cursor: pointer
|
||||
img
|
||||
width: 22px
|
||||
height: 22px
|
||||
vertical-align: top
|
||||
margin-right: .3em
|
||||
border-radius: 50%
|
||||
|
|
|
|||
|
|
@ -13,15 +13,15 @@
|
|||
padding: 3px 3px 3px 4px
|
||||
vertical-align: middle
|
||||
overflow: visible
|
||||
background-color: #E2E1E2
|
||||
border-radius: 4px
|
||||
background-color: darken($pebble-grey, 10)
|
||||
border-radius: 2px
|
||||
border: none
|
||||
cursor: pointer
|
||||
span
|
||||
width: $switch-inner-width
|
||||
height: $switch-inner-heigth
|
||||
border-radius: 4px
|
||||
background-color: #A5A4A4
|
||||
border-radius: 2px
|
||||
background-color: $cement-grey
|
||||
color: white
|
||||
text-align: center
|
||||
font-weight: 300
|
||||
|
|
@ -50,9 +50,9 @@
|
|||
|
||||
&.active
|
||||
.switch-inner
|
||||
background-color: #B8D6B9
|
||||
background-color: darken($seed-green, 10)
|
||||
span
|
||||
background-color: #3BA85D
|
||||
background-color: $turf-green
|
||||
.on
|
||||
display: inline-block
|
||||
.off
|
||||
|
|
|
|||
|
|
@ -1,34 +1,41 @@
|
|||
<div class="filter-current">
|
||||
{{#if orgs.isLoading}}
|
||||
<div class="option-button">
|
||||
{{#if orgs.isLoading}}
|
||||
{{loading-indicator}}
|
||||
{{else}}
|
||||
<a {{action 'toggleOrgFilter'}} title="">
|
||||
{{#if selected }}
|
||||
<img src="{{selected.avatar_url}}" alt="{{org.login}}">
|
||||
{{#if selected.name}}
|
||||
{{selected.name}}
|
||||
<a href="#" title="" class="option-display" {{action 'toggleOrgFilter'}}>
|
||||
<span class="label-align">
|
||||
{{#if selected }}
|
||||
<img src="{{selected.avatar_url}}" alt="{{org.login}}">
|
||||
{{#if selected.name}}
|
||||
{{selected.name}}
|
||||
{{else}}
|
||||
{{selected.login}}
|
||||
{{/if}}
|
||||
{{else}}
|
||||
{{selected.login}}
|
||||
All organizations
|
||||
{{/if}}
|
||||
{{else}}
|
||||
All organizations
|
||||
{{/if}}
|
||||
</a><span class="icon-arrow-down"></span>
|
||||
{{/if}}
|
||||
</div>
|
||||
<ul class="filter-dropdown {{if showFilter 'is-open'}}">
|
||||
{{#if selected }}
|
||||
<li><a title="" {{action 'select'}}>All organizations</a></li>
|
||||
{{/if}}
|
||||
{{#each orgs as |org|}}
|
||||
<li>
|
||||
<a title="" {{action 'select' org}}><img src="{{org.avatar_url}}" alt="">
|
||||
{{#if org.name }}
|
||||
{{org.name}}
|
||||
{{else}}
|
||||
{{org.login}}
|
||||
{{/if}}
|
||||
</span><span class="option-tofu"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
<div class="option-dropdown {{if showFilter 'is-open'}}">
|
||||
<div class="option-search">
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="option-list">
|
||||
{{#if selected }}
|
||||
<li><a title="" {{action 'select'}}>All organizations</a></li>
|
||||
{{/if}}
|
||||
{{#each orgs as |org|}}
|
||||
<li>
|
||||
<a title="" {{action 'select' org}}><img src="{{org.avatar_url}}" alt="">
|
||||
{{#if org.name }}
|
||||
{{org.name}}
|
||||
{{else}}
|
||||
{{org.login}}
|
||||
{{/if}}
|
||||
</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<a {{action "menu"}} class="settings-button" type="" title="Show more options">
|
||||
<a {{action "menu"}} class="option-display" type="" title="Show more options">
|
||||
<span class="label-align">More options</span>
|
||||
<span class="settings-tofu"></span>
|
||||
<span class="option-tofu"></span>
|
||||
</a>
|
||||
<ul class="settings-dropdown">
|
||||
<ul class="option-dropdown">
|
||||
{{#if displaySettingsLink}}
|
||||
<li>
|
||||
{{#link-to "settings" repo}}Settings{{/link-to}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user