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

ui: progress on style guide

This commit is contained in:
Jack Pearkes 2014-04-22 14:11:54 -04:00
parent 9b7e834adf
commit 693cdf47b3
12 changed files with 458 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/index.html
View File

@ -3,8 +3,8 @@
<head>
<meta charset="utf-8">
<title>Consul</title>
<link rel="stylesheet" href="static/base.css">
<link rel="stylesheet" href="static/bootstrap.min.css">
<link rel="stylesheet" href="static/base.css">
</head>
<body>
<script type="text/x-handlebars">

2
ui/static/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
ui/static/consul-logo.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

14
ui/static/loading-bubbles.svg Normal file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="black">
<circle transform="translate(8 0)" cx="0" cy="16" r="0">
<animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0"
keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="translate(16 0)" cx="0" cy="16" r="0">
<animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.3"
keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="translate(24 0)" cx="0" cy="16" r="0">
<animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.6"
keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
</circle>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 947 B

215
ui/style-guide.html
View File

@ -2,23 +2,222 @@
<html>
<head>
<meta charset="utf-8">
<title>Consul Style Guide</title>
<link rel="stylesheet" href="static/base.css">
<title>Consul Web UI Style Guide</title>
<link rel="stylesheet" href="static/bootstrap.min.css">
<link rel="stylesheet" href="static/base.css">
</head>
<body>
<div class="container">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-12">
<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,
it's best to follow this guide modifying the UI.</p>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-md-12">
<h2>Header</h2>
<hr>
</div>
</div>
</div>
</div>
<div class="col-md-10 col-md-offset-2">
<h2>Consul Style Guide</h2>
<p>This is style guide for Consul. When possible,
it's best to follow this guide modifying the UI.</p>
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 topbar">
<div class="col-md-1">
<div class="top-brand"></div>
</div>
<div class="col-md-2">
<a class="btn btn-primary" href="#">Services</a>
</div>
<div class="col-md-2">
<a class="btn btn-default" href="#">Nodes</a>
</div>
<div class="col-md-2">
<a class="btn btn-default" href="#">Key/Value</a>
</div>
<div class="col-md-2 col-md-offset-1">
<a class="btn btn-warning" href="#">5 checks failing</a>
</div>
<div class="col-md-2">
<a class="btn btn-dropdown btn-default" href="#">
Data Center 1
<span class="caret"></span>
</a>
</div>
</div>
</div>
<hr>
</div>
</div>
<div class="container">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-6">
<h2>Colors</h2>
<hr>
<ul class="list-unstyled">
<li>
<div style="width: 75px; height: 75px; display:inline-block;" class="bg-purple"></div>
<div style="width: 75px; height: 75px; display:inline-block" class="bg-light-purple"></div>
</li>
<li>
<div style="width: 75px; height: 75px; display:inline-block" class="bg-red"></div>
</li>
<li>
<div style="width: 75px; height: 75px; display:inline-block" class="bg-orange"></div>
</li>
<li>
<div style="width: 75px; height: 75px; display:inline-block" class="bg-green"></div>
</li>
<li>
<div style="width: 75px; height: 75px; display:inline-block" class="bg-gray"></div>
<div style="width: 75px; height: 75px; display:inline-block" class="bg-light-gray"></div>
</li>
</ul>
</div>
<div class="col-md-6">
<h2>Headings</h2>
<hr>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<p>Paragraph text. Consul makes it simple for services to
register themselves and to discover other services via a
DNS or HTTP interface. Register external services such as
SaaS providers as well.</p>
<small>Small note text, if you need to include anything extra.</small>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Panels</h2>
<hr>
<div class="panel panel-default">
<div class="panel-bar"></div>
<div class="panel-heading">
<h3 class="panel-title">
Panel Title
<small>Panel Subtitle</small>
<span class="panel-note">Panel Note</span>
</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-danger">
<div class="panel-bar"></div>
<div class="panel-heading">
<h3 class="panel-title">
HTTP Server Accessible
<small>httpAccess</small>
<span class="panel-note">critical</span>
</h3>
</div>
<div class="panel-body">
<p>Sends an HTTP request to the HTTP routers /health endpoint.
This should return 200 OK. If it returns anything else,
the headers are dumped.</p>
<h5>OUTPUT</h5>
<pre>
HTTP/1.1 503 SERVICE UNAVAILABLE
Content-Type: text/html; charset=utf-8
Date: Sun, 20 Apr 2014 15:40:03 GMT
Server: gunicorn/0.17.4
Content-Length: 0
Connection: keep-alive
</pre>
</div>
</div>
<div class="panel panel-success">
<div class="panel-bar"></div>
<div class="panel-heading">
<h3 class="panel-title">
Mux Accessible
<small>muxAccess</small>
<span class="panel-note">passing</span>
</h3>
</div>
<div class="panel-body">
<p>Makes a TCP connection to the muxer, dumps a relevant error if the connection fails.</p>
<h5>OUTPUT</h5>
<pre>
Socket connect Successful
</pre>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-bar"></div>
<div class="panel-heading">
<h3 class="panel-title">
Router Accessible
<small>routerAccess</small>
<span class="panel-note">warning</span>
</h3>
</div>
<div class="panel-body">
<p>Makes a TCP connection to the router, dumps a relevant error if the connection fails.</p>
<h5>OUTPUT</h5>
<pre>
Socket connect timed out
</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>Loaders</h2>
<hr>
<div class="bg-gray text-center" style="width: 200px; height: 200px; padding: 20px;">
</div>
</div>
<div class="col-md-6">
<h2>Icons</h2>
<hr>
<p>This is style guide for Consul. When possible,
it's best to follow this guide modifying the UI.</p>
</div>
</div>
</div>
</div>
</body>
</html>

