[GELÖST!!] Darstellungsproblem durch fhem-tablet-ui.css??

Begonnen von DocCyber, 01 Februar 2017, 16:00:58

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten 1 2 Alle
Benutzer-Aktionen

DocCyber

#15
03 Februar 2017, 18:27:18 Letzte Bearbeitung: 04 Februar 2017, 13:05:52 von DocCyber
Ich hab's!!   :) :)

Zunächst ist es mir ein Bedürfnis zu schreiben, dass meine hier beschriebenen Probleme absolut nichts mit der fhem-tablet-ui.css zu tun haben. Ich war zunächst irrtümlich davon ausgegangen, dass diese CSS die Ursache des Problems sein könnte - daher auch der Titel.
Aber die Arbeit von setstate ist m. E. auch in diesem Fall vorbildlich. Das kann ich gar nicht oft genug betonen!


Hier also der HTML-Code der Hauptseite, einer Unterseite und die zugehörige CSS (wie versprochen). Weiter unten noch die Screenshots.
Danke euch allen für euren Input - vielleicht ist meine Lösung für den einen oder anderen von euch auch hilfreich!

test_index-01.html
Code Auswählen
<html>
  <head>
    <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="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
    <link rel="stylesheet" href="lib/material-icons.min.css" />
   
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="myCSS/test-01.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>
  </head>
  <body>
    <div class="fcontainer">
      <div class="fstatic headline lightgray">
        <div class="horizbox middle-left white">
          <div data-type="pagebutton"
            data-background-icon = "fa-circle-thin"
            data-icon = "fa-bars"
            data-color="white"
            data-on-color="white"
            data-off-color="white"
            data-url="#myFlexHTML/test_subpage-01.html"
            data-load="#test_subpage-01"
            class="default">
          </div>
          <div class="left-space">feststehender Bereich ("fstatic")</div>
        </div>
      </div>
      <div class="fcontainer" id="test_subpage-01"></div>
      <div class="fstatic headline mediumgray">
        <div class="vertbox"><div>feststehender Bereich ("fstatic")</div></div>
      </div>
    </div>
   </body>
</html>


test_subpage-01.html
Code Auswählen
<html>
  <body>
    <div class="fcontainer" id="test_subpage-01">
      <div class="fstatic headline mediumgray">
          <div class="horizbox"><div>Feststehender Subpage-Titel ("fstatic")</div></div>
      </div>
      <div class="fdynamic">
        <div class="vertbox white">
          scrollbarer Inhaltsbereich --- "fdynamic" --- scrollbarer Inhaltsbereich ---
         </div>
      </div>
    </div>
  </body>
</html>


test-01.css
Wahrscheinlich ist noch hier und da etwas überflüssig, aber es läuft. (Nur auf Firefox 51.0.1 getestet!)
Code Auswählen
html,
body,
{
  height: 100%;
  color: #222222;
}

body {
overflow: hidden;
}

.fcontainer {
display: flex;
flex-direction: column;
overflow-y: hidden;
height: 100%;
width: 100%;
}

.fstatic {
flex: 0 0 auto;
}

.fdynamic {
flex: 1 1 auto;
position: relative;
overflow-y: auto;
margin-bottom: 4px;
}

.vertbox {
display: flex;
flex-direction: column;
justify-content: flex-start;
flex: 0 1 auto;
}

.horizbox {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
flex:0 1 auto;
}

.horizbox.top-left,
.vertbox.top-left {
justify-content: flex-start;
align-items: flex-start;
}

.horizbox.top-center,
.vertbox.middle-left {
justify-content: center;
align-items: flex-start;
}

.horizbox.top-right {
justify-content: flex-start;
align-items: flex-end;
}

.horizbox.middle-left,
.vertbox.top-center {
justify-content: flex-start;
align-items: center;
}

.headline {
font-size: medium;
font-weight: normal;
font-variant: small-caps;
color: white;
background-color: #000000;
margin-bottom: 4px;
}

.headline.darkgray {
background-color: #333333;
}

.headline.mediumgray {
background-color: #666666;
}

.headline.lightgray {
background-color: #999999;
}
Behandle die Menschen so, als wären sie, was sie sein sollten. Dadurch hilfst du ihnen zu werden, was sie sein können. (Goethe)


RPi-4B mit HM-CFG-LAN und viele weitere HM Komponenten, diverse Shellys, Tuya-Geräte, SMA und Solis Wechselrichter, Elgris EnergyManager, go-e Wallbox

drhirn

#16
03 Februar 2017, 19:54:03
Sehr gut, freut mich zu hören!

kafi

#17
02 Juli 2017, 16:57:19
Hallo,

bei mir steht ein Neuaufbau meines UI an und fand diesen Ansatz hier für mich äußerst interessant.
Ich habe versucht, diese Mechanik hier mit festem Header  Footer testweise nachzubauen, aber scheinbar ohne Erfolg.
Könnt ihr mal drüber schauen ob ihr seht woran es bei mir scheitert. Im Anhang ist ein Screenshot, der Inhalt des Anzeigebereich bleibt leer und ändert sich auch nicht beim Klicken auf die zwei Menueinträge.

