From 0b1bd7d09017a8dc9938c3339a757055c4936472 Mon Sep 17 00:00:00 2001 From: Lisa P Date: Tue, 1 Dec 2015 18:03:56 +0100 Subject: [PATCH] style caches some cache tweaks add title attributes to settings interaction elements --- app/components/caches-item.coffee | 2 +- app/styles/app/_mixins/mixins.sass | 29 ++-- app/styles/app/layout.sass | 13 -- app/styles/app/layouts/caches.sass | 152 +++++++++++------- app/styles/app/layouts/settings.sass | 10 +- app/styles/app/layouts/sidebar.sass | 5 +- app/styles/app/modules/icons.sass | 18 ++- app/styles/app/modules/tooltips.sass | 6 +- app/styles/app/pages/home-pro.sass | 12 -- app/templates/caches.hbs | 14 +- app/templates/components/caches-item.hbs | 32 ++-- app/templates/env-vars.hbs | 4 +- app/templates/requests.hbs | 2 +- app/templates/ssh-key.hbs | 4 +- .../images/line-icons/icon-trash-disabled.svg | 23 +++ public/images/line-icons/icon-trash.svg | 20 +++ 16 files changed, 207 insertions(+), 139 deletions(-) create mode 100644 public/images/line-icons/icon-trash-disabled.svg create mode 100644 public/images/line-icons/icon-trash.svg diff --git a/app/components/caches-item.coffee b/app/components/caches-item.coffee index 2b693580..c6fa0dbf 100644 --- a/app/components/caches-item.coffee +++ b/app/components/caches-item.coffee @@ -4,7 +4,7 @@ CachesItemComponent = Ember.Component.extend tagName: 'li' - classNames: ['tile', 'tile--xs', 'row'] + classNames: ['cache-item'] classNameBindings: ['cache.type'] isDeleting: false diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass index e1fc76da..554140b1 100644 --- a/app/styles/app/_mixins/mixins.sass +++ b/app/styles/app/_mixins/mixins.sass @@ -40,21 +40,32 @@ %inline-block display: inline-block -%helptext - font-size: $font-size-m - color: $grey-medium - a - color: $grey-dark - text-decoration: none - &:hover - text-decoration: underline - %section-title font-size: $font-size-sm color: $grey-medium font-weight: 400 +=linkStyle + a + text-decoration: none + border-bottom: 1px solid #bfc0c1 + padding-bottom: 0.1em + transition: color 200ms ease, border 200ms ease + &:hover, + &:active + color: #303030 + text-decoration: none + border-color: transparent + +%helptext + font-size: $font-size-m + color: $grey-medium + +linkStyle + +.helptext + @extend %helptext + // @todo simplyfiy coloring mixins =colorStatusIcons($color, $status) .status-icon.#{$status} diff --git a/app/styles/app/layout.sass b/app/styles/app/layout.sass index 0ec663f5..e4027df0 100644 --- a/app/styles/app/layout.sass +++ b/app/styles/app/layout.sass @@ -97,16 +97,3 @@ width: grid-calc(31, 36) margin-left: grid-calc(5, 36) - -.travis-lint - background-color: $travis-lint-bg - width: 100% - color: $travis-lint-color - margin: 10px 0 36px 0 - p - padding: 10px - font-weight: bold - margin: 0 - a - margin-left: 5px - diff --git a/app/styles/app/layouts/caches.sass b/app/styles/app/layouts/caches.sass index a2651660..58b7483c 100644 --- a/app/styles/app/layouts/caches.sass +++ b/app/styles/app/layouts/caches.sass @@ -1,67 +1,95 @@ -.caches - @include resetul - margin-top: 1rem - font-size: $font-size-sm - color: $grey-medium - clear: both - - .tile-xs - padding-left: 0 - - - .push - .icon--grey - @extend .icon--grey.push - width: 1.2em; - height: 0.8em; - .pull_request - .icon--grey - @extend .icon--grey.pull_request - width: 1em; - height: 1.5em; - - .icon--grey - margin-right: .3em - - .button--delete - transform: translateY(-0.2em); - - @media #{$medium-up} - .caches-branch - position: relative - overflow: hidden - width: grid-calc(4, 13) - &:after - content: "" - @include fadeOut(right, -90deg, $cream-light) - .caches-date - width: grid-calc(4, 13) - .caches-size - width: grid-calc(4, 13) - .caches-button - text-align: right - width: grid-calc(1, 13) - -.delete-repo-caches - margin-top: 1rem .caches-header - overflow: auto - .build-title - float: left - margin: 1.1em 0 .5em - a:hover - text-decoration: underline - .button--delete - float: right + .small-title + margin-top: .5em + small + color: $grey + font-size: 14px + a:hover, + a:active + border-bottom: 1px solid $grey -.caches-helptext - @extend %helptext + @media #{$medium-up} + display: flex + flex-flow: row wrap + justify-content: space-between + align-items: center -.caches-title - @extend %helptext - @extend %section-title - @include clearfix - float: left - margin: 1em 0 .5em +.caches-list + padding: 0 + margin: 0 + list-style: none + +.cache-item + border: 1px solid $cream-dark + margin-bottom: 5px + font-size: 15px + padding: 0 1em + .status-icon + width: 1.5em + height: 1.5em + vertical-align: middle + &:hover, + &:active + background-color: #F5F5F5 + + @media #{$medium-up} + display: flex + justify-content: space-between + flex-flow: row wrap + align-items: center + padding: .3em 0 + white-space: nowrap + .row-item:first-of-type + flex: 1 0 30% + padding-left: 1em + .row-item:nth-of-type(2) + flex: 1 0 30% + .row-item:nth-of-type(3) + flex: 1 0 30% + .row-item:last-of-type + flex: 0 0 50px + padding-right: 1em + +.delete-cache-button + padding-right: 3.1em + font-size: 15px + background: + size: auto 17px + position: 90% 0 + repeat: no-repeat + @extend %icon-line-trashcan + &:hover, + &:active + color: $red + @extend %icon-line-trashcan-red + +.delete-cache-icon + position: relative + display: inline-block + .tooltip + pointer-events: none + .icon-trash + display: inline-block + height: 17px + padding-left: 1.7em + background: + size: auto 100% + repeat: no-repeat + @extend %icon-line-trashcan + &:hover, + &:active + color: $red + .icon-trash + @extend %icon-line-trashcan-red + @media #{$medium-up} + .tooltip + pointer-events: inherit + .icon-trash + width: 50px + padding-left: 0 + text-indent: 999% + white-space: nowrap + overflow: hidden + background-position: 50% 0 diff --git a/app/styles/app/layouts/settings.sass b/app/styles/app/layouts/settings.sass index 6ddaabca..4a4e88f6 100644 --- a/app/styles/app/layouts/settings.sass +++ b/app/styles/app/layouts/settings.sass @@ -53,17 +53,18 @@ box-shadow: none %settings-row - padding: .6em .5em border-radius: 4px background-color: #F6F5F5 @media #{$medium-up} - height: 47px + height: 36px .settings-envvar @extend %settings-row + padding: .4em .5em .settings-sshkey @extend %settings-row + padding: .6em .5em display: block margin-bottom: 1rem overflow: hidden @@ -104,7 +105,6 @@ width: grid-calc(6, 12) margin-bottom: 0 - %settings-value-section display: inline-block vertical-align: middle @@ -133,7 +133,7 @@ input display: inline-block width: 100% - padding: 0.7em 0.5em 0.7em 2.6em + padding: 0.6em 0.5em 0.7em 2.6em border-radius: 4px border: none background-color: #eeedec @@ -161,7 +161,7 @@ @extend .icon-delete width: 1.1em height: 1.6em - background-position: 0 4px + background-position: 0 2px &:hover .icon-delete @extend .icon-delete-hover diff --git a/app/styles/app/layouts/sidebar.sass b/app/styles/app/layouts/sidebar.sass index 80e874ae..4510cceb 100644 --- a/app/styles/app/layouts/sidebar.sass +++ b/app/styles/app/layouts/sidebar.sass @@ -74,12 +74,11 @@ $sb-font-size: 14px color: $teal-light &:after bottom: -1px + li + margin-right: 0.8em @media (min-width: #{lower-bound($large-range)}) ul height: 2em - @media #{$xxlarge-up} - li - padding-right: 2em @media (max-width: #{lower-bound($large-range)}) li display: block !important diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index 8289e8d1..76283f8b 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -52,14 +52,20 @@ %icon-hook-off background-image: inline-image('svg/hooks-off.svg') -.icon-delete - background-image: inline-image('svg/delete.svg') - -.icon-delete-hover - background-image: inline-image('svg/delete-hover.svg') +%icon-line-trashcan + background-image: url('data:image/svg+xml;utf8,') +%icon-line-trashcan-red + background-image: url('data:image/svg+xml;utf8,') +%icon-line-trashcan-disabled + background-image: url('data:image/svg+xml;utf8,') + +.icon-delete + @extend %icon-line-trashcan +.icon-delete-hover + @extend %icon-line-trashcan-red .icon-delete-disabled - background-image: inline-image('svg/delete-disabled.svg') + @extend %icon-line-trashcan-disabled .icon-key background-image: inline-image('svg/key.svg') diff --git a/app/styles/app/modules/tooltips.sass b/app/styles/app/modules/tooltips.sass index 0dde7d0e..9fdb8ed1 100644 --- a/app/styles/app/modules/tooltips.sass +++ b/app/styles/app/modules/tooltips.sass @@ -3,9 +3,9 @@ position: absolute top: -2.8em width: auto - height: 1.9em + height: 1.6em margin: auto - padding: .3em .4em .3em + padding: .1em .4em z-index: 5 background-color: #818383 border-radius: 4px @@ -54,7 +54,7 @@ right: 0 left: 0 top: -4em - height: 3.2em + height: 2.9em max-width: 8.6em &:before left: 45% diff --git a/app/styles/app/pages/home-pro.sass b/app/styles/app/pages/home-pro.sass index cda89f2f..7d837021 100644 --- a/app/styles/app/pages/home-pro.sass +++ b/app/styles/app/pages/home-pro.sass @@ -4,18 +4,6 @@ $red: #DB4242 $yellow: #E5C025 $grey: #858585 -@mixin linkStyle - a - text-decoration: none - border-bottom: 1px solid #bfc0c1 - padding-bottom: 0.1em - transition: color 200ms ease, border 200ms ease - &:hover, - &:active - color: #303030 - text-decoration: none - border-color: transparent - .landing-pro br diff --git a/app/templates/caches.hbs b/app/templates/caches.hbs index e9ef582f..f7ee4306 100644 --- a/app/templates/caches.hbs +++ b/app/templates/caches.hbs @@ -1,13 +1,13 @@ {{#if cachesExist}}
-

All caches (documentation)

- +

All caches (Read the docs)

+ Delete all repository caches
{{#if model.pushes.length}} -

Pushes

-