x/bansho
Code Issues Proposed changes

SCSS modifications to .data-table + Color schemes tests.

Browse Source
This commit is contained in:
Hugo Soucy 2015-02-13 09:59:53 -05:00
parent b2b107a5c1
commit c4080a4a8c
5 changed files with 128 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/sass/app.scss
View File

@ -17,11 +17,11 @@
//----------------------------------*\
// MIXINS
//----------------------------------*/
@import 'mixins/_vendor.scss';
@import 'mixins/_position.scss';
@import 'mixins/_line-height.scss';
@import 'mixins/_media-queries.scss';
@import 'mixins/_position.scss';
@import 'mixins/vendor';
@import 'mixins/position';
@import 'mixins/line-height';
@import 'mixins/media-queries';
@import 'mixins/position';
//----------------------------------*\
// GLOBAL MODULES

3
app/assets/sass/global/_default.scss
View File

@ -71,7 +71,6 @@ audio:not([controls]) {
height:0;
}
[hidden],
template {display:none;}
@ -221,7 +220,7 @@ menu,
nav {
margin:0;
padding:0;
a {text-decoration:none;}
ol,

62
app/assets/sass/modules-objects/_data-table.scss
View File

@ -42,6 +42,8 @@
.color-scheme--light & {
border-color:$_color_light_beta;
}
&.data-table__checkbox {padding-right:0;}
}
thead {
@ -63,17 +65,31 @@
border-color:$_color_light_gamma;
&.state--current {background:$_color_light_alpha;}
}
}
&.data-table__host,
&.data-table__checkbox {border:0;}
[class*="ico-"] {float:right;}
&:first-child + th {padding-left:0;}
}
}
td {
&:first-child {
+ td {
padding-left:35px;
}
}
}
.state--hasChild,
.state--isChild {
td, th {
td, th {
.color-scheme--dark & {
background:$_color_dark_beta;
@ -84,6 +100,31 @@
}
}
}
.state--hasChild {
td:first-child + td {
color:red;
position:relative;
&:before {
content:"\e804";
display:block;
font-family:"adagios-fontawesome";
left:0;
position:absolute;
.color-scheme--dark & {
color:$_color_omega;
}
.color-scheme--light & {
color:$_color_alpha;
}
}
}
}
}
.data-table__data {
@ -134,10 +175,6 @@
}
}
.data-table__checkbox {width:auto;}
.data-table__host {width:percentage(367 / 1200);}
.data-table__service__summary,
.data-table__duration,
.data-table__lastcheck {
@ -152,9 +189,12 @@
}
}
/* .data-table__checkbox {width:14px;} */
.data-table__host {width:percentage(368 / 1200);}
.data-table__service {
width:percentage(501 / 1200);
//.data-table__service__name {}
width:percentage(500 / 1200);
.data-table__service__summary {
font-style:italic;
@ -162,4 +202,6 @@
}
}
.data-table__duration {width:percentage(166 / 1200);}
.data-table__duration {width:percentage(166 / 1200);}
.data-table__lastcheck {width:percentage(134 / 1200);}

18
app/assets/sass/settings/_variables.scss
View File

@ -20,6 +20,24 @@ $_color_dark_beta: #353D48 !default;
$_color_dark_gamma: #49515C !default;
$_color_dark_delta: #A2AAB4 !default;
$_color_schemes: (
dark: (
alpha: #252C35,
beta: #353D48,
gamma: #49515C,
delta: #A2AAB4
),
light: (
alpha: #252C35,
beta: #353D48,
gamma: #49515C,
delta: #A2AAB4
)
);
//@mixin color-scheme()
// Black and White
$_color_alpha: #000 !default;
$_color_omega: #FFF !default;

83
app/dashboard/dashboard.html
View File

