[VIS] Cleane HTML-Mobile VIS ohne Scrollen

nvd126

Hallo,

aufgrund einer nachfrage in der FB-Gruppe möchte ich hier euch meine Mobile VIS zur Verfügung stellen.
Meine Anforderungen und Gedanken waren:

KEIN Scrollen am Handy
maximal 3 "Klicks" bis ein Element gesteuert wird.
Alle möglichen Informationen / Optionen sollen vorhanden sein. Aber es soll nur das sichtbar sein, was man auch explizit sehen will.

Meine Vorgehensweise:
Ich habe mir vier Haupt-Views erstellt. In diesen habe ich ein HTML-Widget erstellt. Den Code für das HTML-Widget habe ich mir im WWW zusammengesucht (CodePen & w3schools sei Dank).
Aufgrund der Einfachheit habe ich der Navbar händisch die Active-Class gegeben.
Unterhalb der NAV-Bar sind immer HTML Accordions angeordnet. Manchmal ist eines per Default geöffnet. Das wiederum schließt sich, nachdem man das nächste Accordion angeklickt hat. Nur so erreiche ich auch, dass ich nicht scrollen muss.
Teilweise sind in den Accordions Tabellen enthalten, oder auch andere Views eingefügt via. Embed. In diesen anderen Views habe ich für jeden Raum die Buttons platziert und via. Embed eingefügt.
Die Statistiken sind mit Float gemacht und ebenfalls via. Embed eingefügt.

Nun mal etwas Code des HTML-Widgets auf meiner Hauptseite. Hier sind alle relevanten Sachen, welche ich verwende, enthalten zum Nachbauen. Die Accordions, die Tabellen, die NAV-Bar.
Wer es schnell einmal testen möchte:
Vis Öffnen -> HTML Widget einfügen -> beim HTML-Widget unter CSS Allgemein die Position auf "relative", den Wert "width" und "height" auf 100% stellen. Dann noch den CSS-Code in den CSS-Tab einfügen und zu guter letzt noch den HTML-Code in das HTML-Widget einfügen.

<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
  <a class="active" href="#01_Home"><i class="fa fa-info"></i></a>
  <a href="#02_Haus"><i class="fa fa-home"></i></a>
  <a href="#03_Statistik"><i class="fa fa-line-chart"></i></a>
  <a href="#04_Technik"><i class="fa fa-server"></i></a>
</div>
<!--/////////////////////////////////////////////////////////////////////////-->
<!--/////////////////////////////////////////////////////////////////////////-->
<div class="tab">
    <input type="radio" class="accordion" id="rd24" checked="true" name="rd">
    <label class="tab-label" for="rd24">Allgemein</label>
    <div class="tab-content">
        <table id="customers">
            <tr>
                <td>Letzte Anwesenheit:</td>
                <td>{DATENPUNKT}</td>
            </tr>
            <tr>
                <th colspan="2" align=left>Witterung</th>
            </tr>
            <tr>
                <td>Außentemperatur</td>
                 <td>{DATENPUNKT}</td>
            </tr>
            <tr>
                <td>Relative Luftfeuche</td>
                <td>{DATENPUNKT}</td>
            </tr>
            <tr>
                <td>Relative Luftfeuche</td>
                 <td>{DATENPUNKT}</td>
            </tr>
            <tr>
                <th colspan="2" align=left>Energiezähler</th>
            </tr>
            <tr>
                <td>Stromzählerstand</td>
                <td>{DATENPUNKT}</td>
            </tr>
            <tr>
                <td>Wasserzählerstand</td>
                <td>{DATENPUNKT}</td>
            </tr>
            <tr>
                <th  colspan="2" align=left>Müllkalender</th>
            </tr>
            <tr>
                <td>{DATENPUNKT}</td>
                <td>{DATENPUNKT}</td>
            </tr>
        </table>
    </div>
</div>
<!--/////////////////////////////////////////////////////////////////////////-->
<!--/////////////////////////////////////////////////////////////////////////-->
<div class="col">
    <div class="tabs">
        <!--/////////////////////////////////////////////////////////////////////////-->
        <div class="tab">
            <input type="radio" class="accordion" id="rd23" name="rd">
            <label class="tab-label" for="rd23">To-Do Liste</label>
            <div class="tab-content">
                <embed type="text/html" src="/vis/index.html#99_Todo" width="100%" height="415">
            </div>
        </div>
<!--/////////////////////////////////////////////////////////////////////////-->
<!--/////////////////////////////////////////////////////////////////////////-->
      <div class="tab">
            <input type="radio" class="accordion" id="rd20" name="rd">
            <label class="tab-label" for="rd20">Stromverbrauch und Kosten</label>
            <div class="tab-content">
                <table id="customers">
                    <tr>
                        <th colspan="1">Zeitraum</th>
                        <th colspan="1">Verbrauch kWh</th>
                        <th colspan="1">Kosten €</th>
                    </tr>
                    <tr>
                        <td align=right>Heute:</td>
                        <td align=center>{DATENPUNKT}</td>
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Gestern:</td>
                        <td align=center>{DATENPUNKT}</td>
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Diese Woche</td>
                        <td align=center>{DATENPUNKT}</td>
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Letzte Woche:</td>
                        <td align=center>{DATENPUNKT}</td>
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Dieser Monat:</td>
                        <td align=center>{DATENPUNKT}</td> 
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Letzter Monat:</td>
                        <td align=center>{DATENPUNKT}</td>
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Dieses Quartal:</td>
                        <td align=center>{DATENPUNKT}</td>
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Letztes Quartal:</td>
                        <td align=center>{DATENPUNKT}</td>
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Dieses Jahr:</td>
                        <td align=center>{DATENPUNKT}</td>
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Letztes Jahr:</td>
                        <td align=center>{DATENPUNKT}</td> 
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                </table>
            </div>
        </div>
<!--/////////////////////////////////////////////////////////////////////////-->
        <div class="tab">
            <input type="radio" class="accordion" id="rd21" name="rd">
            <label class="tab-label" for="rd21">Wasserverbrauch und Kosten</label>
            <div class="tab-content">
                <table id="customers">
                    <tr>
                        <th colspan="1">Zeitraum</th>
                        <th colspan="1">Verbrauch m³</th>
                        <th colspan="1">Kosten € </th>
                    </tr>
                    <tr>
                        <td align=right>Heute:</td>
                        <td align=center>{DATENPUNKT}</td>
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Gestern:</td>
                        <td align=center>{DATENPUNKT}</td>
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Diese Woche</td>
                        <td align=center>{DATENPUNKT}</td>
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Letzte Woche:</td>
                        <td align=center>{DATENPUNKT}</td>
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Dieser Monat:</td>
                        <td align=center>{DATENPUNKT}</td> 
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Letzter Monat:</td>
                        <td align=center>{DATENPUNKT}</td>
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Dieses Quartal:</td>
                        <td align=center>{DATENPUNKT}</td>
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Letztes Quartal:</td>
                        <td align=center>{DATENPUNKT}</td>
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Dieses Jahr:</td>
                        <td align=center>{DATENPUNKT}</td>
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                    <tr>
                        <td align=right>Letztes Jahr:</td>
                        <td align=center>{DATENPUNKT}</td> 
                        <td align=center>{DATENPUNKT}</td>
                    </tr>
                </table>
            </div>
        </div>