Ich habe es ebenfalls mit 3 Dateien probiert:
1. index.html:
Code Auswählen
<!DOCTYPE html>
<html>
<head>
   
   <!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
         * Version: 1.3.5
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
* -
*

   -->
    <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="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
    <link rel="stylesheet" href="lib/material-icons.min.css" />
   
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="myCSS/test-01.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>
  </head>
<body class="vbox" style="flex-wrap: initial; height: 100%;">
<div class="hbox" style="height: auto;"><div data-template="menu.html"></div></div>
<div class="bg-red" style="flex: 1 1 auto; overflow-y: auto;">
<div class="fcontainer" id="test_subpage_01"></div>
<div class="fcontainer" id="test_subpage_02"></div>
</div>
<div class="hbox" style="height: auto;"><div class="bg-red" data-type="symbol"></div><div class="bg-green"data-type="symbol"></div></div>
</body>
</html>

2.Einer Datei für das "menu.thml" im Header:
Code Auswählen
<!DOCTYPE html>
<html>
<head>
</head>
<body>


<div class="hbox bg-ligthblue">
        <div class="card">
<header>Box 01</header>
<div data-type="pagetab" data-url="test_subpage_01.html" data-icon="fa-home" data-text="home" class="cell">
</div>
</div>
<div class="card">
<header>Box 02</header>
<div data-type="pagetab" data-url="test_subpage_02.html" data-icon="fa-home" data-text="home" class="cell">
</div>
</div>
</div>


       
   


</body>
</html>

und zu Guter letzt 2 Beispiel-Inhaltseiten für den (angedachten) dynamischen Inhalt "test_subpage_01.html" und "test_subpage_02.html"

Code Auswählen
<html>
  <body>
    <div class="fcontainer" id="test_subpage_01">
      <div class="fstatic headline mediumgray">
          <div class="horizbox green"><div>Feststehender Subpage-Titel ("fstatic")</div></div>
      </div>
      <div class="fdynamic">
        <div class="vertbox red">
          scrollbarer Inhaltsbereich --- "fdynamic" --- scrollbarer Inhaltsbereich ---
  <div class="hbox bg-ligthblue">
        <div class="card"><header>Box 01</header><div data-type="symbol"></div></div>
        <div class="card"><header>Box 02</header><div data-type="symbol"></div></div>
        <div class="card"><header>Box 03</header><div data-type="symbol"></div></div>
        <div class="card"><header>Box 04</header><div data-type="symbol"></div></div>
    </div>
    <div class="hbox bg-lightgray">
        <div class="card"><header>Box 05</header><div data-type="symbol"></div></div>
        <div class="card"><header>Box 06</header><div data-type="symbol"></div></div>
        <div class="card"><header>Box 07</header><div data-type="symbol"></div></div>
        <div class="card"><header>Box 08</header><div data-type="symbol"></div></div>
    </div>
    <div class="hbox bg-mint">
        <div class="card"><header>Box 09</header><div data-type="symbol"></div></div>
        <div class="card"><header>Box 10</header><div data-type="symbol"></div></div>
        <div class="card"><header>Box 11</header><div data-type="symbol"></div></div>
        <div class="card"><header>Box 12</header><div data-type="symbol"></div></div>
    </div>
    <div class="hbox bg-orange">
        <div class="card"><header>Box 13</header><div data-type="symbol"></div></div>
        <div class="card"><header>Box 14</header><div data-type="symbol"></div></div>
        <div class="card"><header>Box 15</header><div data-type="symbol"></div></div>
        <div class="card"><header>Box 16</header><div data-type="symbol"></div></div>
    </div>
         </div>
      </div>
    </div>
  </body>
</html>

Code Auswählen
<html>
  <body>
    <div class="fcontainer" id="test_subpage_02">
      <div class="fstatic headline mediumgray">
          <div class="horizbox"><div>Feststehender Subpage-Titel 2("fstatic")</div></div>
      </div>
      <div class="fdynamic">
        <div class="vertbox white">
          scrollbarer Inhaltsbereich --- "fdynamic" --- scrollbarer Inhaltsbereich ---
         </div>
      </div>
    </div>
  </body>
</html>

Wie man vermutlich erkennt ist alles irgendwie copy&paste zusammen geschraubt - hat dank dem tollen Forum schon an vielen Stellen für mich hinreichend gut funktioniert - aber hier stecke ich für meine Kenntnisse / Fähigkeiten seit einiger Zeit in der Sackgasse... :o


Raspberry Pi 3, 1x JeeLink 868(v3c), 7xTX 29 DT-HT, 2xMagic LED WIFI Controller, 1x CUL868, 2xHomeMatic 130248 Zwischenstecker-Schaltaktor, Osram Lightifiy mit diversen Komponenten, Intertechno Funksteckdosen
Drucken
Nach oben Seiten 1 2 Alle
Benutzer-Aktionen