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

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

@ -45,18 +45,12 @@ textarea
.form-elem
display: inline-block
vertical-align: middle
.form-elem:first-of-type,
.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
width: 100%
margin-bottom: 1em
@media #{$medium-up}
.form-elem
margin-bottom: 0
.form-elem:first-of-type,
.form-elem:nth-of-type(2)
width: 31.5%

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

@ -8,9 +8,10 @@
position: absolute
top: -3.2em
width: auto
max-width: 8.6em
height: 1.9em
margin: auto
padding: .2em .8em .3em
padding: .2em .4em .3em
z-index: 5
background-color: #818383
border-radius: 4px
@ -38,14 +39,21 @@
right: 0
left: 0
&:before
left: 42%
left: 46%
@media #{$medium-up}
left: 42%
.tooltip--right
.tooltip--height
@extend %tooltip
.tooltip-bubble
right: -0.5em
right: 0
left: 0
top: -4em
height: 3.2em
&:before
left: 72%
left: 46%
@media #{$medium-up}
left: 42%
.tooltip--jobs
@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>
</div>
<div class="ssh-key-action">
<div class="tooltip--right">
<div class="tooltip--height">
<a href="#" title="">
<span class="icon-delete-disabled"></span>
</a>
<div class="tooltip-bubble">Default keys cannot be deleted</div>
<div class="tooltip-bubble">Default keys <br>cannot be deleted</div>
</div>
</div>
{{/if}}