Commit 2a772b7d authored by Fatih Acet's avatar Fatih Acet

Merge branch 'filipa-22444' into 'master'

Makes Cycle analytics mobile friendly

## What does this MR do?
Makes Cycle analytics page mobile friendly

## Are there points in the code the reviewer needs to double check?

## Why was this MR needed?
Cycle analytics page was not mobile friendly

## Screenshots (if relevant)
![optionB](/uploads/a1d7f2f4db100e1a8aa76c0156ef8641/optionB.png)

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
fixes #22444

See merge request !6482
parents 66cadfb4 be906c26
...@@ -269,6 +269,12 @@ $calendar-hover-bg: #ecf3fe; ...@@ -269,6 +269,12 @@ $calendar-hover-bg: #ecf3fe;
$calendar-border-color: rgba(#000, .1); $calendar-border-color: rgba(#000, .1);
$calendar-unselectable-bg: $gray-light; $calendar-unselectable-bg: $gray-light;
/*
* Cycle Analytics
*/
$cycle-analytics-box-padding: 30px;
$cycle-analytics-box-text-color: #8c8c8c;
/* /*
* Personal Access Tokens * Personal Access Tokens
*/ */
......
#cycle-analytics { #cycle-analytics {
margin: 24px auto 0; margin: 24px auto 0;
width: 800px; max-width: 800px;
position: relative; position: relative;
.panel { .panel {
...@@ -9,10 +9,18 @@ ...@@ -9,10 +9,18 @@
padding: 24px 0; padding: 24px 0;
border-bottom: none; border-bottom: none;
position: relative; position: relative;
@media (max-width: $screen-sm-min) {
padding: 6px 0 24px;
}
} }
.column { .column {
text-align: center; text-align: center;
@media (max-width: $screen-sm-min) {
padding: 15px 0;
}
.header { .header {
font-size: 30px; font-size: 30px;
...@@ -28,11 +36,14 @@ ...@@ -28,11 +36,14 @@
&:last-child { &:last-child {
text-align: right; text-align: right;
@media (max-width: $screen-sm-min) {
text-align: center;
}
} }
} }
.dropdown { .dropdown {
position: relative;
top: 13px; top: 13px;
} }
} }
...@@ -40,7 +51,7 @@ ...@@ -40,7 +51,7 @@
.bordered-box { .bordered-box {
border: 1px solid $border-color; border: 1px solid $border-color;
@include border-radius($border-radius-default); @include border-radius($border-radius-default);
position: relative;
} }
.content-list { .content-list {
...@@ -60,9 +71,15 @@ ...@@ -60,9 +71,15 @@
line-height: 19px; line-height: 19px;
font-size: 15px; font-size: 15px;
font-weight: 600; 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 @@ ...@@ -71,7 +88,9 @@
text-align: right; text-align: right;
span { span {
line-height: 42px; position: relative;
vertical-align: middle;
top: 3px;
} }
} }
} }
...@@ -82,21 +101,25 @@ ...@@ -82,21 +101,25 @@
.dismiss-icon { .dismiss-icon {
position: absolute; position: absolute;
right: $gl-padding; right: $cycle-analytics-box-padding;
cursor: pointer; cursor: pointer;
color: #b2b2b2; color: #b2b2b2;
} }
svg { .svg-container {
margin: 0 20px; text-align: center;
float: left;
width: 136px; svg {
height: 136px; width: 136px;
height: 136px;
}
} }
.inner-content { .inner-content {
width: 480px; @media (max-width: $screen-sm-min) {
float: left; padding: 0 28px;
text-align: center;
}
h4 { h4 {
color: $gl-text-color; color: $gl-text-color;
...@@ -104,7 +127,7 @@ ...@@ -104,7 +127,7 @@
} }
p { p {
color: #8c8c8c; color: $cycle-analytics-box-text-color;
margin-bottom: $gl-padding; margin-bottom: $gl-padding;
} }
} }
......
...@@ -2,18 +2,20 @@ ...@@ -2,18 +2,20 @@
- page_title "Cycle Analytics" - page_title "Cycle Analytics"
= render "projects/pipelines/head" = 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"} .bordered-box.landing.content-block{"v-if" => "!isHelpDismissed"}
= icon('times', class: 'dismiss-icon', "@click": "dismissLanding()") = icon('times', class: 'dismiss-icon', "@click": "dismissLanding()")
= custom_icon('icon_cycle_analytics_splash') .row
.inner-content .col-sm-3.col-xs-12.svg-container
%h4 = custom_icon('icon_cycle_analytics_splash')
Introducing Cycle Analytics .col-sm-8.col-xs-12.inner-content
%p %h4
Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project. 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") = icon("spinner spin", "v-show" => "isLoading")
...@@ -25,11 +27,11 @@ ...@@ -25,11 +27,11 @@
.content-block .content-block
.container-fluid .container-fluid
.row .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}} %h3.header {{item.value}}
%p.text {{item.title}} %p.text {{item.title}}
.col-xs-3.column .col-sm-3.col-xs-12.column
.dropdown.inline.js-ca-dropdown .dropdown.inline.js-ca-dropdown
%button.dropdown-menu-toggle{"data-toggle" => "dropdown", :type => "button"} %button.dropdown-menu-toggle{"data-toggle" => "dropdown", :type => "button"}
%span.dropdown-label Last 30 days %span.dropdown-label Last 30 days
...@@ -47,11 +49,11 @@ ...@@ -47,11 +49,11 @@
%li{"v-for" => "item in stats"} %li{"v-for" => "item in stats"}
.container-fluid .container-fluid
.row .row
.col-xs-10.title-col .col-xs-8.title-col
%p.title %p.title
{{item.title}} {{item.title}}
%p.text %p.text
{{item.description}} {{item.description}}
.col-xs-2.value-col .col-xs-4.value-col
%span %span
{{item.value}} {{item.value}}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment