diff options
author | Alfredo Sumaran <alfredo@gitlab.com> | 2016-10-21 02:24:36 +0300 |
---|---|---|
committer | Alfredo Sumaran <alfredo@gitlab.com> | 2016-11-21 21:49:18 +0300 |
commit | 10282283b04b6516542cb2fe86e33b886d17b129 (patch) | |
tree | 902ae04bcad9e47ff39edcb649a1854d1ffa66c1 /app/assets/stylesheets/pages/cycle_analytics.scss | |
parent | 6f824b156fcc881aa4f3341a2fef119d43058073 (diff) |
Cycle analytics second iteration
- Vue app has been completely rewritten
- New components
- Basic CSS
Diffstat (limited to 'app/assets/stylesheets/pages/cycle_analytics.scss')
-rw-r--r-- | app/assets/stylesheets/pages/cycle_analytics.scss | 205 |
1 files changed, 196 insertions, 9 deletions
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index 572e1e7d558..09625d178c5 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -1,10 +1,56 @@ #cycle-analytics { margin: 24px auto 0; - max-width: 800px; position: relative; - .panel { + .col-headers { + ul { + margin: 0; + padding: 0; + @include clearfix; + } + + li { + display: inline-block; + float: left; + line-height: 50px; + width: 20%; + } + + + .fa { + color: $cycle-analytics-light-gray; + } + + .stage-header { + width: 16%; + padding-left: $gl-padding; + } + + .median-header { + width: 12%; + } + .delta-header { + width: 12%; + } + + .event-header { + width: 45%; + padding-left: $gl-padding; + } + + .total-time-header { + width: 15%; + text-align: right; + padding-right: $gl-padding; + } + + .stage-name { + font-weight: 600; + } + } + + .panel { .content-block { padding: 24px 0; border-bottom: none; @@ -35,23 +81,16 @@ } &:last-child { - text-align: right; - @media (max-width: $screen-sm-min) { text-align: center; } } } - - .dropdown { - top: 13px; - } } .bordered-box { border: 1px solid $border-color; border-radius: $border-radius-default; - } .content-list { @@ -141,4 +180,152 @@ margin-top: 36px; } + .stage-panel-body { + display: flex; + flex-wrap: wrap; + } + + .stage-nav, + .stage-entries { + display: flex; + vertical-align: top; + font-size: $gl-font-size; + } + + .stage-nav { + width: 40%; + margin-bottom: 0; + + ul { + padding: 0; + margin: 0; + width: 100%; + } + + li { + list-style-type: none; + @include clearfix; + } + + .stage-nav-item { + display: block; + line-height: 65px; + border-top: solid 1px transparent; + border-bottom: solid 1px transparent; + border-right: solid 1px $border-color; + background-color: $gray-light; + + &.active { + background-color: transparent; + border-right-color: transparent; + border-top-color: $border-color; + border-bottom-color: $border-color; + box-shadow: inset 2px 0px 0px 0px $active-item-blue; + + .stage-name { + font-weight: 600; + } + } + + &:first-child { + border-top: none; + } + + &:last-child { + border-bottom: none; + } + + > div { + float: left; + + &.stage-name { + width: 40%; + } + + &.stage-median { + width: 30%; + } + + &.stage-delta { + width: 30%; + + .stage-direction { + float: right; + padding-right: $gl-padding; + } + } + } + + .stage-name { + padding-left: 16px; + } + } + } + + .stage-panel { + .panel-heading { + padding: 0; + background-color: transparent; + } + + .events-description { + line-height: 65px; + padding-left: $gl-padding; + } + } + + .stage-events { + width: 60%; + overflow: scroll; + height: 467px; + } + + .stage-event-list { + margin: 0; + padding: 0; + } + + .stage-event-item { + list-style-type: none; + padding: 0 0 $gl-padding; + margin: 0 $gl-padding $gl-padding $gl-padding; + border-bottom: solid 1px $gray-darker; + @include clearfix; + + &:last-child { + border-bottom: none; + margin-bottom: 0; + } + + .item-details, .item-time { + float: left; + } + + .item-details { + width: 75%; + } + + .item-title { + margin: 0 0 2px 0; + + a { + color: $gl-dark-link-color; + max-width: 100%; + display: block; + @include text-overflow(); + } + } + + .item-time { + width: 25%; + text-align: right; + font-size: $cycle-analytics-big-font; + color: $cycle-analytics-dark-text; + + abbr { + font-size: $gl-font-size; + color: $gl-text-color; + } + } + } } |