suzanne.soy/travis-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

set optimizeLegibility and improve responsiveness of Dashboard

Browse Source
This commit is contained in:
Lisa Passing 2015-02-23 13:25:39 +01:00
parent 8f795dd4bd
commit ab3246a68e
4 changed files with 67 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/styles/app/foundation/scss/foundation/_settings.scss
View File

@ -202,7 +202,7 @@ $large: $large-up;
// $header-line-height: 1.4; // $header-line-height: 1.4;
// $header-top-margin: .2rem; // $header-top-margin: .2rem;
// $header-bottom-margin: .5rem; // $header-bottom-margin: .5rem;
// $header-text-rendering: optimizeLegibility; $header-text-rendering: optimizeLegibility;
// We use these to control header font sizes // We use these to control header font sizes
// $h1-font-size: rem-calc(44); // $h1-font-size: rem-calc(44);
@ -240,7 +240,7 @@ $large: $large-up;
// $paragraph-aside-font-size: rem-calc(14); // $paragraph-aside-font-size: rem-calc(14);
// $paragraph-aside-line-height: 1.35; // $paragraph-aside-line-height: 1.35;
// $paragraph-aside-font-style: italic; // $paragraph-aside-font-style: italic;
// $paragraph-text-rendering: optimizeLegibility; $paragraph-text-rendering: optimizeLegibility;
// We use these to style <code> tags // We use these to style <code> tags
// $code-color: $oil; // $code-color: $oil;

23
app/styles/app/layouts/dashboard.sass
View File

@ -7,8 +7,10 @@
border-radius: 4px border-radius: 4px
$db-gray: #C9C9C9 $db-gray: #C9C9C9
$db-text-color: #ACAAAA
.dashboard .dashboard
color: $db-text-color
hr hr
max-width: 1024px max-width: 1024px
margin: auto margin: auto
@ -45,14 +47,16 @@ $db-gray: #C9C9C9
.db .db
position: relative position: relative
height: 57px
margin-bottom: 1em margin-bottom: 1em
background: $white background: $white
@extend %br-4px @extend %br-4px
@media #{$medium-up}
height: 57px
h2, h3, p h2, h3, p
margin: 0 margin: 0
font-weight: 400 font-weight: 400
white-space: nowrap
.icon .icon
position: absolute position: absolute
@ -64,6 +68,16 @@ $db-gray: #C9C9C9
.db-repo .db-repo
padding-left: 4em padding-left: 4em
transform: translateY(0.4em) transform: translateY(0.4em)
overflow: hidden
&:after
content: ""
display: block
position: absolute
top: 0
right: 0
height: 100%
width: 3em
background: linear-gradient(-90deg, $white 40%, rgba($white, 0))
.db-status .db-status
position: absolute; position: absolute;
@ -94,9 +108,12 @@ $db-gray: #C9C9C9
.db-controls .db-controls
// position: relative // position: relative
padding-left: 4em
transform: translateY(24%) transform: translateY(24%)
line-height: 3em line-height: 3em
border-left: 1px solid $db-gray border-left: 1px solid $db-gray
@media #{$medium-up}
padding-left: 0
p, p,
button button
display: inline-block display: inline-block
@ -131,7 +148,7 @@ $db-gray: #C9C9C9
position: absolute; position: absolute;
top: 0 top: 0
right: 0 right: 0
height: 100% height: 4em
width: 4em width: 4em
cursor: pointer cursor: pointer
z-index: 30 z-index: 30
@ -140,6 +157,8 @@ $db-gray: #C9C9C9
height: 2em height: 2em
left: 0 left: 0
right: 0 right: 0
@media #{$medium-up}
height: 100%
.db-burger:hover ~ .dropdown, .db-burger:hover ~ .dropdown,
.dropdown:hover .dropdown:hover

2
app/styles/app/top.sass
View File

@ -2,6 +2,8 @@
$top-height: 55px $top-height: 55px
.top .top
position: relative
z-index: 999
font-size: $font-size-normal font-size: $font-size-normal
background: $topbar-bg background: $topbar-bg

82
app/templates/dashboard/repositories.hbs
View File

