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

[HoTi]

Also am ipad hat es die gesamte länge. Am android Tablet  nicht. Am Handy hat es auch die gesamte länge Samsung S6 edge.

Komisch ist das es aussieht als ob es zoomt wenn nicht so viel auf der seite ist. Ich dachte die Leiste oben sieht immer gleich aus.

[HoTi]

Korrektur. S6 geht's auch nicht!

[Talkabout]

Hallo Tim,

ich habe bei mir aktuell keine Android-Geräte im Einsatz. Auf einem Android-Handy sollte aber das Responsive Design greifen, und die Navigation oben sollte sich zu nur einem Icon verändern. Ich kann mir das Verhalten nicht erklären. Ich bekomme nächste Woche ein Android Tablet mit 7 Zoll, darauf probiere ich es dann mal aus.

Ich habe übrigens den Style mal mit dem Chrome Emulator für Devices ausprobiert. Auch da habe ich keine Probleme mit den Android Device Darstellungen.

Gruss

[phooka]

Ich habe eben den iOS6 Touchpad Style (mit ios6.js) auf einem iPhone 4s (iOS 9 mit Safari) ausprobiert und der Body-Inhalt (inklusive den SVGs) passt sich leider nicht richtig an die Displaybreite an. Passiert auch im Emulationsmodus in Chrome.

[Talkabout]

Ich habe eben den iOS6 Touchpad Style (mit ios6.js) auf einem iPhone 4s (iOS 9 mit Safari) ausprobiert und der Body-Inhalt (inklusive den SVGs) passt sich leider nicht richtig an die Displaybreite an. Passiert auch im Emulationsmodus in Chrome.

Hallo phooka,

das Problem ist, dass auf der Seite ein Graph dargestellt ist. Dieser ist eine Grafik, die sich nicht an die Breite anpasst. Probiere mal eine Seite ohne ein Diagramm, ob es dort auch Probleme gibt.

Gruss

[phooka]

Hallo Talkabout,

das Problem ist, dass auf der Seite ein Graph dargestellt ist. Dieser ist eine Grafik, die sich nicht an die Breite anpasst. Probiere mal eine Seite ohne ein Diagramm, ob es dort auch Probleme gibt.

du hast Recht!
Wäre es trotzdem nicht schöner die Graphen zu skalieren? Wenn's einen genauer interessiert kann man dann ja reinzoomen. SVG sollte sich dafür ja eigentlich prima eignen.
Ich hab leider keine Ahnung von CSS/JS, bin auch neu bei FHEM und finde die richtige Stelle im Code gerade nicht. Google schlägt vor im SVG-Tag folgende Attribute einzufügen:

Code Auswählen Erweitern


preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"


Liebe Grüße
phooka

[Talkabout]

Hallo Talkabout,

du hast Recht!
Wäre es trotzdem nicht schöner die Graphen zu skalieren? Wenn's einen genauer interessiert kann man dann ja reinzoomen. SVG sollte sich dafür ja eigentlich prima eignen.
Ich hab leider keine Ahnung von CSS/JS, bin auch neu bei FHEM und finde die richtige Stelle im Code gerade nicht. Google schlägt vor im SVG-Tag folgende Attribute einzufügen:

Code Auswählen Erweitern


preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"


Liebe Grüße
phooka

Die Graphen in FHEM sind dafür leider nicht wirklich ausgelegt.

Gruss

[Blackcat]

Die Graphen in FHEM sind dafür leider nicht wirklich ausgelegt.

Gruss

Das musste ich auch schon feststellen 

@ Android: sorry ich kam noch nicht dazu. Leider habe ich auch kein passendes Testgerät

[holzwurm83]

hallo Sandra,

ich meine das du dass schon mal hier geschrieben hast, aber ich kann es leider nicht finden.

Wie kann ich bei einem Plot die Pfeile entfernen?

[Blackcat]

Wie kann ich bei einem Plot die Pfeile entfernen?

Hi du benötigst zusätzliches CSS 

Die Pfeile mit Lupen:

Code Auswählen Erweitern

svg.Prev, svg.Next, svg.Zoom-out, svg.Zoom-in {
    display: none;
}

Die Pfeile:

Code Auswählen Erweitern

svg.Prev, svg.Next {
    display: none;
}

[Blackcat]

Ich habe nun endlich mal wieder Zeit gefunden kleinere Optimierungen zu machen:

- Slider nun größer für bessere Bedienbarkeit auf Touchgeräten
- Slider im Portraitmodus von kleinen Geräten ausgeblendet
- Plots werden nun einzeln srollbar, somit wird das Layout nicht zerschossen
- iPad Pro Unterstützung
- Checkboxfix und Rahmen im Room Popup
- Uzsu Fix

Leider kann ich im Moment nicht einchecken kann das ein anderer bitte für mich übernehmen.
habe auch noch ein Icon gefixt:
www\pgm2\ios6Common.css
www\pgm2\ios6touchpadstyle.css
www\images\openautomation\light_led_stripe.svg

PS: wer beim Auf und Zuklappen ein Errorfenster bekommt, das liegt an FHEM und kann so ausgeblendet werden:

Code Auswählen Erweitern

attr WEB confirmJSError 0

[Blackcat]

gerade noch einen Bug beim Ausblenden gefunden und Datei aktualisiert 

[CoolTux]

Hallo Sandra,

Vielen lieben Dank das Du meinen Hilferuf erhört hast.
Könntest Du das Problem aus dem verlinkten Threads auch bearbeiten?


Grüße

[Blackcat]

Gerne aber bitte noch die Links

[rudolfkoenig]

Leider kann ich im Moment nicht einchecken...

Falls das am FHEM-Server liegt, bitte per PM melden.

...kann das ein anderer bitte für mich übernehmen.

Habs erledigt.

wer beim Auf und Zuklappen ein Errorfenster bekommt, das liegt an FHEM...

Was heisst das denn genau?