Responsive1 0.1.6, thread_connecting_line in allen Ansichten (Design/Themes)

by Taurec, Thursday, August 23, 2018, 08:47 (764 days ago)

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 (764 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 (764 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 (760 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 (759 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