Benutzeroberfläche (Style) im Wiki

[ph1959de]

Die Standard-Einstellung für die Wiki Benutzeroberfläche (Style) ist "Vector alt (2010)" - und obwohl auch "Responsiven Modus aktivieren" eingestellt ist, hat das bei diesem Skin keine zufriedenstellenden Auswirkungen bei der Ansicht von Wiki-Seiten auf mobilen Endgeräten.

Da nicht-registrierte Benutzer im Wiki keine Möglichkeit haben, den Style umzustellen, wird der Standard auf "MinervaNeue" umgestellt.

Kommentare, Kritik, Anregungen dazu bitte in diesem Thema abgeben.

[Dr. Boris Neubert]

Hallo Peter,

ich sehe, was Du meinst, und habe gerade MinervaNeue in meinen persönlichen Einstellungen fürs Wiki gewählt. Der Style ist gut, ich bin für die Anpassung der Vorgabe.

Viele Grüße
Boris

[Otto123]

Hallo,

bei der Umstellung war für mich ein bisschen die Prämisse es soll aussehen wie vorher. Deswegen ist der alte Style von mir wieder eingearbeitet wurden.
Ich selbst nutze Vector 2022 - dort gibt es wenigsten noch ein kleines bisschen vom alten Wiki "FHEM" (Logo). Das linke Menü ist allerdings in der mobilen Ansicht dominant oben.
Bei MinervaNeue ist dann alles ziemlich kühl und schwarz weiss, dass allen bekannte Menu auf der linken Seite fehlt komplett, auch in der PC Ansicht.

Ich finde MinervaNeue ist ein "großer Schritt" da ist fast nichts mehr von dem "was mal war".

Aber ich weiß auch: die "alte" Ansicht Querformat im Browser spielt heute quasi keine Rolle mehr, es muss am Smartphone lesbar sein sonst ist es "out"

Gruß Otto

[ph1959de]

Ich finde MinervaNeue ist ein "großer Schritt" da ist fast nichts mehr von dem "was mal war".

Aber ich weiß auch: die "alte" Ansicht Querformat im Browser spielt heute quasi keine Rolle mehr, es muss am Smartphone lesbar sein sonst ist es "out"

Hauptgrund für den vorgeschlagenen Wechsel ist, dass damit die "nur Leser" das "responsive Design" bekommen - und das verträgt sich eben insbesondere nicht mit der Navigationsleiste auf der linken Seite.

Ich selbst bevorzuge zur Bearbeitung weiterhin den "alten" Style, als registrierter Benutzer habe ich im Unterschied zu vielen anderen eben den Vorteil, den Style über die Einstellungen wechseln zu können.

[Otto123]

Ja habe ich verstanden.
Vector 2022 ist auch responsive - dabei bleibt das alte Menu, schiebt sich allerdings in Front und man kann es zum "Hamburger Menu" zuklappen.
Bei MinervaNeu ist aus meiner Sicht das alte Menu verloren, das wird nie wieder einer sehen.
Da müssten wir dann irgendwie das Hamburger Menu von MinervaNeu anpassen 

[ph1959de]

Ja habe ich verstanden.
Vector 2022 ist auch responsive - dabei bleibt das alte Menu, schiebt sich allerdings in Front und man kann es zum "Hamburger Menu" zuklappen.
Bei MinervaNeu ist aus meiner Sicht das alte Menu verloren, das wird nie wieder einer sehen.
Da müssten wir dann irgendwie das Hamburger Menu von MinervaNeu anpassen 

Ah, gute Argumente - ich habe mich wohl von meinem ersten kurzen Eindruck zu "Vector 2022" verleiten lassen, den gleich auszuschließen.

Bin jetzt schon bereit, umzuschwenken auf die aktuellere Version von Vector, ich denke mittlerweile, damit ist der Tradition und dem Fortschritt gleichermaßen gedient. Ich ergänze die Wiki-Hauptseite um einen Screenshot vom neueren Vector und lasse die Entscheidung zwischen MinervaNeu und Vector2022 noch eine Weile offen.

[xenos1984]

Mein Favorit wäre auch klar Vector 2022 - den Stil finde ich übersichtlicher.

[Otto123]

Ich bin nicht sicher, aber es kann auch sein, dass unser altes Menü eine Art Sonderlösung (historisch bedingt) ist?
Vielleicht lohnt es, sich mal mit den anderen Styles zu beschäftigen und das Menü so neu zu machen, dass es wirklich in allen Styles vorhanden ist?

