enhance: Update font size and height of drop down for mobile view #35

Tanuj1718 · 2024-12-07T07:30:32Z

fixes: #34
fixes #27

Description

Improve font size of navbar items for mobile view
Adjust the height of container which was overlapping with navbar items

UIupdate.mp4

netlify · 2024-12-07T07:30:56Z

✅ Deploy Preview for landing-ohc ready!

Name	Link
🔨 Latest commit	`d53707b`
🔍 Latest deploy log	https://app.netlify.com/sites/landing-ohc/deploys/676afc951292100008ecee54
😎 Deploy Preview	https://deploy-preview-35--landing-ohc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

components/header.tsx

package-lock.json

Tanuj1718 · 2024-12-09T10:27:08Z

@rithviknishad I have changed the files as you instructed. Can you please check it or is anything I'm missing?

shivankacker

Please reduce the distance between text

Tanuj1718 · 2024-12-13T16:52:34Z

@shivankacker Is it fine or do I need to adjust more?

shivankacker · 2024-12-16T12:49:36Z

@Tanuj1718 a little more would be good. Also we are adding "Timeline" to the header, so make sure it has enough space to accommodate for that too

Tanuj1718 · 2024-12-17T15:28:25Z

@shivankacker Done as you instructed. Also there is enough space for 'Timeline' tab in both mobile and web view.

shivankacker · 2024-12-18T09:31:12Z

@Tanuj1718 lgtm, can you also fix the following bug with the PR:

clicking on an item on the menu is taking you to the corresponding page correctly, but should also close the menu.

Tanuj1718 · 2024-12-18T12:01:21Z

@Tanuj1718 lgtm, can you also fix the following bug with the PR:

clicking on an item on the menu is taking you to the corresponding page correctly, but should also close the menu.

Done @shivankacker

shivankacker

Screen.Recording.2024-12-19.at.3.32.00.AM.mov

@Tanuj1718 doesn't seem to be fixed...

Tanuj1718 · 2024-12-19T05:13:32Z

Screen.Recording.2024-12-19.at.3.32.00.AM.mov
@Tanuj1718 doesn't seem to be fixed...

I have done it for supporters and contact tab. Is it not good for products and community tab? Because on hovering it , there is a dropdown menu appears and on clicking one of the options in drop down menu, the menu is getting closed.

Screen.Recording.2024-12-19.at.10.30.59.AM.mov

For PRODUCTS & COMMUNITY tab, menu is getting closed already.

Record_2024-12-19-10-49-01.mp4

shivankacker · 2024-12-19T05:57:04Z

@Tanuj1718 working for other options, but clicking on products > CARE does not close the menu. (Sometimes Next js will do a direct page change, where it seems to work, but when it changes the page dynamically, it doesnt. Keep clicking on navbar links to replicate)

Tanuj1718 · 2024-12-19T15:26:36Z

@Tanuj1718 working for other options, but clicking on products > CARE does not close the menu. (Sometimes Next js will do a direct page change, where it seems to work, but when it changes the page dynamically, it doesnt. Keep clicking on navbar links to replicate)

Done. Please let me know whether it is fine or not.

Screen.Recording.2024-12-19.at.8.50.27.PM.mov

shivankacker

@Tanuj1718 everything works well on mobile, but there are bugs on desktop now

shivankacker · 2024-12-19T16:42:58Z

components/header.tsx

@@ -82,7 +82,7 @@ export default function Header(props: { fixed?: boolean }) {
  const navigation: NavigationItem[] = [
    { type: "dropdown", content: "Products", items: productsItems },
    { type: "dropdown", content: "Community", items: communityItems },
-    { type: "link", content: "Supporters", href: "/supporters" },
+    { type: "section", content: "Supporters", id: "supporters", page: "/supporters" },


Why this change? 🤔

Why this change? 🤔

Because I want to use the section properties defined in 'switch' statements. Otherwise I have to write those properties in 'link' case.

@Tanuj1718 a link must be used for links, you should find a way around this without disturbing existing elements

shivankacker · 2024-12-19T16:43:24Z

components/header.tsx

@@ -159,6 +163,7 @@ export default function Header(props: { fixed?: boolean }) {
            href={item.page + "#" + item.id}
            className={className}
            onClick={(e) => {
+              setMobileMenuOpen(false);


This should come below the prevent default and stop propagation

shivankacker · 2024-12-19T16:45:52Z

components/header.tsx

-              }}
-            />
-          ))}
+          <div className={`${mobileMenuOpen ? "h-12" : "flex flex-row" }`}>


Changes here are possibly causing desktop dropdown to break

Screen.Recording.2024-12-19.at.10.15.00.PM.mov

Changes here are possibly causing desktop dropdown to break

Screen.Recording.2024-12-19.at.10.15.00.PM.mov

Yes, you are right. Thank you for pointing out.

shivankacker

Did you increase the distance between titles? This seems to be more than it was before 🤔

Rest of the functionality looks good, but some code changes are required

