Skip to content
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

[Enhancement] Toolbar and header visual changes #3040

Closed
7 of 18 tasks
jakobe opened this issue May 8, 2023 · 0 comments · Fixed by #3041
Closed
7 of 18 tasks

[Enhancement] Toolbar and header visual changes #3040

jakobe opened this issue May 8, 2023 · 0 comments · Fixed by #3041
Assignees
Labels
enhancement New feature or request
Milestone

Comments

@jakobe
Copy link
Collaborator

jakobe commented May 8, 2023

Describe the enhancement

UX has made some small visual changes to the toolbar on mobile + desktop (before and after scroll):

  • Toolbar on mobile should always be xxl/56px (effectively reverts changes done in [Enhancement] Add dynamic toolbar height and refine layout #2219)
  • Toolbar on desktop should always be xxxxxl/72px (new size should be added to sizes-ramp)
  • Toolbar separator bottom-line should always be visible on desktop
  • Toolbar background should be Kirby black + 1% transparent
  • Toolbar buttons should have 16px spacing on the right on mobile and 24px on desktop
    Please note: This enhancement will be implemented in a separate issue when we fix the spacing of toolbar action buttons and space available for toolbar title (is currently partly overlapped by toolbar buttons)

Describe the solution you'd like

Have you considered any alternatives?

Are there any additional context?


Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Refinement

  • Request that the issue is UX refined; do not proceed until this is done.
  • Request that the issue is tech refined; do not proceed until this is done.

Implementation

The contributor who wants to implement this issue should:

  • Make sure you have read: "Before you get coding".
  • Signal to others you are working on the issue by assigning yourself.
  • Create a branch from the develop branch following our branch naming convention.
  • Publish a WIP implementation to Github as a draft PR and ask for feedback.
  • Make sure you have implemented tests following the guidelines in: "The good: Test".
  • Update the cookbook with examples and showcases.

Review

Once the issue has been implemented and is ready for review:

  • Do a self-review.
  • Create a pull-request. If you created a draft PR during implementation you can just mark that as "ready for review".
@jakobe jakobe added the enhancement New feature or request label May 8, 2023
@jakobe jakobe added this to the Desktop ready milestone May 8, 2023
@jakobe jakobe self-assigned this May 8, 2023
@jakobe jakobe added this to Kirby May 8, 2023
@jakobe jakobe moved this to 🚀 In Progress in Kirby May 8, 2023
@jakobe jakobe moved this from 🚀 In Progress to 🔎 Review pending in Kirby May 12, 2023
@github-project-automation github-project-automation bot moved this from 🔎 Review pending to ✅ Done in Kirby May 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

1 participant