add owner page layout styles

This commit is contained in:
Lisa Passing 2015-04-09 15:22:57 +02:00
parent f2211ef267
commit ca483a2a78
4 changed files with 63 additions and 28 deletions

View File

@ -23,7 +23,7 @@
@import "app/main/list";
@import "app/main/log";
@import "app/main/sponsors";
@import "app/main";
// @import "app/main";
// @import "app/maximize";
@import "app/misc";
@import "app/popup";
@ -66,6 +66,7 @@
@import "app/layouts/sidebar";
@import "app/layouts/profile";
@import "app/layouts/top";
@import "app/layouts/owner";
// @import "app/top";
@import "app/landing";

View File

@ -0,0 +1,29 @@
.owner-tiles
@extend .repo-main
@include resetul
h3
margin: 0
font-size: $font-size-m;
font-weight: 400
h2
font-size: 20px
.tile-additional
padding-left: 2em
font-size: $font-size-m;
.tile-status .icon-status
margin-top: 1.3em
p .icon
width: 1em
height: 1em
&.icon-github
width: .9em
height: 1.2em
.tile-single
line-height: 3em
color: #969496

View File

@ -3,7 +3,9 @@
background-color: $color
.repo-header-title a,
.repo-build-status a,
.build-status a
.build-status a,
.tile-header,
.tile-header a
color: $color
.tile
@ -133,7 +135,8 @@
bottom: 0
// build history etc
.tile--build
.tile--build,
.owner-tiles
.tile-main
@media #{$small-only}
h2

View File

@ -15,8 +15,8 @@
</section>
</header>
<div class="row">
<nav class="tabnav" role="tablist">
<div>
<nav class="tabnav row" role="tablist">
<ul class="tab tabs--owner">
<li role="presentational"><a href="#" title="" role="tab">All Repositories</a></li>
<li role="presentational"><a href="#" title="" role="tab">Running Builds (2/5)</a></li>
@ -27,29 +27,30 @@
<div class="tabbody">
<section role="tabpanel">
<ul>
<li {{bind-attr class=":db :row repo.last_build.state :passed"}}>
<ul class="owner-tiles">
<li {{bind-attr class=":tile :tile--small :row repo.last_build.state :passed"}}>
{{#if repo.private }}
<div class="db-lock"><span class="icon icon-lock"></span></div>
<div class="tile-lock"><span class="icon icon-lock"></span></div>
{{/if}}
<div class="db-status">
<div class="tile-status">
<span {{bind-attr class=":icon :icon-status repo.last_build.state :passed"}}></span>
<span {{bind-attr class=":icon :request-kind repo.last_build.state :push"}}></span>
</div>
<div class="db-repo column medium-3 small-12">
<div class="tile-main tile-header column medium-3 small-12">
<h3>owner</h3>
<h2>{{#link-to "repo" repo.owner.login repo.name}}repo name{{/link-to}}</h2>
<h2>{{#link-to "repo" repo.owner.login repo.name}}repo namerepo namerepo namerepo namerepo namerepo namerepo name{{/link-to}}</h2>
</div>
<div class="db-controls column medium-9 small-12 end">
<p class="db-job column medium-3 small-6"><span class="icon icon-hash"></span>
<div class="tile-additional tile-single column medium-9 small-12 end">
<p class="tile-job build-status column medium-3 small-6"><span class="icon icon-hash"></span>
{{#link-to "build" repo.owner.login repo.name repo.last_build.id}}
{{!-- {{repo.last_build.number}} {{repo.last_build.state}} --}}
1234 passed
{{/link-to}}</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">
<p class="tile-commit column medium-3 small-6">
<span class="icon icon-github"></span><a href="#">394348a</a></p>
<p class="tile-timeago column medium-3 small-6">
<span class="icon icon-clock"></span>ran for 3 min 23 sec</p>
<p class="db-timeago column medium-3 small-6">
<p class="tile-timeago column medium-2 small-6">
<span class="icon icon-cal"></span>3 days ago{{!-- {{format-time repo.last_build.finished_at}} --}}</p>
</div>
</li>
@ -57,29 +58,30 @@
</section>
<section role="tabpanel">
<ul>
<li {{bind-attr class=":db :row repo.last_build.state :started"}}>
<ul class="owner-tiles">
<li {{bind-attr class=":tile :tile--small :row repo.last_build.state :started"}}>
{{#if repo.private }}
<div class="db-lock"><span class="icon icon-lock"></span></div>
<div class="tile-lock"><span class="icon icon-lock"></span></div>
{{/if}}
<div class="db-status">
<div class="tile-status">
<span {{bind-attr class=":icon :icon-status repo.last_build.state :started"}}></span>
<span {{bind-attr class=":icon :request-kind repo.last_build.state :push"}}></span>
</div>
<div class="db-repo column medium-3 small-12">
<div class="tile-main tile-header column medium-3 small-12">
<h3>owner</h3>
<h2>{{#link-to "repo" repo.owner.login repo.name}}repo name{{/link-to}}</h2>
</div>
<div class="db-controls column medium-9 small-12 end">
<p class="db-job column medium-3 small-6"><span class="icon icon-hash"></span>
<div class="tile-additional tile-single column medium-9 small-12 end">
<p class="tile-job build-status column medium-3 small-6"><span class="icon icon-hash"></span>
{{#link-to "build" repo.owner.login repo.name repo.last_build.id}}
{{!-- {{repo.last_build.number}} {{repo.last_build.state}} --}}
1234 passed
{{/link-to}}</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">
<p class="tile-commit column medium-3 small-6">
<span class="icon icon-github"></span><a href="#">394348a</a></p>
<p class="tile-timeago column medium-3 small-6">
<span class="icon icon-clock"></span>currently running</p>
<p class="db-timeago column medium-3 small-6">
<p class="tile-timeago column medium-2 small-6">
<span class="icon icon-cal"></span>in queue{{!-- {{format-time repo.last_build.finished_at}} --}}</p>
</div>
</li>