responsify dashboard list

This commit is contained in:
Lisa Passing 2015-02-23 16:54:41 +01:00
parent 6caa1bf56d
commit b3c2ed1d98
3 changed files with 21 additions and 8 deletions

View File

@ -151,8 +151,10 @@ $body-font-color: $color-text;
// d. Media Query Ranges // d. Media Query Ranges
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
$small-range: (0em, 40em); $breakpoint-sm: 64em;
$medium-range: (40.063em, 64em);
$small-range: (0em, 50em);
$medium-range: (50.063em, $breakpoint-sm);
$large-range: (64.063em, 90em); $large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em); $xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em, 99999999em); $xxlarge-range: (120.063em, 99999999em);

View File

@ -102,8 +102,8 @@ $db-text-color: #ACAAAA
margin-left: 1em margin-left: 1em
.icon .icon
width: 1.6em width: 1.4em
height: 1.6em height: 1.4em
.db-job, .db-job,
.db-branch, .db-branch,
@ -112,6 +112,7 @@ $db-text-color: #ACAAAA
position: relative position: relative
padding-left: 2.2em padding-left: 2.2em
z-index: 30 z-index: 30
overflow: hidden
.db-lock .db-lock
position: absolute position: absolute
@ -122,8 +123,11 @@ $db-text-color: #ACAAAA
height: 1em height: 1em
.db-activation .db-activation
margin: 1em 0 .5em
text-align: right text-align: right
padding-right: 0 padding-right: 0
@media #{$medium-up}
margin: 0
.db-burger .db-burger
position: absolute; position: absolute;
@ -178,15 +182,22 @@ $db-text-color: #ACAAAA
display: none display: none
.dashboard-starred .dashboard-starred
padding: 0 3em
margin: 2em 0 3em margin: 2em 0 3em
.db .db
padding-bottom: .2em padding-bottom: .2em
@media #{$medium-up}
width: grid-calc(17, 36)
.db-controls .db-controls
padding-left: 3em padding-left: 3em
.dashboard-active, .dashboard-active,
.dashboard-inactive .dashboard-inactive
padding: 0 3em
margin-bottom: 3em margin-bottom: 3em
.db
padding-bottom: 0.2em;
.db-repo,
.db-controls .db-controls
padding-left: 4em padding-left: 4em
@media #{$medium-up} @media #{$medium-up}

View File

@ -65,7 +65,7 @@
<div class="dashboard"> <div class="dashboard">
<section class="dashboard-starred"> <section class="dashboard-starred">
<div class="row"> <div class="row">
<div class="db db--pass column medium-5"> <div class="db db--pass column">
<div class="db-status"> <div class="db-status">
<span class="icon icon-status icon-started"></span> <span class="icon icon-status icon-started"></span>
<span class="icon icon-star"></span> <span class="icon icon-star"></span>
@ -89,7 +89,7 @@
</ul> </ul>
</div> </div>
<div class="db db--error column medium-5"> <div class="db db--error column">
<div class="db-lock"><span class="icon icon-lock"></span></div> <div class="db-lock"><span class="icon icon-lock"></span></div>
<div class="db-status"> <div class="db-status">
<span class="icon icon-status icon-started"></span> <span class="icon icon-status icon-started"></span>
@ -162,7 +162,7 @@
<p class="db-job column medium-3 small-6"><span class="icon icon-hash"></span>9874 failed</p> <p class="db-job column medium-3 small-6"><span class="icon icon-hash"></span>9874 failed</p>
<p class="db-branch column medium-3 small-6"><span class="icon icon-branch"></span>master</p> <p class="db-branch column medium-3 small-6"><span class="icon icon-branch"></span>master</p>
<p class="db-commit column medium-3 small-6"><span class="icon icon-github"></span>394348a</p> <p class="db-commit column medium-3 small-6"><span class="icon icon-github"></span>394348a</p>
<p class="db-timeago column medium-3 small-6"><span class="icon icon-cal"></span>25 minutes ago</p> <p class="db-timeago column medium-3 small-6"><span class="icon icon-cal"></span>25 min ago</p>
</div> </div>
<div class="db-burger"> <div class="db-burger">
<span class="icon icon-burger"></span> <span class="icon icon-burger"></span>
@ -262,7 +262,7 @@
<p class="db-job column medium-2 small-4"><span class="icon icon-hash"></span>9874</p> <p class="db-job column medium-2 small-4"><span class="icon icon-hash"></span>9874</p>
<p class="db-commit column medium-2 small-4"><span class="icon icon-github"></span>394348a</p> <p class="db-commit column medium-2 small-4"><span class="icon icon-github"></span>394348a</p>
<p class="db-timeago column medium-2 small-4"><span class="icon icon-cal"></span>3 hours ago</p> <p class="db-timeago column medium-2 small-4"><span class="icon icon-cal"></span>3 hours ago</p>
<div class="db-activation column medium-4 push-2 small-12 end"> <div class="db-activation column medium-5 push-1 small-12 end">
<p>Not active</p> <p>Not active</p>
<button class="button button--green button--fixedwidth">Activate</button> <button class="button button--green button--fixedwidth">Activate</button>
</div> </div>