From 43701de5f29e501f4b4c27b59474eee4190b8378 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Thu, 22 Sep 2016 12:56:38 +0100 Subject: Makes Cycle analytics mobile friendly --- app/assets/stylesheets/framework/variables.scss | 7 ++++ app/assets/stylesheets/pages/cycle_analytics.scss | 41 ++++++++++++++--------- app/views/projects/cycle_analytics/show.html.haml | 22 ++++++------ 3 files changed, 44 insertions(+), 26 deletions(-) diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 2f5e3ec8e44..0270da77450 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -269,6 +269,13 @@ $calendar-hover-bg: #ecf3fe; $calendar-border-color: rgba(#000, .1); $calendar-unselectable-bg: $gray-light; +/* + * Cycle Analytics + */ +$cycle-analytics-box-padding: 30px; +$cycle-analytics-box-margin-bottom: 16px; +$cycle-analytics-box-text-color: #8c8c8c; + /* * Personal Access Tokens */ diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index 21e19c97632..1df89436d88 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 { @@ -32,15 +32,19 @@ } .dropdown { - position: relative; top: 13px; + + @media (max-width: $screen-sm-min) { + right: 15px; + top: 30px; + } } } .bordered-box { border: 1px solid $border-color; @include border-radius($border-radius-default); - position: relative; + } .content-list { @@ -62,7 +66,7 @@ font-weight: 600; } &:text { - color: #8c8c8c; + color: $cycle-analytics-box-text-color; } } } @@ -77,26 +81,31 @@ } .landing { - margin-bottom: $gl-padding; + margin-bottom: $cycle-analytics-box-margin-bottom; overflow: hidden; .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; + text-align: center; + + @media (max-width: $screen-sm-min) { + padding: 0 28px; + } h4 { color: $gl-text-color; @@ -104,8 +113,8 @@ } p { - color: #8c8c8c; - margin-bottom: $gl-padding; + color: $cycle-analytics-box-text-color; + margin-bottom: $cycle-analytics-box-margin-bottom; } } } diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml index 5dcb2a17873..9d17b14e601 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-6.column{"v-for" => "item in summary"} %h3.header {{item.value}} %p.text {{item.title}} - .col-xs-3.column + .col-sm-3.col-xs-6.column .dropdown.inline.js-ca-dropdown %button.dropdown-menu-toggle{"data-toggle" => "dropdown", :type => "button"} %span.dropdown-label Last 30 days -- cgit v1.2.1 From 2c2b487dc377962e241c09b30bf722b32315224f Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Thu, 22 Sep 2016 19:48:23 +0100 Subject: Improvements after review --- app/assets/stylesheets/framework/variables.scss | 1 - app/assets/stylesheets/pages/cycle_analytics.scss | 4 ++-- app/views/projects/cycle_analytics/show.html.haml | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 0270da77450..14ec310de2d 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -273,7 +273,6 @@ $calendar-unselectable-bg: $gray-light; * Cycle Analytics */ $cycle-analytics-box-padding: 30px; -$cycle-analytics-box-margin-bottom: 16px; $cycle-analytics-box-text-color: #8c8c8c; /* diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index 1df89436d88..fec34287e35 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -81,7 +81,7 @@ } .landing { - margin-bottom: $cycle-analytics-box-margin-bottom; + margin-bottom: $gl-padding; overflow: hidden; .dismiss-icon { @@ -114,7 +114,7 @@ p { color: $cycle-analytics-box-text-color; - margin-bottom: $cycle-analytics-box-margin-bottom; + 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 9d17b14e601..ddd636c2b96 100644 --- a/app/views/projects/cycle_analytics/show.html.haml +++ b/app/views/projects/cycle_analytics/show.html.haml @@ -2,7 +2,7 @@ - page_title "Cycle Analytics" = render "projects/pipelines/head" -#cycle-analytics{class: container_class , "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()") -- cgit v1.2.1 From be906c26367855257ba3fe8db668a8fe16174bd1 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Fri, 23 Sep 2016 12:11:29 +0100 Subject: Improves design when in mobile and tablet --- app/assets/stylesheets/pages/cycle_analytics.scss | 34 ++++++++++++++++------- app/views/projects/cycle_analytics/show.html.haml | 8 +++--- 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index fec34287e35..778471a34d7 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -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,16 +36,15 @@ &:last-child { text-align: right; + + @media (max-width: $screen-sm-min) { + text-align: center; + } } } .dropdown { top: 13px; - - @media (max-width: $screen-sm-min) { - right: 15px; - top: 30px; - } } } @@ -64,9 +71,15 @@ line-height: 19px; font-size: 15px; font-weight: 600; + color: $gl-title-color; } - &:text { - color: $cycle-analytics-box-text-color; + + &.text { + color: $layout-link-gray; + + &.value-col { + color: $gl-title-color; + } } } } @@ -75,7 +88,9 @@ text-align: right; span { - line-height: 42px; + position: relative; + vertical-align: middle; + top: 3px; } } } @@ -101,10 +116,9 @@ } .inner-content { - text-align: center; - @media (max-width: $screen-sm-min) { padding: 0 28px; + text-align: center; } h4 { diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml index ddd636c2b96..6a748690c79 100644 --- a/app/views/projects/cycle_analytics/show.html.haml +++ b/app/views/projects/cycle_analytics/show.html.haml @@ -27,11 +27,11 @@ .content-block .container-fluid .row - .col-sm-3.col-xs-6.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-sm-3.col-xs-6.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 @@ -49,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}} -- cgit v1.2.1