Avatar

Release thread for the theme Responsive1 (Design/Themes)

by Auge ⌂ @, Monday, June 25, 2018, 17:49 (89 days ago)

Hello

I start this thread to have one point for informations about releases of the theme Responsive 1. The theme is not complete yet but it works with some incompletenesses.

links

- repository
- releases
- project page
- project forum

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

Tags:
theme, responsive, html5

Avatar

Responsive1 0.1.4, compatible with MLF 2.4.8 & 2.4.9

by Auge ⌂ @, Sunday, February 18, 2018, 21:56 (216 days ago) @ Auge

Hello

After the release of MLF's version 2.4.8 I also released a new version of the theme Responsive 1. Please leave bug reports, reports of minor issues and feature requests in the project forum for the theme and the ascending icon set.

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

Avatar

Responsive1 0.1.5, compatible with MLF 2.4.11 & 12

by Auge ⌂ @, Monday, June 25, 2018, 17:51 (89 days ago) @ Auge

Hello

After the release of MLF's version 2.4.11 I also released a new version of the theme Responsive 1. Please leave bug reports, reports of minor issues and feature requests in the project forum for the theme and the ascending icon set.

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

Responsive1 0.1.5, compatible with MLF 2.4.11

by Taurec, Tuesday, June 26, 2018, 13:32 (88 days ago) @ Auge

Nicht schlecht!
Wie ist das für die Zukunft geplant? Wäre es möglich, die Theme entsprechend dem Zugangssystem des Benutzers automatisch aufzurufen (auch als Unregistrierter), wenn man z. B. mit Android bzw. einem mobilen Gerät zugreift (dahingegen für Desktop-PC-Nutzer die Default-Theme)?

Gruß
Taurec

Avatar

Responsive1 0.1.5, compatible with MLF 2.4.11

by Auge ⌂ @, Tuesday, June 26, 2018, 14:08 (88 days ago) @ Taurec

Hallo

Nicht schlecht!

Danke.

Wie ist das für die Zukunft geplant? Wäre es möglich, die Theme entsprechend dem Zugangssystem des Benutzers automatisch aufzurufen (auch als Unregistrierter), wenn man z. B. mit Android bzw. einem mobilen Gerät zugreift (dahingegen für Desktop-PC-Nutzer die Default-Theme)?

Nein, das funktioniert nicht (zuverlässig). Es gibt Bibliotheken (auch in PHP), die von sich behaupten, Gerät und Browser des Besuchers zu erkennen, woraufhin man skriptseitig die Ausgabegenerierung beeinflussen kann. Da die Erkennung aber auf Informationen basiert, die vom Browser stammen und diese beliebig gestaltet bis gefälscht sein können, ist das meiner Meinung nach Murks.

Das Theme ist mittlerweile soweit gediehen, dass es, bis auf eine nicht geringe Menge mehr oder minder auffälliger Kleinigkeiten, sowohl auf einem Smartphone als auch in einem Desktopbrowser im Vollbildmodus auf einem Full-HD-Screen läuft. Es sieht dabei (meiner Meinung nach) auch einigermaßen ansehnlich aus, wobei ja gerade ich als Autor weiß, in welchen Ecken es klemmt und müffelt. :-)

Sich je nach verwendetem Gerät zwischen einem von mehreren Themes zu entscheiden, ist einfach nicht mehr nötig.

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

Avatar

Responsive1 0.1.6, compatible with MLF 2.4.13

by Auge ⌂ @, Thursday, August 16, 2018, 12:12 (37 days ago) @ Auge

Hello

After the release of MLF's version 2.4.13 a matching release of the theme Responsive1 stood on the plan. I built in the changes yesterday and packed the release of version 0.1.6 today. No further changes so far.

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

Responsive1 0.1.6, compatible with MLF 2.4.13

by candleman ⌂, Wednesday, August 22, 2018, 10:05 (31 days ago) @ Auge

.
Es wird von Mal zu mal besser.

