Umstellung auf 2.9 - Designproblem

[Morg]

Hallo,

ich versuche gerade, meine (schon ältere) 2.8er SV auf 2.9 umzustellen. Erwartungsgemäß gab es eine Reihe an Problemen, die ich mit dem Templatechecker der Reihe nach angegangen bin, bevor ich mir das Ergebnis überhaupt angesehen habe. In Masse waren das deprecated Widgets, die durch basic.print oder basic.stateswitch ersetzt wurden - so weit, so gut.

Beim Design laufe ich etwas vor eine Wand, weil ich das Problem bzw. die Ursache nicht verstehe. Ich habe nirgendwo eine verständliche (?) Erläuterung des Blockmodells und der CSS-Modifikatoren gefunden, so dass mein Design immer nur auf zusammengesuchten Schnipseln aus fremden Konfigurationen besteht.

Im rooms_menu.html wird nach der Überschrift "Zentral" eine Steuerzeile mit einigen Buttons angezeigt, danach die Überschrift "Dachgeschoss" mit Buttons, die zentral nur fürs Dachgeschoss gelten. Darunter zeilenweise die Räume mit Statusbenachrichtigung. Der Code (2.8 mit neuen Widgets) sieht so aus:

/**
* -----------------------------------------------------------------------------
* @package     smartVISU
* @author      Martin Gleiß
* @copyright   2012
* @license     GPL [http://www.gnu.de]
* -----------------------------------------------------------------------------
*/

{% import "widgets/widget_notification_badge.html" as notification %}

<ul data-role="listview" data-dividertheme="c">
    <li data-role="list-divider">Zentral</li>
        <li data-icon="false">
            <span data-role="controlgroup" data-type="horizontal"> 
                {{ basic.stateswitch('zentral_licht_an', 'zentral.licht', '', 1, 'light_light_dim_100.svg', '', ['icon1']) }}
                {{ basic.stateswitch('zentral_licht_aus', 'zentral.licht', 'mini', 0, 'light_light_dim_00.svg', '', []) }}
            </span>
            <span data-role="controlgroup" data-type="horizontal"> 
                {{ basic.stateswitch('zentral_w_an', 'zentral.weihnachten', '', 1, 'weather_sun.svg', '', ['icon1']) }}
                {{ basic.stateswitch('zentral_w_aus', 'zentral.weihnachten', 'mini', 0, 'weather_sun.svg', '', []) }}
            </span>
            <span data-role="controlgroup" data-type="horizontal"> 
                {{ basic.stateswitch('zentral_rollo_zu', 'zentral.rollo.prozent', 'mini', 100,  'fts_shutter_100.svg', '', ['icon0']) }}
                {{ basic.stateswitch('zentral_rollo_schatten', 'zentral.rollo.prozent', 'mini', 85,  'fts_shutter_80.svg', '', ['icon0']) }}
                {{ basic.stateswitch('zentral_rollo_auf', 'zentral.rollo.prozent', 'mini', 0,  'fts_window_2w.svg', '', []) }}
            </span>
            <span data-role="controlgroup" data-type="horizontal">
                {{ basic.stateswitch('wifi-guest-toggle', 'avm.wlan.wlan3', 'mini', ['1', '0'], ['it_wifi.svg', 'it_wifi.svg'], '', ['icon1', 'icon0']) }}
            </span>
    </li> 

    <li data-role="list-divider">Dachgeschoss 
        {{ basic.stateswitch('dg_rollo_zu', 'dg.zentral.rollo.prozent', 'mini', 100,  'fts_shutter_100.svg', '', ['icon0']) }} 
        {{ basic.stateswitch('dg_rollo_schatten', 'dg.zentral.rollo.prozent', 'mini', 85,  'fts_shutter_80.svg', '', ['icon0']) }} 
        {{ basic.stateswitch('dg_rollo_auf', 'dg.zentral.rollo.prozent', 'mini', 0,  'fts_window_2w.svg', '', []) }} 
    </li>

    <li data-icon="false">

        <a href="index.php?page=room_dg_schlafen">
            <img class="icon {{ page == 'room_dg_schlafen' ? "icon1" : "" }}" src="{{ icon0 }}scene_sleeping.svg" />
            <h3>Schlafzimmer</h3>
            <div class="ui-li-aside">
                {{ basic.symbol('info-dg-schlafen-licht', 'a.schlafen.licht.wand', '',  'light_light_dim_100.svg', '', '', 'icon1') }}
                {{ basic.symbol('info-dg-schlafen-asd', 'a.schlafen.asd', '',  'message_socket_on_off.svg', '', '', 'icon1') }}
            </div>
        </a>
    </li>

