Plugin PageXplorer

[Gonzo Gates]

Hallo Gert,

+/- als Grafik finde ich auch besser. Ich hatte das letzte Mal vergessen zu schreiben, dass +/- in der Ausrichtung nicht einheitlich erscheinen. Gerade habe ich die Demoseite in meiner GhostBSD VM mit Firefox aufgerufen. Sieht auch gut aus. Dann hatte ich spaßeshalber auf Druckansicht geklickt. Sieht bei Win11 genauso aus, wie bei BSD. Anders als die Seitendarstellung. Da es sich um eine Demo handelt, gehe ich davon aus, dass das noch geändert wird oder soll es so bleiben?

Gruß
Gonzo

[Gert]

Hallo Gonzo,

die Druckansicht ist in Ordnung so, die hat keinen Rand. Das macht dann das Druckprogramm.

Ich habe jetzt auch noch den Hintergrund rausgenommen, der hat in der Druckansicht auch nichts zu suchen. Der Ausdruck soll ja sparsam sein, also nur die Inhalte, und nicht das Design.

Der Druckbefehl macht dann in jedem Browser was anderes. Mein FF z. B. zeigt in der CMSimple Druckansicht das eingeklappte Inhaltsverzeichnis, wenn man aber den Befehl zum drucken gibt, ist es aufgeklappt und nimmt 4 Seiten ein, auch nicht gerade sparsam.

Opera, Chrome und Edge machen das nicht, die brauchen nur 1 Blatt Papier. Da haben wir also wohl keinen Einfluss drauf,

Gert

[Gert]

Dann hatte ich spaßeshalber auf Druckansicht geklickt. Sieht bei Win11 genauso aus, wie bei BSD. Anders als die Seitendarstellung.

Die Druckansicht zeigt das grundlegende CSS, also die "normale Ansicht".

Darauf bauen dann die Ansichten für die Sidebar und für den Inhaltsbereich auf, die werden im Download gar nicht dabei sein, denn sie sind entweder auf das Template abgestimmt (Sidebar) oder zur Demo, was so geht (Content Bereich).

In der Druckansicht gibt es weder Sidebar (div.tplge_sidebarNav) noch Content Bereich (div.tplge_content), deshalb zeigt sie den PageXplorer so, wie er normalerweise aussieht,

Gert

[Gert]

Dann hatte ich spaßeshalber auf Druckansicht geklickt. Sieht bei Win11 genauso aus, wie bei BSD. Anders als die Seitendarstellung. Da es sich um eine Demo handelt, gehe ich davon aus, dass das noch geändert wird oder soll es so bleiben?

Hallo Gonzo,

jetzt habe ich den Pluginaufruf auf der Demoseite in <div class="pex_demo"> ... </div> gepackt und das CSS entsprechend geändert. Dieses div ist nun Bestandteil des Inhaltes und wird mit an die Druckansicht übermittelt.

Jetzt sieht der PageXplorer aauf der Demoseite anders aus als in dem ersetzten Inhaltsverzeichnis:

Demoseite: https://www.ge-webdesign.de/demotpl/?Pa ... er_cssTree

Inhaltsverzeichnis: https://www.ge-webdesign.de/demotpl/?sitemap

Gert

[Gonzo Gates]

Hallo Gert,

die neue Demo https://www.ge-webdesign.de/demotpl/?Pa ... er_cssTree habe ich aufgerufen und bin auf Duckansicht gegangen. Im Drucken-Dialog in der Vorschau zeigt FF alles aufgeklappt, aber du sagtes ja, dasss man da nix machen könnte. Das selbe mit Edge gemacht und der zeigt im Drucken-Dialog in der Vorschau auch alles so an, wenn ich einen Punkt in der Druckvorschau geöffnet hatte, wie es sein soll. Leider vergisst er die Grafiken +/- und graunix. Opera und Chrome konnte ich nicht testen, da ich die Browser nicht installiert habe. Mit Safari auf unserem iPad (18.6.2) habe ich auch getestet und Safari stellt im Drucken-Dialog in der Vorschau einen aufgeklappten Punkt dar und auch alle Grafiken. Die Standardbrowser von Gnome und KDE habe ich mir erspart.

Apropo mehrere Browser: vor 23 Jahren hatte ich parallel IE 4, 5, 5.5 und 6 auf meinem Rechner, weil sich jemand die Mühe gemacht hat die relevanten .dll-Dateien in einzelne Ordner zu packen. Das war damals wichtig, weil man für die erstellten Websites Browserweichen einbauen musste. Natürlich ging es auch in den CSS und machte das dann mit den Browser-Hacks (auch für andere Browser) ein wenig voluminöser. Das konne damals die Ladezeit einer Seite verlängern. Es gibt tatsächlich noch Websites in denen sind Browserweichen für IE 8 und 9 eingebaut

Ich habe mir das CSS angesehen und bemerkt, dass du da mit Pseudo-Elementen nicht sparst. Ich hätte den Hintergrund in rgba(224,230,233,0) geschrieben, wei man da noch die Möglichkeit von Deckkraft hat - Geschmackssache.

Gruß
Gonzo

[Gert]

Ich habe mir das CSS angesehen und bemerkt, dass du da mit Pseudo-Elementen nicht sparst.

Die Idee habe ich ja von hier:

https://iamkate.com/code/tree-views/

Das Original CSS findest Du ganz unten auf der Seite. Ich habe das extrem abgespeckt, auf die Linien verzichtet und das ganze responsiv gemacht. Wenn Du meine Demoseite schmal ziehst wirst Du merken, dass die Einrückungen weniger werden, besonders gut zu sehen im Inhaltsverzeichnis, wenn Du es mit dem Button oben mit einem Klick komplett öffnest.

Am Ende kann man sich die riesen Einrückungen z. B. in der Sidebar nicht leisten.

Ich hätte den Hintergrund in rgba(224,230,233,0) geschrieben, wei man da noch die Möglichkeit von Deckkraft hat - Geschmackssache.

Über Geschmack kannst Du mit Edi streiten

Gert

[Gonzo Gates]

Hallo Gert,

über Geschmack lässt sich bekanntlich stereiten, da hast du Recht. Ich sage nur Dr. de Toma...

Vielen Dank für den Link auf 'Tree views in CSS'. Durchgelesen, HTML-Datei gebaut, CSS und HTML eingefügt, expand-collapse.svg heruntergeladen und hat, wenn auch ein wenig gedrängt aussehend, sofort geklappt. Und das AufZu funktioniert tatsächlich mit der Tastatur - KOOL!

Bei der Gelegenheit habe ich dein CSS nochmal genauer unter die Lupe genommen. Du verschiebst die Anzeige für + und - über das expand-collapse.gif. Finde ich gut. Außerdem haust du mit dem Vorschlaghammer '!important' auch reichlich zu

Gruß
Gonzo

[Gert]

Außerdem haust du mit dem Vorschlaghammer '!important' auch reichlich zu

Das mache ich während der Entwicklung gerne mal so, wenn anderes CSS überschrieben wird. Da muss man nicht so auf die Reihenfolge achten. Jetzt bin ich ja so gut wie fertig, alles ist sortiert und ich habe gerade die Hilfedatei geschrieben. Also habe ich alle !important mit "alle ersetzen" gelöscht - scheint alles so wie vorher. Es geht also auch ohne

Gert