add markup and classes for sidebar
This commit is contained in:
Lisa Passing
parent
5bb66cf30c
commit
07db658fac
|
|
@ -0,0 +1,29 @@
|
|||
$sb-grey: #f2f2f2
|
||||
$sb-font-size: 14px
|
||||
|
||||
.tile--sidebar
|
||||
// border-left: 8px solid #
|
||||
background-color: $white
|
||||
border-bottom: 6px solid #FAF9F7
|
||||
|
||||
|
||||
|
||||
.tabnav--sidebar
|
||||
font-size: $sb-font-size
|
||||
border-bottom: solid 2px $sb-grey
|
||||
width: 90%
|
||||
margin: auto
|
||||
ul
|
||||
height: 1.7em
|
||||
li.float-right
|
||||
padding-right: 0
|
||||
.icon--plus:hover
|
||||
&:after
|
||||
color: $teal1
|
||||
|
||||
.sidebar-list
|
||||
margin-top: 1rem
|
||||
ul
|
||||
@include resetul
|
||||
|
||||
|
||||
|
|
@ -30,8 +30,22 @@
|
|||
|
||||
|
||||
.search--sidebar
|
||||
background-color: $white;
|
||||
border: solid 1px #f2f2f2
|
||||
color: #a6adad
|
||||
font-size: 14px
|
||||
height: 28px
|
||||
position: relative
|
||||
height: 10em
|
||||
.search-inner
|
||||
@extend %absolute-center
|
||||
width: 90%
|
||||
height: 33px
|
||||
input
|
||||
@extend .icon--search
|
||||
display: inline-block
|
||||
width: 100%
|
||||
padding: .5em
|
||||
color: #a6adad
|
||||
font-size: 14px
|
||||
border: solid 1px #f2f2f2
|
||||
border-radius: 4px
|
||||
background:
|
||||
repeat: no-repeat
|
||||
position: 98% 6px
|
||||
size: 17px 17px
|
||||
|
|
|
|||
|
|
@ -1,49 +1,97 @@
|
|||
<div id="search_box" class="search search--sidebar">
|
||||
{{input value=controller.search placeholder="Search all repositories"}}
|
||||
<div class="search-inner">
|
||||
{{input value=controller.search placeholder="Search all repositories"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{view 'repos-list-tabs'}}
|
||||
|
||||
<div class="tab">
|
||||
|
||||
<div class="tabbody sidebar-list">
|
||||
|
||||
{{#if isLoaded}}
|
||||
{{#collection 'repos-list' content=this}}
|
||||
{{#with view.repo as repo}}
|
||||
<div class="slug-and-status">
|
||||
<span class="status"></span>
|
||||
{{#if repo.slug}}
|
||||
{{#link-to "repo" repo class="slug"}}{{repo.slug}}{{/link-to}}
|
||||
{{/if}}
|
||||
<div class="tile tile--sidebar">
|
||||
<h2 class="tile-title">
|
||||
{{#if repo.slug}}
|
||||
{{#link-to "repo" repo class="slug"}}{{repo.slug}}{{/link-to}}
|
||||
{{/if}}
|
||||
</h2>
|
||||
{{#with repo.lastBuildHash as lastBuild}}
|
||||
{{#if repo.slug}}
|
||||
{{#if lastBuild.id}}
|
||||
<p class="tile-title float-right">
|
||||
{{#link-to "build" repo lastBuild.id
|
||||
class="last_build"}}{{lastBuild.number}}{{/link-to}}
|
||||
</p>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/with}}
|
||||
<p>
|
||||
<span class="icon icon--clock"></span>
|
||||
Duration:
|
||||
<abbr class="duration" {{bind-attr title="lastBuildStartedAt"}}>
|
||||
{{format-duration repo.lastBuildDuration}}
|
||||
</abbr>
|
||||
</p>
|
||||
<p>
|
||||
<span class="icon icon--cal"></span>
|
||||
Finished:
|
||||
<abbr clas s="finished_at timeago" {{bind-attr title="lastBuildFinishedAt"}}>
|
||||
{{format-time repo.lastBuildFinishedAt}}
|
||||
</abbr>
|
||||
</p>
|
||||
</div>
|
||||
{{#with repo.lastBuildHash as lastBuild}}
|
||||
{{#if repo.slug}}
|
||||
{{#if lastBuild.id}}
|
||||
{{#link-to "build" repo lastBuild.id
|
||||
class="last_build"}}{{lastBuild.number}}{{/link-to}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/with}}
|
||||
|
||||
{{#if repo.lastBuildHash.number }}
|
||||
<p class="summary">
|
||||
<span class="duration_label">Duration:</span>
|
||||
<abbr class="duration" {{bind-attr title="lastBuildStartedAt"}}>
|
||||
{{format-duration repo.lastBuildDuration}}
|
||||
</abbr>
|
||||
</p>
|
||||
<p class="summary">
|
||||
<span class="finished-icon"></span><span class="finished_at_label">Finished:</span>
|
||||
<abbr class="finished_at timeago" {{bind-attr title="lastBuildFinishedAt"}}>
|
||||
{{format-time repo.lastBuildFinishedAt}}
|
||||
</abbr>
|
||||
</p>
|
||||
{{/if}}
|
||||
|
||||
<div class="indicator"><span></span></div>
|
||||
{{/with}}
|
||||
{{else}}
|
||||
<p class="empty">{{noReposMessage}}</p>
|
||||
{{/collection}}
|
||||
|
||||
{{!-- <div class="tab">
|
||||
{{#if isLoaded}}
|
||||
{{#collection 'repos-list' content=this}}
|
||||
{{#with view.repo as repo}}
|
||||
<div class="slug-and-status">
|
||||
<span class="status"></span>
|
||||
{{#if repo.slug}}
|
||||
{{#link-to "repo" repo class="slug"}}{{repo.slug}}{{/link-to}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#with repo.lastBuildHash as lastBuild}}
|
||||
{{#if repo.slug}}
|
||||
{{#if lastBuild.id}}
|
||||
{{#link-to "build" repo lastBuild.id
|
||||
class="last_build"}}{{lastBuild.number}}{{/link-to}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/with}}
|
||||
|
||||
{{#if repo.lastBuildHash.number }}
|
||||
<p class="summary">
|
||||
<span class="duration_label">Duration:</span>
|
||||
<abbr class="duration" {{bind-attr title="lastBuildStartedAt"}}>
|
||||
{{format-duration repo.lastBuildDuration}}
|
||||
</abbr>
|
||||
</p>
|
||||
<p class="summary">
|
||||
<span class="finished-icon"></span><span class="finished_at_label">Finished:</span>
|
||||
<abbr class="finished_at timeago" {{bind-attr title="lastBuildFinishedAt"}}>
|
||||
{{format-time repo.lastBuildFinishedAt}}
|
||||
</abbr>
|
||||
</p>
|
||||
{{/if}}
|
||||
|
||||
<div class="indicator"><span></span></div>
|
||||
{{/with}}
|
||||
{{else}}
|
||||
<p class="empty">{{noReposMessage}}</p>
|
||||
{{/collection}}
|
||||
{{else}}
|
||||
<div class="loading"><span>Loading</span></div>
|
||||
{{/if}}
|
||||
</div> --}}
|
||||
{{else}}
|
||||
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,19 +1,23 @@
|
|||
<ul class="tabs">
|
||||
<li id="tab_owned" {{bind-attr class="view.classOwned"}}>
|
||||
<h5>{{#link-to "main.repositories"}}My Repositories{{/link-to}}</h5>
|
||||
</li>
|
||||
|
||||
{{#unless config.pro}}
|
||||
<li id="tab_recent" {{bind-attr class="view.classRecent"}}>
|
||||
<h5>{{#link-to "main.recent"}}Recent{{/link-to}}</h5>
|
||||
<div class="tabnav tabnav--sidebar" role="tablist">
|
||||
<ul class="tab tabs--sidebar">
|
||||
<li id="tab_owned" {{bind-attr class="view.classOwned"}}>
|
||||
{{#link-to "main.repositories"}}My Repositories{{/link-to}}
|
||||
</li>
|
||||
{{/unless}}
|
||||
|
||||
<li id="tab_search" {{bind-attr class="view.classSearch"}}>
|
||||
<h5>Search</h5>
|
||||
</li>
|
||||
{{!-- {{#unless config.pro}}
|
||||
<li id="tab_recent" {{bind-attr class="view.classRecent"}}>
|
||||
<h5>{{#link-to "main.recent"}}Recent{{/link-to}}</h5>
|
||||
</li>
|
||||
{{/unless}} --}}
|
||||
|
||||
<li id="tab_new" {{bind-attr class="view.classNew"}}>
|
||||
<h5>{{#link-to "profile" trackEvent="add-repository-from-list" title="Add New Repository"}}+{{/link-to}}</h5>
|
||||
</li>
|
||||
</ul>
|
||||
{{!-- <li id="tab_search" {{bind-attr class="view.classSearch"}}>
|
||||
<h5>Search</h5>
|
||||
</li> --}}
|
||||
|
||||
<li id="tab_new" {{bind-attr class="view.classNew :float-right"}}>
|
||||
{{#link-to "profile" trackEvent="add-repository-from-list" title="Add New Repository"}}
|
||||
<span class="icon icon--plus"></span>
|
||||
{{/link-to}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ View = Ember.View.extend
|
|||
classOwned: (->
|
||||
classes = []
|
||||
classes.push('active') if @get('tab') == 'owned'
|
||||
classes.push('display-inline') if @get('currentUser')
|
||||
# classes.push('display-inline') if @get('currentUser')
|
||||
classes.join(' ')
|
||||
).property('tab', 'currentUser')
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user