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

style starred repo tiles

Browse Source
This commit is contained in:
Lisa Passing 2015-02-23 14:36:08 +01:00
parent ab3246a68e
commit 6caa1bf56d
2 changed files with 92 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,18 +20,6 @@ $db-text-color: #ACAAAA
.wrapper-dashboard
background-color: $wrapper-bg-color
.dashboard-starred
margin: 2em 0 3em
.dashboard-active
margin-bottom: 3em
.dashboard-inactive
margin: 1.5em 0 5em
.db
h2, h3, p, button, .db-status
opacity: .7
.dashboard--empty
padding: 2em 5em
background: #E8E6DE
@ -50,8 +38,6 @@ $db-text-color: #ACAAAA
margin-bottom: 1em
background: $white
@extend %br-4px
@media #{$medium-up}
height: 57px
h2, h3, p
margin: 0
@ -66,9 +52,10 @@ $db-text-color: #ACAAAA
margin: auto
.db-repo
padding-left: 4em
padding-left: 3em
transform: translateY(0.4em)
overflow: hidden
margin-bottom: 1em
&:after
content: ""
display: block
@ -97,23 +84,17 @@ $db-text-color: #ACAAAA
left: 0
right: 0
margin: auto
top: -2em
top: -6em
.icon-star
left: 0
right: 0
margin: auto
bottom: -2em
top: -2em
opacity: .9
.db-controls
// position: relative
padding-left: 4em
transform: translateY(24%)
line-height: 3em
border-left: 1px solid $db-gray
@media #{$medium-up}
padding-left: 0
line-height: 2.2
p,
button
display: inline-block
@ -157,8 +138,6 @@ $db-text-color: #ACAAAA
height: 2em
left: 0
right: 0
@media #{$medium-up}
height: 100%
.db-burger:hover ~ .dropdown,
.dropdown:hover
@ -198,6 +177,43 @@ $db-text-color: #ACAAAA
display: none
.dashboard-starred
margin: 2em 0 3em
.db
padding-bottom: .2em
.db-controls
padding-left: 3em
.dashboard-active,
.dashboard-inactive
margin-bottom: 3em
.db-controls
padding-left: 4em
@media #{$medium-up}
.db
height: 57px
.db-repo
padding-left: 4em
.db-controls
padding-left: 2em
line-height: 3em
transform: translateY(26%)
border-left: 1px solid $db-gray
.db-burger
height: 100%
.db-status
.icon-status
top: -2em
.icon-star
bottom: -4em
.dashboard-inactive
margin: 1.5em 0 5em
.db
h2, h3, p, button, .db-status
opacity: .7
@mixin colorDbelements($color)
.db-status

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

@ -64,13 +64,62 @@
<div class="dashboard">
<section class="dashboard-starred">
<div class="row">
<div class="db db--pass column medium-5">
<div class="db-status">
<span class="icon icon-status icon-started"></span>
<span class="icon icon-star"></span>
</div>
<div class="db-repo column">
<h3>travis-pro</h3>
<h2>travis-rubies</h2>
</div>
<div class="db-controls column end">
<p class="db-job column small-6"><span class="icon icon-hash"></span>9874 started</p>
<p class="db-commit column small-6"><span class="icon icon-github"></span>394348a</p>
<p class="db-timeago column small-6"><span class="icon icon-cal"></span>in queue</p>
<p class="db-branch column small-6"><span class="icon icon-branch"></span>master</p>
</div>
<div class="db-burger">
<span class="icon icon-burger"></span>
</div>
<ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li>
<li><a href="#" title="">Trigger a build</a></li>
</ul>
</div>
<div class="db db--error column medium-5">
<div class="db-lock"><span class="icon icon-lock"></span></div>
<div class="db-status">
<span class="icon icon-status icon-started"></span>
<span class="icon icon-star"></span>
</div>
<div class="db-repo column">
<h3>travis-pro</h3>
<h2>travis-rubies</h2>
</div>
<div class="db-controls column end">
<p class="db-job column small-6"><span class="icon icon-hash"></span>9874 started</p>
<p class="db-commit column small-6"><span class="icon icon-github"></span>394348a</p>
<p class="db-timeago column small-6"><span class="icon icon-cal"></span>in queue</p>
<p class="db-branch column small-6"><span class="icon icon-branch"></span>master</p>
</div>
<div class="db-burger">
<span class="icon icon-burger"></span>
</div>
<ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li>
<li><a href="#" title="">Trigger a build</a></li>
</ul>
</div>
</div>
{{!-- <div class="row">
<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>
</div>
</div> --}}
<div></div>
</section>
<section class="dashboard-active">