Klasse example - Githubissues

RRZE-Webteam / rrze-elements

Sammlung von Gestaltungselementen für WordPress-Websites

4 stars 5 forks source link

Klasse example #163

Closed lukasniebler closed 2 years ago

lukasniebler commented 2 years ago

div class="example"

[x] Der Farbton der gestrichelten Umrandung dürfte ruhig kräftiger sein, im Zentral-Theme ist der Farbton sonst identisch mit Alerts
[x] Vielleicht kann man die Klasse example doch klickbar machen? Es gibt immer mal wieder Beispiele (Akkordeonfächer), (Buttons) wo man sonst in der Anleitung die Hover/Klick Effekte nicht ausprobieren kann.
[x] Ich nutz die Klasse auch gerne für die Screenshots. Allerdings kann man dann die Bilder natürlich nicht mehr vergrößern, da die Klasse example das klicken ja verhindert im div.

// Alternativ wäre auch eine gesonderte Klasse für Anleitung-Screenshots mit einem ähnlichen gestrichelten Rahmen cool, wo dann das klicken / vergrößern möglich ist.

Beispiel: https://www.urlaubaufsagrotan.test.rrze.fau.de/anleitungen/schnellstart-fau-einrichtungen/portale-menuefuehrung-und-socialmedia/

xwolfde commented 2 years ago

Bin ich auch dafür. Aber ich glaube es wäre gut, wenn wir die Klasse dann auch gleich in rrze-elements verschieben, oder? @cassandre

cassandre commented 2 years ago

Wird als Sonderform des Alert umgesetzt.

neues Attribut: title="Example"
Default-Style (-> wenn title gesetzt) wie im Example-div
Hintergrund- und Border-Farbe kann man bereits setzen
ggf. noch border-style (-> dashed, dotted...) ergänzen

xwolfde commented 2 years ago

Frage wg. Abwärtscompatibilität: Wenn ich aus dem Theme die CSS Klasse example rausnehme, wird sie durch das Elements Plugin noch geliefert? Andernfalls müsste ich überall dort, wo ich bislang ein <div class="example">...</div> setzte, das Shortcode von Hand ändern.

Wäre statt [alert] in diesem Fall nicht auch[code]sinnvoll?

cassandre commented 2 years ago

Ist jetzt abwärtskompatibel eingebaut, die Styles können aus dem FAU-Theme entfernt werden. Funktioniert sowohl mit <div class="example">...</div> als auch mit [alert style="example"]...[/alert]. Nur den Rahmen habe ich etwas dunkler gemacht, als im Original: --color-TextLight.

xwolfde commented 2 years ago

Aktuell muss das CSS im Themes bleiben, da er sonst nicht verfügbar ist, wenn man die Class direkt via HTML-Aufruf einbindet. Aus Elements wird die Class nur dann bereitgestellt, wenn zuvor ein RRZE Elements Shortcode verwendet wurde: Denn erst danach wird das CSS von Elements geladen.