dorian/blueweather
dorian/blueweather
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

widgets of type text look better now

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
css/dashboard.css
View file

@ -127,4 +127,9 @@ body {
.opacity-animated { .opacity-animated {
-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%;
} }

52
js/dashboard.js
View file

@ -41,8 +41,8 @@ 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")
} }
this.blueweather.getLocationData(this.params.loc, { from: this.params.range.from, to: this.params.range.to }, this.params.maxVals, true, function (locationData) { 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": 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,28 +241,28 @@ class BlueWeatherDashboard {
} }
} }
else { else {
if(from !== ""){ if (from !== "") {
from = parseInt(from) from = parseInt(from)
} }
if(to !== ""){ if (to !== "") {
to = parseInt(to) to = parseInt(to)
} }
} }
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"
} }
@ -520,8 +519,8 @@ class BlueWeatherDashboard {
if (range <= 60 * 60 * 24 * 31) { if (range <= 60 * 60 * 24 * 31) {
// covers one month or less // covers one month or less
datestr = datestr =
("0" + d.getDate()).slice(-2) + "-" + ("0" + d.getDate()).slice(-2) + "-" +
("0" + (d.getMonth() + 1)).slice(-2) + " " + ("0" + (d.getMonth() + 1)).slice(-2) + " " +
("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getHours()).slice(-2) + ":" +
("0" + d.getMinutes()).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() feather.replace()
dashboard = new BlueWeatherDashboard() dashboard = new BlueWeatherDashboard()