mirror of https://github.com/status-im/consul.git
ui: lead-in info for style guide
This commit is contained in:
parent
eb19151fd7
commit
10fb856dad
|
@ -14,6 +14,15 @@
|
||||||
<h2>Consul Web UI Style Guide</h2>
|
<h2>Consul Web UI Style Guide</h2>
|
||||||
<p>This is style guide for the <a href="http://www.consul.io">Consul</a> Web UI. When possible,
|
<p>This is style guide for the <a href="http://www.consul.io">Consul</a> Web UI. When possible,
|
||||||
it's best to follow this guide modifying the UI.</p>
|
it's best to follow this guide modifying the UI.</p>
|
||||||
|
<p>Some reasoning behind choices:
|
||||||
|
<ul>
|
||||||
|
<li>Colors. Bright colors were chosen to allow for easy
|
||||||
|
"scanning" of information.</li>
|
||||||
|
<li>Icons will accompany most "actions", those are still
|
||||||
|
pending</li>
|
||||||
|
<li>Layout. The layout will be primarily 2 columns with the
|
||||||
|
header at the top for navigation.</li>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -112,23 +121,10 @@
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<h2>Panels</h2>
|
<h2>Panels</h2>
|
||||||
<hr>
|
<hr>
|
||||||
|
<p>Panels are for displaying data in the 2nd (right) column.
|
||||||
<div class="panel panel-default">
|
They show extensive information and are flexible, but also
|
||||||
<div class="panel-bar"></div>
|
use the highlight colors to allow for scanning.</p>
|
||||||
<div class="panel-heading">
|
<hr>
|
||||||
<h3 class="panel-title">
|
|
||||||
Default Panel
|
|
||||||
<small>Subtitle</small>
|
|
||||||
<span class="panel-note">:8080</span>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="panel-body">
|
|
||||||
Content
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="panel panel-danger">
|
<div class="panel panel-danger">
|
||||||
<div class="panel-bar"></div>
|
<div class="panel-bar"></div>
|
||||||
|
@ -233,6 +229,12 @@ Socket connect timed out
|
||||||
|
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<h2>Lists</h2>
|
<h2>Lists</h2>
|
||||||
|
<hr>
|
||||||
|
<p>Lists are used primarily for the first (left) column
|
||||||
|
view. They are designed as a quick summary, with links
|
||||||
|
embedded for the top-level item as well as sub-items (
|
||||||
|
such as a list of nodes, as below).</p>
|
||||||
|
<hr>
|
||||||
|
|
||||||
<div class="list-group">
|
<div class="list-group">
|
||||||
<div class="list-group-item">
|
<div class="list-group-item">
|
||||||
|
|
Loading…
Reference in New Issue