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

ui: experiment with the vertical line

This commit is contained in:
Jack Pearkes 2014-04-30 10:49:07 -04:00
parent 193e30a79e
commit 09e419c1ec
3 changed files with 48 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ui/index.html
View File

@ -87,8 +87,13 @@
</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 col-md-offset-1">
<div class="col-md-6">
<div class="panel">
<div {{ bind-attr class=":panel-bar newKey.isValid:bg-green:bg-light-gray" }}></div>
<div class="panel-heading">
@ -142,8 +147,13 @@
</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 col-md-offset-1">
<div class="col-md-6">
<div class="panel">
<div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-green" }}></div>
<div class="panel-heading">
@ -192,7 +202,13 @@
</div>
<div class="col-md-6 col-md-offset-1">
<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">
{{outlet}}
</div>
@ -261,7 +277,13 @@
</div>
<div class="col-md-6 col-md-offset-1">
<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">
{{outlet}}
</div>

11
ui/static/loading-cylon-red.svg Normal file
View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 14 32 18" width="32" height="4" fill="#f20" preserveAspectRatio="none">
<path opacity="0.8" transform="translate(0 0)" d="M2 14 V18 H6 V14z">
<animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</path>
<path opacity="0.5" transform="translate(0 0)" d="M0 14 V18 H8 V14z">
<animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0.1s" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</path>
<path opacity="0.25" transform="translate(0 0)" d="M0 14 V18 H8 V14z">
<animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0.2s" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 980 B

11
ui/styles/base.scss
View File

@ -28,6 +28,17 @@ a {
}
}
.border-left {
display: block;
height: 700px;
.line {
margin: 0 auto;
background-color: $gray-background;
height: 100%;
width: 1px;
}
}
.no-margin {
margin: 0;