widgets of type text look better now
This commit is contained in:
parent
06c7824b1c
commit
41a91f71d6
2 changed files with 38 additions and 19 deletions
|
@ -128,3 +128,8 @@ body {
|
|||
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
|
||||
transition: opacity 1s;
|
||||
}
|
||||
|
||||
.flexFont {
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
|
@ -41,8 +41,8 @@ class BlueWeatherDashboard {
|
|||
|
||||
var page = this.params.page
|
||||
|
||||
if(this.initDone){
|
||||
document.getElementById("navbarPage" + page + "Link").classList.add("active")
|
||||
if (this.initDone) {
|
||||
document.getElementById("navbarPage" + page + "Link").classList.add("active")
|
||||
}
|
||||
|
||||
this.blueweather.getLocationData(this.params.loc, { from: this.params.range.from, to: this.params.range.to }, this.params.maxVals, true, function (locationData) {
|
||||
|
@ -185,8 +185,7 @@ class BlueWeatherDashboard {
|
|||
case "text":
|
||||
// the widget is pure text
|
||||
thisWidget.classList.add("text-center")
|
||||
thisBody.innerHTML = '<h1 class="align-self-center mx-auto" style="font-size:10vw;margin-top: auto;margin-bottom: auto;">' + latestVal.measvalue + valueType.valueunit + '</h1>'
|
||||
|
||||
thisBody.innerHTML = '<div class="flexFont"><h1 style="font-size: 100%;">' + latestVal.measvalue + valueType.valueunit + '</h1></div>'
|
||||
|
||||
//thisBody.innerHTML = '<svg viewBox="0 0 56 18"><text x="0" y="15">Fit Meeeeeeeeeeee</text></svg>'
|
||||
break
|
||||
|
@ -209,7 +208,7 @@ class BlueWeatherDashboard {
|
|||
loader.style = "position: absolute; left: 50%; opacity: 0;"
|
||||
mainContent.classList.add("opacity-animated");
|
||||
mainContent.style = "opacity: 1;"
|
||||
|
||||
flexFont();
|
||||
})
|
||||
}
|
||||
|
||||
|
@ -242,27 +241,27 @@ class BlueWeatherDashboard {
|
|||
}
|
||||
}
|
||||
else {
|
||||
if(from !== ""){
|
||||
from = parseInt(from)
|
||||
if (from !== "") {
|
||||
from = parseInt(from)
|
||||
}
|
||||
if(to !== ""){
|
||||
to = parseInt(to)
|
||||
if (to !== "") {
|
||||
to = parseInt(to)
|
||||
}
|
||||
}
|
||||
|
||||
var tmpFrom = from
|
||||
var tmpTo = to
|
||||
|
||||
if(tmpFrom === "") {
|
||||
tmpFrom = Math.round( new Date().getTime() / 1000 - 60 * 60 * 24 )
|
||||
if (tmpFrom === "") {
|
||||
tmpFrom = Math.round(new Date().getTime() / 1000 - 60 * 60 * 24)
|
||||
}
|
||||
|
||||
if(tmpTo === "") {
|
||||
if (tmpTo === "") {
|
||||
tmpTo = Math.round(new Date().getTime() / 1000)
|
||||
}
|
||||
|
||||
var dateFromString = this.getDateTimeString(tmpFrom, tmpTo-tmpFrom)
|
||||
var dateToString = this.getDateTimeString(tmpTo, tmpTo-tmpFrom)
|
||||
var dateFromString = this.getDateTimeString(tmpFrom, tmpTo - tmpFrom)
|
||||
var dateToString = this.getDateTimeString(tmpTo, tmpTo - tmpFrom)
|
||||
|
||||
dropdownMenuButton.innerHTML = "<span data-feather=\"calendar\"></span> " + dateFromString + " - " + dateToString
|
||||
feather.replace()
|
||||
|
@ -511,7 +510,7 @@ class BlueWeatherDashboard {
|
|||
|
||||
getDateTimeString(unixTime, range = 0) {
|
||||
|
||||
if(Math.abs(unixTime - new Date().getTime() / 1000) <= 60 ) {
|
||||
if (Math.abs(unixTime - new Date().getTime() / 1000) <= 60) {
|
||||
return "now"
|
||||
}
|
||||
|
||||
|
@ -521,7 +520,7 @@ class BlueWeatherDashboard {
|
|||
// covers one month or less
|
||||
|
||||
datestr =
|
||||
("0" + d.getDate()).slice(-2) + "-" +
|
||||
("0" + d.getDate()).slice(-2) + "-" +
|
||||
("0" + (d.getMonth() + 1)).slice(-2) + " " +
|
||||
("0" + d.getHours()).slice(-2) + ":" +
|
||||
("0" + d.getMinutes()).slice(-2)
|
||||
|
@ -584,6 +583,21 @@ class BlueWeatherDashboard {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
flexFont = function () {
|
||||
console.log("flexing fonts")
|
||||
var divs = document.getElementsByClassName("flexFont");
|
||||
for (var i = 0; i < divs.length; i++) {
|
||||
var relFontsize = divs[i].offsetWidth * 0.2;
|
||||
console.log(relFontsize)
|
||||
divs[i].style.fontSize = relFontsize + 'px';
|
||||
}
|
||||
};
|
||||
flexFont();
|
||||
window.onload = function (event) {
|
||||
flexFont();
|
||||
};
|
||||
window.onresize = function (event) {
|
||||
flexFont();
|
||||
};
|
||||
feather.replace()
|
||||
dashboard = new BlueWeatherDashboard()
|
Loading…
Reference in a new issue