Ankündigung

Einklappen
Keine Ankündigung bisher.

aktuellen Raum in rooms_menu farbig anzeigen in 2.9

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    aktuellen Raum in rooms_menu farbig anzeigen in 2.9

    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

    Code:
    <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


    #2
    Hallo Sebastian,

    bei mir passt es, habe es mit Tabelle gemacht. Vorher sah es genauso aus wie bei Dir.
    Code:
        <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
    Meine Installation: VM Debian Jessie SH NG 1.4, SmartVISU 2.9, KNX, DMX, 1-wire, Cisco ASA 5512X IPS, VMware vSphere 6

    Kommentar


      #3
      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...

      Kommentar


        #4
        Zitat von Morg Beitrag anzeigen
        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
        Meine Installation: VM Debian Jessie SH NG 1.4, SmartVISU 2.9, KNX, DMX, 1-wire, Cisco ASA 5512X IPS, VMware vSphere 6

        Kommentar


          #5
          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 ....

          Kommentar


            #6
            Zitat von Morg Beitrag anzeigen
            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
            Meine Installation: VM Debian Jessie SH NG 1.4, SmartVISU 2.9, KNX, DMX, 1-wire, Cisco ASA 5512X IPS, VMware vSphere 6

            Kommentar


              #7
              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...

              Kommentar


                #8

                Kommentar


                  #9
                  Funktioniert!
                  Danke...

                  Kommentar


                    #10
                    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?

                    Kommentar


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

                      Kommentar


                        #12
                        super

                        Kommentar

                        Lädt...
                        X