widgets of type text look better now

This commit is contained in:
Dorian Zedler 2019-07-16 17:33:34 +02:00
parent 06c7824b1c
commit 41a91f71d6
2 changed files with 38 additions and 19 deletions

View file

@ -127,4 +127,9 @@ body {
.opacity-animated {
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;
}
.flexFont {
height:100%;
width:100%;
}

View file

@ -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,28 +241,28 @@ 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"
}
@ -520,8 +519,8 @@ class BlueWeatherDashboard {
if (range <= 60 * 60 * 24 * 31) {
// covers one month or less
datestr =
("0" + d.getDate()).slice(-2) + "-" +
datestr =
("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()