shivankacker · 2024-12-24T15:18:47Z

components/header.tsx

@@ -82,7 +82,7 @@ export default function Header(props: { fixed?: boolean }) {
  const navigation: NavigationItem[] = [
    { type: "dropdown", content: "Products", items: productsItems },
    { type: "dropdown", content: "Community", items: communityItems },
-    { type: "link", content: "Supporters", href: "/supporters" },
+    { type: "section", content: "Supporters", id: "supporters", page: "/supporters" },


@Tanuj1718 a link must be used for links, you should find a way around this without disturbing existing elements

shivankacker · 2024-12-24T15:18:59Z

components/header.tsx

@@ -159,6 +163,7 @@ export default function Header(props: { fixed?: boolean }) {
            href={item.page + "#" + item.id}
            className={className}
            onClick={(e) => {
+              setMobileMenuOpen(false);


Tanuj1718 · 2024-12-24T18:27:30Z

Did you increase the distance between titles? This seems to be more than it was before 🤔

Rest of the functionality looks good, but some code changes are required

Updated the code. Replaced the section with links for 'Supporters' item.

updated font size and height of showDropdown component

b95a1f0

rithviknishad requested changes Dec 7, 2024

View reviewed changes

components/header.tsx Outdated Show resolved Hide resolved

package-lock.json Outdated Show resolved Hide resolved

revert changes in lockfile and use predefined size

82b511b

rithviknishad approved these changes Dec 9, 2024

View reviewed changes

rithviknishad requested a review from shivankacker December 9, 2024 10:46

shivankacker requested changes Dec 13, 2024

View reviewed changes

shivankacker added the changes requested label Dec 13, 2024

improve mobile view for menu

1b833dd

Tanuj1718 requested a review from shivankacker December 17, 2024 15:28

clicking on item will close the menu

c59a6fa

shivankacker requested changes Dec 18, 2024

View reviewed changes

clicking on item will close the menu

53f261a

Tanuj1718 requested a review from shivankacker December 19, 2024 05:24

clicking on item will close the menu

3552141

shivankacker requested changes Dec 19, 2024

View reviewed changes

updated the dekstop version

8c3de68

Tanuj1718 requested a review from shivankacker December 21, 2024 18:45

shivankacker requested changes Dec 24, 2024

View reviewed changes

changes section to link for support tab

d53707b

Tanuj1718 requested a review from shivankacker December 24, 2024 18:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

enhance: Update font size and height of drop down for mobile view #35

enhance: Update font size and height of drop down for mobile view #35

Tanuj1718 commented Dec 7, 2024 •

edited by shivankacker

Loading

netlify bot commented Dec 7, 2024 •

edited

Loading

Tanuj1718 commented Dec 9, 2024

shivankacker left a comment

Tanuj1718 commented Dec 13, 2024

shivankacker commented Dec 16, 2024

Tanuj1718 commented Dec 17, 2024

shivankacker commented Dec 18, 2024

Tanuj1718 commented Dec 18, 2024

shivankacker left a comment

Tanuj1718 commented Dec 19, 2024 •

edited

Loading

shivankacker commented Dec 19, 2024

Tanuj1718 commented Dec 19, 2024

shivankacker left a comment

shivankacker Dec 19, 2024

Tanuj1718 Dec 21, 2024

shivankacker Dec 24, 2024

shivankacker Dec 19, 2024

shivankacker Dec 24, 2024

shivankacker Dec 19, 2024

Tanuj1718 Dec 21, 2024

shivankacker left a comment

shivankacker Dec 24, 2024

shivankacker Dec 24, 2024

Tanuj1718 commented Dec 24, 2024 •

edited

Loading

enhance: Update font size and height of drop down for mobile view #35

Are you sure you want to change the base?

enhance: Update font size and height of drop down for mobile view #35

Conversation

Tanuj1718 commented Dec 7, 2024 • edited by shivankacker Loading

netlify bot commented Dec 7, 2024 • edited Loading

✅ Deploy Preview for landing-ohc ready!

Tanuj1718 commented Dec 9, 2024

shivankacker left a comment

Choose a reason for hiding this comment

Tanuj1718 commented Dec 13, 2024

shivankacker commented Dec 16, 2024

Tanuj1718 commented Dec 17, 2024

shivankacker commented Dec 18, 2024

Tanuj1718 commented Dec 18, 2024

shivankacker left a comment

Choose a reason for hiding this comment

Tanuj1718 commented Dec 19, 2024 • edited Loading

shivankacker commented Dec 19, 2024

Tanuj1718 commented Dec 19, 2024

shivankacker left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shivankacker left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Tanuj1718 commented Dec 24, 2024 • edited Loading

Tanuj1718 commented Dec 7, 2024 •

edited by shivankacker

Loading

netlify bot commented Dec 7, 2024 •

edited

Loading

Tanuj1718 commented Dec 19, 2024 •

edited

Loading

Tanuj1718 commented Dec 24, 2024 •

edited

Loading