Sprungziel-Icons Verhalten in v3.3.1 und v3.4

[Sipple]

Hi wvhn

Ich habe gestern und heute meinen Backup-Server mit v3.3.1 installiert. Mach ich immer zuerst, bevor ich meinen Produktiv-Server anfasse.
Soweit läuft alles, aber mir ist am Verhalten von Icons, die als Sprungziel auf eine andere Seite dienen, etwas aufgefallen.
Beispiel das Home Icon links oben. Das ist jetzt farblich auf der tatsächlichen Homepage immer icon1, sonst icon0. Außerdem blinkt es kurz, wenn man drauf clickt.
Vorher war es immer icon 0 und wurde icon1, sobald man im Browser (Desktop) den Mauszeiger über das Icon bewegte.
An der Stelle habe ich damit kein Problem.

Anders sieht es da bei einigen Icons aus, die ich innerhalb einer Seite als Sprungziel verwende. Beispiel:

grafik.png

Die waren vorher (v3.2.2) alle icon0 und wurden auch nur icon1, wenn man mit der Maus darüber schwebte.
Dadurch konnte man schön sehen, dass das ein Link ist. Jetzt sind sie immer icon1.

Definiert sind die so:

    <div class="block">
        <div class="set-1" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
            <div data-role="collapsible" data-collapsed="false">
                <h3>Kontrollfunktionen</h3>
                <table width=100%>
                    <tr>
                        <td align=left>                
                            <a id="Config-Link" class="icon1" href="index.php?page=config">
                            <img class="icon" src="{{ icon0 }}edit_settings.svg" alt="config" /></a> &nbsp; &nbsp; &nbsp; Konfiguration
                            <br />
                            <a id="Monitor-Link" class="icon1" href="index.php?page=smarthomeNG">
                            <img class="icon" src="{{ icon0 }}logo_smarthomeNG.svg" alt="smarthomeNG" /></a> &nbsp; &nbsp; &nbsp; SmartHomeNG Monitor
                            <br />
                            <a id="SHNG-Link" class="icon1" href="http://192.168.178.130:8383/admin/login?returnUrl=%2F" target="_blank">
                            <img class="icon" src="{{ icon0 }}logo_smarthomeNG.svg" alt="smarthomeNG" /></a> &nbsp; &nbsp; &nbsp; SmartHomeNG Admin Interface
                            <br />
                            <a id="Doku-Link" class="icon1" href="index.php?pages=docu&page=index" target="_blank">
                            <img class="icon" src="{{ icon0 }}edit_copy.svg" alt="docu" /></a> &nbsp; &nbsp; &nbsp; Dokumentation
                        </td>
                    </tr>
                </table>                
            </div>
        </div>
    </div>​

Die Links funktionieren, sieht nur doof aus. Wenn ich da alle icon1 in icon0 ändere, sieht es natürlich wieder normal aus, aber die Funktionalität, dass beim mouseover die Farbe zu icon1 wird, ist grundsätzlich weg.
Bekommt man die alte Funktionalität in dieser Version auf einfache Art und Weise zurück?
Wenn das nicht geht, was muss ich tun, damit meine eigenen Link-Icons sich so verhalten wie das Home Icon?

Danke

Martin

[wvhn]

Moin Martin,

im Ausdruck

<a id="Config-Link" class="icon1" href="index.php?page=config">
<img class="icon" src="{{ icon0 }}edit_settings.svg" alt="config" /></a>

sind das “icon1” im Anchor Tag und das „icon“ im Image-Tag für die Einbettung der svg-icons erforderlich, so dass diese überhaupt mit Klassen gestylt werden können. Wenn Du im Image-Tag hinter „icon“ noch ein „icon0“ setzt, werden die icons wieder wie gewohnt dargestellt.

Der hover-Effekt müsste dann auch wieder gehen. Wenn nicht, kann man ihn in der visu.js im Ordner der eigenen Seiten definieren. Das kann ich nach dem Wochenende nochmal testen und ggfls. nachreichen.

Gruß
Wolfram

[Sipple]

Danke Wolfram.

Meinst du mit

Wenn Du im Image-Tag hinter „icon“ noch ein „icon0“ setzt, werden die icons wieder wie gewohnt dargestellt.

so?

<img class="icon icon0" src="{{ icon0 }}edit_settings.svg" alt="config" />

So stimmt die Farbe zwar wieder, aber kein hover-Effekt.

[wvhn]

ja genau.

a.icon1 > svg.icon0:hover  {
    stroke: #a6f829;
    fill: #a6f829;
    stop-color: #a6f829;​
}

in der visu.css sollte den hover-Effekt zurück bringen. Die Farbe ist für das Design „greenhornet“. Für andere Designs ist jeweils deren Farbe für icon1 zu verwenden.

Gruß
Wolfram

[Sipple]

Funktioniert!
Vielen Dank Wolfram.

[Sipple]

Hi Wolfram

Ich muss den Thread nochmal raus kramen.
Die Lösung funktioniert bei der 3.4 nicht mehr. Meinen pages Ordner habe ich 1:1 kopiert, inkl. den Modifikationen wie hier oben beschrieben.
Es verhält sich nun wieder wie im 1. Post beschrieben bei der Umstellung von 3.2.2 auf 3.3.1. Alle entsprechenden Icons sind dauerhaft icon1 und kein Hover-Effekt.

Gruß, Martin

[wvhn]

Moin Martin,

leider hat sich dieser Bug beim Aufräumen der Klassen eingeschlichen und ist allgemeingültig nicht ganz trivial zu lösen.

Die schnellste Abhilfe in Deinem Fall: setze in eines der Tags, die den Links übergeordnet sind, die Klasse "menu", z.B.

<table class="menu" width=100%>

Alternativ - auch für Anwender einzelner Links ohne übergeordnete Elemente - jeden Link in ein span-Element setzen:

<span class="menu"> ... hier der Link ... </span>

Die Klasse "icon0" im img-Element (siehe #3) wird weiter benötigt.

Die nachhaltigste Lösung ist auf die in v3.3.1 eingeführte Einbettungsmethode für SVGs umzusteigen. Ein Link sieht dann so aus:

<a id="Config-Link" href="index.php?page=config" style="text-decoration:none;" >
   {{ lib.svgimg ('', 'edit_settings.svg', 'icon0', '') }}
</a>
​

"Nachhaltig" deshalb, weil es ja schon erste designs mit dark-mode gibt, die nur so richtig funktionieren.

Gruß
Wolfram

[Sipple]

Wieder einmal vielen Dank.
Ich habe mich für die nachhaltige Lösung entschieden.
Der Farbwechsel beim Hover Event geht dann halt nicht mehr, aber da sich der Mauszeiger ändert, ist das kein Beinbruch. Auf Touchdevices geht das mit dem Hover ja eh nicht.

Gruß, Martin

[wvhn]

Moin Martin,

wenn Dir das hover wichtig ist, spendiere dem anchor-tag noch eine Klasse:

<a id="Config-Link" class="mylink" href="index.php?page=config" style="text-decoration:none;" >
{{ lib.svgimg ('', 'edit_settings.svg', 'icon0', '') }}
</a>​

und ersetze damit die Klasse "icon1" in Deiner bisherigen Definition in der visu.css:

a.mylink > svg.icon0:hover {
stroke: #a6f829;
fill: #a6f829;
stop-color: #a6f829;​
}​

Gruß
Wolfram

[Sipple]

So wichtig wäre es nicht gewesen, aber wenn die Lösung so einfach ist und auf Anhieb funktioniert, dann freut es mich natürlich umso mehr und ich bedanke mich ganz herzlich