Skip to content

Header and Banner rework using Puzzle Shell #835

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nevio18324 opened this issue Mar 11, 2025 · 6 comments · May be fixed by #864
Open

Header and Banner rework using Puzzle Shell #835

nevio18324 opened this issue Mar 11, 2025 · 6 comments · May be fixed by #864
Assignees
Labels
on hold Valid issue, but "on hold" plan needs to be planned

Comments

@nevio18324
Copy link
Collaborator

nevio18324 commented Mar 11, 2025

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
@nevio18324 nevio18324 added the plan needs to be planned label Mar 17, 2025
@Miguel7373 Miguel7373 self-assigned this Apr 2, 2025
@Miguel7373
Copy link
Collaborator

Miguel7373 commented Apr 11, 2025

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
Copy link
Collaborator

RandomTannenbaum commented Apr 16, 2025

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 RandomTannenbaum added the on hold Valid issue, but "on hold" label Apr 16, 2025
@RandomTannenbaum
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link
Collaborator

RandomTannenbaum commented May 2, 2025

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
Copy link
Collaborator

RandomTannenbaum commented May 5, 2025

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
on hold Valid issue, but "on hold" plan needs to be planned
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants