[live] [merged] Visuelle Verbesserungen

Hallo zusammen,

ich nutze selbst ein paar Patches, die vielleicht für den einen oder anderen von euch von Interesse sein könnten. Markus hat vorgeschlagen, solche Patches hier im Forum in jeweils einem Thread kurz vorzustellen und euer Votum einzuholen, ob sie ins Git sollen:

• 0008 Revised placement of ellipses and 'more' link, added blank line above details link.zip

Die Abfolge von Ellipsen ("…") und dem Link "mehr" finde ich von der Anordnung her unschön. Anstelle von "mehr …" gefiele mir "… mehr" deutlich besser. Außerdem steht der Text an einigen Stellen direkt am Rahmen an, während er an anderen Stellen um ein paar Pixel abgesetzt ist. Auch sollte in Popups der Hinweis "Für Details klicken" etwas vom davorstehenden Text abgesetzt sein.

Dieser Patch stellt die Abfolge von Ellipsen und dem "mehr"-Link um und setzt die Ellipsen mit einem Leerzeichen vom Text ab, sodass bei einem Satzende nicht gleich vier Punkte hintereinander kommen. Die Programminformationen sind einheitlich abgesetzt und der Klick-Hinweis in den Popups ist etwas vom Text abgesetzt.

Weil pro Beitrag immer nur fünf Dateien hochgeladen werden können, findet ihr die Screenshots weiter unten.

Viele Grüße
Stefan

Was läuft?

wird zu:

Hier noch mit Fortschrittsbalken:

Aufnahmen

wird zu:

Habe den Patch gerade nochmals gegen den aktuellen Master ("Duplicates") getestet. Bei mir sieht es so aus:

Also so, wie es eigentlich aussehen sollte.

Viele Grüße

Stefan

Du beziehst die auf die Detailinformationen, die du in der Zeitleiste erst nach dem Klick auf den "mehr"-Link erhältst. Sollte also auch bei dir passen…

Hi Markus,

erst einmal vielen Dank fürs Mergen meines Patches. Beim Testen sind mir noch ein paar stilistische Differenzen zwischen "Was läuft?" und der Zeitleiste aufgefallen. Vergleicht man die Abstände von "Was läuft?":

… mit der Zeitleiste:

… stellt man fest, dass die Einrückung in der Spalte fast doppelt so groß ist; tatsächlich spezifiziert styles.css zweimal einen Rand, einmal für den Block unterhalb der Titelleiste und zusätzlich noch für jedes darin liegende Element. Außerdem wird – anders als bei "Was läuft?" – der Titel immer als Link ausgeführt, selbst wenn die gesamte Information dargestellt werden kann und man somit keinen Mehrgewinn hat. Auch weichen Abstand und Farbe des "mehr"-Links voneinander ab.

Der beigefügte Korrektur-Patch:

• 0008a Revised display of multischedule.zip

behebt diese Unterschiede, sodass beides jetzt gleich aussieht und sich auch bezüglich der Links gleich verhält:

Vielleicht kannst du diese Korrekturen noch aufs Git bringen?

Danke & Grüße
Stefan

Super, danke!

Spannende Frage… hier ein paar Gedanken von meiner Seite:

Das betrifft ja "nur" die Detailfenster, deren Links am (sichtbaren) unteren Rand des Browserfensters stehen. Man kann die Detailfenster doch ganz leicht über die Titelleiste nach oben bzw. links verschieben oder das Browserfenster, das beim Öffnen gegebenenfalls um den nicht sichtbaren Teil "höher" bzw. "breiter" wird, nach oben bzw. links scrollen. Beides führt dazu, dass man den gesamten Inhalt des Detailfensters sehen kann.

Nehmen wir mal kurz man, man würde das Detailfenster per Javascript horizontal und vertikal automatisch so positionieren, dass das die linke obere Ecke der Titelleiste und ein möglichst großer Teil des Inhalts sichtbar wären. Dabei würden unter anderem die Abmessungen des Viewports im Browser, also die Höhe und Breite des sichtbaren Teils der Webseite, mit einfließen. Das Detailfenster erscheint somit nicht mehr an der Stelle, auf die man geklickt hat, sondern wandert mehr oder weniger weit nach links oben. Die Kontrolle der Position anhand des Mausklicks mag vor allem bei langen Titeln von Aufzeichnungen hilfreich sein.

Und wenn man den Gedanken weiterspinnt, könnte man den Wunsch haben, dass die Fenster beim Scrollen immer im Viewport sichtbar bleiben. Wie würde man dann aber mit der zunehmenden "Verschattung" des eigentlichen Inhalts bei vielen offenen Detailfenstern umgehen. Nächster Wunsch wäre dann wohl ein Knopf, der alle dieser Detailfenster auf einen Schlag schließen könnte (was derzeit ein Reload erledigt). Wo ist da das sinnvolle Ende der Fahnenstange?

Auch bin ich mir relativ sicher, dass es je nach Gerät (Handy, Tablet, Computer) aufgrund der stark unterschiedlich dimensionierten Viewports wieder Situationen gibt, wo die Automatik nicht passt.

Lohnt das Ganze also den Aufwand?

Viele Grüße
Stefan

Quote from nobanzai

Mir persönlich würde es eh reichen, immer nur ein Detailfenster offen zu haben, das sich sogar schließt, wenn man irgendwo außerhalb hinklickt.

Irgendwo hinklicken ist in in vielen Listen nicht so ganz einfach. Wenn man nicht aufpasst, trifft man fast immer irgendeinen Link… ist mir schon oft genug passiert.

Ich habe im Kontext von Streamen von Aufzeichnungen im Browser in Variante 0014g noch ein paar Schönheitskorrekturen im Setup vorgenommen, z.B. Eingabefelder so justiert, dass sie nicht mehr die Schattierung der Trennlinien zwischen den einzelnen Abschnitten unterbrechen, bündig abschließen usw.

MarkusE: Diese Änderungen betreffen in styles.css nur die table.dependent. Der Rest sind Korrekturen von uneinheitlichem Whitespace (Einrückung mal per Space, mal per Tab) und die notwendigen Einstellungen in table.streaming, damit sich der Player in die Fenstergröße des Browsers "einskaliert". Letzteres erfordert aber noch ein Update von stream.ecpp, weil ein zusätzliches div namens player-container als "Skalierungsrahmen" benötigt wird und die Clappr-Parameter entsprechend angepasst werden müssen.

Viele Grüße

Stefan