Hilfe: Wer baut Quick-Access-Menü?

[Matthias Scharwies]

Guten Morgen,

im Wiki gibt es ja die die #dokuwiki__pagetools an der rechten Seite.

Die wollen wir durch ein Quick-Access-Menü ersetzen.

Ziel: auf breiten Bildschirmen rechts, auf kleinen Viewports unten anzeigen.

Wer hätte Zeit und Lust ein funktionsfähiges Beispiel zu entwickeln?

Hier ist ein erster, nicht funktionsfähiger Entwurf.

Lastenheft

Es gibt einige Fragen / Besonderheiten:

1. HTML

Welche Links braucht „man“ denn überhaupt?

• Bis jetzt gab's einen Anmelden-Link für unangemeldete Besucher.
• den Navlink zu den Werkzeugen, bzw. zur Nav-sidebar links erst auf kleinen Bildschirmen einblenden?
• Sind die last-changes für alle interessant?

Ist das HTML so ok?

Vorschläge?

2. CSS

Bis jetzt ist die Navigation rechts außerhalb des body. Auf mittelgroßen Viewports geht der body bis an den Rand und die Navigation ist nicht zu sehen. Das sollte besser gelöst werden.

Am Hackathon einigten wir uns darauf, dass die Icons rechts sichtbar sind und bei hover/focus die Linktexte nach links ausfahren. Wie sollte das auf kleinen Bildschirmen geregelt sein?

Das jetzige Menü ist mir zu bunt und trotzdem zu wenig auffällig. Wir dachten an Icons mit schwarzem/ dunklen Hintergrund und weißer Schrift,. Bei :hover könnten die Links einen anderen Hintergrund kriegen.

Vorschläge?

3. JS

Das Menü wird in der Mediawiki.Common.js dynamisch in die Überschrift eingefügt:

   headingelement.append("<nav id='quick-access'><ul><li class='qa-search'><a href='https://wiki.selfhtml.org/index.php?title=Spezial:Suche&search=&fulltext=Suche&profile=advanced'>Suche</a></li><li class='qa-tools'><a href='#n-Wie-fange-ich-an.3F'>Werkzeuge</a></li><li class='forum'><a href='" + url + "' title='Frage im SELFHTML-Forum stellen‽'>im SELFHTML-Forum fragen!</a></li><li class='top'><a title='nach oben' href='#'>nach oben</href></li><li class='last-changes'><a title='Liste der letzten Änderungen' href='/wiki/Spezial:Letzte_%C3%84nderungen'>letzte Änderungen</a></li></ul></nav>");

a. nav ist Teil der h1 - soll man das so lassen???

Vorschläge, anyone?

---

Ich kann euch leider nichts anbieten außer einem Kommentar im CSS

/* Made by .... */

Herzliche Grüße

Matthias Scharwies

[Der Martin]

Hallo Matthias,

Wer hätte Zeit und Lust ein funktionsfähiges Beispiel zu entwickeln?

ich definitiv nicht, zumal meine Kenntnisse vor allem von CSS, aber auch Javascript ein bisschen angestaubt sind.

Ich finde es durchaus okay, dass du die generellen Eckpunkte nochmal zur Diskussion stellst, aber ich hatte das beim Wiki-Hackathon neulich so verstanden, als hätten wir uns schon auf die wesentlichen Entscheidungen geeinigt.

Welche Links braucht „man“ denn überhaupt?

• Bis jetzt gab's einen Anmelden-Link für unangemeldete Besucher.
• den Navlink zu den Werkzeugen, bzw. zur Nav-sidebar links erst auf kleinen Bildschirmen einblenden?
• Sind die last-changes für alle interessant?

Sind das nicht alles Fragen, die wir eigentlich schon erörtert hatten?

Am Hackathon einigten wir uns darauf, dass die Icons rechts sichtbar sind und bei hover/focus die Linktexte nach links ausfahren. Wie sollte das auf kleinen Bildschirmen geregelt sein?

Siehe oben: Da sollten diese Icons am unteren Bildrand stehen und bei Bedarf nach oben ausfahren.

Das Menü wird in der Mediawiki.Common.js dynamisch in die Überschrift eingefügt:

Das ist ja hoffentlich nur noch eine kurzlebige Übergangslösung und mit dem Ansatz des Makeover hinfällig, weil das passende Markup dann gleich serverseitig erzeugt wird.

Einen schönen Tag noch
 Martin

[Matthias Scharwies]

Guten Morgen!

Ich finde es durchaus okay, dass du die generellen Eckpunkte nochmal zur Diskussion stellst, aber ich hatte das beim Wiki-Hackathon neulich so verstanden, als hätten wir uns schon auf die wesentlichen Entscheidungen geeinigt.

Ja, ich würde es aber eher als die Grundzüge betrachten.

Das Vorbild ist eine Suppe aus geschachtelten divs, die mit Flexbox arbeiten. Ich hatte es bewusst nicht verlinkt, um keine Kopie zu erzeugen.

