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

position placeholder icons

Browse Source
This commit is contained in:
Lisa Passing 2015-02-18 17:50:01 +01:00
parent b629101fee
commit 52a905ce73
2 changed files with 76 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -77,19 +77,68 @@ $db-gray: #C9C9C9
margin: 0 margin: 0
font-weight: 400 font-weight: 400
.icon
position: absolute
left: 0
top: 0
bottom: 0
margin: auto
width: 1.5em
height: 1.5em
background: pink
display: inline-block
.db-repo .db-repo
padding-left: 4em padding-left: 4em
// border-right: 1px solid $db-gray
transform: translateY(0.4em) transform: translateY(0.4em)
.db-status .db-status
@extend %br-4px
position: absolute; position: absolute;
top: 0 top: 0
left: 0 left: 0
height: 100% height: 100%
width: 2.5em width: 2.5em
background-color: $db-gray background-color: $db-gray
border-top-left-radius: 4px
border-bottom-left-radius: 4px
.icon-status
left: 0
right: 0
margin: auto
top: -2em
.icon-star
left: 0
right: 0
margin: auto
bottom: -2em
.db-job,
.db-branch,
.db-commit,
.db-timeago
position: relative
padding-left: 2.2em
transform: translateY(24%)
line-height: 3em
.db-job
border-left: 1px solid $db-gray
.db-lock
position: absolute
left: -2.1em;
top: 1.2em;
.db-burger
height: 100%
.icon
width: 2em
height: 2em
left: 0
right: 0
.dropdown .dropdown
display: none display: none

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

@ -74,11 +74,11 @@
<div class="db db--started row"> <div class="db db--started row">
<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">
<span class="icon icon-status icon-started"></span>
<span class="icon icon-star"></span>
</div>
<div class="db-repo column medium-3"> <div class="db-repo column medium-3">
<div class="db-status">
<span class="icon icon-started"></span>
<span class="icon icon-star"></span>
</div>
<h3>travis-pro</h3> <h3>travis-pro</h3>
<h2>travis-rubies</h2> <h2>travis-rubies</h2>
</div> </div>
@ -86,7 +86,7 @@
<p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p> <p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p>
<p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p> <p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p>
<p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p> <p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p>
<div class="db-status column medium-1 end"> <div class="db-burger column medium-1 end">
<span class="icon icon-burger"></span> <span class="icon icon-burger"></span>
<ul class="dropdown"> <ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li> <li><a href="#" title="">Deactivate repository</a></li>
@ -97,11 +97,11 @@
<div class="db db--fail row"> <div class="db db--fail row">
<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">
<span class="icon icon-status icon-started"></span>
<span class="icon icon-star"></span>
</div>
<div class="db-repo column medium-3"> <div class="db-repo column medium-3">
<div class="db-status">
<span class="icon icon-started"></span>
<span class="icon icon-star"></span>
</div>
<h3>travis-pro</h3> <h3>travis-pro</h3>
<h2>travis-rubies</h2> <h2>travis-rubies</h2>
</div> </div>
@ -109,7 +109,7 @@
<p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p> <p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p>
<p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p> <p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p>
<p class="db-timeago column medium-2"><span class="icon icon-cal"></span>25 minutes ago</p> <p class="db-timeago column medium-2"><span class="icon icon-cal"></span>25 minutes ago</p>
<div class="db-status column medium-1 end"> <div class="db-burger column medium-1 end">
<span class="icon icon-burger"></span> <span class="icon icon-burger"></span>
<ul class="dropdown"> <ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li> <li><a href="#" title="">Deactivate repository</a></li>
@ -120,11 +120,11 @@
<div class="db db--error row"> <div class="db db--error row">
<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">
<span class="icon icon-status icon-started"></span>
<span class="icon icon-star"></span>
</div>
<div class="db-repo column medium-3"> <div class="db-repo column medium-3">
<div class="db-status">
<span class="icon icon-started"></span>
<span class="icon icon-star"></span>
</div>
<h3>travis-pro</h3> <h3>travis-pro</h3>
<h2>travis-rubies</h2> <h2>travis-rubies</h2>
</div> </div>
@ -132,7 +132,7 @@
<p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p> <p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p>
<p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p> <p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p>
<p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p> <p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p>
<div class="db-status column medium-1 end"> <div class="db-burger column medium-1 end">
<span class="icon icon-burger"></span> <span class="icon icon-burger"></span>
<ul class="dropdown"> <ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li> <li><a href="#" title="">Deactivate repository</a></li>
@ -143,11 +143,11 @@
<div class="db db--cancel row"> <div class="db db--cancel row">
<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">
<span class="icon icon-status icon-started"></span>
<span class="icon icon-star"></span>
</div>
<div class="db-repo column medium-3"> <div class="db-repo column medium-3">
<div class="db-status">
<span class="icon icon-started"></span>
<span class="icon icon-star"></span>
</div>
<h3>travis-pro</h3> <h3>travis-pro</h3>
<h2>travis-rubies</h2> <h2>travis-rubies</h2>
</div> </div>
@ -155,7 +155,7 @@
<p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p> <p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p>
<p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p> <p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p>
<p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p> <p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p>
<div class="db-status column medium-1 end"> <div class="db-burger column medium-1 end">
<span class="icon icon-burger"></span> <span class="icon icon-burger"></span>
<ul class="dropdown"> <ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li> <li><a href="#" title="">Deactivate repository</a></li>
@ -166,11 +166,11 @@
<div class="db db--pass row"> <div class="db db--pass row">
<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">
<span class="icon icon-status icon-started"></span>
<span class="icon icon-star"></span>
</div>
<div class="db-repo column medium-3"> <div class="db-repo column medium-3">
<div class="db-status">
<span class="icon icon-started"></span>
<span class="icon icon-star"></span>
</div>
<h3>travis-pro</h3> <h3>travis-pro</h3>
<h2>travis-rubies</h2> <h2>travis-rubies</h2>
</div> </div>
@ -178,7 +178,7 @@
<p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p> <p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p>
<p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p> <p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p>
<p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p> <p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p>
<div class="db-status column medium-1 end"> <div class="db-burger column medium-1 end">
<span class="icon icon-burger"></span> <span class="icon icon-burger"></span>
<ul class="dropdown"> <ul class="dropdown">
<li><a href="#" title="">Deactivate repository</a></li> <li><a href="#" title="">Deactivate repository</a></li>