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

revamp settings button to more options

Browse Source
This commit is contained in:
Lisa P 2016-02-11 12:31:42 +01:00
parent 7a6bb1cdd9
commit a343815476
8 changed files with 43 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/index.html
View File

@ -10,7 +10,7 @@
{{content-for "head"}}
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/travis.css">
<link rel="mask-icon" href="images/favicon.svg" color="black">

43
app/styles/app/layouts/repo.sass
View File

@ -49,36 +49,26 @@ $dropdown-button-margin: -9px
.settings-button
display: block
height: $dropdown-button-height
padding: 0 0.7em
border: 1px solid #f1f1f1
color: $cement-grey
padding: 0
border: 1px solid $pebble-grey
color: $asphalt-grey
border-radius: 2px
text-align: center
line-height: 2
font-size: 14px
&:after
content: ""
display: inline-block
width: 0.9em
height: 0.6em
margin-left: 1em
background:
size: 100%
repeat: no-repeat
@extend %icon-line-dropdown
.icon-settings
width: .9em
margin-right: .3em
cursor: pointer
.label-align
padding: 0 1em
&:hover,
&:active,
// .display &,
.settings-menu:hover &
color: $oxide-blue
border-color: $oxide-blue
.icon-settings
@extend %icon-line-cog-teal
&:after
@extend %icon-line-dropdown-teal
.settings-tofu
border-color: $oxide-blue
background-image: inline-image('/line-icons/icon-tofuburger-teal.svg')
@media #{$medium-up}
margin-top: $dropdown-button-margin
@ -104,6 +94,19 @@ $dropdown-button-margin: -9px
@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}

1
app/styles/app/vars.sass
View File

@ -6,6 +6,7 @@ $font-size-s: 12px
$font-weight-light: 300
$font-weight-normal: 400
$font-weight-bold: 600
$top-height: 55px

7
app/templates/components/repo-show-tools.hbs
View File

@ -1,6 +1,7 @@
<a {{action "menu"}} class="settings-button" type="" title="Open settings menu">
<span class="icon-settings" aria-hidden="true"></span>
<span class="label-align">Settings</span></a>
<a {{action "menu"}} class="settings-button" type="" title="Show more options">
<span class="label-align">More options</span>
<span class="settings-tofu"></span>
</a>
<ul class="settings-dropdown">
{{#if displaySettingsLink}}
<li>

1
public/images/line-icons/icon-arrow-dropdown-teal.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 5.4"><style>.st0{fill:#40a3ad;}</style><path class="st0" d="M0 .5C0 .4 0 .3.1.2c.2-.2.5-.2.7 0l4.8 4.2L10.3.2c.2-.2.5-.2.7 0 .2.2.2.5 0 .7L6 5.4c-.2.2-.4.2-.6 0L.2.8C.1.7 0 .6 0 .5z" id="tabarrow_1_"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 263 B

1
public/images/line-icons/icon-arrow-dropdown.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 5.4"><style>.st0{fill:#8d8d8d;}</style><path class="st0" d="M0 .5C0 .4 0 .3.1.2c.2-.2.5-.2.7 0l4.8 4.2L10.3.2c.2-.2.5-.2.7 0 .2.2.2.5 0 .7L6 5.4c-.2.2-.4.2-.6 0L.2.8C.1.7 0 .6 0 .5z" id="tabarrow_1_"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 263 B

11
public/images/line-icons/icon-tofuburger-teal.svg Normal file
View File

@ -0,0 +1,11 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<g id="Tofuburger">
<path fill="#3eaaaf" d="M17.9,6.2H2.1C1.8,6.2,1.5,6,1.5,5.6C1.5,5.3,1.8,5,2.1,5h15.7c0.4,0,0.6,0.3,0.6,0.6
C18.5,6,18.2,6.2,17.9,6.2z"/>
<path fill="#3eaaaf" d="M17.9,10.6H2.1c-0.4,0-0.6-0.3-0.6-0.6s0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6S18.2,10.6,17.9,10.6z
"/>
<path fill="#3eaaaf" d="M17.9,15H2.1c-0.4,0-0.6-0.3-0.6-0.6c0-0.3,0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6
C18.5,14.7,18.2,15,17.9,15z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 672 B

6
public/images/line-icons/icon-tofuburger.svg
View File

@ -1,11 +1,11 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<g id="Tofuburger">
<path fill="#A7AEAE" d="M17.9,6.2H2.1C1.8,6.2,1.5,6,1.5,5.6C1.5,5.3,1.8,5,2.1,5h15.7c0.4,0,0.6,0.3,0.6,0.6
<path fill="#9d9d9d" d="M17.9,6.2H2.1C1.8,6.2,1.5,6,1.5,5.6C1.5,5.3,1.8,5,2.1,5h15.7c0.4,0,0.6,0.3,0.6,0.6
C18.5,6,18.2,6.2,17.9,6.2z"/>
<path fill="#A7AEAE" d="M17.9,10.6H2.1c-0.4,0-0.6-0.3-0.6-0.6s0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6S18.2,10.6,17.9,10.6z
<path fill="#9d9d9d" d="M17.9,10.6H2.1c-0.4,0-0.6-0.3-0.6-0.6s0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6S18.2,10.6,17.9,10.6z
"/>
<path fill="#A7AEAE" d="M17.9,15H2.1c-0.4,0-0.6-0.3-0.6-0.6c0-0.3,0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6
<path fill="#9d9d9d" d="M17.9,15H2.1c-0.4,0-0.6-0.3-0.6-0.6c0-0.3,0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6
C18.5,14.7,18.2,15,17.9,15z"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 672 B

After

Width:  |  Height:  |  Size: 672 B