197 lines
6.8 KiB
HTML
197 lines
6.8 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB" xml:lang="en-GB">
|
|
<head>
|
|
<title>JEM Responsive</title>
|
|
<link href="../css/help.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<h1>Responsives JEM</h1>
|
|
|
|
<h3>Wie aktivieren</h3>
|
|
|
|
<div>
|
|
<p>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</p>
|
|
</div>
|
|
|
|
<h3>Wie aktivieren</h3>
|
|
|
|
<p>Um das moderne Layout, genannt Responsives JEM, zu aktivieren, gehe zu <b>Komponenten→ JEM → Einstellungen→ Grundeinstellungen→ Stil</b> und
|
|
wähle als Layoutstil "Standart ( Responsiv)" und aktiviere "Icon
|
|
Font verwenden".</p>
|
|
|
|
|
|
<h3>Funktionen - Spezielle Funktionalitäten</h3>
|
|
|
|
<div>
|
|
<p>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.</p>
|
|
</div>
|
|
|
|
<div class="box">
|
|
<p class="attentionheader">Achtung</p>
|
|
<p class="attention">Einige Einstellungen für JEM funktionieren nicht für JEM-Responsive.
|
|
Wir arbeiten daran...</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h4>View: Einfache Liste (und entsprechende Listenansichten)</h4>
|
|
<p>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.</p>
|
|
<div style="width: 100%; text-align: center;"><img src="../images/tablemodern.jpg" alt="" style="max-width: 100%;"/></div>
|
|
<p>Man kann folgendermassen zwischen diesen beiden Ansichten wechseln:
|
|
Gehe zu <b>Komponenten→ JEM → Einstellungen→ Listenlayout → "Tabellenbreite
|
|
in %"</b>. 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.</p>
|
|
|
|
<h4>Module und Page Class Suffix</h4>
|
|
<p>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.</p>
|
|
<style>
|
|
.table {
|
|
border-collapse: collapse;
|
|
}
|
|
.table tr {
|
|
border: 1px solid black;
|
|
}
|
|
.table td:not(:first-child) {
|
|
text-align: center;
|
|
}
|
|
.table th, .table td {
|
|
padding: 5px;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.table tr:nth-child(even) {
|
|
background-color: #f2f2f2
|
|
}
|
|
</style>
|
|
<table class="table" cellspacing="0" cellpadding="0">
|
|
<tr>
|
|
<th>Suffix</th>
|
|
<th>JEM List-Views</th>
|
|
<th>JEM Teaser Module</th>
|
|
<th>JEM Wide Module</th>
|
|
<th>JEM Banner Module</th>
|
|
<th>JEM Basic Module</th>
|
|
<th>JEM Calendar Module</th>
|
|
</tr>
|
|
<tr>
|
|
<td>jem-imagewidth<width>px<br />jem-imageheight<height>px</td>
|
|
<td>ja</td>
|
|
<td>ja</td>
|
|
<td>ja</td>
|
|
<td>ja</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>jem-filterbelow<br />jem-hidefilter<br />jem-showfilter</td>
|
|
<td>ja</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>jem-tablestyle</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
<td>ja</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>jem-notitle etc.</td>
|
|
<td>-</td>
|
|
<td>ja</td>
|
|
<td>ja</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>jem-horizontal</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
<td>ja</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>jem-imagetop</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
<td>ja</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
</tr>
|
|
</table>
|
|
<p><b>Beschreibung:</b></p>
|
|
<p><b>jem-imagewidth<width>px und jem-imageheight<height>px</b>:
|
|
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%".</p>
|
|
<p><b>jem-filterbelow, jem-hidefilter and jem-showfilter</b>: Verwende dieses
|
|
page suffix to force Filter verbergen/anzeigen und um den Filter unter die
|
|
Eventliste zu setzen.</p>
|
|
<p><b>jem-tablestyle</b>: Verwende dieses module class suffix, um das tabellenähnliche
|
|
Layout im Modul zu verwenden anstelle der modernen Listenansicht.</p>
|
|
<p><b>jem-notitle, jem-novenue, jem-nocity, jem-nostate, jem-nocats, jem-noimageevent, jem-noimagevenue</b>: 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 :)</p>
|
|
<p><b>jem-horizontal</b>: Switche zwischen einem horizontalen und vertikalem
|
|
Layout (Standard ist vertikal).</p>
|
|
<p><b>jem-imagetop</b>: 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".</p>
|
|
</div>
|
|
|
|
<h3>JEM Teaser Module</h3>
|
|
|
|
<div>
|
|
<p>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.</p>
|
|
</div>
|
|
|
|
<div class="close">
|
|
<a href="#" onclick="javascript:window.close();">Fenster schliessen</a>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |