diff options
author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-06-16 15:00:28 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-06-16 15:00:28 +0300 |
commit | 1d448a66d7d25cc30733b11eecfcd6893a445fc1 (patch) | |
tree | 6d2543f77a88bc4692291bf6277744822d25fdda /app/assets/stylesheets/framework | |
parent | 2b34f3f20d5a5c8ecdf6e8842892cb2b4ed3c89a (diff) |
Create responsive mobile view for pipelines table
Diffstat (limited to 'app/assets/stylesheets/framework')
-rw-r--r-- | app/assets/stylesheets/framework/page-header.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/responsive-tables.scss | 48 |
2 files changed, 51 insertions, 1 deletions
diff --git a/app/assets/stylesheets/framework/page-header.scss b/app/assets/stylesheets/framework/page-header.scss index 5f4211147f3..f1ecd050a0a 100644 --- a/app/assets/stylesheets/framework/page-header.scss +++ b/app/assets/stylesheets/framework/page-header.scss @@ -59,4 +59,8 @@ margin: 0 2px 0 3px; } } + + .ci-status { + margin-right: 10px; + } } diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss index f0a4c66aa1a..d2c90908baa 100644 --- a/app/assets/stylesheets/framework/responsive-tables.scss +++ b/app/assets/stylesheets/framework/responsive-tables.scss @@ -36,13 +36,58 @@ align-self: stretch; padding: 10px; align-items: center; - height: 62px; + min-height: 62px; &:not(:first-of-type) { border-top: 1px solid $white-normal; } } } + + &.section-wrap { + white-space: normal; + + @media (max-width: $screen-sm-max) { + flex-wrap: wrap; + } + } + } +} + + +.table-button-footer { + @media (min-width: $screen-md-min) { + text-align: right; + } + + @media (max-width: $screen-sm-max) { + background-color: $gray-normal; + align-self: stretch; + border-top: 1px solid $border-color; + + .table-action-buttons { + padding: 10px 5px; + display: flex; + + .btn { + border-radius: 3px; + } + + > .btn-group, + > .external-url, + > .btn { + flex: 1 1 28px; + margin: 0 5px; + } + + .dropdown-new { + width: 100%; + } + + .dropdown-menu { + min-width: initial; + } + } } } @@ -56,6 +101,7 @@ .table-mobile-header { color: $gl-text-color-secondary; + text-align: left; @include flex-max-width(40); @media (min-width: $screen-md-min) { |