[krikan]

Ich bin nicht sicher, aber es kann auch sein, dass unser altes Menü eine Art Sonderlösung (historisch bedingt) ist?

Das linke Seitenmenü ist über https://wiki.fhem.de/wiki/MediaWiki:Sidebar gelöst. Das ist mWn keine Sonderlösung.
Nach den Erläuterungen in https://www.mediawiki.org/wiki/Manual:Interface/Sidebar zur Mobilansicht muss man mit einen "Hook" (bäh) arbeiten, damit die Sidebar in der Mobilansicht angezeigt wird.
Vector 2022 mit Sidebar-Menü funktioniert offentsichtlich problemlos auch ohne "Hook" (warum?), darum bin ich für das hooklose Vector 2022.

[ph1959de]

Danke, Christian, dass Du das überprüft hast.

Ich arbeite jetzt seit ein paar Wochen auf dem Desktop mit Vector2022 und empfinde es als sehr gut benutzbar - ich vermisse das alte Vector also nicht.

Wir können meiner Ansicht nach gern auf Vector2022 umstellen - Christian, könntest Du das doch übernehmen? Ich habe derzeit leider zu viele andere Baustellen und komme vor Ende April sicher nicht dazu, den Zugriff auf das Wiki-System einzurichten.

[krikan]

Habe den Standard-Skin im Wiki jetzt von "Vector alt (2010)" auf "Vector (2022)" umgestellt.

Registrierte Wiki-Nutzer können den Skin nach Anmeldung im Benutzerkonto unter "Einstellungen/Benutzeroberfläche" weiterhin anpassen.

Gruß, Christian

[DasQ]

also da sind aber noch darstellungsfehler drin.

Auf dem desktop hab ich über dem inhaltsverzeichniss das hauptmenu.

altes styl 2010Du darfst diesen Dateianhang nicht ansehen.
neu Du darfst diesen Dateianhang nicht ansehen.

im Iphone nicht.

Horizontal
Du darfst diesen Dateianhang nicht ansehen.
Vertikal
Du darfst diesen Dateianhang nicht ansehen.


im  Ipad ist das verzeichnis total zerhagelt (Chrome/Safari7Firefox)
Du darfst diesen Dateianhang nicht ansehen.Du darfst diesen Dateianhang nicht ansehen.Du darfst diesen Dateianhang nicht ansehen. 

[krikan]

