luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: condense entire layout, remove middle gap, kv condense

This commit is contained in:
Jack Pearkes 2014-06-03 11:32:22 -04:00
parent 1b8a5a1e78
commit 0cd0c8a6e5
4 changed files with 151 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
ui/index.html
View File

@ -52,15 +52,18 @@
<div class="row">
<div class="action-bar">
<div class="col-md-5">
<div class="form-group">
{{ input type="text" value=filter class="form-control form-control-mini" placeholder="Filter by name"}}
</div>
<div class="col-md-3">
</div>
<div class="col-md-5">
<div class="form-group">
{{view Ember.Select content=statuses value=filterStatus class="form-control form-control-mini"}}
</div>
<div class="col-md-4">
<div class="btn-group pull-right">
<button {{ bind-attr class=":btn :btn-mini condensedView:btn-default:btn-primary" }} {{action toggleCondensed }}>Expand</button>
<button {{ bind-attr class=":btn :btn-mini true:btn-primary:btn-default" }} {{action }}>Action</button>
</div>
<div class="col-md-2">
<div class="form-group">
<button {{ bind-attr class=":btn :btn-mini :pull-right condensedView:btn-default:btn-primary" }} {{action toggleCondensed }}>Expand</button>
</div>
</div>
</div>
@ -111,37 +114,31 @@
<script type="text/x-handlebars" data-template-name="kv/show">
<div class="row">
<div class="col-md-6 col-lg-5 scrollable">
<h4 class="breadcrumbs"><a href="" {{action 'linkToKey' grandParentKey }}>{{parentKey}}</a> <a href="" {{action 'linkToKey' parentKey }}>+</a></h4>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-6 col-lg-5 scrollable">
{{#each item in model }}
{{#link-to item.linkToRoute item.Key href=false tagName="div" class="panel panel-link panel-short"}}
<div {{bind-attr class=":panel-bar item.isFolder:bg-gray:bg-light-gray" }}></div>
<div class="panel-heading">
<h3 class="panel-title">
{{#link-to item.linkToRoute item.Key tagName="div" href=false class="list-group-item list-condensed-link" }}
<div {{bind-attr class="item.isFolder:bg-gray:bg-light-gray :list-bar-horizontal"}}></div>
<div class="name">
{{item.keyWithoutParent}}
</h3>
</div>
{{/link-to}}
{{/each}}
</div>
</div>
<div class="col-md-1">
<div class="border-left hidden-xs hidden-sm">
<div class="line"></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6 col-lg-7 scrollable border-left">
<div class="row padded-border">
<div class="panel">
<div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-light-gray" }}></div>
<div class="panel-heading">
@ -186,38 +183,29 @@
<script type="text/x-handlebars" data-template-name="kv/edit">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-6 col-lg-5">
<h4 class="breadcrumbs"><a href="" {{action 'linkToKey' grandParentKey }}>{{parentKey}}</a> <a href="" {{action 'linkToKey' parentKey }}>+</a></h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-6 col-lg-5 scrollable">
{{#each item in siblings }}
{{#link-to item.linkToRoute item.Key href=false tagName="div" class="panel panel-link panel-short"}}
<div {{bind-attr class=":panel-bar item.isFolder:bg-gray:bg-light-gray" }}></div>
<div class="panel-heading">
<h3 class="panel-title">
{{#link-to item.linkToRoute item.Key tagName="div" href=false class="list-group-item list-condensed-link" }}
<div {{bind-attr class="item.isFolder:bg-gray:bg-light-gray :list-bar-horizontal"}}></div>
<div class="name">
{{item.keyWithoutParent}}
</h3>
</div>
{{/link-to}}
{{/each}}
</div>
</div>
<div class="col-md-1">
<div class="border-left hidden-xs hidden-sm">
<div class="line"></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6 col-lg-7 border-left">
<div class="row padded-border">
<div class="panel">
<div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-green" }}></div>
<div class="panel-heading">
@ -243,6 +231,7 @@
</div>
</div>
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="item/loading">
@ -258,7 +247,7 @@
<script type="text/x-handlebars" id="services">
<div class="row">
<div class="col-md-5 scrollable">
<div class="col-md-6 col-lg-5 scrollable">
{{view App.ActionBarView }}
{{#if filteredContent}}
@ -298,23 +287,21 @@
{{/each}}
{{else}}
<p>There are no services to show.</p>
<p class="light">There are no services to show.</p>
{{/if}}
</div>
<div class="col-md-1">
<div class="border-left hidden-xs hidden-sm">
<div class="line"></div>
</div>
</div>
<div class="visible-xs visible-sm">
<hr>
</div>
<div class="col-md-6 scrollable">
<div class="row">
<div class="col-md-6 col-lg-7 scrollable border-left">
<div class="row padded-border">
{{outlet}}
</div>
</div>
@ -357,7 +344,7 @@
<script type="text/x-handlebars" id="nodes">
<div class="row">
<div class="col-md-5 scrollable">
<div class="col-md-6 col-lg-5 scrollable">
{{view App.ActionBarView }}
{{#if filteredContent}}
@ -396,23 +383,21 @@
{{/each}}
{{else}}
<p>There are no nodes to show.</p>
<p class="light">There are no nodes to show.</p>
{{/if}}
</div>
<div class="col-md-1">
<div class="border-left hidden-xs hidden-sm">
<div class="line"></div>
</div>
</div>
<div class="visible-xs visible-sm">
<hr>
</div>
<div class="col-md-6 scrollable">
<div class="row">
<div class="col-md-6 col-lg-7 scrollable border-left">
<div class="row padded-border">
{{outlet}}
</div>
</div>

2
ui/styles/_forms.scss
View File

@ -5,7 +5,7 @@
@include transition(border-color .2s ease-in-out);
&.form-control-mini {
font-size: 10px;
font-size: 12px;
}
}

4
ui/styles/_type.scss
View File

@ -65,3 +65,7 @@ pre {
.bold {
font-weight: 700;
}
p.light {
color: $gray;
}

38
ui/styles/base.scss
View File

@ -7,19 +7,25 @@
@import "lists";
@import "forms";
@media (min-width: 768px) { // + 18
// @media (min-width: 768px) { // + 18
// .container {
// width: 740px;
// }
// }
// @media (min-width: 970px) { // + 22
// .container {
// width: 970px;
// }
// }
@media (min-width: 1120px) { // + 30
.container {
width: 750px;
width: 1100px;
}
}
@media (min-width: 970px) { // + 22
.container {
width: 970px;
}
}
@media (min-width: 1230px) { // + 30
@media (min-width: 1200px) { // + 30
.container {
width: 1200px;
}
@ -42,14 +48,10 @@ a {
}
.border-left {
display: block;
height: 700px;
border-left: 1px $gray-background solid;
.line {
margin: 0 auto;
background-color: $gray-background;
height: 100%;
width: 1px;
.padded-border{
padding-left: 20px;
}
}
@ -105,5 +107,7 @@ a {
}
.action-bar {
height: 50px;
min-height: 50px;
padding-top: 10px;
padding-bottom: 10px;
}