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

265
ui/index.html
View File

@ -52,15 +52,18 @@
<div class="row"> <div class="row">
<div class="action-bar"> <div class="action-bar">
<div class="col-md-5"> <div class="col-md-5">
{{ input type="text" value=filter class="form-control form-control-mini" placeholder="Filter by name"}} <div class="form-group">
{{ input type="text" value=filter class="form-control form-control-mini" placeholder="Filter by name"}}
</div>
</div> </div>
<div class="col-md-3"> <div class="col-md-5">
{{view Ember.Select content=statuses value=filterStatus class="form-control form-control-mini"}} <div class="form-group">
{{view Ember.Select content=statuses value=filterStatus class="form-control form-control-mini"}}
</div>
</div> </div>
<div class="col-md-4"> <div class="col-md-2">
<div class="btn-group pull-right"> <div class="form-group">
<button {{ bind-attr class=":btn :btn-mini condensedView:btn-default:btn-primary" }} {{action toggleCondensed }}>Expand</button> <button {{ bind-attr class=":btn :btn-mini :pull-right 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>
</div> </div>
</div> </div>
@ -110,136 +113,122 @@
</script> </script>
<script type="text/x-handlebars" data-template-name="kv/show"> <script type="text/x-handlebars" data-template-name="kv/show">
<div class="row"> <div class="row">
<h4 class="breadcrumbs"><a href="" {{action 'linkToKey' grandParentKey }}>{{parentKey}}</a> <a href="" {{action 'linkToKey' parentKey }}>+</a></h4> <div class="col-md-6 col-lg-5 scrollable">
</div>
<div class="row">
<div class="col-md-5">
<div class="row">
{{#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">
{{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="panel">
<div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-light-gray" }}></div>
<div class="panel-heading">
<h3 class="panel-title">
Create Key
</h3>
</div>
<div class="panel-body">
<form class="form">
<div class="form-group">
<p>{{errorMessage}}</p>
</div>
<div {{ bind-attr class=":form-group newKey.keyValid:valid" }}>
<div class="input-group">
<span class="input-group-addon">{{parentKey}}</span>
{{ input value=newKey.Key class="form-control" required=true }}
</div>
<span class="help-block">To create a folder, end the key with <code>/</code></span>
</div>
{{#if newKey.isFolder }}
<p>No value needed for nested keys.</p>
{{else}}
<div class="form-group">
{{ textarea value=newKey.Value class="form-control"}}
<span class="help-block">Value can be any format and length</span>
</div>
{{/if}}
<button {{ action "createKey"}} {{bind-attr disabled=newKey.isInvalid }} {{ bind-attr class=":btn newKey.isValid:btn-success:btn-default" }}>Create</button>
<button {{ action "deleteFolder"}} {{ bind-attr class=":btn :pull-right isLoading:btn-warning:btn-danger isRoot:hidden" }}>Delete folder</button>
</form>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="kv/edit">
<div class="row">
<div class="col-md-5">
<div class="row">
<h4 class="breadcrumbs"><a href="" {{action 'linkToKey' grandParentKey }}>{{parentKey}}</a> <a href="" {{action 'linkToKey' parentKey }}>+</a></h4> <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">
{{#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">
{{item.keyWithoutParent}}
</h3>
</div>
{{/link-to}}
{{/each}}
</div> </div>
</div> </div>
<div class="col-md-1"> <div class="row">
<div class="col-md-6 col-lg-5 scrollable">
{{#each item in model }}
{{#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}}
</div>
{{/link-to}}
{{/each}}
</div>
<div class="border-left hidden-xs hidden-sm"> <div class="border-left hidden-xs hidden-sm">
<div class="line"></div> <div class="line"></div>
</div> </div>
<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">
<h3 class="panel-title">
Create Key
</h3>
</div>
<div class="panel-body">
<form class="form">
<div class="form-group">
<p>{{errorMessage}}</p>
</div>
<div {{ bind-attr class=":form-group newKey.keyValid:valid" }}>
<div class="input-group">
<span class="input-group-addon">{{parentKey}}</span>
{{ input value=newKey.Key class="form-control" required=true }}
</div>
<span class="help-block">To create a folder, end the key with <code>/</code></span>
</div>
{{#if newKey.isFolder }}
<p>No value needed for nested keys.</p>
{{else}}
<div class="form-group">
{{ textarea value=newKey.Value class="form-control"}}
<span class="help-block">Value can be any format and length</span>
</div>
{{/if}}
<button {{ action "createKey"}} {{bind-attr disabled=newKey.isInvalid }} {{ bind-attr class=":btn newKey.isValid:btn-success:btn-default" }}>Create</button>
<button {{ action "deleteFolder"}} {{ bind-attr class=":btn :pull-right isLoading:btn-warning:btn-danger isRoot:hidden" }}>Delete folder</button>
</form>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="kv/edit">
<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="col-md-6"> <div class="row">
<div class="row"> <div class="col-md-6 col-lg-5 scrollable">
<div class="panel"> {{#each item in siblings }}
<div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-green" }}></div> {{#link-to item.linkToRoute item.Key tagName="div" href=false class="list-group-item list-condensed-link" }}
<div class="panel-heading"> <div {{bind-attr class="item.isFolder:bg-gray:bg-light-gray :list-bar-horizontal"}}></div>
<h3 class="panel-title"> <div class="name">
{{model.Key}} {{item.keyWithoutParent}}
</h3>
</div>
<div class="panel-body">
<div class="form-group">
{{errorMessage}}
</div> </div>
<form class="form"> {{/link-to}}
{{/each}}
</div>
<div class="border-left hidden-xs hidden-sm">
<div class="line"></div>
</div>
<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">
<h3 class="panel-title">
{{model.Key}}
</h3>
</div>
<div class="panel-body">
<div class="form-group"> <div class="form-group">
{{ textarea value=model.valueDecoded class="form-control"}} {{errorMessage}}
</div> </div>
<button {{ action "updateKey"}} {{bind-attr disabled=isLoading }} {{ bind-attr class=":btn isLoading:btn-warning:btn-success" }}>Update</button> <form class="form">
<button {{ action "cancelEdit"}} {{bind-attr disabled=isLoading }} {{ bind-attr class=":btn isLoading:btn-warning:btn-default" }}>Cancel</button> <div class="form-group">
<button {{ action "deleteKey"}} {{bind-attr disabled=isLoading }} {{ bind-attr class=":btn :pull-right isLoading:btn-warning:btn-danger" }}>Delete key</button> {{ textarea value=model.valueDecoded class="form-control"}}
</form> </div>
<button {{ action "updateKey"}} {{bind-attr disabled=isLoading }} {{ bind-attr class=":btn isLoading:btn-warning:btn-success" }}>Update</button>
<button {{ action "cancelEdit"}} {{bind-attr disabled=isLoading }} {{ bind-attr class=":btn isLoading:btn-warning:btn-default" }}>Cancel</button>
<button {{ action "deleteKey"}} {{bind-attr disabled=isLoading }} {{ bind-attr class=":btn :pull-right isLoading:btn-warning:btn-danger" }}>Delete key</button>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -258,7 +247,7 @@
<script type="text/x-handlebars" id="services"> <script type="text/x-handlebars" id="services">
<div class="row"> <div class="row">
<div class="col-md-5 scrollable"> <div class="col-md-6 col-lg-5 scrollable">
{{view App.ActionBarView }} {{view App.ActionBarView }}
{{#if filteredContent}} {{#if filteredContent}}
@ -298,23 +287,21 @@
{{/each}} {{/each}}
{{else}} {{else}}
<p>There are no services to show.</p> <p class="light">There are no services to show.</p>
{{/if}} {{/if}}
</div> </div>
<div class="col-md-1"> <div class="border-left hidden-xs hidden-sm">
<div class="border-left hidden-xs hidden-sm"> <div class="line"></div>
<div class="line"></div>
</div>
</div> </div>
<div class="visible-xs visible-sm"> <div class="visible-xs visible-sm">
<hr> <hr>
</div> </div>
<div class="col-md-6 scrollable"> <div class="col-md-6 col-lg-7 scrollable border-left">
<div class="row"> <div class="row padded-border">
{{outlet}} {{outlet}}
</div> </div>
</div> </div>
@ -357,7 +344,7 @@
<script type="text/x-handlebars" id="nodes"> <script type="text/x-handlebars" id="nodes">
<div class="row"> <div class="row">
<div class="col-md-5 scrollable"> <div class="col-md-6 col-lg-5 scrollable">
{{view App.ActionBarView }} {{view App.ActionBarView }}
{{#if filteredContent}} {{#if filteredContent}}
@ -396,14 +383,12 @@
{{/each}} {{/each}}
{{else}} {{else}}
<p>There are no nodes to show.</p> <p class="light">There are no nodes to show.</p>
{{/if}} {{/if}}
</div> </div>
<div class="col-md-1"> <div class="border-left hidden-xs hidden-sm">
<div class="border-left hidden-xs hidden-sm"> <div class="line"></div>
<div class="line"></div>
</div>
</div> </div>
<div class="visible-xs visible-sm"> <div class="visible-xs visible-sm">
@ -411,8 +396,8 @@
</div> </div>
<div class="col-md-6 scrollable"> <div class="col-md-6 col-lg-7 scrollable border-left">
<div class="row"> <div class="row padded-border">
{{outlet}} {{outlet}}
</div> </div>
</div> </div>

2
ui/styles/_forms.scss
View File

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

4
ui/styles/_type.scss
View File

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

38
ui/styles/base.scss
View File

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