... usw

Das sah bisher so aus:

9c879082-c4ab-42da-9223-9397680f7c19.jpg


Nach der Umstellung auf die neuen Widgets sieht das so aus:

279e9469-5abc-4493-a173-b980ca4526a8.jpg

Dabei stört mich
a) der Hintergrund der "Steuerzeile", der im alten Design gefüllt war und jetzt keinen Hintergrund hat (die Ausrichtung "nicht links" ist nebensächlich)
b) die Einbindung der basic.stateswitch-Widgets in der Zeile mit dem Text "Dachgeschoss" (und dass sie auf weißem Hintergrund sind...)

Kann mir jemand von euch da einen Hinweis geben, wie ich das anders formatieren muss? Das neue Widget erzeugt offensichtlich eine ganz andere Code-/CSS-Umgebung. Leider nicht meine Stärke...

Gruß
Sebastian

[smai]

Die CSS-Klassen, welche für die eigene Anwendung gedacht sind, findest du unter https://api.jquerymobile.com/classes/
Und die Dokumentation der Listview gibt es hier: http://demos.jquerymobile.com/1.4.5/listview/
Eine komplette Übersicht der jQuery Mobile Struktur vermisse ich aber ebenfalls.

Zu a)
Der Hintergrund ist wohl bewusst nicht mehr so. Das hellere grau steht eigentlich für Buttons, was dein Block ja nicht ist. Es war wohl eher ein Fehler, dass in jQM 1.3 auch die nicht-klickbare Bar als Button dargestellt wurde.
Ich habe auch keine Klasse gefunden, welche die Bar wieder so darstellen würde wie in 1.3.

Der Abstand link ist wohl ein Bug in jQM. In 1.4.5 wird anscheinend die Klasse ui-li-has-thumb gesetzt, sobald irgendwo innerhalb des <li> ein <img> vorkommt. IMHO dürfte diese nur gesetzt werden, wenn das <img> an erster Stelle steht.
Leider habe ich dafür keine saubere Lösungsmöglichkeit gefunden. Du kannst höchstens im <li> ein style="padding-left: 1em" setzen.


b) Es ist von iQuery Mobile nicht vorgesehen, dass man Buttons in einem divider hat. Ich habe aber eine Umgehungslösung gefunden. Du musst die Buttons folgendermassen in ein div packen:

    <li data-role="list-divider">Dachgeschoss
        <div class="ui-group-theme-a" style="display: inline-block">
            {{ basic.stateswitch('dg_rollo_zu', 'dg.zentral.rollo.prozent', 'mini', 100,  'fts_shutter_100.svg', '', ['icon0']) }} 
            {{ basic.stateswitch('dg_rollo_schatten', 'dg.zentral.rollo.prozent', 'mini', 85,  'fts_shutter_80.svg', '', ['icon0']) }} 
            {{ basic.stateswitch('dg_rollo_auf', 'dg.zentral.rollo.prozent', 'mini', 0,  'fts_window_2w.svg', '', []) }} 
        </div>
    </li>

[Morg]

Danke dir für die Infos, das werde ich die Tage mal umsetzen und probieren.