-
Notifications
You must be signed in to change notification settings - Fork 9
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
feat(cloud-ui): add initial flowbite dashboard layout #5
Conversation
Signed-off-by: Philip Miglinci <pmig@glasskube.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we should set up eslint or prettier as well
frontend/cloud-ui/src/app/components/side-bar/side-bar.component.html
Outdated
Show resolved
Hide resolved
<div id="alert-new-feature" class="p-4 bg-gray-50 rounded-lg dark:bg-gray-700" role="alert"> | ||
<div class="flex justify-between items-center mb-3"> | ||
<span class="bg-primary-100 text-primary-600 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-primary-600 dark:text-primary-200">New plugin</span> | ||
<button type="button" class="inline-flex p-1 w-6 h-6 text-gray-500 bg-gray-50 rounded-lg focus:ring-2 focus:ring-gray-400 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" data-dismiss-target="#alert-new-feature" aria-label="Close"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we should avoid using dom manipulating libraries as much as possible and use angular instead.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I will create a follow-pr introducing angular flowbite
<span class="bg-primary-100 text-primary-600 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-primary-600 dark:text-primary-200">New plugin</span> | ||
<button type="button" class="inline-flex p-1 w-6 h-6 text-gray-500 bg-gray-50 rounded-lg focus:ring-2 focus:ring-gray-400 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" data-dismiss-target="#alert-new-feature" aria-label="Close"> | ||
<span class="sr-only">Dismiss</span> | ||
<svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should we maybe at least use an icon library or something? it's really frustrating to review code with all of these embedded svgs
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The flowbite Icons don't support angular / web components - I would also ditch these icon, if we migrate away after initial PoC - for now copy pasting icons from here "works" https://flowbite.com/icons/
frontend/cloud-ui/src/app/components/side-bar/side-bar.component.html
Outdated
Show resolved
Hide resolved
Co-authored-by: Jakob Steiner <kosmoz@users.noreply.github.com>
Signed-off-by: Philip Miglinci <pmig@glasskube.com>
Signed-off-by: Philip Miglinci <pmig@glasskube.com>
Signed-off-by: Philip Miglinci <pmig@glasskube.com>
Signed-off-by: Philip Miglinci <pmig@glasskube.com>
No description provided.