diff options
| -rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 6 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/cycle_analytics.scss | 55 | ||||
| -rw-r--r-- | app/views/projects/cycle_analytics/show.html.haml | 26 |
3 files changed, 59 insertions, 28 deletions
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 2f5e3ec8e44..14ec310de2d 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -270,6 +270,12 @@ $calendar-border-color: rgba(#000, .1); $calendar-unselectable-bg: $gray-light; /* + * Cycle Analytics + */ +$cycle-analytics-box-padding: 30px; +$cycle-analytics-box-text-color: #8c8c8c; + +/* * Personal Access Tokens */ $personal-access-tokens-disabled-label-color: #bbb; diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index 21e19c97632..778471a34d7 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -1,6 +1,6 @@ #cycle-analytics { margin: 24px auto 0; - width: 800px; + max-width: 800px; position: relative; .panel { @@ -9,10 +9,18 @@ padding: 24px 0; border-bottom: none; position: relative; + + @media (max-width: $screen-sm-min) { + padding: 6px 0 24px; + } } .column { text-align: center; + + @media (max-width: $screen-sm-min) { + padding: 15px 0; + } .header { font-size: 30px; @@ -28,11 +36,14 @@ &:last-child { text-align: right; + + @media (max-width: $screen-sm-min) { + text-align: center; + } } } .dropdown { - position: relative; top: 13px; } } @@ -40,7 +51,7 @@ .bordered-box { border: 1px solid $border-color; @include border-radius($border-radius-default); - position: relative; + } .content-list { @@ -60,9 +71,15 @@ line-height: 19px; font-size: 15px; font-weight: 600; + color: $gl-title-color; } - &:text { - color: #8c8c8c; + + &.text { + color: $layout-link-gray; + + &.value-col { + color: $gl-title-color; + } } } } @@ -71,7 +88,9 @@ text-align: right; span { - line-height: 42px; + position: relative; + vertical-align: middle; + top: 3px; } } } @@ -82,21 +101,25 @@ .dismiss-icon { position: absolute; - right: $gl-padding; + right: $cycle-analytics-box-padding; cursor: pointer; color: #b2b2b2; } - svg { - margin: 0 20px; - float: left; - width: 136px; - height: 136px; + .svg-container { + text-align: center; + + svg { + width: 136px; + height: 136px; + } } - + .inner-content { - width: 480px; - float: left; + @media (max-width: $screen-sm-min) { + padding: 0 28px; + text-align: center; + } h4 { color: $gl-text-color; @@ -104,7 +127,7 @@ } p { - color: #8c8c8c; + color: $cycle-analytics-box-text-color; margin-bottom: $gl-padding; } } diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml index 5dcb2a17873..6a748690c79 100644 --- a/app/views/projects/cycle_analytics/show.html.haml +++ b/app/views/projects/cycle_analytics/show.html.haml @@ -2,18 +2,20 @@ - page_title "Cycle Analytics" = render "projects/pipelines/head" -#cycle-analytics{"v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project)}} +#cycle-analytics{class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project)}} .bordered-box.landing.content-block{"v-if" => "!isHelpDismissed"} = icon('times', class: 'dismiss-icon', "@click": "dismissLanding()") - = custom_icon('icon_cycle_analytics_splash') - .inner-content - %h4 - Introducing Cycle Analytics - %p - Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project. + .row + .col-sm-3.col-xs-12.svg-container + = custom_icon('icon_cycle_analytics_splash') + .col-sm-8.col-xs-12.inner-content + %h4 + Introducing Cycle Analytics + %p + Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project. - = link_to "Read more", help_page_path('user/project/cycle_analytics'), target: '_blank', class: 'btn' + = link_to "Read more", help_page_path('user/project/cycle_analytics'), target: '_blank', class: 'btn' = icon("spinner spin", "v-show" => "isLoading") @@ -25,11 +27,11 @@ .content-block .container-fluid .row - .col-xs-3.column{"v-for" => "item in summary"} + .col-sm-3.col-xs-12.column{"v-for" => "item in summary"} %h3.header {{item.value}} %p.text {{item.title}} - .col-xs-3.column + .col-sm-3.col-xs-12.column .dropdown.inline.js-ca-dropdown %button.dropdown-menu-toggle{"data-toggle" => "dropdown", :type => "button"} %span.dropdown-label Last 30 days @@ -47,11 +49,11 @@ %li{"v-for" => "item in stats"} .container-fluid .row - .col-xs-10.title-col + .col-xs-8.title-col %p.title {{item.title}} %p.text {{item.description}} - .col-xs-2.value-col + .col-xs-4.value-col %span {{item.value}} |