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.

Sign up for GitHub

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

Jump to bottom

Chore/Feat: Use Tailwind Ui Navbar for MVP Top Nav #364

Closed
3 tasks
nelsonic opened this issue Apr 26, 2023 · 2 comments · Fixed by #378
Closed
3 tasks

Chore/Feat: Use Tailwind Ui Navbar for MVP Top Nav #364

nelsonic opened this issue Apr 26, 2023 · 2 comments · Fixed by #378
Assignees
@LuchoTurtle
Labels
chore a tedious but necessary task often paying technical debt elixir Pull requests that update Elixir code enhancement New feature or enhancement of existing functionality in-progress An issue or pull request that is being worked on by the assigned person priority-1 Highest priority issue. This is costing us money every minute that passes. starter A beginner-friendly issue that is a good starting point for a new person T4h Time Estimate 4 Hours tech-debt A feature/requirement implemented in a sub-optimal way & must be re-written technical A technical issue that requires understanding of the code, infrastructure or dependencies

Comments

@nelsonic
Copy link
Member

nelsonic commented Apr 26, 2023 •
edited
Loading

At present the Main Nav for the MVP is rather inconsistent:

Anonymous:

image

Logged in:

image

iOS Simulator (iPhone SE 2022):

image

iOS Real Device (Nelson's iPhone 13) on Mobile Safari: (yes the timer is "on" but not updating ... 🙄)

dwyl-mvp-top-nav-iphone-13-pro-mobile-safari

It doesn't look "bad" ... but it's definitely "Off":

  • The avatar image is much smaller than the @dwyl logo
  • The logo is off-centre which looks weird ... 😕
  • There's a random tags white text in the Nav (which I can click to view my tags) ...
  • Logout <button> which feels like a Call to Action ... shouldn't be so prominent.

We can do much better. Without much effort. 💭

https://tailwindui.com/components/application-ui/navigation/navbars
image

Adaptive (Mobile First):
image

Menu expanded on "Mobile":

image

Todo

  • Re-do the MVP Top Nav using the Tailwind UI > Navbar Component

Should:

  • Work effortlessly/flawlessly on both Mobile and Desktop
  • Generate Menu from static data for now i.e not Dynamic.

Note: Once we have settings.json working and list.name="Main Menu" #363 we can update the Menu to be dynamic. But for now just updating the Interface to be more consistent would be a huge win. 🤞
@nelsonic nelsonic added enhancement New feature or enhancement of existing functionality technical A technical issue that requires understanding of the code, infrastructure or dependencies T4h Time Estimate 4 Hours priority-1 Highest priority issue. This is costing us money every minute that passes. starter A beginner-friendly issue that is a good starting point for a new person chore a tedious but necessary task often paying technical debt tech-debt A feature/requirement implemented in a sub-optimal way & must be re-written elixir Pull requests that update Elixir code labels Apr 26, 2023
@nelsonic nelsonic moved this to 🔖 Ready for Development in dwyl app kanban Apr 26, 2023
@LuchoTurtle LuchoTurtle mentioned this issue Apr 26, 2023
Merged
@LuchoTurtle LuchoTurtle self-assigned this May 17, 2023
@nelsonic
Copy link
Member Author

@LuchoTurtle this should be doable. Please confirm you have access to TailwindUI. 🙏

@LuchoTurtle
Copy link
Member

Confirmed access 🙏

Going to work on this now 👍

@LuchoTurtle LuchoTurtle moved this from 🔖 Ready for Development to 🏗 In progress in dwyl app kanban May 23, 2023
@nelsonic nelsonic added the in-progress An issue or pull request that is being worked on by the assigned person label May 23, 2023
LuchoTurtle added a commit that referenced this issue May 24, 2023
@LuchoTurtle
feat: TailwindUI setup. #364
2a44ebe
LuchoTurtle added a commit that referenced this issue May 24, 2023
@LuchoTurtle
feat: Adding Alpine to dropdown. #364
0c44146
LuchoTurtle added a commit that referenced this issue May 24, 2023
@LuchoTurtle
feat: Adding Alpinejs to menu. #364
5325766
LuchoTurtle added a commit that referenced this issue May 24, 2023
@LuchoTurtle
feat: Adding login and logout. #364
c819923
LuchoTurtle added a commit that referenced this issue May 24, 2023
@LuchoTurtle
feat: Adding redirect to tags. #364
478dcf0
LuchoTurtle added a commit that referenced this issue May 24, 2023
@LuchoTurtle
feat: Changing background color of button. #364
17ee3ca
@LuchoTurtle LuchoTurtle mentioned this issue May 24, 2023
Merged
LuchoTurtle added a commit that referenced this issue May 24, 2023
@LuchoTurtle
fix: Switching mobile view components. #364
c0559be
LuchoTurtle added a commit that referenced this issue May 24, 2023
@LuchoTurtle
fix: Fixing desktop view with reordered components. #364
b44f6f4
LuchoTurtle added a commit that referenced this issue May 24, 2023
@LuchoTurtle
fix: Changing BUILDIT section. #364
204577f
@nelsonic nelsonic mentioned this issue May 24, 2023
Closed
1 task
@github-project-automation github-project-automation bot moved this from 🏗 In progress to ✅ Done in dwyl app kanban May 24, 2023
LuchoTurtle added a commit that referenced this issue May 25, 2023
@LuchoTurtle
fix: Making menu show even on desktop devices. #364
c7f162f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@LuchoTurtle LuchoTurtle

Labels
chore a tedious but necessary task often paying technical debt elixir Pull requests that update Elixir code enhancement New feature or enhancement of existing functionality in-progress An issue or pull request that is being worked on by the assigned person priority-1 Highest priority issue. This is costing us money every minute that passes. starter A beginner-friendly issue that is a good starting point for a new person T4h Time Estimate 4 Hours tech-debt A feature/requirement implemented in a sub-optimal way & must be re-written technical A technical issue that requires understanding of the code, infrastructure or dependencies
Projects
dwyl app kanban
Status: ✅ Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[PR] Changing MVP navbar dwyl/mvp
2 participants
@nelsonic @LuchoTurtle