aktuellen Raum in rooms_menu farbig anzeigen in 2.9

[Morg]

Hi,

so langsam stehe ich richtig auf dem Schlauch.

Das Nächste, was mir bei der Umstellung / Übernahme der Templates von 2.8 auf 2.9 auffällt, ist die "aktueller Raum"-Anzeige im rooms_menu.html.

Ich hatte aus alten Beispielen die Einträge in der Art

<li data-icon="false">
        <a href="index.php?page=room_dg_bad">
            <img class="icon {{ page == 'room_dg_bad' ? "icon1" : "" }}" src="{{ icon0 }}scene_bath.svg" />

            <h3>Bad</h3>

            <div class="ui-li-aside">
                {{ basic.print('dg_bad_lux', 'dg.bad.helligkeit', 'Lux') }} 
                {{ basic.symbol('dg.bad-praesenz', 'dg.bad.praesenz', '',  'message_presence_active.svg') }} 
                {{ basic.symbol('men_pm_bad_sperr', 'dg.bad.licht.decke.sperren', '',  'message_presence_disabled.svg', '', '', 'icon1') }}
            </div>
        </a>
    </li>

Durch die Abfrage in der dritten Zeile "page == room..." sollte - wenn diese Zeile zur aktuellen Seite passt - zusätzlich die Klasse "icon1" eingefügt werden, so dass in meinem Fall das Icon orange angezeigt wird (alle anderen weiß).

Im Quelltext der erzeugten Seite passt das auch.

Sowohl im Vivaldi als auch im Safari muss aber irgendwas völlig aus dem Ruder laufen, denn außer dem Eintrag class="icon icon1" unterscheiden sich die jeweiligen Einträge nicht.

Das Icon ist auch orange, aber nach rechts verschoben und in einer zweiten Zeile oberhalb der Raumbezeichnung:

b52b57a5-7502-49be-8e1f-5581c258fd2e.jpg

Wenn ich mir im Vivaldi das DOM anschaue, habe ich in allen inaktiven Zeilen mit weißen Icons das normale IMG-Tag stehen, so wie in der rooms_menu.html vorgegeben. In der Zeile mit dem orangenen Icon gibt es das IMG-Tag nicht mehr; statt dessen ist direkt ein SVG-Tag eingefügt, für das andere Klassen und Formatierungen gelten.
Bei der Anzeige der resultierenden Stile sind beim SVG-Tag z.B. keine Angaben zu position oder left vorhanden...

Ich kann mir nicht vorstellen, wieso Vivaldi das gerade so seltsam anzeigt, wo es im Quellcode nicht unterschiedlich ist - und Safari zeigt im Resultat dasselbe an (liegt also wahrscheinlich nicht am Vivaldi), auch wenn ich dort keinen DOM-Inspector habe und nicht im Detail nachsehen kann.

In den aktuellen Beispielseiten sind die rooms_menu.html alle ohne die farbliche Hervorhebung, darum kann ich mir da auch keine Referenz mehr rausziehen.

Hat jemand von euch das schon "richtig" gelöst und kann mir ggf. seinen Code zukommen lassen? Ich hoffe, es reicht der jeweils gleiche Codeblock für alle Seiten...

Gruß
Sebastian

[yachti]

Hallo Sebastian,

bei mir passt es, habe es mit Tabelle gemacht. Vorher sah es genauso aus wie bei Dir.

    <li data-icon="false">

    <a id="menu-wohnen" data-ajax="false" href="index.php?page=eg.wohnen">
        <table width=100%>
        <tr>
            <td width=20%>
            <img class="icon {{ page == 'eg_wohnen' ? 'icon1' }}" src="{{ icon0 }}scene_livingroom.svg" />
            </td>
            <td width=60%>
            <h3>Wohnzimmer</h3>
            </td>
            <td width=20%>
            <div class="ui-li-aside">
                {{ basic.print('TemperaturWohnen', 'heizung.wohnen.ist', '°') }} <br />
                                {{ basic.print('Lumenwohnen', 'eg.wohnen.lumen', 'lx') }}
                                {{ basic.print('HumidityWohnen', 'eg.wohnen.humidity', 'hum') }}
            </div>
            </td>
            </tr>
            </table>
            </a>
    </li>
    <li data-icon="false">
    <a id="menu-kueche" data-ajax="false" href="index.php?page=eg.kueche">
        <table width=100%>
        <tr>
            <td width=20%>
            <img class="icon {{ page == 'eg_kueche' ? 'icon1' }}" src="{{ icon0 }}scene_dinner.svg" />
            </td>
            <td width=60%>
            <h3>Küche</h3>
            </td>
            <td width=20%>
            <div class="ui-li-aside">
                {{ basic.print('TemperaturKueche', 'heizung.kueche.ist', '°') }} <br />
                {{ basic.print('Lumenkueche', 'eg.kueche.lumen', 'lx') }}
            </div>
            </td>
            </tr>
            </table>
            </a>
    </li>

nav.PNG

[Morg]

Ah, bei dir ist in dem a-Tag noch eine ganze Tabelle untergebracht... dann werde ich das mal so versuchen. Danke!

Ich dachte ja, mit CSS sollten die ganzen Tabellen-Formatierungen langsam überflüssig werden...

[yachti]

Ich dachte ja, mit CSS sollten die ganzen Tabellen-Formatierungen langsam überflüssig werden...

Hab mich auch im CSS versucht aber aufgegeben.

Hab auch versucht alles in Listen mit ul- und li tag umzusetzen bin da auch am css gescheitert mit den selben Problemen wie in dem Threat
https://knx-user-forum.de/forum/supp...-designproblem

[Morg]

yachti, das andere Problem habe ich mit etwas CSS erstmal halbwegs umschiffen können, dazu schreib ich vielleicht nachher noch was. Zufrieden ist anders, aber es sieht so ähnlich aus, wie ich mir das vorstelle ....

[yachti]

Zufrieden ist anders, aber es sieht so ähnlich aus, wie ich mir das vorstelle ...

ja soweit war ich auch schon hab dann aber abgebrochen. So richtig hat eigentlich nichts gepasst. Seitenabstände der Menüs usw

Momentan bin ich jetzt zufrieden mit dem Design

[Morg]

Ich habe es mal mit deinen Tabellen versucht, aber das Ergebnis hat mir nicht gefallen. Versuche, die Tabellen dann per CSS so zu positionieren und zu formatieren, wie ich das eigentlich wollte, waren noch erfolgloser als meine vorherigen Bastelversuche.

Ich habe jetzt die Raumicons als PNG aus der SV2.7 kopiert, die ich benötige, und zeige statt der SVG-Bilder die PNGs an . Dabei gibt es keine Probleme mit der Formatierung, die sieht so aus, wie ich das möchte.

Trotzdem fände ich schöner, wenn wir das Problem mit der SVG-Formatierung irgendwie gelöst bekämen...

[smai]

[schuma]

Funktioniert!
Danke...

[Morg]

smai, ist das Kernproblem gelöst? Oder ist das nur "erledigt", weil ich es mit einer ziemlich blöden und nicht praktikablen Flickschusterei erstmal halbwegs zum Laufen bekommen habe?

[smai]

Das Problem ist gelöst, es werden nun auch farbige Icons korrekt angezeigt.

[Morg]

super