Guten Morgen, im Wiki gibt es ja die die `#dokuwiki__pagetools` an der rechten Seite. [](/images/2b62f5e0-4215-11ed-928c-b42e9947ef30.png) 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](https://wiki-test.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Quick-access.html). # 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 ](https://wiki-test.selfhtml.org/wiki/MediaWiki:Common.js)dynamisch in die Überschrift eingefügt: ~~~ JavaScript 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 -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“

Guten Morgen, im Wiki gibt es ja die die `#dokuwiki__pagetools` an der rechten Seite. [](/images/2b62f5e0-4215-11ed-928c-b42e9947ef30.png) 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](https://wiki-test.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Quick-access.html). # 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. * 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 ](https://wiki-test.selfhtml.org/wiki/MediaWiki:Common.js)dynamisch in die Überschrift eingefügt: ~~~ JavaScript 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 -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“

Guten Morgen, im Wiki gibt es ja die die `#dokuwiki__pagetools` an der rechten Seite. [](/images/2b62f5e0-4215-11ed-928c-b42e9947ef30.png) 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](https://wiki-test.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Quick-access.html). # 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. * 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 ](https://wiki-test.selfhtml.org/wiki/MediaWiki:Common.js)dynamisch in die Überschrift eingefügt: ~~~ JavaScript 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 nichts anbieten außer einem Kommentar im CSS `/* Made by .... */` Herzliche Grüße Matthias Scharwies -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“