primo commit
This commit is contained in:
197
administrator/components/com_jem/help/de-DE/modernlayout.html
Normal file
197
administrator/components/com_jem/help/de-DE/modernlayout.html
Normal file
@ -0,0 +1,197 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user