<!--/////////////////////////////////////////////////////////////////////////-->
        <div class="tab">
            <input type="radio" class="accordion" id="rd22" name="rd">
            <label class="tab-label" for="rd22">Platzhalter</label>
            <div class="tab-content">
                  <font color=white> Noch keinen Verwendungszweck hierfür gefunden... :(</font>    
            </div>
        </div>
<!--/////////////////////////////////////////////////////////////////////////-->
    </div>
  </div>

Nun noch die dazugehörige CSS:

body {
  background-color: #404040;
}
/*
Nachfolgend NAV-BAR
*/
 .icon-bar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.icon-bar a {
  float: left;
  text-align: center;
  width: 25%; 
  padding: 12px 0;
  transition: all 0.3s ease;
  color: white;
  font-size: 25px;
}

.icon-bar a:hover {
  background-color: #000;
}

.active {
  background-color: #04AA6D;
}

/* 
Nachfolgend alle Accordions 
*/

input.accordion {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

/* Accordion styles */
.tabs {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
}
.tab {
  width: 100%;
  color: white;
  overflow: hidden;
}
.tab-label {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  background: #2c3e50;
  font-weight: bold;
  cursor: pointer;
    border: 1px solid #FFFFFF;
    border-width:  1px 0 0 0;
  /* Icon */
}
.tab-label:hover {
  background: #1a252f;
}
.tab-label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transition: all 0.35s;
}
.tab-label-kleiner {
  display: flex;
  justify-content: space-between;
  padding: 0.4em;
  background: #2c3e50;
  font-weight: bold;
  cursor: pointer;
    border: 1px solid #FFFFFF;
    border-width:  1px 0 0 0;
  /* Icon */
}
.tab-label-kleiner:hover {
  background: #1a252f;
}
.tab-label-kleiner::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transition: all 0.35s;
}
.tab-content {
  max-height: 0;
  padding: 0 0em;
  color: #2c3e50;
  background: #404040;
  transition: all 0.35s;
}
.tab-content-mittig {
  max-height: 0;
  padding: 0 1em;
  color: #2c3e50;
  background: #404040;
  transition: all 0.35s;
}
.tab-close {
  display: flex;
  justify-content: flex-end;
  padding: 1em;
  font-size: 0.75em;
  background: #2c3e50;
  cursor: pointer;
}
.tab-close:hover {
  background: #1a252f;
}
input:checked + .tab-label {
  background: #1a252f;
}
input:checked + .tab-label-kleiner {
  background: #1a252f;
}
input:checked + .tab-label::after {
  transform: rotate(90deg);
}
input:checked + .tab-label-kleiner::after {
  transform: rotate(90deg);
}
input:checked ~ .tab-content {
  max-height: 100vh;
  padding: 0em;
}
input:checked ~ .tab-content-mittig {
  max-height: 100vh;
  padding: 1em;
}

/* 
Nachfolgend die Tabellen
*/
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  color: white;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 6px;
}

#customers tr:nth-child(even){background-color: #404040;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: #2c3e50;
  color: white;
}

Anmerkung:
tab-label-kleiner ist sinnvoll für zweizeilige "Überschriften" eines Accordions. Siehe Bild 2 bei mir.
tab-content-mittig ist bei der mobilen Ansicht fast immer sinnvoll, um nicht wertvollen Platz an den kleinen Bildschirmen zu verlieren innerhalb der Accordions.

Außerdem hier noch ein paar Bilder

Falls noch wer einfache Ideen bzgl. HTML-Buttons hat würde ich mich freuen... [am besten Ein Beispiel mit HTML-Code, CSS Code ggf. JS Code sowie einer kleinen Anleitung wie der Datenpunkt damit nun gesteuert wird und wie hier der Status am Button dargestellt wird, würde ich mich mächtig freuen. Die Websocket Doku sorgte für eine kleine Kernschmelze in meinem Kopf :( ]

Falls es noch Fragen gibt gerne Fragen, für bessere Ideen was die Farben angeht bin ich übrigens auch offen .

htrecksler

@nvd126 sehr geil.

Community Forum

NEWS

[VIS] Cleane HTML-Mobile VIS ohne Scrollen

Support us

686

32.5k

81.9k

1.3m