start rewriting tooltips
remove some whitespace
This commit is contained in:
lislis
parent
0fb840a479
commit
9af0c24d2f
|
|
@ -12,7 +12,7 @@ export default TravisRoute.extend({
|
|||
model() {
|
||||
var apiEndpoint;
|
||||
apiEndpoint = config.apiEndpoint;
|
||||
return $.ajax(apiEndpoint + '/v3/repos?repository.active=false&include=repository.default_branch,build.commit', {
|
||||
return $.ajax(apiEndpoint + '/v3/repos?repository.active=true&include=repository.default_branch,build.commit', {
|
||||
headers: {
|
||||
Authorization: 'token ' + this.auth.token()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,6 +53,10 @@
|
|||
align-items: center
|
||||
height: 34px
|
||||
|
||||
&:hover
|
||||
a
|
||||
margin-left: -2px // related to the width given in color jobs
|
||||
|
||||
.section-title
|
||||
font-size: 16px
|
||||
color: $cement-grey
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
=requestFadeOut($status, $color)
|
||||
@media #{$medium-up}
|
||||
&.#{$status}:hover
|
||||
padding-left: 0
|
||||
.status-icon.api
|
||||
svg
|
||||
background-color: $color
|
||||
|
|
@ -19,8 +20,8 @@
|
|||
margin-bottom: 5px
|
||||
font-size: 15px
|
||||
padding-left: 1em
|
||||
@include colorJobs($turf-green, 'accepted', 6px, rgba($turf-green, .1))
|
||||
@include colorJobs($brick-red, 'rejected', 6px, rgba($brick-red, .1))
|
||||
@include colorJobs($turf-green, 'accepted', 3px, rgba($turf-green, .1))
|
||||
@include colorJobs($brick-red, 'rejected', 3px, rgba($brick-red, .1))
|
||||
|
||||
@include requestFadeOut('accepted',#ECF6EF)
|
||||
@include requestFadeOut('rejected', #FBECEB)
|
||||
|
|
@ -36,9 +37,9 @@
|
|||
@media #{$medium-up}
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
flex-flow: row wrap
|
||||
flex-flow: row nowrap
|
||||
align-items: center
|
||||
padding: .3em 0
|
||||
padding: .3em 0 .3em 2px
|
||||
white-space: nowrap
|
||||
|
||||
.row-item:first-of-type
|
||||
|
|
|
|||
|
|
@ -137,5 +137,3 @@
|
|||
&:active
|
||||
background-color: $hover
|
||||
border-left: $width solid $color
|
||||
a
|
||||
margin-left: - $width + 1px
|
||||
|
|
|
|||
|
|
@ -82,86 +82,39 @@
|
|||
&:before
|
||||
left: 2.5em
|
||||
|
||||
.tooltip-jobs
|
||||
display: inline-block
|
||||
position: relative
|
||||
vertical-align: middle
|
||||
@extend %tooltip
|
||||
.tooltip-bubble
|
||||
top: -3.8em
|
||||
left: -.5em
|
||||
height: 3.2em
|
||||
padding: .3em .4em
|
||||
&:before
|
||||
left: 0.6em
|
||||
.tooltip-trigger
|
||||
vertical-align: baseline
|
||||
|
||||
.tooltip.job-os
|
||||
.tooltip-bubble
|
||||
top: -2.2em
|
||||
height: 1.6em
|
||||
padding: 0.1em .4em
|
||||
&:before
|
||||
left: 0
|
||||
right: 0
|
||||
margin: auto
|
||||
|
||||
|
||||
.tooltip--requests
|
||||
@extend %tooltip
|
||||
position: absolute
|
||||
right: 0
|
||||
bottom: 0
|
||||
.tooltip-trigger
|
||||
margin: .2em .5em
|
||||
.tooltip-bubble
|
||||
top: -3.6em
|
||||
right: 0
|
||||
width: 10em
|
||||
height: 3em
|
||||
white-space: normal
|
||||
&:before
|
||||
right: .8em
|
||||
|
||||
|
||||
// trying to rewrite
|
||||
|
||||
$tooltip-spacing: 4em
|
||||
$tooltip-arrow-width: 1em
|
||||
$tooltip-arrow-width: .8em
|
||||
|
||||
[data-tooltip]
|
||||
position: relative
|
||||
background-color: pink
|
||||
display: inline-block
|
||||
vertical-align: middle
|
||||
&:after
|
||||
content: attr(data-tooltip)
|
||||
display: block
|
||||
position: absolute
|
||||
background: $asphalt-grey
|
||||
padding: 0.5em
|
||||
padding: 0.2em 0.3em
|
||||
color: white
|
||||
border-radius: 2px
|
||||
bottom: $tooltip-spacing
|
||||
left: 0
|
||||
right: 0
|
||||
white-space: normal
|
||||
margin: auto
|
||||
font-size: 12px
|
||||
&:before
|
||||
content: ""
|
||||
display: block
|
||||
width: $tooltip-arrow-width
|
||||
height: $tooltip-arrow-width
|
||||
transform: rotate(45deg)
|
||||
position: absolute
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: $tooltip-spacing - $tooltip-arrow-width
|
||||
margin: auto
|
||||
background-color: $asphalt-grey
|
||||
|
||||
&:after,
|
||||
&:before
|
||||
display: block
|
||||
position: absolute
|
||||
background: $asphalt-grey
|
||||
left: 0
|
||||
right: 0
|
||||
margin: auto
|
||||
display: none
|
||||
|
||||
&:hover,
|
||||
|
|
@ -170,4 +123,20 @@ $tooltip-arrow-width: 1em
|
|||
&:before
|
||||
display: block
|
||||
|
||||
|
||||
.job-os[data-tooltip]
|
||||
$tooltip-spacing: 3em
|
||||
&:after
|
||||
bottom: $tooltip-spacing
|
||||
&:before
|
||||
bottom: $tooltip-spacing - $tooltip-arrow-width
|
||||
|
||||
|
||||
.request-item
|
||||
[data-tooltip]
|
||||
$tooltip-spacing: 3em
|
||||
width: 7em
|
||||
text-align: center
|
||||
&:after
|
||||
bottom: $tooltip-spacing
|
||||
&:before
|
||||
bottom: $tooltip-spacing - $tooltip-arrow-width
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@
|
|||
{{#if getLast5Builds.isLoading}}
|
||||
{{loading-indicator center=true}}
|
||||
{{else}}
|
||||
{{#each getLast5Builds.content as |buildTile|}}
|
||||
{{#each getLast5Builds.content as |buildTile|}}
|
||||
{{build-tile build=buildTile}}
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -95,11 +95,11 @@
|
|||
{{/if}}
|
||||
{{else}}
|
||||
<div class="dash-button">
|
||||
{{#unless displayActivateLink}}
|
||||
{{#if displayActivateLink}}
|
||||
<button type="button" class="activate-repo-button is-active" {{action 'activateRepo'}}>Activate repository</button>
|
||||
{{else}}
|
||||
<p class="activate-repo-button" data-tooltip="You need admin rights to activate a repository">Actiavte repository</p>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,9 @@
|
|||
<span class="label-align" aria-label="Job number">{{job.number}}</span>
|
||||
</div>
|
||||
|
||||
<div class="job-os {{job.config.os}} tooltip">
|
||||
<div class="job-os {{job.config.os}} tooltip" data-tooltip="{{job.config.os}}">
|
||||
{{#if job.config.os}}
|
||||
<span class="icon tooltip-trigger" aria-label="Operating System">{{job.config.os}}</span>
|
||||
<div class="tooltip-bubble" aria-hidden="true">{{job.config.os}}</div>
|
||||
<span class="icon" aria-label="{{job.config.os}} operating system">{{job.config.os}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,10 +4,9 @@
|
|||
<h2 class="section-title">Build Jobs</h2>
|
||||
{{else}}
|
||||
<h2 class="section-title">Allowed Failures
|
||||
<div class="tooltip-jobs">
|
||||
<span class="tooltip-jobs" data-tooltip="These are jobs you can allow to fail <br> without failing your entire build">
|
||||
<span class="icon-question tooltip-trigger"></span>
|
||||
<p class="tooltip-bubble">These are jobs you can allow to fail <br> without failing your entire build</p>
|
||||
</div>
|
||||
</span>
|
||||
</h2>
|
||||
{{/if}}
|
||||
|
||||
|
|
|
|||
|
|
@ -37,8 +37,7 @@
|
|||
</div>
|
||||
|
||||
{{#if isGHPages}}
|
||||
<a class="tooltip--requests" href="https://docs.travis-ci.com/user/customizing-the-build/#Whitelisting-or-blacklisting-branches" title="Branch whitelisting - Travis CI Docs">
|
||||
<span class="icon-question tooltip-trigger" aria-label="Help"></span>
|
||||
<span class="tooltip-bubble">Read about branch whitelisting</span>
|
||||
<a class="tooltip" href="https://docs.travis-ci.com/user/customizing-the-build/#Whitelisting-or-blacklisting-branches" title="Branch whitelisting - Travis CI Docs" data-tooltip="Read about branch whitelisting">
|
||||
<span class="icon-question" aria-label="Help"></span>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user