Responsive Design

Hallo, ich habe eine allgemeine Frage zum Less Allrounder Template 2.1.0. Ich gehe davon aus, dass dieses zwar für Joomla 3x angepasst wurde jedoch nicht responsive ist. Richtig? Ich habe hierzu keine Einstellungen gefunden.

Viele Grüße (und gute Arbeit)
Mario

Das Template ist beschränkt responsive. Die Module auf Positionen oberhalb und unterhalb des Hauptcontents verschieben sich entsprechend bei kleineren Auflösungen. Die Sidebars sind aber nicht responsive, das heisst das grundsätzliche Layout bleibt auch bei kleineren Auflösungen wie es ist.
Du kannst das Verhalten testen wenn du www.bakual.net/dokumentation/modulpositionen.html in verschiedenen Auflösungen anguckst.

Das "Spalten" Feature ( www.bakual.net/dokumentation/typography.html#spalten ) wär auch responsive.

Geplant ist da nichts um das zu erweitern. Ich hab weder die Zeit noch das KnowHow um das zu machen. Falls jemand eine Idee hat und mithelfen will bin ich aber nicht abgeneigt. Der Code liegt auf github.com/bakual/allrounder .

Ja es ist richtig, das Allrounder beschränkt responsive ist.

Wir haben allerdings über CSS responsives Verhalten erreicht - auch für Smartphones (mit ein paar kleinen Änderungen in der effects.js ). Insbesondere die Darstellung auf Smartphone war notwendig, da unsere Vereinsmitlieder auch unterwegs gerne wissen wollten, ob und wann Tanzkurse stattfinden.

Die Webseit ist www.tsg-dacapo.de .

Eingebunden sind zusätzlich JEvents (eben für die Termine) und sigplus für Bildergalerien. (Aus meiner Sicht ist zwar Phoca für Bildergalerien besser, erlaubt aber keine Gestaltung übers Frontend, was für unsere verschiedenen Autoren absolut notwendig ist.).

Neben Termine und Bildergalerien sind auch alle Bilder, Videos, spezielle Beiträge (besonders deutlich zu sehen mit www.tsg-dacapo.de/index.php/angebot ,) und Tabellen (siehe Menüpunkt Mitgliedschaft) voll responsive. Einfach mal auf die Seite schauen und spielen.

Eine Anmerkung zu den Tabellen: das responsive Verhalten wird über Klassensuffixe und CSS gesteuert. Aus meiner Sicht ist das noch die vergleichweise einfachste Methode und erlaubt die größte Flexibilität.

Wer darüber hnaus weitere Details wissen will soll sich einfach hier melden. Wir können dann auch erklären, wie das Hautpmenü auf einem Smartphone realisiert wurde.

Wenn es mit vernünftigem Aufwand realisierbar ist wäre es durchaus interessant das ins Template zu integrieren.

Tag,

ich habe mich in letzter Zeit auch mal etwas mit diesem Thema befasst.

Mein Ergebnis ist unter joomla-03.lessinggymnasium.net/ zu sehen.

ACHTUNG: Es handelt sich hier um eine Testhomepage, weshalb hier die Beiträge manchmal über die Seite hinausragen (meist aufgrund von Tabellen mit fester Breite) und andere unschöne Dinge auftreten können (ich hatte nicht das Verlangen hunderte Beiträge für Demonstrationszwecke zu überarbeiten :whistle: ). Bitte einfach ignorieren.

Sehenswert ist neben der Startseite u.a. noch die Seite Konzepte -> AG-Angebot .

Folgendes ist dort realisiert:

• Das Drop-Down-Menü kann mit dem Smartphone bedient werden
• Dies gilt auch für Menü-Module
• Module können auf dem Smartphone aus-/eingeklappt werden
• Die Sidebars sind responsive (sowohl die rechte als auch die linke werden auf Smartphones über dem Inhalt angezeigt (fand ich sinnvoller, als wenn die rechte unter dem Inhalt angezeigt wird)
• Die Suche wird für Smartphones unter der Breadcrumbs angezeigt
• Module können für Smartphones ausgeblendet werden (könnte genauso auch für Desktops realisiert werden)
• Die Untermenüpunkte ausgewählter Menüpunkte können verborgen werden (siehe AG-Angebot (Das Menü in der Sidebar sind die Untermenüpunkte))
• Eine eigene Realisierung für "Spalten", die dynamisch die Anzahl der Spalten runterregelt (siehe die Logos unten auf der Startseite)

Das ganze wurde mittels HTML und CSS realisiert.

Falls sich wer für die zugrunde liegende Technik interessiert, der kann sich unter wiki.selfhtml.org/wiki/Checkbox-Hack#Der_Checkbox-Hack und wiki.selfhtml.org/wiki/CSS/Anwendung_und...it_dem_Checkbox-Hack informieren.

Für die Umsetzung musste ich ein paar Template-Dateien des Menü-Moduls "überschreiben" (=> eine angepasste Version im Verzeichnis des Templates speichern), die index.php und die modules.php des Templates verändern und etwas CSS-Code in die custom.css schreiben, welcher viele der Standardformatierungen des Templates für Anzeigen <= 600px Breite (Wert veränderbar) außer Kraft setzt/überschreibt (deswegen so oft !important).

Matthias

Hast du Lust deine Änderungen als Pull Request einzureichen?
Du findest die Dateien hier: github.com/Bakual/Allrounder/tree/master/tpl_lessallrounder
Du müsstest das Repo Forken (der Knopf oben rechts) und dann in deinem Repo bearbeiten und anschliessend als PR einreichen. Siehe docs.joomla.org/Using_the_Github_UI_to_Make_Pull_Requests