diff options
author | yury-n <yury-n@deviantart.com> | 2016-07-14 17:36:05 +0300 |
---|---|---|
committer | Luke "Jared" Bennett <lbennett@gitlab.com> | 2016-11-04 18:15:47 +0300 |
commit | 8478589665438e509ae827eb7cf573bb140b3347 (patch) | |
tree | 2885426d37acc0e5b2cb2f062b8b92d0d01d01fe /app/assets/stylesheets/pages/milestone.scss | |
parent | 5368b9f249485e254a90fe7daa551d61412bee26 (diff) |
Make the milestone page more responsive
Diffstat (limited to 'app/assets/stylesheets/pages/milestone.scss')
-rw-r--r-- | app/assets/stylesheets/pages/milestone.scss | 102 |
1 files changed, 101 insertions, 1 deletions
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 13402acd8e1..47bf3136cd3 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -11,6 +11,7 @@ } .progress { + width: 100%; height: 6px; } } @@ -39,15 +40,69 @@ } .milestone-summary { - margin-bottom: 25px; + + h4 { + margin-bottom: 0; + } .milestone-stat { + white-space: nowrap; margin-right: 10px; + &.with-drilldown { + margin-right: 2px; // the drill down element should sit closer to its parent + } } .remaining-days { color: $orange-light; } + + $width_to_show_stats_and_buttons_on_one_line: $screen-xs-min; + + .milestone-stats-and-buttons { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + + @media (min-width: $width_to_show_stats_and_buttons_on_one_line) { + justify-content: space-between; + flex-wrap: nowrap; + } + } + + .milestone-progress-buttons { + // for small devices buttons go first + order: 1; + // buttons go on its own line below the header and need some margin + margin-top: 10px; + @media (min-width: $width_to_show_stats_and_buttons_on_one_line) { + // when displayed on one line stats go first, buttons second + order: 2; + margin-top: 0; + flex-shrink: 0; + } + + .btn { + float: left; + margin-right: $btn-side-margin; + } + } + + .milestone-stats { + order: 2; + width: 100%; + padding: 7px 0; + flex-shrink: 1; + @media (min-width: $width_to_show_stats_and_buttons_on_one_line) { + // when displayed on one line stats go first, buttons second + order: 1; + } + } + + .progress { + width: 100%; + margin: 15px 0; + } } .issues-sortable-list, @@ -82,3 +137,48 @@ } } } + +.milestone-page-header { + display: flex; + flex-flow: row; + align-content: center; + flex-wrap: wrap; + .status-box { + margin-top: 0; // reset what's inherited from the framework css. elements here are v-aligned by flexbox + } + .milestone-buttons { + // flex flow is row (left to right) + // but buttons should stick to the right side + margin-left: auto; + } + + .status-box { + order: 1; + } + .milestone-buttons { + order: 2; + } + .header-text-content { + order: 3; + width: 100%; + } + + .milestone-buttons .verbose { + display: none; + } + + @media (min-width: $screen-xs-min) { + + .milestone-buttons .verbose { + display: inline; + } + + .header-text-content { + order: 2; + width: auto; + } + .milestone-buttons { + order: 3; + } + } +} |