Anmerkung:

die Formatierungs-Schaltflächen sind ein bisschen klein

[image]

Avatar

Responsive1 0.1.6, compatible with MLF 2.4.13

by Auge ⌂ @, Wednesday, August 22, 2018, 10:36 (31 days ago) @ candleman

Hallo

Es wird von Mal zu mal besser.

Danke. :-)

Anmerkung:

die Formatierungs-Schaltflächen sind ein bisschen klein

[image]

Siehe meine Antwort im Nachbarthread.

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

Responsive1 0.1.6, thread_connecting_line in allen Ansichten

by Taurec, Thursday, August 23, 2018, 08:47 (30 days ago) @ Auge

Hallo, Auge!

Vielleicht kannst Du mir auf die Sprünge helfen, da ich nach zwei Stunden schier am Ausrasten bin.

Ich habe an der (meines Erachtens schon jetzt sehr guten) Responsive-Theme herummanipuliert in der Hoffnung, vielleicht eine Version für mein Forum herzustellen, die ich den Nutzern als Alternative anbieten kann (womit ich alles in allem schon ziemlich weit gekommen bin).

Da es mir zum Unterscheiden der Beitragsbeziehungen essentiell erscheint, habe ich die thread_connecting_line wieder implementiert und dazu schlicht den Code aus dem CSS der Standardtheme kopiert:

 
ul.reply ul              { background:url(images/thread_connecting_line.png) repeat-y left center; }
ul.reply li:last-child>ul { background:none; }

Das hat für die Baumstruktur auch sehr gut funktioniert. Auch in der Tabellenansicht wird die Linie eingeblendet, allerdings für die nachfolgenden Kindelemente nicht wieder ausgeblendet.
Da die Einblendung in der Tabellenansicht prinzipiell funktioniert, dürften die Klassen richtig angesprochen sein. Allerdings ist mir schleierhaft, warum die Zeile ul.reply li:last-child>ul { background:none; } dann nicht greift. Mit meinen recht oberflächlichen, mehr try-und-error-basierten CSS-Kenntnissen bin ich jetzt durch und habe alle mir auch nur vage erscheinenden Varianten durchprobiert, ohne daß sich das untige Ergebnis genädert hätte.
:confused::confused::confused:

Baumstruktur (richtig):
[image]

Tabellenansicht (falsch):
[image]

Gruß
Taurec

Avatar

Responsive1 0.1.6, thread_connecting_line in allen Ansichten

by Auge ⌂ @, Thursday, August 23, 2018, 12:14 (30 days ago) @ Taurec

Hallo

Vielleicht kannst Du mir auf die Sprünge helfen, da ich nach zwei Stunden schier am Ausrasten bin.

Lass' es, lohnt sich nicht.

Ich habe an der (meines Erachtens schon jetzt sehr guten) Responsive-Theme herummanipuliert in der Hoffnung, vielleicht eine Version für mein Forum herzustellen, die ich den Nutzern als Alternative anbieten kann (womit ich alles in allem schon ziemlich weit gekommen bin).

Nur mal als Warnung vorweg. Ich habe an verschiedenen Stellen und auch im Threadbaum an den Klassennamen herumgefummelt. Deshalb werden beispielsweise die Links zum zusammenklappen der Threadbäume oder auch die Links für die Ajax-Vorschauen von Postings an vielen oder allen Stellen nicht angezeigt. Es würde mich nicht wundern, wenn ich nicht auch die Klassen in den Threadbäumen in den verschiedenen Ansichten unterschiedlich benannt habe.

Da es mir zum Unterscheiden der Beitragsbeziehungen essentiell erscheint, habe ich die thread_connecting_line wieder implementiert und dazu schlicht den Code aus dem CSS der Standardtheme kopiert:

 
ul.reply ul              { background:url(images/thread_connecting_line.png) repeat-y left center; }
ul.reply li:last-child>ul { background:none; }
 

