Responsive iOS 6 Theme für FHEM (CSS + JS) sowohl für iOS, Android und Desktop!

[MarcelK]

Folgendes, ich habe hier Readinggroups ( in meinem Fall "Gemessene Temperatur und Heutige Vorhersage"). Welche immer noch unten eine Leerzeile haben. Im schwarzen Theme von Fhem sieht es anders auch, auch ist das Ganze nicht so auseinandergezogen.

Die Leerzeilen sind ab morgen im Update der Readinggroups behoben: http://forum.fhem.de/index.php/topic,14425.msg224405.html#msg224405

Gruß Marcel

[Blackcat]

Danke

[Blackcat]

Folgene Bugs habe ich eben gefixt:

- Bildschirm bei Eventlog / Update nicht voll genutzt (ggf. Fehler im Fhemweb)
- Dashboard im Bearbeitungsmodus mit schwarzen Hintergrund
- readingsGroups - Verschiebungen (neue Zeile)

Werde jetzt noch weiter an dem Fullscreen arbeiten und dann heute abend einchecken

[Blackcat]

So das Menü lässt sich nun wegklappen, in den Fullscreen Modus

Floorplan Fullscrenn geht noch leider nicht - weiß jemand wie man eingnen JS Code in den Floorplan läd?

Leider lässt mich Sourceforce gerade nicht commiten, habe auch ein neues Passwort angefordert -> keine Mail nix :/

Somit würde ich euch bitten die Änderungen erstmal so zu testen.

Wichtig für das Toggle Menü:

Code Auswählen Erweitern

attr WEB JavaScripts pgm2/ios6.js
bei mehreren bitte mit " " die Links trennen

Bilder folgen gleich

[Bennemannc]

Hallo Sandra,

also bei mir klappt das super (IPad4 mit IOS 8.1.1). Auch auf meine Lenovo Android (4.4) TouchPad funktioniert es.

Gruß Christoph

[Blackcat]

Super 

bin sogar am überlegen das JS so zu erweitern, dass es je nach dem ob Hochkant oder nicht das Menü aus bzw. Eingeblendet wird (Startzustand).

Ggf. bekomme ich auch etwas responsivenes rein

[Blackcat]

der erste Weg zum Responsive Fhem

das Menü wird eingeklappt wenn Breite < als Höhe

[Blackcat]

Habe mir nun mal alle Geräteauflösungen zusammen gesucht, auf die ich nun das Style für responsive Design optimieren werde.

Bräuchte aber noch einen Androidtester, denke mal Auflösung Full HD? 1920x1080?

iPhone	320×480
iPhone 4	640×960 (320 x 480)
iPhone 5	640×1136 (320 x 568)
iPhone 6	750×1334 (375 x 667)
iPhone 6+	1242×2208 / 1080×1920 (414 x 736)
iPad	1024 x 768
iPad 4	2048 x 1536 (1024 x 768)

[Bennemannc]

Hallo Sandra,

ich habe mal einen Auszug aus 'Heise Preisvergleiche' gemacht.

Display-Auflösung:    ab 800x480 (1073) ab 800x600 (978) ab 1024x600 (951) ab 1024x768 (740) ab 1280x800 (574) ab 1366x768 (189) ab 1920x1080 (185) ab 1920x1200 (179) ab 2048x1536 (89) ab 2560x1600 (54)

Hier kannst Du sehen (die Zahlen in Klammern) wiviele der gelisteten Tablets welche Auflösung beherrschen. Ich habe das auf Android Tablets eingeschränkt. Die meisten könne demnach kein Full HD.

Gruß Christoph

BTW: Habe die neue JS getestet - läuft auf Ipad und Android 4.4 Pad und Android Phone 4.2. Könntest Du noch nach dem Wechsel bzw. dem Ausblenden der Menüleiste einen Resize einbauen, der klappt unter Android und auf dem IPod nicht. Auf dem IPad fällt das nicht weiter auf.

[Blackcat]

Hallo Christoph,

danke für die Infos und das Testen, da habe ich dann input fürs Wochenende.

Es fehlt wahrscheinlich nochmal ein refresh die Android Geräte sind da etwas eigen beim UI rendering.
In der nächsten Version werde ich das nochmal umbauen.

werde dann auch die Änderungen mit in den ersten Post nehmen, da Sourceforge mir kein neues Passwort schickt und ich nicht einchecken kann :/

[Mitch]

Hallo,

werde das mal auf meinem Nexus testen. iPad läuft super.

Eine kleine Sache habe ich, wie bekomme ich denn oben die dunkle Zeile weg?
Dort ist ja normalerweise das Logo und Input. Beides habe ich entfernt, nur die "Zeile" finde ich nicht.

[Blackcat]

Hi,

kam am Wochenende leider nicht dazu weiter zu machen, dabei habe ich im Moment so schöne Ideen


@ Mitch

Da wird es kniffliger, weil du die Höhen der anderen divs mit verändern musst, betrifft folgende Zeilen:

Code Auswählen Erweitern

#content, #menu, #right {
/*old*/
height: 704px;
/* Firefox */
height: -moz-calc(100vh - 44px);
/* WebKit */
height: -webkit-calc(100vh - 44px);
/* Opera */
height: -o-calc(100vh - 44px);
/* Standard */
height: calc(100vh - 44px);
}

/*iPad Skalierung*/
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
#content, #menu, #right {
height: 704px;
}
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
#content, #menu, #right {
height: 960px;
}
}

Zudem muss #hdr display:none bekommen

[Loredo]

Da wird es kniffliger, weil du die Höhen der anderen divs mit verändern musst, betrifft folgende Zeilen:
...
Zudem muss #hdr display:none bekommen

Ich habe es bei mir im Image so gelöst:

Code Auswählen Erweitern



#logo, #hdr { display: none; }
#menu { top:0px; }
#content, #menu, #right { height: 660px; height: -moz-calc(100vh); height: -webkit-calc(100vh); height: -o-calc(100vh); height: calc(100vh); }
body { background-image:none; }



Bei mir läuft FHEM allerdings in einem iframe. Obigen Code injecte ich per JavaScript "von außen" sozusagen. Somit muss ich die originalen CSS Dateien nicht anpassen und aufpassen, falls mal eine Änderung über ein Update eingespielt wird.

[Blackcat]

Ich habe ein paar Anpassungen an dem Colorpicker vorgenommen und hier ein paar Funktionen im JS und im CSS ergänzt.

Änderungen im ersten Post und hier:
http://forum.fhem.de/index.php/topic,30295.0.html

[Blackcat]

Ich suche nun ein paar Tester für die neue ios6.js und touchpad.css im Responsive Modus. D.h. es sollte jetzt auch iPhone gehen

habe hier die media queries im Css entfernt und in JS ausgelagert. Konnte aber bisher nur in Chrome und IE testen also nicht mobil :/


PS: Dateien sind im ersten Post


Geplante Features:
- Wenn Tabelle zu breit und zu viele Spalten, eine art switch / scroll modus der Spalten mittels eines Pfeils zum Einblenden der cmds z.B.

Was ich auch für sinnvoll halte: Erweiterung des FHEMWEB um die cmds auch im nicht small modus bei der Detailansicht