adminandClaude Opus 5
fd27fe168e
Auf dem Handy war die Seite bisher nur mit der Desktopversion des Browsers brauchbar. Drei Ursachen, alle nachgemessen bei 375 px: Die Diagramme standen im Hochformat, 301 x 400 px - die Zeitachse lag auf der kurzen Seite. Die Hoehe kam nicht aus dem Container: .chart-container hatte inline height:100% in einem Elternelement ohne Hoehe, und die Canvas trugen height="400px;", was kein gueltiger Zahlenwert ist. Die Hoehe steht jetzt im Stylesheet, 400 px am Rechner und 250 px unter 768 px Breite, die Beschriftung dort 8 statt 10 px. Das Meteogramm hat sich nicht angepasst, sondern gequetscht. meteoblue legt sein Bild einmal beim Laden fest und zeichnet es bei einer Breitenaenderung nicht neu; unter etwa 600 px ueberlagern sich Wochentage und Stundenachse. Es wird jetzt in mindestens 640 px Breite geladen - auf breiten Karten gleich in Kartenbreite, dort aendert sich nichts - und, wenn die Karte schmaler ist, als Ganzes verkleinert. Zuschnitt und Skalierung setzt das Skript direkt am Element, nicht ueber das Stylesheet: sonst haengt die Darstellung an einer womoeglich veralteten solar.css im Browser-Cache, und der breit geladene Rahmen ragt ungeschnitten aus der Karte. Passend dazu bekommt solar.css eine Versionskennung aus filemtime(), wie sie die Skripte in footer.php und adminlte.min.css laengst tragen. Ohne sie kam auf schon einmal besuchten Geraeten die alte Datei aus dem Cache. Die Statistik-Kacheln lagen in nackten .col ohne Breitenangabe; Bootstrap laesst sie dann nach Textlaenge umbrechen, mal zwei, mal drei je Zeile und unterschiedlich breit. Die Breite kommt jetzt aus row-cols-2/row-cols-md-4, und die Karte fuellt die Zeilenhoehe, damit die Werte trotz ein- oder zweizeiliger Titel auf einer Linie stehen. Zuletzt sind die Abstaende unter 768 px enger gefasst - auf .app-content beschraenkt, damit Seitenleiste, Kopfzeile und Modals unberuehrt bleiben: Spaltenabstand 24 -> 8 px, Kartenabstand 24 -> 12 px, Polsterung 16 -> 8 px. Die nutzbare Breite steigt damit von 301 auf 317 px. Geprueft bei 375 und 1200 px auf Solar, Historie, Heizung, Home und Wetter: kein Querlauf, am Rechner unveraenderte Werte. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
104 lines
3.4 KiB
PHP
104 lines
3.4 KiB
PHP
<!--begin::App Main-->
|
|
<main class="app-main">
|
|
<!--begin::App Content Header-->
|
|
<div class="app-content-header">
|
|
<!--begin::Container-->
|
|
<div class="container-fluid">
|
|
<!--begin::Row-->
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h3 class="mb-0">Heizung</h3>
|
|
</div>
|
|
</div>
|
|
<!--end::Row-->
|
|
</div>
|
|
<!--end::Container-->
|
|
</div>
|
|
<!--end::App Content Header-->
|
|
<!--begin::App Content-->
|
|
<div class="app-content">
|
|
<!--begin::Container-->
|
|
<div class="container-fluid">
|
|
<!--begin::Row-->
|
|
<div class="row">
|
|
<!-- Start col -->
|
|
|
|
<div class="col-xxl-3 col-xl-4 col-lg-5 col-md-5 d-flex align-items-stretch">
|
|
<div class="card p-0 mb-4" style="width:100%">
|
|
<div class="card-header pb-0 pt-1">
|
|
<h3 class="card-title">Heater</h3>
|
|
<div class="card-tools">
|
|
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
|
|
<i class="bi bi-x-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-3 d-flex flex-column">
|
|
<object data="assets/img/heater.svg"></object>
|
|
</div>
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
|
|
|
|
<!-- Heater Graph-->
|
|
<div class="col-lg-12">
|
|
<div class="card mb-4 p-0">
|
|
<div class="card-header pb-0 pt-1">
|
|
<h3 class="card-title">Temperaturen</h3>
|
|
<div class="card-tools">
|
|
<button type="button" class="btn btn-tool" title="Zoom out">
|
|
<i class="bi bi-zoom-out"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-tool" title="Zoom in">
|
|
<i class="bi bi-zoom-in"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
|
|
<i class="bi bi-x-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body pb-1">
|
|
<div class="chart-container">
|
|
<canvas id="heat-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.card -->
|
|
<!-- Water Graph-->
|
|
<div class="col-lg-12">
|
|
<div class="card mb-4 p-0">
|
|
<div class="card-header pb-0 pt-1">
|
|
<h3 class="card-title">Wasserverbrauch</h3>
|
|
<div class="card-tools">
|
|
<button type="button" class="btn btn-tool" title="Zoom out">
|
|
<i class="bi bi-zoom-out"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-tool" title="Zoom in">
|
|
<i class="bi bi-zoom-in"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
|
|
<i class="bi bi-x-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body pb-1">
|
|
<div class="chart-container">
|
|
<canvas id="water-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<?php include __DIR__ . "/weather_cards.html"; ?>
|
|
<!-- /.row (main row) -->
|
|
</div>
|
|
<!--end::Container-->
|
|
</div>
|
|
<!--end::App Content-->
|
|
</main>
|
|
<!--end::App Main-->
|