ui: condense entire layout, remove middle gap, kv condense
This commit is contained in:
Jack Pearkes
parent
1b8a5a1e78
commit
0cd0c8a6e5
265
ui/index.html
265
ui/index.html
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -65,3 +65,7 @@ pre {
|
||||||
.bold {
|
.bold {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p.light {
|
||||||
|
color: $gray;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue