Commit 43701de5 authored by Filipa Lacerda's avatar Filipa Lacerda

Makes Cycle analytics mobile friendly

parent 4d3dde47
......@@ -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
*/
......
#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-container {
text-align: center;
svg {
margin: 0 20px;
float: left;
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;
}
}
}
......
......@@ -2,12 +2,14 @@
- 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()")
.row
.col-sm-3.col-xs-12.svg-container
= custom_icon('icon_cycle_analytics_splash')
.inner-content
.col-sm-8.col-xs-12.inner-content
%h4
Introducing Cycle Analytics
%p
......@@ -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
......
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