38
ui/styles/_buttons.scss Normal file
View File

@ -0,0 +1,38 @@
.btn {
text-transform: uppercase;
font-weight: 600;
font-size: 11px;
color: $gray;
@include transition(background-color .1s ease-in-out);
&:hover {
color: darken($gray, 10%);
background-color: lighten($gray-background, 5%);
}
.btn-default {
}
&.btn-primary {
color: $purple;
background-color: transparent;
border: 2px solid $purple;
&:hover {
background-color: $light-purple;
color: darken($purple, 10%);
}
}
&.btn-warning {
color: $orange-faded;
background-color: transparent;
border: 2px solid $orange-faded;
&:hover {
background-color: lighten($orange-faded, 29%);
color: darken($orange-faded, 10%);
}
}
}

7
ui/styles/_mixins.scss Normal file
View File

@ -0,0 +1,7 @@
@mixin transition($transition) {
-webkit-transition: $transition;
-moz-transition: $transition;
-ms-transition: $transition;
-o-transition: $transition;
transition: $transition;
}

21
ui/styles/_nav.scss Normal file
View File

@ -0,0 +1,21 @@
.top-brand {
background: transparent url('/static/consul-logo.png') 0 no-repeat;
background-size: 30px 30px;
width: 30px;
height: 30px;
}
.topbar {
padding: 40px;
height: 100px;
.btn {
width: 140px;
}
.btn-dropdown {
width: auto;
}
}

67
ui/styles/_panels.scss Normal file
View File

@ -0,0 +1,67 @@
.panel {
border-width: 2px;
border-color: $gray-background;
.panel-heading {
background-color: transparent;
border-width: 2px;
border-color: $gray-background;
}
h3.panel-title {
padding: 4px 0px 4px 0px;
font-size: 20px;
color: $gray-light;
color: $gray-darker;
border-radius: 3px;
small {
font-size: 14px;
margin-left: 5px;
}
.panel-note {
float: right;
font-weight: 600;
color: $gray-light;
font-size: 14px;
}
}
.panel-body {
p {
font-size: 14px;
}
}
.panel-bar {
width: 100%;
height: 20px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
&.panel-default {
.panel-bar {
background-color: $gray-background;
}
}
&.panel-success {
.panel-bar {
background-color: $green-faded;
}
}
&.panel-danger {
.panel-bar {
background-color: $red-faded;
}
}
&.panel-warning {
.panel-bar {
background-color: $orange-faded;
}
}
}

37
ui/styles/_type.scss Normal file
View File

@ -0,0 +1,37 @@
body {
-webkit-font-smoothing:antialiased;
font-size: 16px;
color: $text-color;
}
a {
color: $purple;
font-weight: 600;
@include transition(color .2s ease-in-out);
&:hover {
text-decoration: none;
color: darken($purple, 15%);
}
}
small {
color: $gray;
}
h1, h2, h3, h4, h5 {
color: darken($text-color, 7%);
}
h5 {
text-transform: uppercase;
font-weight: 700;
color: $gray-light;
}
pre {
background-color: $gray;
color: white;
font-size: 11px;
}

25
ui/styles/_variables.scss
View File

@ -1 +1,24 @@
$foobar: white;
// Colors
$gray-light: lighten(gray, 50%);
$black: #242424;
$gray-darker: #555;
$gray: #777;
$gray-light: #939393;
$gray-background: #E6E6E6;
$red: #dd4e58;
$red-dark: #c5454e;
$red-darker: #b03c44;
$tan: #f0f0e5;
$consul-gray: #909090;
$consul-footer-gray: #d7d4d7;
$purple: #69499a;
$light-purple: #f7f3f9;
$green-faded: #BBF085;
$red-faded: $red;
$white-faded: darken(white, 2%);
$orange-faded: #FFAC5E;
// Type
$text-color: #555;

40
ui/styles/base.scss
View File

@ -1,5 +1,41 @@
@import "mixins";
@import "variables";
@import "type";
@import "panels";
@import "nav";
@import "buttons";
body {
background-color: $foobar;
.row {
&.colored {
background-color: $light-purple;
}
}
.bg-purple {
background-color: $purple;
}
.bg-light-purple {
background-color: $light-purple;
}
.bg-orange {
background-color: $orange-faded;
}
.bg-green {
background-color: $green-faded;
}
.bg-red {
background-color: $red-faded;
}
.bg-gray {
background-color: $gray;
}
.bg-light-gray {
background-color: $gray-background;
}