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

@ -128,3 +128,8 @@ body {
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */ -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s; transition: opacity 1s;
} }
.flexFont {
height:100%;
width:100%;
}

View file

@ -41,7 +41,7 @@ class BlueWeatherDashboard {
var page = this.params.page var page = this.params.page
if(this.initDone){ if (this.initDone) {
document.getElementById("navbarPage" + page + "Link").classList.add("active") document.getElementById("navbarPage" + page + "Link").classList.add("active")
} }
@ -185,8 +185,7 @@ class BlueWeatherDashboard {
case "text": case "text":
// the widget is pure text // the widget is pure text
thisWidget.classList.add("text-center") 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>' //thisBody.innerHTML = '<svg viewBox="0 0 56 18"><text x="0" y="15">Fit Meeeeeeeeeeee</text></svg>'
break break
@ -209,7 +208,7 @@ class BlueWeatherDashboard {
loader.style = "position: absolute; left: 50%; opacity: 0;" loader.style = "position: absolute; left: 50%; opacity: 0;"
mainContent.classList.add("opacity-animated"); mainContent.classList.add("opacity-animated");
mainContent.style = "opacity: 1;" mainContent.style = "opacity: 1;"
flexFont();
}) })
} }
@ -242,10 +241,10 @@ class BlueWeatherDashboard {
} }
} }
else { else {
if(from !== ""){ if (from !== "") {
from = parseInt(from) from = parseInt(from)
} }
if(to !== ""){ if (to !== "") {
to = parseInt(to) to = parseInt(to)
} }
} }
@ -253,16 +252,16 @@ class BlueWeatherDashboard {
var tmpFrom = from var tmpFrom = from
var tmpTo = to var tmpTo = to
if(tmpFrom === "") { if (tmpFrom === "") {
tmpFrom = Math.round( new Date().getTime() / 1000 - 60 * 60 * 24 ) tmpFrom = Math.round(new Date().getTime() / 1000 - 60 * 60 * 24)
} }
if(tmpTo === "") { if (tmpTo === "") {
tmpTo = Math.round(new Date().getTime() / 1000) tmpTo = Math.round(new Date().getTime() / 1000)
} }
var dateFromString = this.getDateTimeString(tmpFrom, tmpTo-tmpFrom) var dateFromString = this.getDateTimeString(tmpFrom, tmpTo - tmpFrom)
var dateToString = this.getDateTimeString(tmpTo, tmpTo-tmpFrom) var dateToString = this.getDateTimeString(tmpTo, tmpTo - tmpFrom)
dropdownMenuButton.innerHTML = "<span data-feather=\"calendar\"></span> " + dateFromString + " - " + dateToString dropdownMenuButton.innerHTML = "<span data-feather=\"calendar\"></span> " + dateFromString + " - " + dateToString
feather.replace() feather.replace()
@ -511,7 +510,7 @@ class BlueWeatherDashboard {
getDateTimeString(unixTime, range = 0) { getDateTimeString(unixTime, range = 0) {
if(Math.abs(unixTime - new Date().getTime() / 1000) <= 60 ) { if (Math.abs(unixTime - new Date().getTime() / 1000) <= 60) {
return "now" return "now"
} }
@ -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() feather.replace()
dashboard = new BlueWeatherDashboard() dashboard = new BlueWeatherDashboard()