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:
parent
c8c8a98250
commit
692ea2b26d
@ -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');
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
@ -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')
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user