1
0
mirror of https://github.com/beestat/app.git synced 2025-06-01 04:37:12 -04:00

Made styling a bit cooler

This commit is contained in:
Jon Ziebell 2021-03-04 20:48:09 -05:00
parent c8c8a98250
commit 692ea2b26d
6 changed files with 20 additions and 7 deletions

View File

@ -6,6 +6,8 @@ beestat.component.card = function() {
}; };
beestat.extend(beestat.component.card, beestat.component); beestat.extend(beestat.component.card, beestat.component);
beestat.component.card.prototype.box_shadow_ = true;
/** /**
* [get_class_name_recursive_ description] * [get_class_name_recursive_ description]
* *
@ -47,12 +49,17 @@ beestat.component.card.prototype.decorate_ = function(parent) {
this.contents_ = $.createElement('div') this.contents_ = $.createElement('div')
.style({ .style({
'padding': (beestat.style.size.gutter), 'padding': beestat.style.size.gutter,
'height': '100%', 'height': '100%',
'background': beestat.style.color.bluegray.base 'background': beestat.style.color.bluegray.base,
'border-radius': beestat.style.size.border_radius
}); });
parent.appendChild(this.contents_);
if (this.box_shadow_ === true) {
this.contents_.style('box-shadow', '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)');
}
parent.appendChild(this.contents_);
this.decorate_back_(this.contents_); this.decorate_back_(this.contents_);
var top_right = $.createElement('div').style('float', 'right'); var top_right = $.createElement('div').style('float', 'right');

View File

@ -6,6 +6,8 @@ beestat.component.card.footer = function() {
}; };
beestat.extend(beestat.component.card.footer, beestat.component.card); beestat.extend(beestat.component.card.footer, beestat.component.card);
beestat.component.card.footer.prototype.box_shadow_ = false;
beestat.component.card.footer.prototype.decorate_contents_ = function(parent) { beestat.component.card.footer.prototype.decorate_contents_ = function(parent) {
parent.style('background', beestat.style.color.bluegray.light); parent.style('background', beestat.style.color.bluegray.light);

View File

@ -51,7 +51,8 @@ beestat.component.card.sensors.prototype.decorate_contents_ = function(parent) {
.style({ .style({
'display': 'grid', 'display': 'grid',
'grid-template-columns': 'repeat(auto-fit, minmax(160px, 1fr))', 'grid-template-columns': 'repeat(auto-fit, minmax(160px, 1fr))',
'margin': '0 0 ' + beestat.style.size.gutter + 'px -' + beestat.style.size.gutter + 'px' 'margin': '0 0 ' + beestat.style.size.gutter + 'px -' + beestat.style.size.gutter + 'px',
'border-radius': beestat.style.size.border_radius
}); });
parent.appendChild(sensor_container); parent.appendChild(sensor_container);

View File

@ -349,7 +349,8 @@ beestat.component.card.system.prototype.decorate_time_to_temperature_ = function
'background': beestat.style.color.bluegray.dark, 'background': beestat.style.color.bluegray.dark,
'padding': beestat.style.size.gutter / 2, 'padding': beestat.style.size.gutter / 2,
'text-align': 'center', 'text-align': 'center',
'margin-top': beestat.style.size.gutter 'margin-top': beestat.style.size.gutter,
'border-radius': beestat.style.size.border_radius
}); });
parent.appendChild(container); parent.appendChild(container);

View File

@ -573,7 +573,9 @@ beestat.component.chart.prototype.tooltip_formatter_helper_ = function(title, se
var tooltip = $.createElement('div') var tooltip = $.createElement('div')
.style({ .style({
'background-color': beestat.style.color.bluegray.dark, 'background-color': beestat.style.color.bluegray.dark,
'padding': beestat.style.size.gutter / 2 'padding': beestat.style.size.gutter / 2,
'border-radius': beestat.style.size.border_radius,
'box-shadow': '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)'
}); });
var title_div = $.createElement('div') var title_div = $.createElement('div')

View File

@ -50,7 +50,7 @@ beestat.component.header.prototype.decorate_ = function(parent) {
'display': 'flex', 'display': 'flex',
'align-items': 'center', 'align-items': 'center',
'flex-grow': '1', 'flex-grow': '1',
'margin': '-' + gutter + 'px 0 0 -' + gutter + 'px' 'margin': '-' + (gutter / 2) + 'px 0 ' + (gutter / 4) + 'px -' + gutter + 'px'
}); });
parent.appendChild(row); parent.appendChild(row);