Welche Links braucht „man“ denn überhaupt?

Sind das nicht alles Fragen, die wir eigentlich schon erörtert hatten?

Ja, my bad. Ich habe aber nicht alle Ideen aufgeschrieben.

Ich habe einiges geändert:

• der Interrobang ist durch !? ersetzt. Ist das ok so?
• der Linktext hieß: „Frage im SELFHTML-Forum stellen‽“ - ist „im SELFHTML-Forum fragen!“ besser?

Das Menü wird in der Mediawiki.Common.js dynamisch in die Überschrift eingefügt:

Das ist ja hoffentlich nur noch eine kurzlebige Übergangslösung

Dein Wort in Gottes Ohr!

… und mit dem Ansatz des Makeover hinfällig, weil das passende Markup dann gleich serverseitig erzeugt wird.

In PHP oder in JS - wie wirst DU das umsetzen?

---

Mir ging es in diesem Hilferuf drum, dass jemand die technische Umsetzung vornimmt und evtl. auf noch nicht besprochene Details stößt. Ich kann nicht alles allein machen 😟

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Ich war das Wochenende weg und schaue mir ab morgen mal an was du da möchtest

Rolf

[Der Martin]

Hallo,

Ich finde es durchaus okay, dass du die generellen Eckpunkte nochmal zur Diskussion stellst, aber ich hatte das beim Wiki-Hackathon neulich so verstanden, als hätten wir uns schon auf die wesentlichen Entscheidungen geeinigt.

Ja, ich würde es aber eher als die Grundzüge betrachten.

natürlich, die Umsetzung im Detail ist noch völlig offen. Aber wir hatten doch m.E. einen Konsens (auch mit @at) beispielsweise darüber, welche Links wo noch erwünscht oder unnötig sind.

Das Vorbild ist eine Suppe aus geschachtelten divs, die mit Flexbox arbeiten. Ich hatte es bewusst nicht verlinkt, um keine Kopie zu erzeugen.

Welche Links braucht „man“ denn überhaupt?

Sind das nicht alles Fragen, die wir eigentlich schon erörtert hatten?

Ja, my bad. Ich habe aber nicht alle Ideen aufgeschrieben.

Zu dumm, ich auch nicht. Ein bisschen davon habe ich noch im Kopf.

• der Interrobang ist durch !? ersetzt. Ist das ok so?

Ist der an der Stelle überhaupt angebracht? Das ist ein Linktext, der eine Tätigkeit im Infinitiv beschreibt, ähnlich wie Drucken oder Löschen. Eigentlich nicht üblich, dass da überhaupt irgendein Satzzeichen steht, oder?

• der Linktext hieß: „Frage im SELFHTML-Forum stellen‽“ - ist „im SELFHTML-Forum fragen!“ besser?

Ich finde beides okay. Aber halt ohne Ausrufezeichen, sonst sieht es aus wie eine Aufforderung.

Das Menü wird in der Mediawiki.Common.js dynamisch in die Überschrift eingefügt:

Das ist ja hoffentlich nur noch eine kurzlebige Übergangslösung

Dein Wort in Gottes Ohr!

Naja, die Hoffnung stirbt zuletzt.

… und mit dem Ansatz des Makeover hinfällig, weil das passende Markup dann gleich serverseitig erzeugt wird.

In PHP oder in JS - wie wirst DU das umsetzen?

Kann ich im Moment freihändig nicht sagen, weil ich nicht weiß, wie Mediawiki hinter den Kulissen tickt. Ich vermute aber, dass ich eher zu einer serverseitigen Lösung in PHP tendiere. Und wenn ich das umsetzen sollte, müsste ich mich tatsächlich erst in das Mediawiki-Backend reinfuchsen - also wie aus den Templates und den Datenbankinhalten das fertige HTML generiert wird.

Mir ging es in diesem Hilferuf drum, dass jemand die technische Umsetzung vornimmt und evtl. auf noch nicht besprochene Details stößt.

Klar. Ich hatte nur kurz den Eindruck, dass du ein paar Dinge in Frage gestellt hast, über die wir beim Hackathon schon informell abgestimmt hatten. Da waren wir beide dabei, außerdem noch @Felix Riesterer und @at. Noch jemand? Rolf hatte keine Zeit, IIRC.

Ich kann nicht alles allein machen 😟

Das habe ich nicht gesagt, nicht einmal gedacht. Ich habe schon großen Respekt davor, wieviel Zeit du für die inhaltliche Arbeit investierst. Da erwarte ich nicht, dass du auch noch den technischen Part alleine stemmen sollst.

Und wo ich gerade schon beim Loben bin: Ich bin auch regelmäßig immer wieder beeindruckt, wieviel Mühe @Rolf B in seine Forenbeiträge investiert, die meist sehr ausführlich, gut verständlich und in aller Regel auch gut recherchiert und belegt sind.

Einen schönen Tag noch
 Martin