Was Du im Bild zeigst ist so gewollt (https://www.mediawiki.org/wiki/Skin:Vector/2022/Design_documentation)
Das Seitenmenü steht immer über dem Inhaltsverzeichnis. Man kann es aber ausblenden durch einen Klick darauf.

[DasQ]

Kann ja nicht sein ... in mobil ist es weg oder total zerhagelt

[krikan]

Sorry, die Ipad und Mobilscreenshots habe ich eben noch nicht gesehen; versuche das jetzt mal auf dem Iphone nachzuvollziehen. Melde mich....

[krikan]

Auf meinem Iphone und Safari kann ich das nicht nachvollziehen. Sieht bei mir korrekt aus.
Über die Entwicklertools hatte ich das mit Firefox/Edge vorher schon getestet und keine Auffälligkeiten gefunden.
Hast Du mal einen kompletten Reload der Seite ausgeführt? (vermutlich:ja)
Hast Du mal als User angemeldet und abgemeldet probiert?

[DasQ]

Sorry musste das posting ja von verschiedenen Geräten aus editieren, drum kamen da noch Screenshots dazu.

Wie gesagt iPhone ist ohne Hauptmenu und nicht eingeloggt.

Am iPad war ich auf den verschiedenen Browser nicht angemeldet.

Angemeldet war ich nur am Desktop

***********edit *********

weil ich gerade am testen bin. am desktop (macbook pro) unter chrome und safari fehlt auch das hauptmenu und wenn man auf "verbergen" neben dem inhaltsverzeichniss klickt ... ist es weg ... für immer (also läst sich nicht mehr einblenden dazu muss man es refreshen F5)

ich hab jetzt mal in der chrome devtoolbar rumgespielt mit verschiedenen geräten auf vertikal und horizontal, aber hauptmenu ist da nie zu sehen

[krikan]

Das Seitenmenü (Hauptmenü) wird beim Skin Vector2022 standardmäßig ohne Benutzeranmeldung nicht angezeigt ("eingeklappt").
Nach Benutzeranmeldung wird das Seitenmenü ausschließlich am Desktop angezeigt ("ausgeklappt").

Ein-/Ausklappen sollte jeweils durch Klick auf das Burger-Menü funktionieren.

Iphone und Desktop sind bei Dir nach meinem Verständnis also richtig.

ipad-Darstellung kann ich auch noch nochmaligen Versuchen nicht nachvollziehen. Am Destop mit den Entwicklertools auf Ipad und Co. und bei einem Androidtablet sieht alles korrekt aus.

Vielleicht wartest Du hinsichtlich ipad noch ein wenig; wir haben in den nächsten Tagen -sofern es keine Inkompatibilitäten gibt- weitere mediawiki-Updates auf dem Plan.

[krikan]

Dein edit habe ich erst nach abschicken gesehen....
Und ich habe kein Mac, ipad ...

[DasQ]

also auf den andern geräten scheint es jetzt zu passen, nur ist am ipad immer noch der unschöne strich im inhaltsverzeichniss.

im devtool passt es, nur an der echten hardware nicht.

[krikan]

wenn man auf "verbergen" neben dem inhaltsverzeichniss klickt ... ist es weg ... für immer (also läst sich nicht mehr einblenden dazu muss man es refreshen F5)

Nein, das ist nicht weg, sondern wird neben den Seitentitel als eingeklapptes Menü verschoben:
Du darfst diesen Dateianhang nicht ansehen.
Dort kann man es wieder ausklappen und an den Rand verschieben.

Probiere das bitte mal aus.

Bleibt wohl "nur" noch die Merkwürdigkeit auf dem ipad. Bitte habe noch ein wenig Geduld...

[Otto123]

Ich habe die angebissenen Früchte nicht - aber so ganz allgemein: das "zerhagelt" könnte vorkommen wenn alte Webseiten Teile im Cache stehen. Also unbedingt mal den Browsercache löschen!

[DasQ]

Zum einen bin ich WebDev (was aber mal grundsätzlich nix bedeutet, aber du kannst davon aufgehen das das als erstes gemacht wurde)

Zum andern ist der Effekt auf 3 verschiedenen Browsern... wovon ich ein in der Regel nicht nutze (Safari)


******edit********
Sorry war gestern beschäftigt. Hier anbei ein Screenshot von der DOIF Wiki Seite
Aus Safari in IPAD 8
Ähnliche Überlagerungen und diesmal das was den blauen Strich erzeugt horizontal und lesbar.
Du darfst diesen Dateianhang nicht ansehen.

Und wenn man das Inhaltsverzeichnis einklappt und wieder aufklappt, ändert es seine Gridposition mit neuen Überlagerungen. Man kann es aber wieder in die Seiten leisten verschieben. (Soll das so?
Du darfst diesen Dateianhang nicht ansehen.

[DasQ]

Zwei Hamburger Menu trampelt halt auf allem rum was ich mal gelernt hab. Usebility ist nicht gegeben, intuitiv ist was anderes. Google wird die seit downranken. Bzw. Sollte schon gemosert haben. Barrierefreiheit fehl am Platz.

Im Original sind die beiden Hamburger Menu direkt unter einander. Was logisch Sinn ergibt. Da versteht man das sie zusammen gehören.

******* edit ********
Das Theme strotzt vor Fehlern ...

Ich schau mir mal, wenn ich große Lust hab, morgen(heut) des css und die mediaquerys an, da ist sicher der Hund begraben.

Also Fehler ist noch nicht gefunden, aber es ist ein fhem/wiki/Skin Problem. Im mediawiki auf der Seite von vector2022 besteht das Problem nicht. Dort sind demoseite durch die ich mich mal geklickt hab. Nada, dort ist alles im grünen Bereich.

Dann ist mir hier im Wiki was aufgefallen. Zum einen wird hier die max-width beschränkt. Auf den Demo Seiten nicht. Dann wie ich hier die untermenu vom Inhaltsverzeichnis einklappe. Verschwindet der Fehler.

Sind die Begriffe (1),,unterabschnitt"gefolgt von der [unterabschittüberschrift](der unschöne blaue Balken)(2)"umschalte" (zu sehen im ersten Screenshot im posting oben drüber), kommt aus dem fhem Wiki. Ich befürchte das bastelt jemand per PHP hin. Noch hab ich es nicht gefunden.

Dann ein anderes Problem und zwar ist im horizontal hier am iPad, die inhaltsverzeichnis Länge größer als der viewport. Sind die Unterpunkte aufgeklappt, werden Teile unerreichbar.

Wie gesagt das ist nur hier im fhem Wiki so. Auf den Demo Seiten von Media Wiki funktioniert das teilweise komplett anders. (Per hover einklappendes hauptmenu) saubere Überlagerungen.

[Otto123]

Ich schließe nicht aus, dass in der Upgrade Historie des Wikis über mehrere Versionen der letzten Jahre Fehler entstanden sind. Es kann gut sein, dass das .css Macken enthält. Ich habe dort vor einem Jahr bei der Umstellung lediglich ein paar Farbeinträge gemacht.
Es gab aber in der Vergangenheit ein paar installierte Erweiterungen und Modifikationen. Da könnte es Reste oder Kollisionen geben.
Viel kann ich bei der Fehlersuche nicht beitragen, bei der Behebung aber gerne.

Edit: ich kann die gezeigten Fehler am Ipad meine Enkels nachvollziehen. 

Aus meiner Sicht sind es nicht zwei Hamburger sondern ein Hauptmenü und ein Inhaltsverzeichnis (bei manchen Artikeln). Im alten Style war das Inhaltsverzeichnis fest über den Text genagelt, das hat mir auch gar nicht gefallen.

Der Export und Import der Seiten, wie Martin ihn damals vorgeschlagen hat, führte bei mir zu einem nicht brauchbaren Ergebnis.

[krikan]

Auf den Demo Seiten von Media Wiki funktioniert das teilweise komplett anders.

Welche mediawiki-Verson liegt den Demoseiten zugrunde? Kannst Du bitte den Link posten?

[DasQ]

Also das hier ist fehlerfrei

https://www.mediawiki.org/wiki/Skin:Vector/2022/de
dort gibt es eben diese Beispiele Seiten

https://en.wikipedia.org/
https://vi.wikipedia.org/
https://test.wikipedia.org/


*******edit********

Und hier noch ein paar Screenshots von den Demo Seiten (wie es aussehen sollte)
Aus jetzt Chrome im iPad horizontal ausgerichtet)Du darfst diesen Dateianhang nicht ansehen.Du darfst diesen Dateianhang nicht ansehen.Du darfst diesen Dateianhang nicht ansehen.   

Und von der fhemwikiseite (einmal die inhaltsverzeichnissunterpunkte ein.- u ausgeklappt.Du darfst diesen Dateianhang nicht ansehen.Du darfst diesen Dateianhang nicht ansehen. 

[DasQ]

ich glaub ich hab die stelle im html gefunden.
konkret scheint es mit der viewport höhe in dem mediaquery zusammen zu hängen stauch ich das browserfenster auf unter 682px tauchen die zeilen auf und bei 706px verschwinden sie. aber noch hab ich es noch nicht ganz raus, woher das kommt. ich versuch das auf einer media-wiki seite die ich zu testzwecken gehostet hab nach zu vollziehen. aber ich denke es wird per PHP css nachgeladen an das ich nicht dran komm.
im webdev tool von safari seh ich ein psydoselektor ::before
Du darfst diesen Dateianhang nicht ansehen.

Code Auswählen Erweitern

<li id="toc-Datenbank" class="sidebar-toc-list-item sidebar-toc-level-1 sidebar-toc-list-item-expanded sidebar-toc-list-item-active">
            <a class="sidebar-toc-link" href="#Datenbank">
                <div class="sidebar-toc-text">
                <span class="sidebar-toc-numb">3</span>Datenbank</div>
            </a>
           
                <button aria-controls="toc-Datenbank-sublist" class="mw-ui-icon mw-ui-icon-wikimedia-expand mw-ui-icon-small sidebar-toc-toggle" aria-expanded="true">
                    Unterabschnitt Datenbank umschalten
                </button>
           
            <ul id="toc-Datenbank-sublist" class="sidebar-toc-list">
                <li id="toc-Tabellen" class="sidebar-toc-list-item sidebar-toc-level-2">
            <a class="sidebar-toc-link" href="#Tabellen">
                <div class="sidebar-toc-text">
                <span class="sidebar-toc-numb">3.1</span>Tabellen</div>
            </a>

dann h

[Otto123]

Nur als Zwischeninfo: Wir haben heute morgen (10:00 ...)  das Wiki auf die LTS Version 1.39.7 gehoben. Im Changelog stand auch, das Vector 2022 gepatched wurde.

[DasQ]

Problem besteht weiterhin

Im Media Wiki selber sieht das so aus.(2. Screenshot)