@ -1,11 +1,11 @@
<article ng-app="adagios.tactical" ng-controller="TacticalCtrl" id="tactical">
<header class="main__overview">
<h2 class="main__overview__title">Tactical Overview</h2>
<adg-tactical></adg-tactical>
</header>
<section class="main__content tabpanel">
<nav>
<ul class="tablist clearfix">
@ -31,7 +31,7 @@
</li>
</ul>
</nav>
<menu class="filters">
<ul class="filters__list clearfix">
<li class="filters__item filters__item--problems">
@ -41,10 +41,10 @@
data-target="#filtersProblems"
aria-expanded="false"
aria-controls="filtersProblems">
<span>All</span>
<spa>All</span>
<i class="ico-down-dir"></i>
</button>
<div class="filters__panel collapse" id="filtersProblems">
<ul class="filters__sublist">
<li class="filters__subitem">
@ -92,7 +92,7 @@
<span>More</span>
<i class="ico-down-dir"></i>
</button>
<div class="filters__panel collapse" id="filtersMore">
<ul class="filters__sublist">
<li class="filters__subitem">
@ -117,7 +117,7 @@
<span class="visuallyhidden">Filters Settings</span>
<i class="ico-cog"></i>
</button>
<div class="filters__panel collapse" id="filtersSettings">
<ul class="filters__sublist">
<li>...</li>
@ -128,16 +128,16 @@
</li>
</ul>
</menu>
<div class="tab-content">
<div role="tabpanel" class="problems tab-pane active" id="openProblems">
<header class="main__content__header clearfix">
<h2 class="main__content__title">Unhandled service problems</h2>
<p class="main__content__alert state--error">There are 5 host problems.</p>
</header>
<adg-table cells="{{dashboardCells}}" api-name="{{dashboardApiName}}" filters="{{dashboardFilters}}"></adg-table>
<table class="data-table">
<thead>
<tr>
@ -151,10 +151,10 @@
<th class="data-table__lastcheck">Last check</th>
</tr>
</thead>
<tr>
<td class="data-table__checkbox"><input type="checkbox"></td>
<td class="data-table__host state--ok">
<td class="data-table__host state--ok">
<a class="data-table__data" href="#">localhost</a>
</td>
<td class="data-table__service state--warning">
@ -163,13 +163,17 @@
<dd class="data-table__service__summary">DISK WARNING - free space : / 673 MB (12% inode = 59%)</dd>
</dl>
</td>
<td class="data-table__duration">1 month, 2 weeks</td>
<td class="data-table__lastcheck">0 minutes ago</td>
<td class="data-table__duration">
<span class="data-table__data">1 month, 2 weeks</span>
</td>
<td class="data-table__lastcheck">
<span class="data-table__data">0 minutes ago</span>
</td>
</tr>
<tr class="state--hasChild">
<td class="data-table__checkbox"><input type="checkbox"></td>
<td class="data-table__host state--ok">
<td class="data-table__host state--ok">
<a class="data-table__data" href="#">srv-apache-01</a>
</td>
<td class="data-table__service state--warning">
@ -178,10 +182,14 @@
<dd class="data-table__service__summary">DISK WARNING - free space : / 673 MB (12% inode = 59%)</dd>
</dl>
</td>
<td class="data-table__duration">1 month, 2 weeks</td>
<td class="data-table__lastcheck">0 minutes ago</td>
<td class="data-table__duration">
<span class="data-table__data">1 month, 2 weeks</span>
</td>
<td class="data-table__lastcheck">
<span class="data-table__data">0 minutes ago</span>
</td>
</tr>
<tbody class="state--isChild">
<tr>
<td class="data-table__checkbox"><input type="checkbox"></td>
@ -192,14 +200,18 @@
<dd class="data-table__service__summary">DISK ERROR - free space : / 673 MB (12% inode = 59%)</dd>
</dl>
</td>
<td class="data-table__duration">1 month, 2 weeks</td>
<td class="data-table__lastcheck">0 minutes ago</td>
<td class="data-table__duration">
<span class="data-table__data">1 month, 2 weeks</span>
</td>
<td class="data-table__lastcheck">
<span class="data-table__data">0 minutes ago</span>
</td>
</tr>
</tbody>
<tr>
<td class="data-table__checkbox"><input type="checkbox"></td>
<td class="data-table__host state--ok">
<td class="data-table__host state--ok">
<a class="data-table__data" href="#">localhost</a>
</td>
<td class="data-table__service state--warning">
@ -208,13 +220,18 @@
<dd class="data-table__service__summary">DISK WARNING - free space : / 673 MB (12% inode = 59%)</dd>
</dl>
</td>
<td class="data-table__duration">1 month, 2 weeks</td>
<td class="data-table__lastcheck">0 minutes ago</td>
<td class="data-table__duration">
<span class="data-table__data">
<span class="data-table__data">1 month, 2 weeks</span>
</td>
<td class="data-table__lastcheck">
<span class="data-table__data">0 minutes ago</span>
</td>
</tr>
<tr>
<td class="data-table__checkbox"><input type="checkbox"></td>
<td class="data-table__host state--ok">
<td class="data-table__host state--ok">
<a class="data-table__data" href="#">localhost</a>
</td>
<td class="data-table__service state--warning">
@ -223,16 +240,20 @@
<dd class="data-table__service__summary">DISK WARNING - free space : / 673 MB (12% inode = 59%)</dd>
</dl>
</td>
<td class="data-table__duration">1 month, 2 weeks</td>
<td class="data-table__lastcheck">0 minutes ago</td>
<td class="data-table__duration">
<span class="data-table__data">1 month, 2 weeks</span>
</td>
<td class="data-table__lastcheck">
<span class="data-table__data">0 minutes ago</span>
</td>
</tr>
</table>
</div>
</div>
<div role="tabpanel" class="problems tab-pane" id="allProblems">
<header class="main__content__header">
<h2 class="main__content__title">All service problems</h2>
<p class="main__content__alert">...</p>
</header>
</div>