ui: error pages, help text

This commit is contained in:
Jack Pearkes 2014-04-30 22:47:38 -04:00
parent 0544a7cf76
commit bdd71dee33
5 changed files with 25 additions and 8 deletions

View File

@ -19,11 +19,14 @@
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="errora">
<script type="text/x-handlebars" data-template-name="error">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="text-center">
uh oh! This is an error page.
<div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
<div class="text-center error">
<p>This is an error page for the Consul web UI. You may have visited a URL that is loading an
unknown resource, so you can try going back to thes <a href="#">root</a>.</p>
<p>Otherwise, please report any unexpected
issues to the <a href="https://github.com/hashicorp/consul">GitHub page</a>.</p>
</div>
</div>
</div>
@ -119,6 +122,7 @@
<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 }}
@ -126,6 +130,7 @@
{{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}}

View File

@ -1,5 +1,4 @@
.form-group {
.form-control {
@include transition(border-color .2s ease-in-out);
@include transition(box-shadow .2s ease-in-out);

View File

@ -34,7 +34,7 @@
font-size: 14px;
color: $text-color;
}
h5 {
h5 {
font-size: 12px;
}
}
@ -63,11 +63,11 @@
border-color: $purple;
}
@include transition(background-color .1s linear);
@include transition(border-color .1s linear);
border-color: $purple;
.panel-bar {
@include transition(background-color .1s linear);
background-color: $purple;
}
}

View File

@ -23,6 +23,15 @@ a {
}
}
code {
color: $purple-dark;
background-color: $gray-background;
}
.help-block {
font-size: 14px;
color: $gray-light;
}
small {
color: $gray;

View File

@ -29,6 +29,10 @@ a {
}
}
.error {
margin-top: 400px;
}
.border-left {
display: block;
height: 700px;