Hallo,
Gibt es eine Möglichkeit die Elemente in einem Slideout Menü linksvbündig anzuordnen?
Aktuell sind die einzelnen Elemente bei mir Mittig.
<nav id="menu">
<div data-type="link" class="default large top-space-2x"
data-width="150"
data-icon-left="fa-dashboard"
data-color="white"
data-text-align="right"
data-load="div#m_heizungen"
data-url="#m_heizungen.html"
data-active-color="green"
data-active-pattern="(.*index_mobil.html|.*#m_heizungen.html)">Heizungen</div>
<div data-type="link" class="large top-space-2x"
data-width="150"
data-icon-left="fa-area-chart"
data-color="white"
data-text-align="right"
data-load="div#m_wetter"
data-url="#m_wetter.html"
data-active-color="green"
data-active-pattern=".*#m_wetter.html">Verlauf</div>
<div data-type="link" class="large top-space-2x"
data-width="150"
data-icon-left="fa-lightbulb-o"
data-color="white"
data-text-align="right"
data-load="div#m_lampen"
data-url="#m_lampen.html"
data-active-color="green"
data-active-pattern=".*#m_lampen.html">Lampen</div>
<div data-type="link" class="large top-space-2x"
data-width="150"
data-icon-left="fa-music"
data-color="white"
data-text-align="right"
data-load="div#m_sonos"
data-url="#m_sonos.html"
data-active-color="green"
data-active-pattern=".*#m_sonos.html">Sonos</div>
<div data-type="link" class="nocache large top-space-2x"
data-width="150"
data-icon-left="fa-camera"
data-color="white"
data-text-align="right"
data-load="div#m_kameras"
data-url="#m_kameras.html"
data-active-color="green"
data-active-pattern=".*#m_kameras.html">Kameras</div>
<div data-type="link" class="large top-space-2x"
data-width="150"
data-icon-left="fa-battery-2"
data-color="white"
data-text-align="right"
data-load="div#m_batterien"
data-url="#m_batterien.html"
data-active-color="green"
data-active-pattern=".*#m_batterien.html">Batterien</div>
<div data-type="link" class="large top-space-2x"
data-width="150"
data-icon-left="fa-cogs"
data-color="white"
data-text-align="right"
data-load="div#m_einstellungen"
data-url="#m_einstellungen.html"
data-active-color="green"
data-active-pattern=".*#m_einstellungen.html">Einstellungen</div>
</nav>
Ich schließe mich dieser Frage an.
Habe einiges per CSS ausprobiert, aber konnte bisher auch keinen Weg finden, die Elemente im Menü linksbündig anzuordnen.
Ich habe ein Update für das Linkwidget hochgeladen. Jetzt sieht es besser aus.
Aber ich finde nicht, dass die Icons jetzt noch linksbündig sein müssen. Zentriert sieht das irgendwie besser aus.
Danke. Schau ich mir heute gleich mal an.
Kann man auch die Texte linksbündig anordnen?
data-text-align="right"
Kann left, right oder center sein
Ich habe eben FTUI aktualisiert und den Code aus dem ersten Post mal getestet.
Leider sind die Symbole Mittig und der Text Links ausgerichtet, obwohl data-text-align auf right steht
Wenn ich die lib/font-awesome.min.css wieder einbinde dann funktioniert die Ausrichtung korrekt.
Kann es sein das die Automatische Einbindung nicht korrekt läuft? :o
Hi, ich finde solch ein Menü für eine mobile Ansicht klasse!
Kann mir bitte jemand ein paar Tipps geben, wie ich dieses einbinden kann? Eine mobile Seite habe ich bereits gebaut, nur derzeit noch ohne Menü.
Wie kann ich es erreichen, dass das Menü nicht dauerhaft zu sehen ist und nur per Klick/Geste geöffnet wird?
Hier ist eine Beispiel:
https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/mobil/index_nav_mobil.html
Die Unterseiten für das Beispiel liegen hier:
https://github.com/knowthelist/fhem-tablet-ui/tree/master/examples/subpages
Super, vielen Dank für die Hilfe! :)
Hallo
Ich habe das Menü in meine Oberfläche samt Flexbox integriert und zu 80% macht es einen richtig tollen Job. Nur beim Skalieren habe ich so meine Probleme. Erstmal der Code:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.2.3
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* Example for a flexbox layout instead of gridster
*/
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not output -->
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/material-icons.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
<script src="../pgm2/jquery.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<title>FHEM-Tablet-UI</title>
</head>
<body>
<nav class="menu">
<div class="menu-trigger"></div>
<header class="">MENÜ</header>
<ul>
<li>
<div data-type="link" data-url="#status.html"
data-color="white"
data-width="115"
data-load="#status"
data-text-align="left"
data-active-pattern="(.*/||.*#status.html)"
data-icon="fa-home" class="large"><span>Status</span></div>
</li>
<li>
<div data-type="link" data-url="#klima.html"
data-color="white"
data-width="115"
data-load="#klima"
data-text-align="left"
data-active-pattern=".*#klima.html"
data-icon="fa-thermometer-three-quarters" class="large"><span>Klima</span></div>
</li>
<li>
<div data-type="link" data-url="#licht.html"
data-load="#licht"
data-color="white"
data-width="115"
data-text-align="left"
data-active-pattern=".*#licht.html"
data-icon="fa-lightbulb-o" class="large"><span>Licht</span></div>
</li>
<li>
<div data-type="link" data-url="#geraete.html"
data-load="#geraete"
data-color="white"
data-width="115"
data-text-align="left"
data-active-pattern=".*#geraete.html"
data-icon="fa-microchip" class="large"><span>Geräte</span></div>
</li>
<li>
<div data-type="link" data-url="#automatiken.html"
data-load="#automatiken"
data-color="white"
data-width="115"
data-text-align="left"
data-active-pattern=".*#automatiken.html"
data-icon="fa-magic" class="large"><span>Automatiken</span></div>
</li>
<li>
<div data-type="link" data-url="#charts.html"
data-load="#charts"
data-color="white"
data-width="115"
data-text-align="left"
data-active-pattern=".*#charts.html"
data-icon="fa-bar-chart" class="large"><span>Charts</span></div>
</li>
<li>
<div data-type="link" data-url="#funktionen.html"
data-load="#funktionen"
data-color="white"
data-width="115"
data-text-align="left"
data-active-pattern=".*#funktionen.html"
data-icon="fa-refresh" class="large"><span>Funktionen</span></div>
</li>
<li>
<div data-type="link" data-url="#einstellungen.html"
data-load="#einstellungen"
data-color="white"
data-width="115"
data-text-align="left"
data-active-pattern=".*#einstellungen.html"
data-icon="fa-sliders" class="large"><span>Einstellungen</span></div>
</li>
</ul>
</nav>
<main>
<div class="page" id="status"></div>
<div class="page" id="klima"></div>
<div class="page" id="licht"></div>
<div class="page" id="geraete"></div>
<div class="page" id="automatiken"></div>
<div class="page" id="charts"></div>
<div class="page" id="funktionen"></div>
<div class="page" id="einstellungen"></div>
</main>
</body>
</html>
1.) Mobiltele Hochformat passt. Da würde ich gerne das Menü ein Bisschen schlanker machen, wenn man es denn ausklappt. Das wäre bitte meine erste Frage
2.) Mobiltele Querformat....tja... Da legt sich das Menü irgendwie über die Boxen. Keine Ahnung warum.
3.) Tablet Hochformat, das gleiche.
4.) Tablet Querformat passt wieder. Da habe ich nur ein Problem mit den Alarmanlagezellen div class="card bg-gray">
<header>ÜBERWACHUNG</header>
<div class="hbox">
<div class="sheet">
<div class="row">
<div class="cell"></div>
<div class="cell">
<div data-type="symbol"
data-device="surve"
data-get="smo00"
data-states='["disarmed","armed","raised","canceled"]'
data-icons='["fa-fire","fa-fire","fa-fire","fa-ban"]'
data-colors='["green","red","yellow","orange"]'>
</div>
<div data-type="label">Rauchmelder</div>
</div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell">
<div data-type="symbol"
data-device="surve"
data-get="con00"
data-states='["disarmed","armed","raised","canceled"]'
data-icons='["fa-unlock","fa-shield","fa-exclamation-circle","fa-ban"]'
data-colors='["green","red","yellow","orange"]'>
</div>
<div data-type="label">Fenster links</div>
</div>
<div class="cell">
<div data-type="symbol"
data-device="surve"
data-get="mod00_det"
data-states='["disarmed","armed","waiting","raised","canceled"]'
data-icons='["fa-unlock","fa-shield","fa-hourglass-start","fa-exclamation-circle","fa-ban"]'
data-colors='["green","red","orange","yellow","orange"]'>
</div>
<div data-type="label">Wohnungstüre</div>
</div>
<div class="cell">
<div data-type="symbol"
data-device="surve"
data-get="con01"
data-states='["disarmed","armed","raised","canceled"]'
data-icons='["fa-unlock","fa-shield","fa-exclamation-circle","fa-ban"]'
data-colors='["green","red","yellow","orange"]'>
</div>
<div data-type="label">Fenster rechts</div>
</div>
</div>
<div class="row">
<div class="cell">
<div class="round"
data-type="link"
data-background-color="green"
data-color="white"
data-icon="fa-unlock"
data-fhem-cmd="set surve_disarm on">Deaktivieren
</div>
</div>
<div class="cell">
<div class="round"
data-type="link"
data-background-color="orange"
data-color="white"
data-icon="fa-unlock-alt"
data-fhem-cmd="set surve_cancel on">Cancel
</div>
</div>
<div class="cell">
<div class="round"
data-type="link"
data-background-color="red"
data-color="white"
data-icon="fa-lock"
data-fhem-cmd="set surve_arm on">Aktivieren
</div>
</div>
</div>
</div>
</div>
5.) Und zu guter letzt habe ich noch ein ganz sonderbares Verhalten. Alle Screenshots wurden beinahe zeitgleich aufgenommen. Als VollbildBrowser nutze ich das Webview-App. Und wenn man genau hinsieht, hat die Innenstation auf den unterschiedlichen Geräten, unterschiedliche Zustände, trotz Refresh. Wie gibt es denn sowas?