Ich verzweifle mal wieder am REX(4)-Backend. Mir ist klar, dass vieles hier historisch gewachsen ist, aber wenn ich in den Quelltext + das zugehörige CSS sehe bekomme ich das kalte Grausen.
1. CSS-Klassen-Namespace „rex“ - ist das so sinnvoll?
2. CSS-Klassen Wiederholung der Struktur:
Was sollen Klassen wie "rex-content-editmode-slice-input" wenn der zugehörige Pfad so aussieht:
Code: Alles auswählen
html
body#rex-page-content.be-style-agb-skin
div#rex-website
div#rex-wrapper
div#rex-wrapper2
div#rex-output
div.rex-content-body
[b]div.rex-content[/b]-body-2
[b]div.rex-content-editmode [/b]
div.rex-content-editmode-slice-output
Code: Alles auswählen
div.rex-content-editmode div.rex-form-content-editmode,
div.rex-content-editmode div.rex-form-content-editmode div.rex-form-wrapper,
div.rex-content-editmode div.rex-form-content-editmode-add-slice,
div.rex-content-editmode div.rex-form-content-editmode-add-slice div.rex-form-wrapper,
div.rex-content-editmode div.rex-form-content-editmode-edit-slice,
div.rex-content-editmode div.rex-form-content-editmode-edit-slice div.rex-form-wrapper {
background-color: transparent;
}
Code: Alles auswählen
/* Modulname, SliceNavi */
div.rex-content-editmode div.rex-form.rex-form-content-editmode-add-slice div.rex-content-editmode-module-name,
div.rex-content-editmode div.rex-content-editmode-module-name.rex-form-content-editmode-edit-slice,
div.rex-content-editmode div.rex-form-content-editmode-edit-slice div.rex-navi-slice,
table.rex-table tr.rex-metainfo-cat-b td {
background-color: #F4FECF;
}
Ziel müsste sein, eine CSS-Klassen-Verschachtelung aufzubauen, evtl. mit relevanten EInstiegspunkten, die per ID ausgezeichnet werden.
3. HTML-Struktur:
Auch hier sollte nachgebssert werden. Im Artikeleditor z.B. würde sich anbieten, die Linearstruktur zugunsten einer Hierarchie zu ändern. Z.B.
Code: Alles auswählen
<div class="rex-content-body">
<ul id="SliceList" class="edit-mode">
<li class="Slice add-block">
...
<li>
<li class="Slice">
...
<li>
<li class="Slice active">
<form>
<div class="Header">
<h3>Block Name</h3>
<ul class="Tools">
<li class="Button first">
<a />
</li>
<li class="Button">
<a />
</li>
</ul>
<legend>Block editieren</legend>
</div>
<input type="hidden" / >
...
<!-- *** OUTPUT OF MODULE-OUTPUT - START *** -->
...
<!-- *** OUTPUT OF MODULE-OUTPUT - END *** -->
</form>
</li>
<li class="Slice add-block">
...
<li>
<li class="Slice">
...
<li>
<li class="Slice add-block">
...
<li>
</ul>
</div>
- .active erlaubt, bspw. den Editierblock farblich abzusetzen (und gleichzeitig deren Unterelemente hierarchisch anzuspringen)
- Dazu ist aber nötig, z.B. Namen des Block mit in die Struktur aufzunehmen (vorher war das Element nebengeordnet, ein aktueller Edit-Mode war nicht zu bestimmen)
- Elementstukturen so „hoch“ wie möglich auszeichnen (hier z.B. Button im <li> letzen, statt das input/a-Element auzuzeichnen.
Im Beispiel habe ich auf Namespaces verzichtet und Klassen in Attribute (wie active, first) und Element (wie Slice, Button…) unterschieden.
Vielleicht kann Euch das als Anregung dienen. Klar entsteht da wieder das Problem der Abwärtskompatibilität zu alten Skins, aber imho ist ein Aufräumen hier bitter nötig.