Clean code, and use progress bars instead of Loading...

This commit is contained in:
Elara 2021-03-27 19:59:15 -07:00
parent 7206f99b84
commit a6f56ceaa3
4 changed files with 9 additions and 9 deletions

File diff suppressed because one or more lines are too long

View File

@ -9,13 +9,13 @@
</a>
</div>
<div class="card-content">
<p id="APILoadingText_{{$randID}}">Loading...</p>
<progress class="progress is-light" id="APILoading_{{$randID}}"></progress>
{{range $index, $fmtStr := $format}}
<div id="{{printf `APIElement%d_%s` $index $randID}}"></div>
{{end}}
</div>
{{if .Data.footer}}
<div class="card-footer" style="margin-top: auto">
<div class="card-footer">
<p class="card-footer-item">{{.Data.footer}}</p>
</div>
{{end}}
@ -24,7 +24,7 @@
request.open('GET', "{{proxy .URL}}", true)
request.onload = function () {
const data = JSON.parse(this.response)
document.getElementById("APILoadingText_{{$randID}}").classList.add("is-hidden")
document.getElementById("APILoading_{{$randID}}").classList.add("is-hidden")
{{range $index, $fmtStr := $format}}
document.getElementById("{{printf `APIElement%d_%s` $index $randID}}").innerHTML = `{{unescJS (trim $fmtStr)}}`
{{end}}

View File

@ -3,7 +3,7 @@
<p class="card-header-title">{{.Title}}</p>
</div>
<div class="card-content">
<p id="weatherLoadingText_{{$randID}}">Loading...</p>
<progress class="progress is-light" id="weatherLoading_{{$randID}}"></progress>
<div class="columns is-mobile">
<div class="column is-half">
<object type="image/svg+xml" id="weatherStateImg_{{$randID}}" style="width:45px; height: 45px"></object>
@ -20,7 +20,7 @@
<p id="weatherVisibilityText_{{$randID}}"></p>
<p id="weatherPredictabilityText_{{$randID}}"></p>
</div>
<div class="card-footer" style="margin-top: auto">
<div class="card-footer">
<span class="card-footer-item">Data from&nbsp;<a href="https://www.metaweather.com" class="has-text-info">Metaweather</a></span>
</div>
<script>
@ -29,7 +29,7 @@
const round = function (flt){return Number.parseFloat(flt).toPrecision(3)}
request.onload = function () {
const data = JSON.parse(this.response)
document.getElementById('weatherLoadingText_{{$randID}}').classList.add("is-hidden")
document.getElementById('weatherLoading_{{$randID}}').classList.add("is-hidden")
document.getElementById('weatherStateText_{{$randID}}').innerText = data["consolidated_weather"][0]["weather_state_name"]
document.getElementById('weatherTempText_{{$randID}}').innerHTML = round(data["consolidated_weather"][0]["the_temp"]*1.8+32) + " &deg;F"
document.getElementById('weatherStateImg_{{$randID}}').data = "/proxy/" + btoa("https://www.metaweather.com/static/img/weather/" + data["consolidated_weather"][0]["weather_state_abbr"] + ".svg")

View File

@ -18,7 +18,7 @@
{{if .User.ShowPublic}}
{{ range $_, $card := .Config.Users._public_.Cards }}
<div class="column is-half-tablet is-one-quarter-fullhd is-one-third-desktop is-full-mobile">
<div class="card is-flex is-flex-direction-column" style="min-height: 175px; max-height: 175px; overflow: auto">
<div class="card is-fullheight is-scrollable" style="min-height: 175px; max-height: 175px;">
{{dyn_template $card.Type $card}}
</div>
</div>
@ -26,7 +26,7 @@
{{end}}
{{ range $_, $card := .User.Cards }}
<div class="column is-half-tablet is-one-quarter-fullhd is-one-third-desktop is-full-mobile">
<div class="card is-flex is-flex-direction-column" style="min-height: 175px; max-height: 175px; overflow: auto">
<div class="card is-fullheight is-scrollable" style="min-height: 175px; max-height: 175px; overflow: auto">
{{dyn_template $card.Type $card}}
</div>
</div>