khazifire / dripui Goto Github PK

When we hover on the text in the footer, it seems like the hover effect is appearing all over the text. Instead, make it work only on your username (@khazifire )

This should be fixed with the e(event) keyword which is an inbuilt method for such tasks rather than getting the element directly from the D.O.M.
I'l love to fix this if assigned to me

New Features

The installation tab still shows coming soon, wich is not really nice from user's perspective

What is the new or updated feature that you are suggesting?

Adding some installation and using guidelines

What documentation changes are needed to explain this?

the problem is probably with the Id passed down to the copy to clipboard function

What docs page needs to be fixed?

• Section: Before the Installation instructions
• Page: Readme

What is the problem?

Currently, there is no prerequisite section telling the user that they need to have node and npm installed, and how to check if they have it installed.

What should be changed to fix the problem?

Add a Prerequisite section before the Installation Steps.

Update the Twitter Logo to the new X Logo

What is the new or updated feature that you are suggesting?

Upgrade the website's Twitter logo by replacing the outdated icon with the new and sleek "X" logo.

What documentation changes are needed to explain this?

This small design enhancement will help the website stay up-to-date with the latest branding and provide a fresh look to users.

Screenshots:

Note to Reviewer:
I would like to work on this issue, can you assign it to me?

Also, could you label it as hacktoberfest and hacktoberfest-accepted ? Thanks!

Prior Issues

Are there any existing issues or PRs that relate to this problem? If so, link them here.

What is the current behavior?

What does Drip-ui do wrong?

• Inconsistent responsive menu width on different mobiles

• Menu streches too widely (Reaches edge of screen)

Note how the GitHub logo is almost cut out.

Steps to Reproduce

If the current behavior is a bug, if possible please provide the steps to reproduce.

• What does reproduce mean? Not understanding this question.

What is the expected behavior?

• The menu's be consistent throught browsers
• Navbar not to stretch out

What should DripUI do ?

• To avoid streching of navbar, apply margin (mx-4) while also applying styling that will wrap content until breakpoint for responsiveness is applied.
• Avoid using percentaged width (w-1/2 or 33%) as it does not provide a consistent width. Instead use w-fit or rem defined value.

Environment Details

Which versions of npm, and which browser and OS are affected by this issue?

• Chrome_ version 112.0.5615.49 (Official Build) (arm64)
  @khazifire

Hello everybody !

I have fallen on yur exciting project especially to train my tailwind skiils.

I'd like to add some new cards with other functions inspired by Quasar (https://quasar.dev/vue-components/card/), below some example that i code in my fork.

Do you think it suits the "general design" of DripUI ?

Also I have noticed in the code that components in Drip folder (components/Drip/cards) seems to be not used in the concret web rendering (pages/docs/cards), that makes the code quicky very huge with every component pasted (not in React component shape but juste plain HTML).

Maybe it could be useful to use more systematically component in Drip folder like React Component and also move the useRef logic inside each component to prevent tens and tens "CardAreaRefX" on parent component when much other new cards will be created ?

The footer component throws an error of 404

Means it's either not routed or the router cannot find the default component

What is the current behavior?

Components overlapping Navbar

Steps to Reproduce

If the current behavior is a bug, if possible please provide the steps to reproduce.

What is the expected behavior?

The expected behavior is that Components shouldn't overlap Navbar

What should DripUI do ?

Adding a z-index and bg-white will resolve this.

Screenshot

I see that there is room for a screenshot in the README section. Contributors could better understand what DripUI looks like. Can I be assigned to this issue if it is approved?

Add dark mode to this webapp using next-themes

New Features

What is the new or updated feature that you are suggesting?

Create a lightweight that facilitates the creation, modification, and management of components

• This will remove the need for navigating in and out of folders. The CLI will take care of putting the generated components in the required folders

• Something like:
  drip generate card component-name
drip generate button component-name and so on

I'd love to work on this if you approve @khazifire

Pricing card dripUI

This drip is missing few many components, and I have decided to work in additing few extra components like Pricing cards

what do you think ?

It seems like there is no margin and padding at the left and right edges of the site. Add it to make it look good

Add information about the project, and also short instructions on how people can contribute

in the header, there should be a link to link back to this repository

Hemberger menu can be added on mobile

When we run the project by using npm run dev it is giving us unhandled runtime error

Go to the terminal
Type npm run dev
Then go to the browser

When the project is fully loaded it is giving us

Please Refer the ScreenShot

The Once you clicked the button the copied icon pops out
But the expected is the pervious pops icon should be not visible

New Features

i wanted to add sidebars as components, created 2 simple sidebars, one with animation and the other simple, structured the code as well

What is the new or updated feature that you are suggesting?

sidebars as components

What docs page needs to be fixed?

• Section: Tech Stack section in read me
• Page:

What is the problem?

Tailwindcss links redirects to 404 page no found

What should be changed to fix the problem?

Add tailwindcss official website link

Prior Issues

I searched through the existing issues and PRs but did not find any that address the problem with the mobile navbar covering the logo.

What is the current behavior?

Currently, when accessing DripUI on a mobile device, the mobile navbar expands over the website's logo, partially covering it. This obscures the visibility of the logo and affects the site's navigational aesthetics and usability.

Steps to Reproduce

• Open the DripUI website on a mobile device or use a web browser's developer tools to simulate a mobile viewport.
• Click/tap on the hamburger menu icon to expand the mobile navbar.
• Observe that the expanded navbar overlays part of the logo at the top of the page.

What is the expected behavior?

The expected behavior is for the mobile navbar to expand without covering or obscuring the logo. Ideally, the navbar should appear below the logo to ensure the logo remains fully visible and unobstructed.

Environment Details

Browser: This issue was observed on Chrome, indicating it's browser-specific.

There's no installation process on the website

I am getting the following error when I run the application, can anyone help me fix this?

**Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.**

I'll like to take this on as the section of the site has a coming soon on it

the website header and main content have different container widths.

New Features

What is the new or updated feature that you are suggesting?

What documentation changes are needed to explain this?

Invalid urls path should show a 404 page which should have a button to return back to landing page

I noticed the contents of the header component are not vertically aligned in the mobile view. That is the menu icon on the right is not vertically aligned with the contents on the left. Please could I be assigned this issue under hacktoberfest.

I'll love to add on a create issue And pull request template if assigned to me