rancher
/
ui
mirror of https://github.com/rancher/ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'reskin' of https://github.com/rancher/ui into reskin

This commit is contained in:
Vincent Fiduccia 2015-11-10 13:35:32 -07:00
parent eab37151ce c268473522
commit f9dca4bcea
38 changed files with 491 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/components/container-row/template.hbs
View File

@ -1,5 +1,6 @@
<td>
<span class="badge state {{model.stateBackground}}">
{{container-dot model=model}}
<span class="{{model.stateColor}}">
{{model.displayState}}
</span>
</td>
@ -11,21 +12,19 @@
</td>
<td class="clip">
{{display-image model.imageUuid}}
</td>
<td class="clip">
{{#if model.command}}
{{model.command}}
{{#if model.command~}}
({{model.command}})
{{else}}
<span class="text-muted">None</span>
<span class="text-muted">(none)</span>
{{/if}}
</td>
{{#if showStats}}
<td class="spark-td">
{{#if model.cpuSpark}}
{{spark-line data=model.cpuSpark width=60 height=15 max=cpuMax classNames="spark-tl" prefix="CPU: " formatter="percent"}}
{{spark-line data=model.memorySpark width=60 height=15 max=memoryMax classNames="spark-tr" prefix="Memory: " formatter="mib"}}
{{spark-line data=model.networkSpark width=60 height=15 max=networkMax classNames="spark-bl" prefix="Network: " formatter="kbps"}}
{{spark-line data=model.storageSpark width=60 height=15 max=storageMax classNames="spark-br" prefix="Storage: " formatter="kbps"}}
{{spark-line data=model.cpuSpark width=60 height=15 max=cpuMax prefix="CPU: " formatter="percent"}}
{{spark-line data=model.memorySpark width=60 height=15 max=memoryMax prefix="Memory: " formatter="mib"}}
{{spark-line data=model.networkSpark width=60 height=15 max=networkMax prefix="Network: " formatter="kbps"}}
{{spark-line data=model.storageSpark width=60 height=15 max=storageMax prefix="Storage: " formatter="kbps"}}
{{/if}}
</td>
{{/if}}

121
app/components/d3-area/component.js vendored Normal file
View File

@ -0,0 +1,121 @@
import Ember from 'ember';
export default Ember.Component.extend({
data: null,
classNames: ['col-sm-12', 'col-md-4', 'col-md-height', 'col-md-full-height', 'col-top'],
//attributeBindings: ['tooltip'],
tagName: 'div',
width: null,
height: 110,
min: 0,
max: null,
interpolation: 'step-after',
formatter: 'value',
prefix: '',
svg: null,
line: null,
dot: null,
x: null,
y: null,
didInsertElement: function() {
this.set('width', this.$('#inner-content').width());
},
hasData: function() {
if (this.get('data.length') > 0 && !this.get('svg')) {
this.create();
}
}.observes('data.length'),
create() {
var svg = d3.select(this.$('#cpu-graph')[0])
.append('svg:svg')
.attr('width', '100%')
.attr('height', '100%');
this.set('svg', svg);
this.set('x', d3.scale.linear().range([0, this.get('width')]));
this.set('y', d3.scale.linear().range([this.get('height'), 0]));
var line = d3.svg.line()
.x((d, i) => {
return this.get('x')(i);
})
.y((d) => {
return this.get('y')(d);
});
this.set('line', line);
//svg.append('path').attr('class', `node-${this.get('data')[0][0]}`).attr('d', line(this.get('data')[0].slice(1)))
//.attr('stroke', 'green')
//.attr('stroke-width', 2)
//.attr('fill', 'none');
},
generateYAxis: function() {
var out;
if (this.get('type') === 'cpu') {
out = d3.svg.axis()
.scale(this.get('y'))
.ticks(6)
.tickFormat(function(d) { return d + "%"; })
.orient('right');
} else {
out = d3.svg.axis()
.scale(this.get('y'))
.ticks(6)
.orient('right');
}
return out;
},
update: function() {
var svg = this.get('svg');
var data = (this.get('data') || []).slice();
var x = this.get('x');
var y = this.get('y');
var line = this.get('line');
var width = this.get('width');
var height = this.get('height');
if (svg && data && x && y && line) {
x.domain([0, 60]);
x.range([0, width - 1]);
y.domain([0, 100]);
y.range([height, 0]);
var yAxis = this.generateYAxis();
//svg.selectAll('path')
//.data([data[0].splice(1)])
//.attr('d', line);
data.forEach((v,i,d) => { // jshint ignore:line
//debugger;
if (svg.select(`.node-${v[0]}`)[0][0]) {
/*svg.select(`.node-${v[0]}`)
.data(v.slice(1))
.attr('d', line);*/
} else {
//debugger;
svg.append('path').attr('class', `node-${v[0]}`).attr('d', line(v.slice(1)))
.attr('stroke', 'green')
.attr('stroke-width', 2)
.attr('fill', 'none');
}
});
svg.append('g')
.attr('class', 'y-axis')
.attr('transform', 'translate(0, 0)')
.call(yAxis);
}
}.observes('data', 'data.[]'),
});

14
app/components/d3-area/template.hbs Normal file
View File

@ -0,0 +1,14 @@
<div class="well no-padding-margin">
<div id="inner-content" style="padding: 20px;">
<label class="section text-muted">{{type}}</label>
<hr>
<div class="info-graph {{unless active 'hide'}}" id="cpu-graph">
</div>
<div class="text-center text-muted {{unless loading 'hide'}}" style="height: 100px; padding-top: 30px;">
<i class="icon icon-spinner icon-spin"></i> Connecting...
</div>
<div class="text-center text-muted {{if available 'hide'}}" style="height: 100px; padding-top: 30px;">
Utilization stats are only available while active/running.
</div>
</div>
</div>

2
app/components/form-command/template.hbs
View File

@ -89,7 +89,7 @@
<div class="col-sm-12 col-md-8">
<div class="form-control-static">
<button class="btn-circle-plus" {{action "addEnvironment" target="view"}}></button>
<button class="btn-circle-plus" {{action "addEnvironment" target="view"}}><i class="icon icon-plus-circle"></i></button>
</div>
{{#if environmentArray.length}}

2
app/components/form-ports/template.hbs
View File

@ -5,7 +5,7 @@
<div class="col-sm-12 col-md-8">
{{#unless editing}}
<div>
<button class="btn-circle-plus" {{action "addPort" target="view"}}></button>
<button class="btn-circle-plus" {{action "addPort" target="view"}}><i class="icon icon-plus-circle"></i></button>
</div>
{{/unless}}
{{#if portsArray.length}}

6
app/components/info-multi-stats/component.js
View File

@ -21,6 +21,7 @@ export default Ember.Component.extend({
cpuGraph: null,
cpuData: null,
setCpuScale: false,
cpuD3Data: null,
memoryCanvas: '#memoryGraph',
memoryGraph: null,
@ -142,6 +143,7 @@ export default Ember.Component.extend({
row.push(point.cpu_total);
}
this.set('cpuD3Data', data);
if ( point.cpu_count && this.get('renderOk') && !this.get('setCpuScale') )
{
graph.axis.max(point.cpu_count*100);
@ -234,6 +236,7 @@ export default Ember.Component.extend({
x.push(i);
}
this.set('cpuData', [x]);
this.set('cpuD3Data', [x]);
var cpuGraph = c3.generate({
bindto: this.get('cpuCanvas'),
@ -405,11 +408,14 @@ export default Ember.Component.extend({
//console.log('Init Network');
var x = ['x'];
var z = [];
for ( var i = 0 ; i < MAX_POINTS ; i++ )
{
x.push(i);
z.push(i);
}
this.set('networkData', [x]);
this.set('networkD3Data', z);
var networkGraph = c3.generate({
bindto: this.get('networkCanvas'),

23
app/components/info-multi-stats/template.hbs
View File

@ -1,16 +1,17 @@
<div class="container-fluid container-multi-stat">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 {{model.stateBackground}}">
<label class="section r-mt5" style="color:white;">Info: {{model.displayState~}}</label>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
{{yield}}
</div>
</div>
</div>
<div class="row">
<div class="row-same-height row-full-height">
<div class="col-sm-12 col-md-4 col-md-height col-md-full-height col-top" style="margin-bottom: 20px;">
<div class="well no-padding-margin" style="height: 100%;">
<div style="padding: 20px;">
<label class="section">Info</label>
<div>
{{yield}}
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4 col-md-height col-md-full-height col-top" style="margin-bottom: 20px;">
<div class="well no-padding-margin">
<div style="padding: 20px;">

42
app/host/containers/template.hbs
View File

@ -1,23 +1,19 @@
<section class="instances">
<table class="grid fixed" style="margin-bottom: 0;">
<thead>
<tr>
{{sortable-th sortable=this action="changeSort" name="state" width="120"}}
{{sortable-th sortable=this action="changeSort" name="name"}}
{{sortable-th sortable=this action="changeSort" name="ip" width="110" label="IP Address"}}
{{sortable-th sortable=this action="changeSort" name="image"}}
{{sortable-th sortable=this action="changeSort" name="command"}}
<th class="stats" width="128">Stats</th>
<th class="actions" width="50">&nbsp;</th>
</tr>
</thead>
<tbody>
{{#each arranged as |container|}}
{{container-row model=container showStats=true cpuMax=cpuMax memoryMax=memoryMax storageMax=storageMax networkMax=networkMax}}
{{else}}
<tr><td colspan="7" class="text-center text-muted">This host does not have any containers yet.</td></tr>
{{/each}}
</tbody>
</table>
</section>
<table class="grid fixed" style="margin-bottom: 0;">
<thead>
<tr>
{{sortable-th sortable=this action="changeSort" name="state" width="120"}}
{{sortable-th sortable=this action="changeSort" name="name"}}
{{sortable-th sortable=this action="changeSort" name="ip" width="110" label="IP Address"}}
{{sortable-th sortable=this action="changeSort" name="image (command)"}}
<th class="stats">Stats</th>
<th class="actions" width="70">&nbsp;</th>
</tr>
</thead>
<tbody>
{{#each arranged as |container|}}
{{container-row model=container showStats=true cpuMax=cpuMax memoryMax=memoryMax storageMax=storageMax networkMax=networkMax}}
{{else}}
<tr><td colspan="7" class="text-center text-muted">This host does not have any containers yet.</td></tr>
{{/each}}
</tbody>
</table>

37
app/host/storage/template.hbs
View File

@ -1,20 +1,17 @@
<section>
<table class="grid fixed" style="margin-bottom: 0;">
<thead>
<tr>
{{sortable-th sortable=this action="changeSort" name="state" width="120"}}
{{sortable-th sortable=this action="changeSort" name="hostPath"}}
<th>Mounts</th>
<th class="actions" width="50">&nbsp;</th>
</tr>
</thead>
<tbody>
{{#each arranged as |volume|}}
{{volume-row model=volume}}
{{else}}
<tr><td colspan="4" class="text-center text-muted">This host does not have any volumes.</td></tr>
{{/each}}
</tbody>
</table>
</section>
<table class="grid fixed" style="margin-bottom: 0;">
<thead>
<tr>
{{sortable-th sortable=this action="changeSort" name="state" width="120"}}
{{sortable-th sortable=this action="changeSort" name="hostPath"}}
<th>Mounts</th>
<th class="actions" width="50">&nbsp;</th>
</tr>
</thead>
<tbody>
{{#each arranged as |volume|}}
{{volume-row model=volume}}
{{else}}
<tr><td colspan="4" class="text-center text-muted">This host does not have any volumes.</td></tr>
{{/each}}
</tbody>
</table>

143
app/host/template.hbs
View File

@ -12,6 +12,73 @@
<section>
{{#info-multi-stats model=model linkName="hostStats" single=true}}
<div class="row multi-stats">
<div class="col-sm-3 col-md-3 col-lg-3">
<label>IP Address</label>
{{model.displayIp}} {{zero-clipboard text=model.displayIp}}
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
{{#if model.memoryBlurb}}
<label>Memory</label>
{{model.memoryBlurb}}
{{else}}
<span class="text-muted">No Memory Footprint</span>
{{/if}}
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
{{#if model.osDetail}}
<label>OS</label>
{{model.osDetail}}
{{else}}
<span class="text-muted">No OS Details</span>
{{/if}}
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
{{#if model.dockerBlurb}}
<label>Docker</label>
{{model.dockerBlurb}}
{{else}}
<span class="text-muted">No Docker Details</span>
{{/if}}
</div>
</div>
<div class="row multi-stats">
<div class="col-sm-3 col-md-3 col-lg-3">
{{#if model.cpuBlurb}}
<label>CPU</label>
{{model.cpuBlurb}}{{#if model.cpuTooltip}} <i class="icon icon-info" tooltip="{{model.cpuTooltip}}"></i>{{/if}}
{{/if}}
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
{{#if model.diskBlurb}}
<label>Storage</label>
{{#if model.diskDetail}}
{{#each model.diskDetail as |disk|}}
<span style="display: inline-block; padding-right: 10px;">{{disk.value}} <i class="icon icon-info" tooltip="{{disk.label}}"></i></span>
{{/each}}
{{else}}
{{model.diskBlurb}} (total)
{{/if}}
{{else}}
<span class="text-muted">No Storage Details</span>
{{/if}}
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
{{#if model.info.osInfo.kernelVersion}}
<label>Kernel</label>
{{model.info.osInfo.kernelVersion}}
{{/if}}
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<label>Provider</label>
{{#if model.machine}}
{{model.machine.driver}}
{{else}}
<span class="text-muted">No Provider</span>
{{/if}}
</div>
</div>
{{!--
<ul class="list-lines">
{{#if model.showTransitioningMessage}}
<li>
@ -21,87 +88,17 @@
</span>
</li>
{{/if}}
<li>
<label>IP Address</label>
{{model.displayIp}} {{zero-clipboard text=model.displayIp}}
</li>
{{#if model.machine}}
<li>
<label>Provider</label>
{{model.machine.driver}}
</li>
{{/if}}
{{#if model.cpuBlurb}}
<li>
<label>CPU</label>
{{model.cpuBlurb}}{{#if model.cpuTooltip}} <i class="icon icon-info" tooltip="{{model.cpuTooltip}}"></i>{{/if}}
</li>
{{/if}}
{{#if model.memoryBlurb}}
<li>
<label>Memory</label>
{{model.memoryBlurb}}
</li>
{{/if}}
{{#if model.diskBlurb}}
<li>
<label>Storage</label>
{{#if model.diskDetail}}
{{#each model.diskDetail as |disk|}}
<span style="display: inline-block; padding-right: 10px;">{{disk.value}} <i class="icon icon-info" tooltip="{{disk.label}}"></i></span>
{{/each}}
{{else}}
{{model.diskBlurb}} (total)
{{/if}}
</li>
{{/if}}
{{#if model.osDetail}}
<li>
<label>OS</label>
{{model.osDetail}}
</li>
{{/if}}
{{#if model.info.osInfo.kernelVersion}}
<li>
<label>Kernel</label>
{{model.info.osInfo.kernelVersion}}
</li>
{{/if}}
{{#if model.dockerBlurb}}
<li>
<label>Docker</label>
{{model.dockerBlurb}}
</li>
{{/if}}
<li>
<label>Labels</label>
{{#if userLabelArray.length}}
{{#each userLabelArray as |label|}}
<span class="label label-default clip" style="display: inline-block; max-width: 100%;">{{label.key}}{{#if label.value}}={{label.value}}{{/if}}</span>
{{/each}}
{{else}}
<span class="text-muted">None</span>
{{/if}}
</li>
</ul>
--}}
{{/info-multi-stats}}
</section>
<section>
<ul class="nav nav-tabs nav-tabs-well">
<ul class="nav nav-tabs nav-tabs-well shadowed">
{{#link-to "host.containers" tagName="li" href=false}}<a><i class="icon icon-box"></i> Containers</a>{{/link-to}}
{{#link-to "host.storage" tagName="li" href=false}}<a><i class="icon icon-hdd"></i> Storage</a>{{/link-to}}
</ul>
<div class="well nav-well">
<div class="table-flat">
{{outlet}}
</div>
</section>

8
app/login/template.hbs
View File

@ -1,9 +1,11 @@
<div style="max-width: 360px; margin: 100px auto 0 auto;">
<div class="farm-box login top-colors">
<section>
<div class="logo"></div>
<h1>Welcome to Rancher</h1>
<h1>Howdy!<br>Welcome to Rancher</h1>
<div class="logo"></div>
<section>
<br/>
{{#if isGithub}}
<p>Rancher uses GitHub to manage accounts and teams. Click the button below to log in and give us read-only access to your basic GitHub account information.</p>

1
app/styles/app.scss
View File

@ -32,3 +32,4 @@
@import "app/styles/spark-line";
@import "app/styles/catalog";
@import "app/styles/service-addtl-info";
@import "app/styles/multi-stats";

57
app/styles/bootstrap-tweak.scss vendored
View File

@ -1,5 +1,5 @@
$normal-weight: 400;
$bold-weight: 600;
$normal-weight: 500;
$bold-weight: 900;
a {
color: $blue;
@ -36,7 +36,7 @@ H1, H2, H3, H4, H5, H6 {
vertical-align: middle;
&:not(:last-child) {
border-right: 1px solid #e3e5e6;
border-right: 1px solid $lightGray;
}
}
@ -67,7 +67,15 @@ H1, H2, H3, H4, H5, H6 {
/*buttons*/
.btn {
font-weight: 900;
text-transform: uppercase;
}
.btn-disabled,
.btn.disabled {
background: $lightGrayDark;
}
.btn-disabled,
.btn.disabled,
.btn[disabled],
@ -107,6 +115,8 @@ fieldset[disabled] .btn {
.btn-default {
box-shadow: none;
background: white;
color: $midGray;
&:hover {
color: white;
@ -137,6 +147,11 @@ fieldset[disabled] .btn {
padding-left: 35px;
}
}
&.borderless {
.btn {
border: transparent;
}
}
}
.form-control {
@ -224,26 +239,31 @@ fieldset[disabled] .btn {
.bg-default { background-color: $lightGrayTwo; color: $midGray; }
.bg-primary { background-color: $brand-primary; }
.bg-success { background-color: $brand-success; }
.bg-danger { background-color: $brand-danger; }
.bg-warning { background-color: $brand-warning; }
.bg-info { background-color: $brand-info; }
.bg-primary { background-color: $brand-primary; color:white;}
.bg-success { background-color: $brand-success; color:white;}
.bg-danger { background-color: $brand-danger; color:white;}
.bg-warning { background-color: $brand-warning; color:$yellowDark;}
.bg-info { background-color: $brand-info; color:$lightTealDark;}
.badge {
border-radius: 90px;
&.bg-default { background-color: $lightGrayTwo; color: $midGray; }
&.bg-primary { background-color: $brand-primary; }
&.bg-success { background-color: $brand-success; }
&.bg-danger { background-color: $brand-danger; }
&.bg-warning { background-color: $brand-warning; }
&.bg-primary { background-color: $brand-primary; color: white;}
&.bg-success { background-color: $brand-success; color: white;}
&.bg-danger { background-color: $brand-danger; color: $redTwoDark;}
&.bg-warning { background-color: $brand-warning; color: $yellowDark;}
&.bg-info { background-color: $brand-info; }
&.badge-default { background-color: $lightGrayTwo; color: $midGray;}
&.badge-primary { background-color: $brand-primary; }
&.badge-default { background-color: $lightGrayTwoDark; color: $darkestGrayTwo;}
&.badge-primary { background-color: #cce3ee; color: $brand-primary; }
&.badge-success { background-color: $brand-success; }
&.badge-danger { background-color: $brand-danger; }
&.badge-warning { background-color: $brand-warning; }
&.badge-info { background-color: $brand-info; }
&.badge-warning { background-color: $brand-warning; color: $yellow;}
&.badge-info { background-color: $brand-info; color: $yellow;}
}
.label-warning {
background-color: $brand-warning; color: $yellowDark;
}
.border-default { border-color: $lightGrayTwo; }
@ -386,6 +406,7 @@ HR {
.dropdown-header {
padding-left: 10px;
color: $midGrayDark;
}
& > li > a {
@ -411,7 +432,7 @@ HR {
}
.badge.state {
border-radius: 1px;
border-radius: 90px;
font-size: 11px;
font-weight: $normal-weight;
text-transform: uppercase;
@ -429,7 +450,7 @@ LABEL {
FORM LABEL,
.horizontal-form LABEL,
.form-group LABEL {
color: #abb6b9;
color: $darkestGrayTwo;
font-weight: $normal-weight;
}

2
app/styles/catalog.scss
View File

@ -60,7 +60,7 @@ $lines-to-show: 4;
}
H4 {
font-weight: bold;
font-weight: 900;
}
.preview-content {

3
app/styles/environment.scss
View File

@ -36,7 +36,6 @@ $stateBorder: 2px;
top: ($stackHeight - $stateBorder)/2 - $stateRadius;
text-align: center;
line-height: $stateRadius*2;
color: white;
}
.count {
@ -45,7 +44,7 @@ $stateBorder: 2px;
P {
margin: 12px 0 0 0;
font-weight: bold;
font-weight: 900;
text-align: center;
font-size: 14px;
position: relative;

53
app/styles/fonts.scss
View File

@ -1,31 +1,38 @@
// Thanks: https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin
// Open Sans by Steve Matteson, Apache License 2.0
/* open-sans-300 - latin */
/* Webfont: Lato-Black 900*/
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'),
url('fonts/open-sans-v13-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
url('fonts/open-sans-v13-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-family: 'Lato';
src: url('fonts/Lato-Black.eot'); /* IE9 Compat Modes */
src: url('fonts/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
url('fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */
url('fonts/Lato-Black.ttf') format('truetype');
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
}
/* open-sans-regular - latin */
/* Webfont: Lato-Light 300 */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'),
url('fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
url('fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-family: 'Lato';
src: url('fonts/Lato-Light.eot'); /* IE9 Compat Modes */
src: url('fonts/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Lato-Light.woff2') format('woff2'), /* Modern Browsers */
url('fonts/Lato-Light.woff') format('woff'), /* Modern Browsers */
url('fonts/Lato-Light.ttf') format('truetype');
font-style: normal;
font-weight: 300;
text-rendering: optimizeLegibility;
}
/* open-sans-600 - latin */
/* Webfont: Lato-Medium 500*/
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
url('fonts/open-sans-v13-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
url('fonts/open-sans-v13-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-family: 'Lato';
src: url('fonts/Lato-Medium.eot'); /* IE9 Compat Modes */
src: url('fonts/Lato-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Lato-Medium.woff2') format('woff2'), /* Modern Browsers */
url('fonts/Lato-Medium.woff') format('woff'), /* Modern Browsers */
url('fonts/Lato-Medium.ttf') format('truetype');
font-style: normal;
font-weight: 500;
text-rendering: optimizeLegibility;
}
// Animated Icons

26
app/styles/header.scss
View File

@ -39,6 +39,7 @@ HEADER {
&>A {
height: $topHeight;
line-height: $topHeight;
position: relative;
}
&>A {
@ -47,7 +48,16 @@ HEADER {
}
&.active {
color: white;
border-bottom: solid $primary;
&:after{
content: "";
border-width: 5px;
border-color: transparent;
border-bottom-color: white;
border-style: solid;
position: absolute;
bottom: -2px;
left: 45%;
}
}
}
}
@ -177,7 +187,7 @@ HEADER {
.bottom-row {
min-height: $bottomHeight;
background-color: white;
border-bottom: solid 2px $lightGrayTwo;
border-bottom: solid 2px $lightGray;
NAV {
font-size: 14px;
@ -190,12 +200,22 @@ HEADER {
color: $midGrayDark;
line-height: 25px;
text-align: center;
position: relative;
&:hover {
color: $blueTwo
}
&.active {
color: $primary;
background-color: rgba($lightTeal, 0.1);
&:after{
content: "";
border-width: 5px;
border-color: transparent;
border-bottom-color: $lightGray;
border-style: solid;
position: absolute;
bottom: -2px;
left: 45%;
}
}
I {

34
app/styles/layout.scss
View File

@ -35,11 +35,7 @@ B {
}
.farm {
background-image: url('images/logos/login-bg.jpg');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
background-color: $body-bg;
}
/**********
@ -182,6 +178,7 @@ UL.list-lines {
margin-top: 5px;
border-bottom: 1px solid #e8ecf2;
font-size: $font-size-small;
padding: 5px 0 5px 15px;
LABEL {
font-weight: $normal-weight;
@ -309,18 +306,28 @@ TABLE.graphs {
}
.farm-box {
h1 {
background-image: url(images/logos/cowhide.jpg);
background-size: cover;
padding: 40px 20px;
color: white;
position: relative;
.logo {
position: absolute;
left: 0;
right: 0;
bottom: -25px;
}
}
SECTION {
min-width: 50%;
margin: 20px auto 0 auto;
background-color: white;
border-radius: $border-radius-large;
padding: 20px;
box-shadow: $boxShadow;
}
SECTION:first-of-type {
margin-top: 50px;
}
}
.hand {
@ -391,7 +398,8 @@ $spacing-property-map: (
.btn-circle-plus {
@extend .btn-circle;
background-image: url('images/circle-plus.svg');
font-size: 1.5em;
line-height: 0;
}
.btn-circle-x {
@ -672,8 +680,8 @@ ASIDE {
A {
border: 0 !important;
background-color: $lightGrayTwo;
color: $lightGrayDark;
background-color: $lightGray;
color: $darkestGrayTwo;
}
&.active A,

19
app/styles/login.scss
View File

@ -1,19 +1,28 @@
.login {
color: #848a9a;
text-align: center;
position: relative;
.logo {
background-image: url('images/logos/dark.svg');
width: 44px;
height: 25px;
height: 55px;
width: 55px;
background-image: url(images/logos/main.svg);
background-repeat: no-repeat;
background-size: 44px;
background-size: 39px;
background-position: center center;
border-radius: 50%;
margin: 0 auto;
background-color: $primary;
position: absolute;
left: 0;
right: 0;
top: 115px;
z-index: 5;
}
H1 {
font-size: 28px;
color: #393d47;
color: white;
}
SECTION {

58
app/styles/multi-stats.scss Normal file
View File

@ -0,0 +1,58 @@
.container-multi-stat {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
margin-bottom: 20px;
}
.multi-stats {
border-left: 1px solid $gray-light;
border-right: 1px solid $gray-light;
border-bottom: 1px solid $gray-light;
background-color: white;
>div[class*='-3'] {
padding: 12px;
min-height: 50px;
&:not(:first-of-type) {
border-left: 1px solid $gray-light;
}
}
}
.nav-tabs {
&.shadowed {
a {
box-shadow: inset 0px 0px 1px rgba(0,0,0,.15);
}
li.active {
a {
box-shadow: none;
}
}
li {
margin-bottom: 1px;
}
}
}
.table-flat {
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
table {
thead {
background-color: $gray-light;
color: white;
th:first-of-type {
padding-left: 10px;
}
}
tr {
td:first-of-type {
padding-left: 10px;
}
td {
i.icon-circle-o {
margin-top: 4px;
}
}
}
}
}

1
app/styles/pod.scss
View File

@ -52,7 +52,6 @@ $subpod-detail: #9a9a9a;
display: inline-block;
border-bottom-left-radius: $border-radius-base;
border-bottom-right-radius: $border-radius-base;
color: white;
font-weight: 400;
text-transform: uppercase;

2
app/styles/prism-theme.scss
View File

@ -108,7 +108,7 @@ pre[class*="language-"] {
.token.important,
.token.bold {
font-weight: bold;
font-weight: 900;
}
.token.italic {
font-style: italic;

18
ember-cli-build.js
View File

@ -76,12 +76,18 @@ module.exports = function(defaults) {
app.import('vendor/icons/fonts/rancher-icons.ttf', {destDir: 'assets/fonts'});
app.import('vendor/icons/fonts/rancher-icons.woff', {destDir: 'assets/fonts'});
app.import('vendor/open-sans/open-sans-v13-latin-300.woff', {destDir: 'assets/fonts'});
app.import('vendor/open-sans/open-sans-v13-latin-300.woff2', {destDir: 'assets/fonts'});
app.import('vendor/open-sans/open-sans-v13-latin-600.woff', {destDir: 'assets/fonts'});
app.import('vendor/open-sans/open-sans-v13-latin-600.woff2', {destDir: 'assets/fonts'});
app.import('vendor/open-sans/open-sans-v13-latin-regular.woff', {destDir: 'assets/fonts'});
app.import('vendor/open-sans/open-sans-v13-latin-regular.woff2', {destDir: 'assets/fonts'});
app.import('vendor/lato/Lato-Light.ttf', {destDir: 'assets/fonts'});
app.import('vendor/lato/Lato-Light.eot', {destDir: 'assets/fonts'});
app.import('vendor/lato/Lato-Light.woff', {destDir: 'assets/fonts'});
app.import('vendor/lato/Lato-Light.woff2', {destDir: 'assets/fonts'});
app.import('vendor/lato/Lato-Black.ttf', {destDir: 'assets/fonts'});
app.import('vendor/lato/Lato-Black.eot', {destDir: 'assets/fonts'});
app.import('vendor/lato/Lato-Black.woff', {destDir: 'assets/fonts'});
app.import('vendor/lato/Lato-Black.woff2', {destDir: 'assets/fonts'});
app.import('vendor/lato/Lato-Medium.ttf', {destDir: 'assets/fonts'});
app.import('vendor/lato/Lato-Medium.eot', {destDir: 'assets/fonts'});
app.import('vendor/lato/Lato-Medium.woff', {destDir: 'assets/fonts'});
app.import('vendor/lato/Lato-Medium.woff2', {destDir: 'assets/fonts'});
return app.toTree();
};

BIN
public/assets/images/logos/cowhide.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

27
vendor/bootswatch-cosmo/_variables.scss vendored
View File

@ -16,25 +16,26 @@ $gray-lighter: #eff2f6; //lighten($gray-base, 90%); // #eee
$brand-primary: #0075a8;
$brand-success: #2ecc71;
$brand-info: #f9e79f;
$brand-warning: #f3be90;
$brand-info: #78c9cf;
$brand-warning: #fbf9de;
$brand-danger: #f15354;
$primary: #0075a8;
$primaryDark: #00558b;
$primary: #0075a8;
$primaryDark: #00558b;
$red: #e74c3c;
$redDark: #c0392b;
$redTwo: #f15354;
$redTwoDark: #ea3738;
$orange: #e67e22;
$orangeDark: #d35401;
$red: #e74c3c;
$redDark: #c0392b;
$redTwo: #f15354;
$redTwoDark: #ea3738;
$orange: #e67e22;
$orangeDark: #d35401;
$yellow: #f1c40f;
$yellowDark: #e49701;
$yellowTwo: #eadf5a;
$yellowTwoDark: #d7c320;
$green: #2ecc71;
$greenDark: #27ae60;
$greenTwo: #a5c63b;
@ -105,7 +106,7 @@ $link-hover-decoration: none;
//
//## Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", Calibri, Candara, Arial, sans-serif;
$font-family-sans-serif: "Lato", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", Calibri, Candara, Arial, sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@ -556,9 +557,9 @@ $state-info-text: #fff;
$state-info-bg: $brand-info;
$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%);
$state-warning-text: #fff;
$state-warning-bg: $brand-warning;
$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 3%);
$state-warning-text: $yellowDark;
$state-warning-border: $yellowDark;
$state-danger-text: #fff;
$state-danger-bg: $brand-danger;

2
vendor/icons vendored

@ -1 +1 @@
Subproject commit aface0a579380fe81e755e2d126f9bb28265703a
Subproject commit 864e685f9345d8543f12469faea475b8f05e8648

BIN
vendor/lato/Lato-Black.eot vendored Normal file
View File

Binary file not shown.

BIN
vendor/lato/Lato-Black.ttf vendored Normal file
View File

Binary file not shown.

BIN
vendor/lato/Lato-Black.woff vendored Normal file
View File

Binary file not shown.

BIN
vendor/lato/Lato-Black.woff2 vendored Normal file
View File

Binary file not shown.

BIN
vendor/lato/Lato-Light.eot vendored Normal file
View File

Binary file not shown.

BIN
vendor/lato/Lato-Light.ttf vendored Normal file
View File

Binary file not shown.

BIN
vendor/lato/Lato-Light.woff vendored Normal file
View File

Binary file not shown.

BIN
vendor/lato/Lato-Light.woff2 vendored Normal file
View File

Binary file not shown.

BIN
vendor/lato/Lato-Medium.eot vendored Normal file
View File

Binary file not shown.

BIN
vendor/lato/Lato-Medium.ttf vendored Normal file
View File

Binary file not shown.

BIN
vendor/lato/Lato-Medium.woff vendored Normal file
View File

Binary file not shown.

BIN
vendor/lato/Lato-Medium.woff2 vendored Normal file
View File

Binary file not shown.