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

fix some responsive issues on settings page

Browse Source
This commit is contained in:
Lisa Passing 2015-07-08 16:56:42 +02:00
parent f6a1b455e6
commit e407dd69fb
4 changed files with 42 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/styles/app/layouts/settings.sass
View File

@ -1,5 +1,4 @@
.small-title .small-title
font-size: 18px font-size: 18px
color: $teal-light color: $teal-light
@ -17,8 +16,6 @@
.small-title .small-title
margin-top: 0 margin-top: 0
%settings-list %settings-list
padding: 0 padding: 0
margin: 0 margin: 0
@ -38,7 +35,7 @@
.settings-input .settings-input
display: inline-block display: inline-block
margin-right: 1rem margin-right: 1.4rem
vertical-align: middle vertical-align: middle
& + .label & + .label
vertical-align: middle vertical-align: middle
@ -47,8 +44,6 @@
font-size: $font-size-s font-size: $font-size-s
text-align: center text-align: center
%settings-row %settings-row
padding: .6em .5em padding: .6em .5em
border-radius: 4px border-radius: 4px
@ -64,8 +59,6 @@
span span
vertical-align: middle vertical-align: middle
%settings-name-section %settings-name-section
display: inline-block display: inline-block
position: relative position: relative
@ -78,17 +71,25 @@
.ssh-key-name .ssh-key-name
@extend %settings-name-section @extend %settings-name-section
width: 40% width: 100%
margin-bottom: 1em
.icon-key .icon-key
@extend %icon @extend %icon
@extend .icon-key @extend .icon-key
width: 1.2em width: 1.2em
height: 1.3em height: 1.3em
@media #{$medium-up}
width: 40%
margin-bottom: 0
.env-var-name .env-var-name
@extend %settings-name-section @extend %settings-name-section
width: grid-calc(6, 12) width: 100%
margin-bottom: 1em
@media #{$medium-up}
width: grid-calc(6, 12)
margin-bottom: 0
%settings-value-section %settings-value-section
@ -96,25 +97,23 @@
vertical-align: middle vertical-align: middle
white-space: nowrap white-space: nowrap
overflow: hidden overflow: hidden
width: 76%
@media #{$medium-up}
width: grid-calc(3, 12)
.ssh-key-value .ssh-key-value
@extend %settings-value-section @extend %settings-value-section
width: 48%
text-align: right
@media #{$medium-up}
width: grid-calc(3, 12)
.icon-fingerprint .icon-fingerprint
@extend %icon @extend %icon
@extend .icon-fingerprint @extend .icon-fingerprint
width: 1.3em width: 1.3em
height: 1.3em height: 1.3em
margin-right: .5em margin-right: .5em
@media #{$medium-up}
text-align: right
.env-var-value .env-var-value
display: inline-block @extend %settings-value-section
width: grid-calc(4, 12)
@media #{$medium-up}
width: grid-calc(3, 12)
input input
display: inline-block display: inline-block
width: 100% width: 100%
@ -130,11 +129,10 @@
position: 0.4em 0.7em position: 0.4em 0.7em
%settings-action-section %settings-action-section
display: inline-block display: inline-block
position: relative position: relative
width: grid-calc(2, 24) width: 24%
float: right float: right
vertical-align: middle vertical-align: middle
text-align: center text-align: center
@ -146,6 +144,10 @@
&:hover &:hover
.icon-delete .icon-delete
@extend .icon-delete-hover @extend .icon-delete-hover
@media #{$medium-up}
width: grid-calc(4, 24)
@media #{$xlarge-up}
width: grid-calc(4, 36)
.env-var-action .env-var-action
@extend %settings-action-section @extend %settings-action-section
@ -164,4 +166,3 @@
height: 1.3em height: 1.3em
margin: .2em auto 0 margin: .2em auto 0

14
app/styles/app/modules/forms.sass
View File

@ -45,18 +45,12 @@ textarea
.form-elem .form-elem
display: inline-block display: inline-block
vertical-align: middle vertical-align: middle
width: 100%
.form-elem:first-of-type, margin-bottom: 1em
.form-elem:nth-of-type(2)
width: 49.6%
.form-elem:nth-of-type(3)
width: 50%
.form-elem:last-of-type
width: 50%
float: right
text-align: right
@media #{$medium-up} @media #{$medium-up}
.form-elem
margin-bottom: 0
.form-elem:first-of-type, .form-elem:first-of-type,
.form-elem:nth-of-type(2) .form-elem:nth-of-type(2)
width: 31.5% width: 31.5%

18
app/styles/app/modules/tooltips.sass
View File

@ -8,9 +8,10 @@
position: absolute position: absolute
top: -3.2em top: -3.2em
width: auto width: auto
max-width: 8.6em
height: 1.9em height: 1.9em
margin: auto margin: auto
padding: .2em .8em .3em padding: .2em .4em .3em
z-index: 5 z-index: 5
background-color: #818383 background-color: #818383
border-radius: 4px border-radius: 4px
@ -38,14 +39,21 @@
right: 0 right: 0
left: 0 left: 0
&:before &:before
left: 42% left: 46%
@media #{$medium-up}
left: 42%
.tooltip--right .tooltip--height
@extend %tooltip @extend %tooltip
.tooltip-bubble .tooltip-bubble
right: -0.5em right: 0
left: 0
top: -4em
height: 3.2em
&:before &:before
left: 72% left: 46%
@media #{$medium-up}
left: 42%
.tooltip--jobs .tooltip--jobs
@extend %tooltip @extend %tooltip

4
app/templates/components/ssh-key.hbs
View File

@ -25,11 +25,11 @@
<span>e1:b1:83:06:7e:51:6d:5e:e0:e0:60:96:ca:ac:3d:8a</span> <span>e1:b1:83:06:7e:51:6d:5e:e0:e0:60:96:ca:ac:3d:8a</span>
</div> </div>
<div class="ssh-key-action"> <div class="ssh-key-action">
<div class="tooltip--right"> <div class="tooltip--height">
<a href="#" title=""> <a href="#" title="">
<span class="icon-delete-disabled"></span> <span class="icon-delete-disabled"></span>
</a> </a>
<div class="tooltip-bubble">Default keys cannot be deleted</div> <div class="tooltip-bubble">Default keys <br>cannot be deleted</div>
</div> </div>
</div> </div>
{{/if}} {{/if}}