Das Responsive JEM startete als Override des statischen alten Tabellenstils, um JEM mobil verwenden zu können. So startete das Responsive JEM mit der Vision, möglichst viel des ursprünglichen Designs zu erhalten und möglichst responsiv für eine bessere mobile Verwendung zu sein. Nach einigen Versionen des Overrides entschieden wir uns, dies offiziell in JEM zu integrieren
Um das moderne Layout, genannt Responsives JEM, zu aktivieren, gehe zu Komponenten→ JEM → Einstellungen→ Grundeinstellungen→ Stil und wähle als Layoutstil "Standart ( Responsiv)" und aktiviere "Icon Font verwenden".
Da das Responsive JEM als Override gestartet wurde, werden nicht alle JEM Einstellungen unterstützt und einige Funktionen müssen via Module- oder Page-Class-Suffix konfiguriert werden.
Achtung
Einige Einstellungen für JEM funktionieren nicht für JEM-Responsive. Wir arbeiten daran...
Das responsive JEM führt zwei neue Layouts für die Simplelist-Ansicht ein. Das erste Layout versucht die ursprüngliche Tabellenansicht so responsiv wie möglich nachzubilden. Das zweite neue Layout ist ein komplett neues Layout mit modernem responsivem Look. Beide Layouts werden im folgenden Bild angezeigt: Tabellennachbildung links, neues Layout rechts.

Man kann folgendermassen zwischen diesen beiden Ansichten wechseln: Gehe zu Komponenten→ JEM → Einstellungen→ Listenlayout → "Tabellenbreite in %". Wird dieses Feld leergelassen, wird der moderne Look verwendet. Wird eine Zahl für Prozent engesetzt wie"100" dann wird der tabellenähnliche Look verwendet. Nur dann kommen die Spalten-Breiten zur Anwendung. Bei Verwendung des modernen Layouts, können nur die Spalten ohne Breiteneinstellung aktiviert oder deaktiviert werden. Ein Wort zu den Spaltenbreiten: standardmässig (mit allen Feldern leer) verwendet das responsive JEM automatische Spaltenbreiten in the table-like layout but you can change that using those "Column Width"-Felder. Man kann auch eine Spalte fixieren (mit z.B. 100px) und die restlichen Felder leerlassen.
Wie schon eingangs erwähnt, müssen einige Einstellungen via page or module class suffix gemacht werden. In der folgenden Tabelle kann man sehen wo welche page or module class suffix eingesetzt werden können.
| Suffix | JEM List-Views | JEM Teaser Module | JEM Wide Module | JEM Banner Module | JEM Basic Module | JEM Calendar Module |
|---|---|---|---|---|---|---|
| jem-imagewidth<width>px jem-imageheight<height>px |
ja | ja | ja | ja | - | - |
| jem-filterbelow jem-hidefilter jem-showfilter |
ja | - | - | - | - | - |
| jem-tablestyle | - | - | ja | - | - | - |
| jem-notitle etc. | - | ja | ja | - | - | - |
| jem-horizontal | - | - | - | ja | - | - |
| jem-imagetop | - | - | - | ja | - | - |
Beschreibung:
jem-imagewidth<width>px und jem-imageheight<height>px: Verwende dieses Suffix bei einem Menüpunkt oder einem Modul, um die Bildergrössen anzupassen. Mit nur jem-imagewidth<width>px hat das Bild eine automatische Höhe. Beispiel für ein page suffix: "jem-imagewidth200px" bleiben Bilder in 200px Breite. Man kann auch %-Werte verwenden: "jem-imagewidth100%".
jem-filterbelow, jem-hidefilter and jem-showfilter: Verwende dieses page suffix to force Filter verbergen/anzeigen und um den Filter unter die Eventliste zu setzen.
jem-tablestyle: Verwende dieses module class suffix, um das tabellenähnliche Layout im Modul zu verwenden anstelle der modernen Listenansicht.
jem-notitle, jem-novenue, jem-nocity, jem-nostate, jem-nocats, jem-noimageevent, jem-noimagevenue: Add one of the tags to module class suffix to hide the related item. Not all tags work in the modern layout but in the table-like layout and also not in all modules... Just try :)
jem-horizontal: Switche zwischen einem horizontalen und vertikalem Layout (Standard ist vertikal).
jem-imagetop: Man kann das Bild an den Anfang des Banner Modules stellen (wen kein Kalender angezeigt wird, sonst bleibt es unter dem Kalender) durch das module suffix "jem-imagetop".
Das JEM Teaser Modul hat eine weitere spezielle Funktion. Setzt man die maximale Beschreibungstextlänge auf 1208, dann filtert das Teaser Modul die Eventbeschreibung nicht. Die ganze Beschreibung wird dann wie geschrieben angezegt. Mit der Weiterlesen-Funktion von Joomla kann man mehr Text in der Eventdetail-Ansicht anzeigen.