From 9514018793a5a1de764fca55fa0b03a91cea29db Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Mon, 21 Nov 2016 14:31:12 -0700
Subject: [PATCH] Scroll CA stage panel on mobile
---
.../stylesheets/pages/cycle_analytics.scss | 9 +-
.../projects/cycle_analytics/show.html.haml | 91 ++++++++++---------
2 files changed, 54 insertions(+), 46 deletions(-)
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 8541d41bb1e..24bca55f710 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -1,5 +1,5 @@
#cycle-analytics {
- width: 1000px;
+ max-width: 1000px;
margin: 24px auto 0;
position: relative;
@@ -259,7 +259,14 @@
}
}
+ .stage-panel-container {
+ width: 100%;
+ overflow: auto;
+ }
+
.stage-panel {
+ min-width: 968px;
+
.panel-heading {
padding: 0;
background-color: transparent;
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index 580371ac000..ef1b38d5e21 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -42,48 +42,49 @@
%li
%a{ "href" => "#", "data-value" => "90" }
Last 90 days
- .panel.panel-default.stage-panel
- .panel-heading
- %nav.col-headers
- %ul
- %li.stage-header
- %span.stage-name
- Stage
- %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The phase of the development lifecycle.", "aria-hidden" => "true" }
- %li.median-header
- %span.stage-name
- Median
- %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.", "aria-hidden" => "true" }
- %li.event-header
- %span.stage-name
- {{ currentStage ? currentStage.legend : 'Related Issues' }}
- %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The collection of events added to the data gathered for that stage.", "aria-hidden" => "true" }
- %li.total-time-header
- %span.stage-name
- Total Time
- %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The time taken by each data entry gathered by that stage.", "aria-hidden" => "true" }
- .stage-panel-body
- %nav.stage-nav
- %ul
- %li.stage-nav-item{ ':class' => '{ active: stage.active }', '@click' => 'selectStage(stage)', "v-for" => "stage in state.stages" }
- .stage-nav-item-cell.stage-name
- {{ stage.title }}
- .stage-nav-item-cell.stage-median
- %template{ "v-if" => "stage.isUserAllowed" }
- %span{ "v-if" => "stage.value" }
- {{ stage.value }}
- %span.stage-empty{ "v-else" => true }
- Not enough data
- %template{ "v-else" => true }
- %span.not-available
- Not available
- .section.stage-events
- %template{ "v-if" => "isLoadingStage" }
- = icon("spinner spin")
- %template{ "v-if" => "currentStage && !currentStage.isUserAllowed" }
- = render partial: "no_access"
- %template{ "v-else" => true }
- %template{ "v-if" => "isEmptyStage && !isLoadingStage" }
- = render partial: "empty_stage"
- %template{ "v-if" => "state.events.length && !isLoadingStage && !isEmptyStage" }
- %component{ ":is" => "currentStage.component", ":stage" => "currentStage", ":items" => "state.events" }
+ .stage-panel-container
+ .panel.panel-default.stage-panel
+ .panel-heading
+ %nav.col-headers
+ %ul
+ %li.stage-header
+ %span.stage-name
+ Stage
+ %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The phase of the development lifecycle.", "aria-hidden" => "true" }
+ %li.median-header
+ %span.stage-name
+ Median
+ %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.", "aria-hidden" => "true" }
+ %li.event-header
+ %span.stage-name
+ {{ currentStage ? currentStage.legend : 'Related Issues' }}
+ %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The collection of events added to the data gathered for that stage.", "aria-hidden" => "true" }
+ %li.total-time-header
+ %span.stage-name
+ Total Time
+ %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The time taken by each data entry gathered by that stage.", "aria-hidden" => "true" }
+ .stage-panel-body
+ %nav.stage-nav
+ %ul
+ %li.stage-nav-item{ ':class' => '{ active: stage.active }', '@click' => 'selectStage(stage)', "v-for" => "stage in state.stages" }
+ .stage-nav-item-cell.stage-name
+ {{ stage.title }}
+ .stage-nav-item-cell.stage-median
+ %template{ "v-if" => "stage.isUserAllowed" }
+ %span{ "v-if" => "stage.value" }
+ {{ stage.value }}
+ %span.stage-empty{ "v-else" => true }
+ Not enough data
+ %template{ "v-else" => true }
+ %span.not-available
+ Not available
+ .section.stage-events
+ %template{ "v-if" => "isLoadingStage" }
+ = icon("spinner spin")
+ %template{ "v-if" => "currentStage && !currentStage.isUserAllowed" }
+ = render partial: "no_access"
+ %template{ "v-else" => true }
+ %template{ "v-if" => "isEmptyStage && !isLoadingStage" }
+ = render partial: "empty_stage"
+ %template{ "v-if" => "state.events.length && !isLoadingStage && !isEmptyStage" }
+ %component{ ":is" => "currentStage.component", ":stage" => "currentStage", ":items" => "state.events" }
--
GitLab