Commit bf127ce2 authored by yury-n's avatar yury-n Committed by Luke "Jared" Bennett

Align the progress buttons with the milestone buttons -- do not margin right on the last button

parent 8c4deda0
...@@ -31,7 +31,6 @@ ...@@ -31,7 +31,6 @@
margin-right: 7px; margin-right: 7px;
} }
// Issue title
span a { span a {
color: $gl-text-color; color: $gl-text-color;
word-wrap: break-word; word-wrap: break-word;
...@@ -40,7 +39,6 @@ ...@@ -40,7 +39,6 @@
} }
.milestone-summary { .milestone-summary {
h4 { h4 {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -48,8 +46,9 @@ ...@@ -48,8 +46,9 @@
.milestone-stat { .milestone-stat {
white-space: nowrap; white-space: nowrap;
margin-right: 10px; margin-right: 10px;
&.with-drilldown { &.with-drilldown {
margin-right: 2px; // the drill down element should sit closer to its parent margin-right: 2px;
} }
} }
...@@ -60,23 +59,19 @@ ...@@ -60,23 +59,19 @@
.milestone-stats-and-buttons { .milestone-stats-and-buttons {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
// on small screens split into two line
flex-wrap: wrap; flex-wrap: wrap;
@media (min-width: $screen-xs-min) { @media (min-width: $screen-xs-min) {
// on bigger screens show on one line
justify-content: space-between; justify-content: space-between;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
} }
.milestone-progress-buttons { .milestone-progress-buttons {
// for small devices buttons go first
order: 1; order: 1;
// buttons go on its own line below the header and need some margin
margin-top: 10px; margin-top: 10px;
@media (min-width: $screen-xs-min) { @media (min-width: $screen-xs-min) {
// when displayed on one line stats go first, buttons second
order: 2; order: 2;
margin-top: 0; margin-top: 0;
flex-shrink: 0; flex-shrink: 0;
...@@ -85,6 +80,9 @@ ...@@ -85,6 +80,9 @@
.btn { .btn {
float: left; float: left;
margin-right: $btn-side-margin; margin-right: $btn-side-margin;
&:last-child {
margin-right: 0;
}
} }
} }
...@@ -143,21 +141,23 @@ ...@@ -143,21 +141,23 @@
flex-flow: row; flex-flow: row;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
.status-box { .status-box {
margin-top: 0; // no need for margin-top, vertical alignment is done by flexbox margin-top: 0;
} }
.milestone-buttons { .milestone-buttons {
// flex flow is row (left to right)
// but buttons should stick to the right side
margin-left: auto; margin-left: auto;
} }
.status-box { .status-box {
order: 1; order: 1;
} }
.milestone-buttons { .milestone-buttons {
order: 2; order: 2;
} }
.header-text-content { .header-text-content {
order: 3; order: 3;
width: 100%; width: 100%;
...@@ -168,7 +168,6 @@ ...@@ -168,7 +168,6 @@
} }
@media (min-width: $screen-xs-min) { @media (min-width: $screen-xs-min) {
.milestone-buttons .verbose { .milestone-buttons .verbose {
display: inline; display: inline;
} }
...@@ -177,6 +176,7 @@ ...@@ -177,6 +176,7 @@
order: 2; order: 2;
width: auto; width: auto;
} }
.milestone-buttons { .milestone-buttons {
order: 3; order: 3;
} }
......
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