Improves design when in mobile and tablet

This commit is contained in:
Filipa Lacerda 2016-09-23 12:11:29 +01:00
parent 2c2b487dc3
commit be906c2636
2 changed files with 28 additions and 14 deletions

View file

@ -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 {

View file

@ -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}}