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
|
.search--sidebar
|
||||||
background-color: $white;
|
position: relative
|
||||||
border: solid 1px #f2f2f2
|
height: 10em
|
||||||
color: #a6adad
|
.search-inner
|
||||||
font-size: 14px
|
@extend %absolute-center
|
||||||
height: 28px
|
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">
|
<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>
|
</div>
|
||||||
|
|
||||||
{{view 'repos-list-tabs'}}
|
{{view 'repos-list-tabs'}}
|
||||||
|
|
||||||
<div class="tab">
|
|
||||||
|
<div class="tabbody sidebar-list">
|
||||||
|
|
||||||
{{#if isLoaded}}
|
{{#if isLoaded}}
|
||||||
{{#collection 'repos-list' content=this}}
|
{{#collection 'repos-list' content=this}}
|
||||||
{{#with view.repo as repo}}
|
{{#with view.repo as repo}}
|
||||||
<div class="slug-and-status">
|
<div class="tile tile--sidebar">
|
||||||
<span class="status"></span>
|
<h2 class="tile-title">
|
||||||
{{#if repo.slug}}
|
{{#if repo.slug}}
|
||||||
{{#link-to "repo" repo class="slug"}}{{repo.slug}}{{/link-to}}
|
{{#link-to "repo" repo class="slug"}}{{repo.slug}}{{/link-to}}
|
||||||
{{/if}}
|
{{/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>
|
</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}}
|
{{/with}}
|
||||||
{{else}}
|
{{else}}
|
||||||
<p class="empty">{{noReposMessage}}</p>
|
<p class="empty">{{noReposMessage}}</p>
|
||||||
{{/collection}}
|
{{/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}}
|
{{else}}
|
||||||
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
|
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,19 +1,23 @@
|
||||||
<ul class="tabs">
|
<div class="tabnav tabnav--sidebar" role="tablist">
|
||||||
<li id="tab_owned" {{bind-attr class="view.classOwned"}}>
|
<ul class="tab tabs--sidebar">
|
||||||
<h5>{{#link-to "main.repositories"}}My Repositories{{/link-to}}</h5>
|
<li id="tab_owned" {{bind-attr class="view.classOwned"}}>
|
||||||
</li>
|
{{#link-to "main.repositories"}}My Repositories{{/link-to}}
|
||||||
|
|
||||||
{{#unless config.pro}}
|
|
||||||
<li id="tab_recent" {{bind-attr class="view.classRecent"}}>
|
|
||||||
<h5>{{#link-to "main.recent"}}Recent{{/link-to}}</h5>
|
|
||||||
</li>
|
</li>
|
||||||
{{/unless}}
|
|
||||||
|
|
||||||
<li id="tab_search" {{bind-attr class="view.classSearch"}}>
|
{{!-- {{#unless config.pro}}
|
||||||
<h5>Search</h5>
|
<li id="tab_recent" {{bind-attr class="view.classRecent"}}>
|
||||||
</li>
|
<h5>{{#link-to "main.recent"}}Recent{{/link-to}}</h5>
|
||||||
|
</li>
|
||||||
|
{{/unless}} --}}
|
||||||
|
|
||||||
<li id="tab_new" {{bind-attr class="view.classNew"}}>
|
{{!-- <li id="tab_search" {{bind-attr class="view.classSearch"}}>
|
||||||
<h5>{{#link-to "profile" trackEvent="add-repository-from-list" title="Add New Repository"}}+{{/link-to}}</h5>
|
<h5>Search</h5>
|
||||||
</li>
|
</li> --}}
|
||||||
</ul>
|
|
||||||
|
<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: (->
|
classOwned: (->
|
||||||
classes = []
|
classes = []
|
||||||
classes.push('active') if @get('tab') == 'owned'
|
classes.push('active') if @get('tab') == 'owned'
|
||||||
classes.push('display-inline') if @get('currentUser')
|
# classes.push('display-inline') if @get('currentUser')
|
||||||
classes.join(' ')
|
classes.join(' ')
|
||||||
).property('tab', 'currentUser')
|
).property('tab', 'currentUser')
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user