Skip to content

Commit c67fb22

Browse files
micrummicrum
committed
reorganize stylesheets, widgets styles refactoring
- add widgets stub files - get rid of grid-tiles
1 parent b157141 commit c67fb22

File tree

10 files changed

+60
-106
lines changed

10 files changed

+60
-106
lines changed

‎src/app/stylesheets/_custom.scss‎

Lines changed: 45 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,12 @@
11
// COLORS
2-
$blue: #2af5ff;
3-
$orange: #ffdb2b;
4-
$green: #269f19;
5-
$main-bg: #ECECEC;
2+
$main-bg-color: #ECECEC;
63
$text-color: #7A7A7A;
74
$accent-color: #E75753;
85

9-
.blue {
10-
background-color: $blue;
11-
color: white;
12-
}
13-
14-
.orange {
15-
background-color: $orange;
16-
color: white;
17-
}
18-
19-
.green {
20-
background-color: $green;
21-
color: white;
22-
}
23-
246

257
// VARIABLES
268
$left-sidenav-width: 110px;
27-
28-
29-
// DASHBOARD
30-
.messages {
31-
position: relative;
32-
33-
&-content {
34-
height: 80vh;
35-
}
36-
}
9+
$widget-height: 310px;
3710

3811

3912
// LAYOUT
@@ -45,12 +18,37 @@ body {
4518
min-width: 20px;
4619
}
4720

21+
.share-label {
22+
vert-align: middle;
23+
margin-left: 10px;
24+
}
25+
26+
.page-content {
27+
background-color: $main-bg-color;
28+
}
29+
30+
31+
// UTILS
32+
.capitalize {
33+
text-transform: capitalize;
34+
}
35+
4836
.img-circle {
4937
height: 50px;
5038
border-radius: 50%;
5139
margin: 0 10px;
5240
}
5341