@ -64,11 +64,13 @@
<div class="dashboard"> <div class="dashboard">
<section class="dashboard-starred"> <section class="dashboard-starred">
<div class="row"> {{!-- <div class="row">
<div class="dashboard--empty"> <div class="dashboard--empty">
<p><span class="icon icon-star"></span>Want to keep an eye on certain projects? Star repositories below to add them in this section.</p> <p><span class="icon icon-star"></span>Want to keep an eye on certain projects? Star repositories below to add them in this section.</p>
</div> </div>
</div> </div> --}}
<div></div>
</section> </section>
<section class="dashboard-active"> <section class="dashboard-active">
@ -78,15 +80,15 @@
<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>
</div> </div>
<div class="db-repo column medium-3"> <div class="db-repo column medium-3 small-12">
<h3>travis-pro</h3> <h3>travis-pro</h3>
<h2>travis-rubies</h2> <h2>travis-rubies</h2>
</div> </div>
<div class="db-controls column medium-9 end"> <div class="db-controls column medium-9 small-12 end">
<p class="db-job column medium-3"><span class="icon icon-hash"></span>9874 started</p> <p class="db-job column medium-3 small-6"><span class="icon icon-hash"></span>9874 started</p>
<p class="db-branch column medium-3"><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"><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"><span class="icon icon-cal"></span>in queue</p> <p class="db-timeago column medium-3 small-6"><span class="icon icon-cal"></span>in queue</p>
</div> </div>
<div class="db-burger"> <div class="db-burger">
<span class="icon icon-burger"></span> <span class="icon icon-burger"></span>
@ -103,15 +105,15 @@
<span class="icon icon-status icon-fail"></span> <span class="icon icon-status icon-fail"></span>
<span class="icon icon-star"></span> <span class="icon icon-star"></span>
</div> </div>
<div class="db-repo column medium-3"> <div class="db-repo column medium-3 small-12">
<h3>travis-pro</h3> <h3>travis-pro</h3>
<h2>travis-pro-api</h2> <h2>travis-pro-api</h2>
</div> </div>
<div class="db-controls column medium-9 end"> <div class="db-controls column medium-9 small-12 end">
<p class="db-job column medium-3"><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"><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"><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"><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 minutes ago</p>
</div> </div>
<div class="db-burger"> <div class="db-burger">
<span class="icon icon-burger"></span> <span class="icon icon-burger"></span>
@ -128,15 +130,15 @@
<span class="icon icon-status icon-error"></span> <span class="icon icon-status icon-error"></span>
<span class="icon icon-star"></span> <span class="icon icon-star"></span>
</div> </div>
<div class="db-repo column medium-3"> <div class="db-repo column medium-3 small-12">
<h3>travis-pro</h3> <h3>travis-pro</h3>
<h2>travis-pro-hub</h2> <h2>travis-pro-hub</h2>
</div> </div>
<div class="db-controls column medium-9 end"> <div class="db-controls column medium-9 small-12 end">
<p class="db-job column medium-3"><span class="icon icon-hash"></span>9874 errored</p> <p class="db-job column medium-3 small-6"><span class="icon icon-hash"></span>9874 errored</p>
<p class="db-branch column medium-3"><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"><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"><span class="icon icon-cal"></span>1 hour ago</p> <p class="db-timeago column medium-3 small-6"><span class="icon icon-cal"></span>1 hour ago</p>
</div> </div>
<div class="db-burger"> <div class="db-burger">
<span class="icon icon-burger"></span> <span class="icon icon-burger"></span>
@ -152,15 +154,15 @@
<span class="icon icon-status icon-cancel"></span> <span class="icon icon-status icon-cancel"></span>
<span class="icon icon-star"></span> <span class="icon icon-star"></span>
</div> </div>
<div class="db-repo column medium-3"> <div class="db-repo column medium-3 small-12">
<h3>travis-pro</h3> <h3>travis-pro</h3>
<h2>travis-gatekeeper</h2> <h2>travis-gatekeeper</h2>
</div> </div>
<div class="db-controls column medium-9 end"> <div class="db-controls column medium-9 small-12 end">
<p class="db-job column medium-3"><span class="icon icon-hash"></span>9874 cancelled</p> <p class="db-job column medium-3 small-6"><span class="icon icon-hash"></span>9874 cancelled</p>
<p class="db-branch column medium-3"><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"><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"><span class="icon icon-cal"></span>3 hours ago</p> <p class="db-timeago column medium-3 small-6"><span class="icon icon-cal"></span>3 hours ago</p>
</div> </div>
<div class="db-burger"> <div class="db-burger">
<span class="icon icon-burger"></span> <span class="icon icon-burger"></span>
@ -177,15 +179,15 @@
<span class="icon icon-status icon-pass"></span> <span class="icon icon-status icon-pass"></span>
<span class="icon icon-star"></span> <span class="icon icon-star"></span>
</div> </div>
<div class="db-repo column medium-3"> <div class="db-repo column medium-3 small-12">
<h3>travis-pro</h3> <h3>travis-pro</h3>
<h2>bubblewrap-mac-test</h2> <h2>bubblewrap-mac-test</h2>
</div> </div>
<div class="db-controls column medium-9 end"> <div class="db-controls column medium-9 small-12 end">
<p class="db-job column medium-3"><span class="icon icon-hash"></span>9874 passed</p> <p class="db-job column medium-3 small-6"><span class="icon icon-hash"></span>9874 passed</p>
<p class="db-branch column medium-3"><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"><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"><span class="icon icon-cal"></span>2 days ago</p> <p class="db-timeago column medium-3 small-6"><span class="icon icon-cal"></span>2 days ago</p>
</div> </div>
<div class="db-burger"> <div class="db-burger">
<span class="icon icon-burger"></span> <span class="icon icon-burger"></span>
@ -203,15 +205,15 @@
<div class="db-status"> <div class="db-status">
<span class="icon icon-status icon-pass"></span> <span class="icon icon-status icon-pass"></span>
</div> </div>
<div class="db-repo column medium-3"> <div class="db-repo column medium-3 small-12">
<h3>travis-pro</h3> <h3>travis-pro</h3>
<h2>travis-gatekeeper</h2> <h2>travis-gatekeeper</h2>
</div> </div>
<div class="db-controls column medium-9 end"> <div class="db-controls column medium-9 small-12 end">
<p class="db-job column medium-2"><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"><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"><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 end"> <div class="db-activation column medium-4 push-2 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>
@ -222,11 +224,11 @@
<div class="db-status"> <div class="db-status">
<span class="icon icon-status"></span> <span class="icon icon-status"></span>
</div> </div>
<div class="db-repo column medium-3"> <div class="db-repo column medium-3 small-12">
<h3>travis-pro</h3> <h3>travis-pro</h3>
<h2>bubblewrap-mac-test</h2> <h2>bubblewrap-mac-test</h2>
</div> </div>
<div class="db-controls column medium-9 end"> <div class="db-controls column medium-9 small-12 end">
<div class="db-activation column float-right medium-4"> <div class="db-activation column float-right medium-4">
<p>Active</p> <p>Active</p>
<button class="button button--green button--fixedwidth">Trigger a build</button> <button class="button button--green button--fixedwidth">Trigger a build</button>