Das hat für die Baumstruktur auch sehr gut funktioniert. Auch in der Tabellenansicht wird die Linie eingeblendet, allerdings für die nachfolgenden Kindelemente nicht wieder ausgeblendet.
Da die Einblendung in der Tabellenansicht prinzipiell funktioniert, dürften die Klassen richtig angesprochen sein. Allerdings ist mir schleierhaft, warum die Zeile ul.reply li:last-child>ul { background:none; } dann nicht greift.

Baumstruktur (richtig):
[image]

Tabellenansicht (falsch):
[image]

Habe ich in meinem Forum auch mal getan und komme zu einer weiteren anderen Darstellung.

Mein Forum, Tabellenansicht:
[image]

- Die erste Einrückung erfolgt ohne gepunktete Line (wie ich es mit ul.reply ul auch erwarten würde) (linke Box).
- Die gepunktete Linie ist vor dem ersten Häkchen zu sehen (Box rechts oben).
- Die gepunktete Linie ist hinter jedem letzten Häkchen zu sehen (Box rechts unten).

In der Threaddarstellung sieht das bei mir übrigens identisch aus. Ich muss da mal weiterprobieren.

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

Responsive1 0.1.6, thread_connecting_line in allen Ansichten

by Taurec, Thursday, August 23, 2018, 12:39 (30 days ago) @ Auge

Hallo!

Habe ich in meinem Forum auch mal getan und komme zu einer weiteren anderen Darstellung.

Mein Forum, Tabellenansicht:
[image]

- Die erste Einrückung erfolgt ohne gepunktete Line (wie ich es mit ul.reply ul auch erwarten würde) (linke Box).
- Die gepunktete Linie ist vor dem ersten Häkchen zu sehen (Box rechts oben).
- Die gepunktete Linie ist hinter jedem letzten Häkchen zu sehen (Box rechts unten).

Ja. Ich habe noch ein paar andere Einstellungen zur Darstellung/Einrückung des Threadbaumes aus der Standard-CSS überführt, die aber wohl nichts mit dem Problem zu tun haben und daher von mir nicht genannt wurden (im Grunde alles, was mit ul.thread und ul.reply zu tun hat).

Gruß
Taurec

Avatar

Responsive1 0.1.6, thread_connecting_line in allen Ansichten

by Auge ⌂ @, Sunday, August 26, 2018, 19:34 (27 days ago) @ Taurec

Hallo

Habe ich in meinem Forum auch mal getan und komme zu einer weiteren anderen Darstellung.

Mein Forum, Tabellenansicht:
[image]

- Die erste Einrückung erfolgt ohne gepunktete Line (wie ich es mit ul.reply ul auch erwarten würde) (linke Box).
- Die gepunktete Linie ist vor dem ersten Häkchen zu sehen (Box rechts oben).
- Die gepunktete Linie ist hinter jedem letzten Häkchen zu sehen (Box rechts unten).

Ja. Ich habe noch ein paar andere Einstellungen zur Darstellung/Einrückung des Threadbaumes aus der Standard-CSS überführt, die aber wohl nichts mit dem Problem zu tun haben

Da ich die nicht kenne, kann ich natürlich auch nichts darüber sagen. Die Entwicklerwerkzeuge deines Browsers zeigen dir aber, welche CSS-Eigenschaft an welchem Element aktiv ist oder eventuell überschrieben wurde. Zudem kannst du die Eigenschaften einzeln aus- und einschalten. Im Firefox erreichst du sie mit aktiviertem klassischen Menü über Extras=>Web-Entwickler=>Inspektor, ansonsten über das Hamburger-Menü=>Web-Entwickler=>Inspektor oder [STRG]+[Umschalt]+[C]. Im Chrome heißen sie "Entwicklerwerkzeuge", andere Browser kann ich aktuell nicht prüfen. In den meisten Browsern sind die Entwickerwerkzeuge generell mit [F11] aufrufbar, wenn ich mich nicht irre.

