kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

fixup some classnames and media queries

Browse source
This commit is contained in:
Simon Knox 2017-06-03 03:18:58 +10:00
parent da1f5255e4
commit f922fa5297
2 changed files with 16 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
app/assets/stylesheets/pages/convdev_index.scss
View file

@ -39,10 +39,7 @@ $space-between-cards: 8px;
.convdev-cards { .convdev-cards {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap;
@media (max-width: $screen-lg-min) {
flex-wrap: wrap;
}
} }
.convdev-card-wrapper { .convdev-card-wrapper {
@ -50,35 +47,26 @@ $space-between-cards: 8px;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
text-align: center; text-align: center;
width: 10%; width: 50%;
border-color: $border-color; border-color: $border-color;
margin: 0 0 32px; margin: 0 0 32px;
padding: $space-between-cards / 2; padding: $space-between-cards / 2;
position: relative; position: relative;
@media (max-width: $screen-lg-min) { @media (min-width: $screen-xs-min) {
width: 16.667%; width: percentage(1 / 4);
.convdev-card-title {
max-width: 100px;
margin: $gl-padding auto auto;
}
.card-scores {
margin: $gl-padding 24px;
}
} }
@media (max-width: $screen-md-min) { @media (min-width: $screen-sm-min) {
width: 20%; width: percentage(1 / 5);
} }
@media (max-width: $screen-sm-min) { @media (min-width: $screen-md-min) {
width: 25%; width: percentage(1 / 6);
} }
@media (max-width: $screen-xs-min) { @media (min-width: $screen-lg-min) {
width: 50%; width: percentage(1 / 10);
} }
} }
@ -86,8 +74,6 @@ $space-between-cards: 8px;
border: solid 1px $border-color; border: solid 1px $border-color;
border-radius: 3px; border-radius: 3px;
border-top-width: 3px; border-top-width: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
@ -118,8 +104,8 @@ $space-between-cards: 8px;
} }
.convdev-card-title { .convdev-card-title {
margin-top: $gl-padding; margin: $gl-padding auto auto;
margin-bottom: auto; max-width: 100px;
h3 { h3 {
font-size: 14px; font-size: 14px;
@ -166,7 +152,6 @@ $space-between-cards: 8px;
.card-buttons { .card-buttons {
display: flex; display: flex;
justify-content: stretch;
> * { > * {
font-size: 16px; font-size: 16px;
@ -192,10 +177,6 @@ $space-between-cards: 8px;
justify-content: space-around; justify-content: space-around;
position: relative; position: relative;
background: $border-color; background: $border-color;
@media (max-width: $screen-lg-min) {
display: none;
}
} }
.convdev-step { .convdev-step {
@ -247,6 +228,8 @@ $space-between-cards: 8px;
transition: transform 0.1s; transition: transform 0.1s;
width: 30px; width: 30px;
height: 30px; height: 30px;
min-height: 30px;
min-width: 30px;
} }
} }

5
app/views/admin/conversational_development_index/show.html.haml
View file

@ -27,10 +27,9 @@
- @metric.cards.each do |card| - @metric.cards.each do |card|
= render 'card', card: card = render 'card', card: card
.convdev-steps.row .convdev-steps.visible-lg
- @metric.idea_to_production_steps.each_with_index do |step, index| - @metric.idea_to_production_steps.each_with_index do |step, index|
.convdev-step{ class: "convdev-#{score_level(step.percentage_score)}-score" } .convdev-step{ class: "convdev-#{score_level(step.percentage_score)}-score" }
.as = custom_icon("i2p_step_#{index + 1}")
= custom_icon("i2p_step_#{index + 1}")
%h4.convdev-step-title %h4.convdev-step-title
= step.title = step.title