add some styles for settings and new switches
This commit is contained in:
Lisa Passing
parent
1072577ce0
commit
2ebd6e893a
|
|
@ -5,7 +5,16 @@ Route = TravisRoute.extend
|
|||
|
||||
model: ->
|
||||
repo = @modelFor('repo')
|
||||
console.log('######### YEHA ###############')
|
||||
repo.fetchSettings().then (settings) ->
|
||||
|
||||
console.log(settings)
|
||||
repo.set('settings', settings)
|
||||
|
||||
# return Ember.RSVP.hash({
|
||||
# settings: repo.fetchSettings(),
|
||||
# envVars: repo.envVars(),
|
||||
# sshKey: repo.sshKey()
|
||||
# })
|
||||
|
||||
`export default Route`
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
// @import "app/pro";
|
||||
// @import "app/settings";
|
||||
|
||||
@import "app/components/travis-switch";
|
||||
// @import "app/components/travis-switch";
|
||||
@import "app/components/sync-button";
|
||||
@import "app/components/loading-indicator";
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ $font-size-ml: 18px
|
|||
$font-size-m: 16px
|
||||
$font-size-sm: 14px
|
||||
$line-height-m: 1.3
|
||||
$font-size-s: 12px
|
||||
|
||||
// colors
|
||||
$teal1: #5BA5A4
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
// If you'd no longer like to run this project on Travis CI you can deactivate it now.<br>You will be able to reactivate it in the future if you'd like to.
|
||||
|
||||
$add-green: #3AA95E
|
||||
$add-green-hover: #3BA85D
|
||||
|
|
@ -15,16 +14,6 @@ $deactivate-bg: #e93d3c
|
|||
$heading-color: #63a4a3
|
||||
$heading-size: 18px
|
||||
|
||||
$switch-height: 32px
|
||||
$switch-size: 11px
|
||||
$switch-color: $white
|
||||
|
||||
$switch-descr-size: 16px
|
||||
$switch-descr-color: #8e8f8e
|
||||
|
||||
$switch-descr-inline-size: 12px
|
||||
$switch-descr-inline-color: #8e8f8e
|
||||
|
||||
$input-border: 1px solid #eeedec
|
||||
$input-radius: 4px
|
||||
$input-color: #8e8f8e
|
||||
|
|
@ -40,3 +29,50 @@ $env-vars-radius: 4px
|
|||
$env-vars-pw-bg: #eeedec
|
||||
|
||||
$input-main-height: 30px
|
||||
|
||||
|
||||
.small-title
|
||||
font-size: 18px
|
||||
color: $heading-color
|
||||
font-weight: 400
|
||||
|
||||
|
||||
.settings
|
||||
padding-top: .8em
|
||||
|
||||
.settings-section
|
||||
padding: 0 0 1em
|
||||
margin-bottom: 1.5em
|
||||
border-bottom: $setting-section-border
|
||||
&:last-of-type
|
||||
border-bottom: none
|
||||
.small-title
|
||||
margin-top: 0
|
||||
|
||||
|
||||
.settings-list
|
||||
padding: 0
|
||||
margin: 0
|
||||
list-style: none
|
||||
|
||||
li
|
||||
margin-bottom: 1rem
|
||||
@media #{$medium-up}
|
||||
display: inline-block
|
||||
width: grid-calc(11, 24)
|
||||
|
||||
.settings-input
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
vertical-align: middle
|
||||
& + .label
|
||||
vertical-align: middle
|
||||
input
|
||||
border: 1px solid #eeedec
|
||||
border-radius: 4px
|
||||
color: #8e8f8e
|
||||
text-align: center
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
|
||||
|
|
@ -1,55 +1,106 @@
|
|||
|
||||
.profile-switch
|
||||
%switch
|
||||
$switch-height: 28px
|
||||
$switch-inner-height: 22px
|
||||
$switch-width: 62px
|
||||
$switch-inner-width: 27px
|
||||
|
||||
box-sizing: border-box
|
||||
position: relative
|
||||
width: $switch-width
|
||||
height: $switch-height
|
||||
background-color: #d1d1d1
|
||||
border: none
|
||||
cursor: pointer
|
||||
@extend %border-radius-4px
|
||||
&:before
|
||||
content: none
|
||||
&:after
|
||||
content: ""
|
||||
display: block
|
||||
position: absolute
|
||||
top: ($switch-height - $switch-inner-height) / 2
|
||||
right: ($switch-width - ($switch-inner-width * 2)) / 2
|
||||
height: $switch-inner-height
|
||||
width: $switch-inner-width
|
||||
background-color: #919191
|
||||
background-repeat: no-repeat
|
||||
background-size: 14px 14px
|
||||
background-position: 6px
|
||||
transition: right 200ms ease
|
||||
@extend .icon-hook-off
|
||||
@extend %border-radius-4px
|
||||
|
||||
&.active
|
||||
background-color: #b6d5b6
|
||||
&:after
|
||||
right: $switch-width - $switch-inner-width - (($switch-width - ($switch-inner-width * 2)) / 2)
|
||||
background-color: #39a85b
|
||||
@extend .icon-hook-on
|
||||
|
||||
&.disabled
|
||||
cursor: default
|
||||
pointer-events: none
|
||||
opacity: .5
|
||||
|
||||
.active &.disabled
|
||||
background-color: #b6d5b6
|
||||
&:after
|
||||
right: $switch-width - $switch-inner-width - (($switch-width - ($switch-inner-width * 2)) / 2)
|
||||
background-color: #39a85b
|
||||
@extend .icon-hook-on
|
||||
|
||||
|
||||
|
||||
.profile-switch
|
||||
span
|
||||
display: none
|
||||
|
||||
.switch
|
||||
box-sizing: border-box
|
||||
position: relative
|
||||
width: $switch-width
|
||||
@extend %switch
|
||||
|
||||
|
||||
// NEW SWITCH
|
||||
.settings-switch
|
||||
$switch-width: 80px
|
||||
$switch-height: 32px
|
||||
|
||||
div
|
||||
display: inline-block
|
||||
height: $switch-height
|
||||
background-color: #d1d1d1
|
||||
border: none
|
||||
cursor: pointer
|
||||
@extend %border-radius-4px
|
||||
&:before
|
||||
content: none
|
||||
&:after
|
||||
content: ""
|
||||
display: block
|
||||
position: absolute
|
||||
top: ($switch-height - $switch-inner-height) / 2
|
||||
right: ($switch-width - ($switch-inner-width * 2)) / 2
|
||||
height: $switch-inner-height
|
||||
width: $switch-inner-width
|
||||
background-color: #919191
|
||||
background-repeat: no-repeat
|
||||
background-size: 14px 14px
|
||||
background-position: 6px
|
||||
transition: right 200ms ease
|
||||
@extend .icon-hook-off
|
||||
@extend %border-radius-4px
|
||||
width: $switch-width
|
||||
margin-right: 1em
|
||||
padding: 3px 3px 3px 4px
|
||||
vertical-align: middle;
|
||||
font-size: $font-size-s
|
||||
border-radius: 4px
|
||||
background-color: #E2E1E2
|
||||
span
|
||||
display: inline-block
|
||||
width: 36px
|
||||
height: 26px
|
||||
vertical-align: middle;
|
||||
border-radius: 4px
|
||||
background-color: #A5A4A4
|
||||
color: $white
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
line-height: 2.2;
|
||||
.label
|
||||
vertical-align: middle;
|
||||
font-size: $font-size-m
|
||||
color: $grey-medium
|
||||
.on
|
||||
display: none
|
||||
margin-left: 0
|
||||
|
||||
&.active
|
||||
background-color: #b6d5b6
|
||||
&:after
|
||||
right: $switch-width - $switch-inner-width - (($switch-width - ($switch-inner-width * 2)) / 2)
|
||||
background-color: #39a85b
|
||||
@extend .icon-hook-on
|
||||
|
||||
&.disabled
|
||||
cursor: default
|
||||
pointer-events: none
|
||||
opacity: .5
|
||||
|
||||
.active &.disabled
|
||||
background-color: #b6d5b6
|
||||
&:after
|
||||
right: $switch-width - $switch-inner-width - (($switch-width - ($switch-inner-width * 2)) / 2)
|
||||
background-color: #39a85b
|
||||
@extend .icon-hook-on
|
||||
&.active
|
||||
div
|
||||
background-color: #B8D6B9
|
||||
span
|
||||
background-color: #3BA85D
|
||||
.on
|
||||
display: inline-block
|
||||
margin-left: 36px
|
||||
.off
|
||||
display: none
|
||||
|
|
|
|||
|
|
@ -1,24 +1,42 @@
|
|||
<div class="settings">
|
||||
|
||||
<section class="settings-section">
|
||||
<h2>General Settings</h2>
|
||||
<h2 class="small-title">General Settings</h2>
|
||||
|
||||
<ul class="settings-list">
|
||||
<li>{{settings-switch}}</li>
|
||||
<li>
|
||||
<div class="settings-input"><input type="text" pattern="/^[0-9]+$/" value="4"></div><span class="label">Concurrent jobs</span>
|
||||
</li>
|
||||
<li>{{settings-switch}}</li>
|
||||
<li>{{settings-switch}}</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="settings-section">
|
||||
<h2>Environment Variables</h2>
|
||||
<h2 class="small-title">Environment Variables</h2>
|
||||
|
||||
{{env-var}}
|
||||
|
||||
|
||||
</section>
|
||||
{{#if config.endpoints.sshKey}}
|
||||
<section class="settings-section">
|
||||
<h2>SSH Key</h2>
|
||||
<h2 class="small-title">SSH Key</h2>
|
||||
|
||||
{{ssh-key}}
|
||||
</section>
|
||||
{{/if}}
|
||||
<section class="settings-section">
|
||||
<h2>Deactivate Repository</h2>
|
||||
<h2 class="small-title">Deactivate Repository</h2>
|
||||
<p>If you'd no longer like to run this project on Travis CI you can deactivate it now.<br>You will be able to reactivate it in the future if you'd like to.</p>
|
||||
<a href="#" class="button--delete">Deactivate Repository</a>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="settings">
|
||||
{{!-- <div id="settings">
|
||||
{{outlet}}
|
||||
</div>
|
||||
</div> --}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user