Header and Banner rework using Puzzle Shell

[nevio18324]

Currently the Header and Banner design kinda seems odd compared to other puzzle applications.
To change that we can use the Puzzle shell it offers templates for both header and banner
For the header we can make it similar to this example

For the banner we could use something like this without the search

We could also replace the username with a profile icon which when you click open ups a menu where you can logout or go to your profile

Todo's

• Implement the Puzzle Shell Header with all the features our current header has
• Implement the Puzzle Shell Banner with all the features our current banner has
• Rewrite / write Tests if needed

[Miguel7373]

Stand 11.04.2025

Die Puzzle-Shell ist mittlerweile funktional in dem Skills eingebaut, aber es müssen noch das Bundle.js und Bundle.css per File in den Bildordner eingeschleust werden. Die PR auf Puzzle-Shell müsste zuerst gemerged werden, damit hier wieder auf die URL gewechselt werden kann, ausserdem hat es beim scrollen noch ein paar visual bugs die behebt werden sollten.

TO-DO

• puzzle shell PR schauen, dass sie gemerged wird
• Visual scrolling bugs fixen
• Tests zum Laufen bringen, falls welche failen

[RandomTannenbaum]

Stand 16.04.2025
Ich habe nun die visual bugs behoben und auch die Tests wieder zum laufen gebracht. Ausserdem habe ich Mathis Hofer geschrieben und ihn um ein Review der PR von Miguel gebeten. Wenn diese gemerged und released wird, sollte die pipeline auch wieder laufen.

[RandomTannenbaum]

Stand 17.04.2025
Die neue Version der Puzzle Shell ist nun released. Ich habe jetzt noch versucht die Puzzle Shell direkt über das npm package einzubinden, statt über das CDN, da dies stabiler ist und noch einen visual bug behebt. Das funktioniert grundsätzlich auch in der dev umgebung, jedoch funktioniert das bundling nicht mehr, weshalb die Tests beim ausführen von bundle exec rake nicht mehr funktionieren. Ich muss noch herausfinden warum das so ist.

[RandomTannenbaum]

Stand 30.04.2025
Ich habe jetzt den Namen als eigenes Dropdown-Item hinzugefügt, damit er immer angezeigt wird, auch wenn jemand kein Profil im Skills hat. Ausserdem habe ich begonnen die Struktur der Puzzle-Shell Komponenten so anzupassen, dass sie mit der Struktur aus der Dokumentation übereinstimmen. Moment funktioniert aber noch nicht alles so wie es soll. Wenn man das Hamburger-menu, dass bei kleinem Viewport entsteht, öffnet, dann werden die Items hinter einem grossen Backdrop angezeigt. Ich habe noch nicht herausgefunden warum das so ist. Ausserdem verschwindet das Banner noch nicht auf einem kleinen Viewport, sondern nur die Menu-Actions darin.

[RandomTannenbaum]

ToDo
Ich habe mich noch mit Mathis Hofer unterhalten und wir haben angeschaut was noch fehlt:

• Eigentlich wäre die PuzzleShell auf eine Screenbreite von 100% ausgelegt. Momentan haben wir bei uns die Breite des gesamten bodies auf 80% limitiert. Eine Möglichkeit wäre natürlich den content auf 80% zu limitieren und dem header die volle Breite zu geben.
• Die language-selection, die Versionsnummer und vielleicht noch ein Link auf das GitHub repo wären eigentlich Teil des footers. Wir sollten uns überlegen ob wir diesen auch gleich im Zuge dieses Tickets implementieren wollen.
• Die language-selection ist momentan als pzsh-menu-dropdown implementiert. Dies ist nicht als select gedacht, sondern vielmehr als Navigation, wie z.B. um auf das eigene Profil zu gelangen. Es lässt sich natürlich argumentieren, dass die language-selection auch eine Navigation ist.
• Das Banner verschwindet wenn die pzsh auf die mobile Ansicht wechselt. Auf der person-view hinterlässt dies momentan noch eine Lücke bzw. der content wird nicht nachgeschoben.

[RandomTannenbaum]

Stand 05.05.2025
Momentan gibt es noch zwei offene Punkte:

• Der footer ist ausserhalb der view, und muss auch auf kleinen pages noch in die view gescrollt werden -> darf das so sein?
• Das Banner verschwindet wenn die pzsh auf die mobile Ansicht wechselt. Auf der person-view hinterlässt dies momentan noch eine Lücke bzw. der content wird nicht nachgeschoben. Hier verschwindet nun wegen dem footer auch noch einer der sidetabs.

[RandomTannenbaum]

Stand 14.05.2025
Die PR ist jetzt in einem aufgeräumten Zustand. Das Styling ist jedoch an manchen Stellen immer noch nicht so wie es sollte. Beispielsweise werden pop-ups momentan noch vom header verdeckt. Das Styling sollte also im Ticket nochmal überprüft und angepasst werden.