Slideout Menü - Linksbündig

gloob · 24 Januar 2017, 13:34:32

Hallo,

Gibt es eine Möglichkeit die Elemente in einem Slideout Menü linksvbündig anzuordnen?
Aktuell sind die einzelnen Elemente bei mir Mittig.

Code Auswählen

<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>

Standarduser · 25 Januar 2017, 19:30:32

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.

setstate · 26 Januar 2017, 01:09:22

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.

Standarduser · 26 Januar 2017, 06:33:40

Danke. Schau ich mir heute gleich mal an.
Kann man auch die Texte linksbündig anordnen?

setstate · 26 Januar 2017, 06:52:05

Code Auswählen


data-text-align="right"

Kann left, right oder center sein

klausw · 26 Januar 2017, 11:26:05

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

klausw · 26 Januar 2017, 15:46:03

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?

Rheingold · 28 Januar 2017, 01:11:04

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?

setstate · 28 Januar 2017, 02:55:10

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

Rheingold · 28 Januar 2017, 18:13:01

Super, vielen Dank für die Hilfe!

theophilou85 · 06 Februar 2020, 00:23:17

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:

Code Auswählen

<!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&Uuml;</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

Code Auswählen

div class="card bg-gray">
		<header>&Uuml;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&uuml;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?