Ich habe jedenfalls eine funktionierende Lösung für mein Forum gefunden, indem ich den Quelltext in Alfies Forum geprüft habe. Er war es, der die Verbindungslinien in die kleine Welt von MLF eingeführt hat, woraufhin ich sie für MLF1 und später Alex für MLF2 übernommen haben.

[image]

Der Trick besteht darin, die Einrückung nicht mit margin sondern mit padding zu realisieren.

Mein alter CSS-Code:

ul.reply, ul.deep-reply, ul.very-deep-reply {
 margin: 0 0 0 0.75em;
 margin: 0 0 0 0.75rem;
 padding: 0;
 list-style-type:none;
 max-width:100%;
}
ul.reply ul {
 background: url(images/thread_connecting_line.png) repeat-y left center;
}
ul.reply li:last-child > ul {
 background: none;
}

Mein neuer CSS-Code:

ul.reply, ul.deep-reply, ul.very-deep-reply {
 margin:0;
 padding: 0 0 0 0.75em;
 padding: 0 0 0 0.75rem;
 list-style-type:none;
 max-width:100%;
}
/* die Angaben zu ul.reply ul und ul.reply li:last-child > ul ändern sich nicht */

Zudem habe ich für mein Forum testweise ein border-left statt des Hintergrundbildes eingesetzt, wie es Alfie damals auch schon vorschlug und selbst so implementierte. Beim zoomen am Desktop-Browser scheint die Breitenangabe von 4px für die Border zum verkleinert dargestellten SVG-Bild für den Pfeil, dessen Körper in Originalgröße 24px breit ist, zu passen.

Dafür, dass das immer und überall so ist, übernehme ich aber keine Gewährleistung. Die gepunktete Linie des PNG-Bildes wirkte auf mich jedenfalls einen Ticken zu schmal für den Pfeil.

ul.reply ul {
 border-left: 4px dotted #bfc1be;
}
ul.reply li:last-child > ul {
 border: none;
}

Das Ganze noch einmal im Vivaldi bei einer Vergrößerung der Seite auf 250%. Der Vivaldi verwendet die Chromium-Engine, womit das im Chrome identisch aussehen sollte.

[image]

Wie oben, bezogen auf die Entwicklerwerkzeuge, schon geschrieben, kann ich keine weiteren Tests mit anderen Browsern durchführen. Das Ergebnis kann sich aber meiner Meinung nach sehen lassen [edit]und es funktioniert sowohl in der Thread- als auch in der Tabellen-Ansicht[/edit].

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

Responsive1 0.1.6, thread_connecting_line in allen Ansichten

by Taurec, Tuesday, August 28, 2018, 11:11 (25 days ago) @ Auge

Hallo, Auge!

Danke! Ich habe das Problem mit der Falschdarstellung in der Tabellenansicht selbst inzwischen gelöst, indem ich die Klassennamen für die Eingangs- und Folgebeiträge überall an die Namen der Standardtheme angepaßt bzw. den Coden an diesen Stellen wieder an die Standardtheme angeglichen habe. Die CSS-Datei hat dadurch und durch andere Änderungen an Umfang wieder gewonnen.
Zudem habe ich das PNG- gegen ein SVG-File getauscht, so daß es jetzt so aussieht wie auf Deinem Screenshot.

Als Ergebnis wird es wohl darauf hinauslaufen, daß ich bei künftigen Updates der Theme einzelne sinnvolle Änderungen manuell einpflegen muß, nachdem ich (unter Nutzung der Entwicklerwerkzeuge) in einigen Dateien und an vielen Stellen den Code geändert habe, um das Layout meinen Bedürfnissen anzupassen (u. a. habe ich es hinbekommen, daß die Navigationslinks und das Usermenu auf engen Displays als "Hamburger-Menüs" angezeigt werden, was schon mal dem Herunterscrollen vorbeugt, wenn ich das Forum auf dem Mobiltelefon öffne.)

Gruß
Taurec

RSS Feed of thread
powered by my little forum