42+
43+
// COMPONENTS
44+
.messages {
45+
position: relative;
46+
47+
&-content {
48+
height: 100vh;
49+
}
50+
}
51+
5452
.notifications-label {
5553
width: 16px;
5654
height: 16px;
@@ -64,27 +62,17 @@ body {
6462
background-color: $accent-color;
6563
}
6664

67-
.share-label {
68-
vert-align: middle;
69-
margin-left: 10px;
70-
}
71-
72-
.page-content {
73-
background-color: rgb(237, 237, 237);
74-
}
75-
76-
.widget-content {
77-
height: 300px;
78-
}
79-
80-
81-
// PANEL-WIDGET
65+
// panel-widget
8266
.panel-widget {
8367
background-color: white;
8468

8569
&-toolbar {
8670
box-shadow: none;
8771
}
72+
73+
&-tittle {
74+
color: $text-color;
75+
}
8876
}
8977

9078
.options {
@@ -96,8 +84,18 @@ body {
9684
opacity:0;
9785
}
9886

87+
.fixed-height-widget {
88+
height: $widget-height;
89+
}
9990

100-
// ANGULAR MATERIAL OVERRIDES
91+
// charts
92+
.donut-chart-title{
93+
text-align: center;
94+
}
95+
96+
97+
// OVERRIDES
98+
// angular material overrides
10199
md-radio-group {
102100
border: none;
103101
}
@@ -112,25 +110,12 @@ md-sidenav.md-locked-open.md-sidenav-left {
112110
max-width: $left-sidenav-width;
113111
}
114112

115-
116-
// LIBS OVERRIDES
113+
// libs overrides
117114
.material-icons {
118115
vertical-align: middle;
119116
}
120117

121118
.material-icons.md-18 { font-size: 18px; }
122119
.material-icons.md-24 { font-size: 24px; }
123120
.material-icons.md-36 { font-size: 36px; }
124-
.material-icons.md-48 { font-size: 48px; }
125-
126-
127-
// CHARTS
128-
.donut-chart-title{
129-
text-align: center;
130-
}
131-
132-
133-
// UTILS
134-
.capitalize {
135-
text-transform: capitalize;
136-
}
121+
.material-icons.md-48 { font-size: 48px; }

‎src/app/views/dashboard.html‎

Lines changed: 8 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,13 @@
1-
<!-- TODO: use heading classes -->
2-
<!-- TODO: add tile directive -->
3-
<md-grid-list layout-margin flex md-cols="1" md-cols-gt-md="3" md-row-height="2:1" md-gutter="12px">
4-
<md-grid-tile class="md-whiteframe-z1 blue">
5-
<div layout-fill layout="row" layout-align="center" class="md-tile-content">
6-
<h2>Over 9000</h2>
7-
</div>
8-
<md-grid-tile-footer>
9-
<div class="md-tile-content" layout="row">
10-
<h2 layout-padding>Site visitors</h2>
11-
</div>
12-
</md-grid-tile-footer>
13-
</md-grid-tile>
14-
15-
<md-grid-tile class="md-whiteframe-z1 orange">
16-
<div layout-fill layout="row" layout-align="center" class="md-tile-content">
17-
<h2>12</h2>
18-
</div>
19-
<md-grid-tile-footer>
20-
<div class="md-tile-content" layout="row">
21-
<h2 layout-padding>Warnings</h2>
22-
</div>
23-
</md-grid-tile-footer>
24-
</md-grid-tile>
25-
26-
<md-grid-tile class="md-whiteframe-z1 green">
27-
<div layout-fill layout="row" layout-align="center" class="md-tile-content">
28-
<h2>42%</h2>
29-
</div>
30-
<md-grid-tile-footer>
31-
<div class="md-tile-content" layout="row">
32-
<h2 layout-padding>Memory load</h2>
33-
</div>
34-
</md-grid-tile-footer>
35-
</md-grid-tile>
36-
</md-grid-list>
1+
<div layout-gt-md="row">
2+
<panel-widget flex title="Site visitors" template="app/views/partials/visitors.html" class="fixed-height-widget"></panel-widget>
3+
<panel-widget flex title="Warnings" template="app/views/partials/warnings.html" class="fixed-height-widget"></panel-widget>
4+
<panel-widget flex title="Memory load" template="app/views/partials/memory.html" class="fixed-height-widget"></panel-widget>
5+
</div>
376

387
<div layout-gt-md="row">
39-
<panel-widget flex title="Information Panel" template="app/views/partials/infoPanel.html"></panel-widget>
40-
<panel-widget flex title="Usage Stats" template="app/views/partials/usage.html"></panel-widget>
41-
<panel-widget flex title="Autocomplete Input" template="app/views/partials/autocomplete.html" options="true"></panel-widget>
8+
<panel-widget flex title="Information Panel" template="app/views/partials/infoPanel.html" class="fixed-height-widget"></panel-widget>
9+
<panel-widget flex title="Usage Stats" template="app/views/partials/usage.html" class="fixed-height-widget"></panel-widget>
10+
<panel-widget flex title="Autocomplete Input" template="app/views/partials/autocomplete.html" options="true" class="fixed-height-widget"></panel-widget>
4211
</div>
4312

4413
<div layout-gt-md="row">

‎src/app/views/partials/autocomplete.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div ng-controller="SearchController as vm">
2-
<md-content ng-show="$showOptions" class="md-padding options">
2+
<md-content ng-show="$showOptions" class="options">
33
<md-radio-group ng-model="vm.disableCaching" >
44
<md-radio-button ng-value="true">Disable caching</md-radio-button>
55
<md-radio-button ng-value="false">Enable caching</md-radio-button>

‎src/app/views/partials/checkboxes.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<md-content class="widget-content md-padding" ng-controller="TodoController as vm">
1+
<md-content class="md-padding" ng-controller="TodoController as vm">
22
<h3>{{vm.remaining()}} of {{vm.todos.length}} remaining</h3>
33

44
<md-checkbox ng-repeat="todo in vm.todos" ng-model="todo.done">

‎src/app/views/partials/memory.html‎

Whitespace-only changes.

‎src/app/views/partials/progress.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<div ng-controller="ProgressController as vm">
2-
<md-content ng-show="$showOptions" class="md-padding options">
2+
<md-content ng-show="$showOptions" class="options">
33
<md-radio-group ng-model="vm.progressPeriod" ng-change="vm.changePeriod()">
44
<md-radio-button value="week">Last week</md-radio-button>
55
<md-radio-button value="month">Last month</md-radio-button>
66
</md-radio-group>
77
</md-content>
88

9-
<md-content class="widget-content md-padding">
9+
<md-content class="md-padding">
1010
<div layout-margin ng-repeat="data in vm.progressData">
1111
<div layout="row">
1212
<span>{{data.title}}</span>

‎src/app/views/partials/usage.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<md-content ng-controller="UsageController as vm" class="md-padding" layout="row">
22
<div flex>
3-
<div google-chart chart="vm.ramChart" style="height:150px;" />
3+
<div google-chart chart="vm.ramChart" style="height:130px;" />
44
<h4 class="donut-chart-title">RAM</h4>
55
</div>
66
<div flex>
7-
<div google-chart chart="vm.storageChart" style="height:150px;" />
7+
<div google-chart chart="vm.storageChart" style="height:130px;" />
88
<h4 class="donut-chart-title">Storage</h4>
99
</div>
1010
</md-content>

‎src/app/views/partials/visitors.html‎

Whitespace-only changes.

‎src/app/views/partials/warnings.html‎

Whitespace-only changes.

‎src/components/directives/panelWidget.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ angular.module('app')
1111
'<section layout-margin class="md-whiteframe-z1 panel-widget">' +
1212
' <md-toolbar md-theme="custom" class="md-hue-1 panel-widget-toolbar">' +
1313
' <div class="md-toolbar-tools">' +
14-
' <h3>{{title}}</h3>' +
14+
' <h3 class="panel-widget-tittle">{{title}}</h3>' +
1515
' <span flex></span>' +
1616
' <md-button ng-show="options" ng-click="$showOptions = !$showOptions" class="md-icon-button" aria-label="Show options">' +
1717
' <i class="material-icons">more_vert</i>' +

0 commit comments

Comments
 (0)