www/tablet/index_nav_footer.html
- Footer bleibt immer fix am unteren Rand
- Navigations-Tab-Bar zum Wechseln auf Unterseiten im Footer
- Zusätzliche Navigation in Slideout-Menü für selten genutzte Unterseiten (z.B. Settings)
Sehr cool! Das hat mir noch gefehlt!! Danke!
Leider habe ich aber immer noch meine liebe Mühe mit dem laden der Seite. Offensichtlich bin ich da alleine auf weiter Flur..
sehr schick, das habe ich gleich eingebaut 8)
gibt es eine Möglichkeit den vertikalen Scollbalken wegzubekommen?
Dazu müsste man vermutlich die Höhe der Kopfzeile von der Body Höhe abziehen.
Ich habe leider nicht gefunden wie das geht.
(mit style="max-height: 90%;" geht es zwar einigermaßen, ist das aber von der Bildschirmauflösung abhängig)
wenn man die Seite zum Home-Bildschirm hinzufügt, um sie per Icon im Vollbildmodus direkt zu starten, passt das Ganze schön auf den Bildschirm. Und auf dem Mobilphone sieht man eh keine Scollbalken dauerhaft.
Aber, ja. Du hast Recht. Sauberer wäre es, wenn man beim Vorhandensein eines header-nav, dessen Höhe beim Content abzieht.
Hiermit kann man das in der CSS erzielen:
#header-nav ~ .page {
height: calc(100% - 55px);
}
Ich nehme das in die CSS mit auf
Stimmt, auf dem PC fällt es erheblich mehr auf.
Mir ist noch etwas aufgefallen.
Der Text in der Kopfzeile bleibt leer, wenn man auf ein Icon in der Fußzeile klickt (ist auch verständlich, da kein Titel dafür angegeben ist). Dummerweise bleiben deswegen aber auch die Settings oben stehen, nachdem sie einmal ausgewählt wurden.
In der Navigationsfußzeile habe ich jetzt auch einen link auf meine Anrufliste aufgenommen.
Ist es auch Möglich "warn" zu nutzen um die Zahl der verpassten anrufe anzuzeigen (wie bei pagebutton)?
Und falls das möglich ist...kann man den link aus so konfigurieren, das bei einem klick darauf ein Reading (in diesem Fall die verpassten Anrufe) zurückgesetzt wird?
Grüße
Klaus
<div data-type="symbol"
data-device="ftuitest"
data-get="countWarnings"
data-states='["0","1"]'
data-icons='["fa-phone","fa-phone warn"]'
data-colors='["#999","#999"]'
onclick="ftui.setFhemStatus('set fritzbox reset');"
>
</div>
Danke, der Tip mit dem onklick hat mich schonmal weitergebracht.
die Klasse Symbol nützt mir nicht viel, da ich ja beim draufklicken auch die entsprechende Seite laden will.
Ich habe das jetzt erstmal mit pagebutton gelöst.
Das scheint zu funktionieren.
Gibt es eine Möglichkeit die Den Footer zu fixieren? Meine Seiten sind teilweise länger und beim scrollen kommt der footer mit?
Danke!
Footer fixiert, das war die Absicht.
Durch das Calc zum Eliminieren der Scrollbar, läuft es auf dem Telefon nicht mehr.
Deshalb muss man das Unterscheiden:
CSS
#header-nav ~ .page {
height: calc(100% - 55px);
}
@media screen and (max-width: 480px) {
#header-nav ~ .page {
height: 100%;
}
}
So sollte es bei beiden funktionieren: Telefon - footer fixiert und Desktop: Scollbar weg
danke. Ich habe ein update gemacht, restart und das neue index_nav_footer.html angepasst. Leider gehts weder auf Safari noch auf Chrome auf meinem iPhone 6. Oder muss ich von Hand was in einem CSS File ändern?
Hätte gehen müssen. Schade!
Seltsam, bei mir ist die Fußleiste von Anfang an Fix gewesen.
Das Einzige was bei Seiten stört, die länger sind um sie komplett auf dem Bildschirm darzustellen ist, das die Fußzeile immer das letzte Stück verdeckt. Das lässt sich aber einfach umgehen, indem man am Ende eine leere <section> in höhe der Fußzeile anlegt.
Klausw, hast du auch iPhone 6?
Nee,
Habe es getestet unter Android mit Chrome und dem Browser von HTC und unter Windows mit Firefox und Chrome.
Ich versuche gerade auf dieses Layout umzusteigen (bisher hatte ich "meine" Page-Umsetzung (https://forum.fhem.de/index.php/topic,34233.msg340230.html#msg340230) genutzt).
Ich habe allerdings ein kleines Verständnisproblem.
Ist das jetzt ein pagebutton/pagetab oder was ganz anderes?
<div data-type="link"
data-load="#content1"
data-url="#contentmobile_home.html"
data-icon="fa-home"
data-color="#555"
data-active-color="blue"
data-active-pattern=".*#contentmobile_home.html">
</div>
data-type=link sagt mir, dass es weder pagebutton noch pagetab ist. Das Link-Widget hat aber kein data-load Attribut (zumindest finde ich hier (https://github.com/knowthelist/fhem-tablet-ui) nichts über data-load).
Ich bin etwas verwirrt wegen #content1 und #contentmobile_home.html. Ich habe es zumindest schon hinbekommen, den Inhalt der jeweiligen Navigationspunkte in die page mit der id=content1-4 rein zu kriegen. Heißt das jetzt, dass keine weiteren html-Dateien notwendig sind?
Mein größtes Problem aber im Moment ist, dass ich nicht weiß, wie ich beim ersten Laden der Seite den content von #content1 anzeigen lassen kann.
Sorry, wenn die Fragen blöd sind, aber mit der readme.md kam ich nicht wirklich voran.
Vielen Dank schonmal!
Link hat data-load wie pagebutton.
Die Info fehlt aber tatsächlich in der Doku.
Die Startseite kann man mit class="default" am jeweiligen Link festlegen.
Zitat von: setstate am 19 September 2016, 12:36:46
Link hat data-load wie pagebutton.
Die Info fehlt aber tatsächlich in der Doku.
Die Startseite kann man mit class="default" am jeweiligen Link festlegen.
Danke schön!
Das mit den separaten Unterseiten habe ich jetzt verstanden glaube ich.
class="default" klingt super!
Hallo,
Ich bin auf der Suche nach einem Beispiel für den FB Callmonitor.
Edit:
Ich habe es selbst irgendwie hinbekommen. Nicht schön aber selten: ;D
Falls es jemanden Interessiert, kann ich es hier oder in dem Beitrag User-Demos anhängen.
Grüße
Hab jetzt angefangen mein Layout für Tablet auf Mobil zu erweitern (umzuschreiben).
@Setstate: Hast du mal von einer Content-Seite einen Link zur html? Bei mir zeigt die immer noch einen schwarzen Hintergrund obwohl ich kein Gridster oder ähnliches mehr drin habe.
hat sich erledigt. lag glaube ich an der Struktur wie die Zusatzdaten als zweite FTUI bei mir abgelegt waren. Hat wohl auf eine falsche CSS zugegriffen denke ich. Nachdem ich nochmal ein komplett neues Verzeichnis "mobil" mit allen Unterverzeichnissen wie in "tablet" gemacht hatte lief es komischerweise.