Improved responsiveness of shortcuts section #227

sohan10012 · 2024-11-29T10:30:03Z

Enhanced Visual Appeal: Adjusted the CSS to align the #shortcuts-section to the right, making it look more organized and visually appealing.

For screens wider than 1400px, the section is positioned 320px from the right edge.
For screens between 1400px and 1200px, the right margin decreases dynamically to keep the
section aligned to the right.
For screens narrower than 1200px, the section is centered horizontally.
For screens narrower than 900px, the section remains centered and takes the full width.
Responsive Design: Added media queries to handle different screen widths and ensure smooth
transitions.
Consistent Layout: Utilized flexbox properties such as flex-wrap and justify-content to maintain
Uniform Spacing: Applied consistent padding and gap values to ensure uniform spacing.

Impact:

Improved the overall look and feel of the shortcuts section, making it more user-friendly and aesthetically pleasing across various screen sizes.
Enhanced the user experience by maintaining consistent positioning and alignment of the shortcuts section on different devices.

itz-rj-here

Thank you very much @sohan10012 for your very hard work

itz-rj-here · 2024-11-29T10:42:46Z

@prem-k-r Please review the changes

XengShi · 2024-11-29T10:56:38Z

Screencast.from.2024-11-29.16-18-10.webm

I see weird positioning of shortcuts for larger devices, Please don't change its position keep it centered

itz-rj-here

Requesting changes

itz-rj-here · 2024-11-29T11:01:05Z

style.css

-    left: 0;
-    right: 0;
+    justify-content: center;
+    right: 320px; /* Adjusted margin for shortcuts to align right */


Sorry @sohan10012 but we can't let the shortcuts align at the right side.
You should change it.

sohan10012 · 2024-11-29T11:57:04Z

Oh ok thank you 😄

…

On Fri, 29 Nov, 2024, 4:27 pm XengShi, ***@***.***> wrote: Screencast from 2024-11-29 16-18-10.webm <https://github.com/user-attachments/assets/dacf9549-11e9-4826-a5ba-f1353f9e906b> I see weird positioning of shortcuts for larger devices, Please don't change its position keep it centered — Reply to this email directly, view it on GitHub <#227 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BHX3ONNBQ743V23TDLDXDRL2DBB7ZAVCNFSM6AAAAABSWZ5IEWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMBXGU3DQOJRGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

…of the #shortcuts-section to use percentages instead of fixed pixels.- This change ensures that the section remains well-aligned and visually appealing on larger screens.- Added media queries to dynamically adjust the right margin based on screen width.- Addressed the issue where the section looked messy on larger devices by making it more responsive.

sohan10012 · 2024-11-29T12:32:26Z

i resolved that isse and now can u please check once >??

itz-rj-here · 2024-11-29T12:40:05Z

@XengShi @prem-k-r

sohan10012 · 2024-11-29T12:43:33Z

Screencast.from.2024-11-29.16-18-10.webm
I see weird positioning of shortcuts for larger devices, Please don't change its position keep it centered

the shortcut tab position is in fixed position , so the shortcut section looked weird ,, but if u insepect the page and check for its views in differents screen widths , the shortcut centre is completely alligned ,
i request u to check once by inspect element option because i referred that , because by default the round button in right corner has its postion fixed
i request u to please review by checking in the inspect page option ,

Thank you for the reviews

sohan10012 · 2024-11-29T12:52:08Z

Screen.Recording.2024-11-29.181826.mp4

this is the screen recording

prem-k-r

it is not centered

sohan10012 · 2024-11-29T13:15:46Z

it is not centered

actually my goal was to keep it in the right side so that it looks organised , that was the idea behind my code update , i am sorry if u didnt like it , I just felt it looked organised in the right so suggested with an change of code

prem-k-r · 2024-11-29T13:21:53Z

it is not centered

actually my goal was to keep it in the right side so that it looks organised , that was the idea behind my code update , i am sorry if u didnt like it , I just felt it looked organised in the right so suggested with an change of code

Oh, no worries! I understand your intention to keep it organized, but I personally don't prefer the right-aligned change.

itz-rj-here · 2024-11-29T13:30:17Z

it is not centered

actually my goal was to keep it in the right side so that it looks organised , that was the idea behind my code update , i am sorry if u didnt like it , I just felt it looked organised in the right so suggested with an change of code

Oh, no worries! I understand your intention to keep it organized, but I personally don't prefer the right-aligned change.

Mee too.

sohan10012 · 2024-11-29T13:54:42Z

it is not centered

actually my goal was to keep it in the right side so that it looks organised , that was the idea behind my code update , i am sorry if u didnt like it , I just felt it looked organised in the right so suggested with an change of code

Oh, no worries! I understand your intention to keep it organized, but I personally don't prefer the right-aligned change.

okay bro , thank you , i hope i can contribute in this project , if there are any issues related to frontend please ping me up , i am willing to help

itz-rj-here · 2024-11-29T14:00:02Z

it is not centered

actually my goal was to keep it in the right side so that it looks organised , that was the idea behind my code update , i am sorry if u didnt like it , I just felt it looked organised in the right so suggested with an change of code

Oh, no worries! I understand your intention to keep it organized, but I personally don't prefer the right-aligned change.

okay bro , thank you , i hope i can contribute in this project , if there are any issues related to frontend please ping me up , i am willing to help

Just make the shortcuts stay centered and resolve the conflicts. It looks better if the shortcuts stay at the center.

XengShi · 2024-11-29T14:10:14Z

@sohan10012
Thank you for your efforts and contributions; they are greatly appreciated.

Your idea of aligning the shortcut position with the search bar section is quite creative, but I believe it works best when there are only a few shortcuts.

For contributing to the project:
When expanding the AI tools on smaller displays, the layout (Ai tools shortcuts) extends horizontally instead of wrapping to the next line, which affects usability.
Fix it if you can!

Happy Coding!

sohan10012 · 2024-11-29T14:37:56Z

it is not centered

actually my goal was to keep it in the right side so that it looks organised , that was the idea behind my code update , i am sorry if u didnt like it , I just felt it looked organised in the right so suggested with an change of code

Oh, no worries! I understand your intention to keep it organized, but I personally don't prefer the right-aligned change.

okay bro , thank you , i hope i can contribute in this project , if there are any issues related to frontend please ping me up , i am willing to help

Just make the shortcuts stay centered and resolve the conflicts. It looks better if the shortcuts stay at the center.

sure i will resolve the issue

sohan10012 · 2024-11-29T14:38:25Z

@sohan10012 Thank you for your efforts and contributions; they are greatly appreciated.

Your idea of aligning the shortcut position with the search bar section is quite creative, but I believe it works best when there are only a few shortcuts.

For contributing to the project: When expanding the AI tools on smaller displays, the layout (Ai tools shortcuts) extends horizontally instead of wrapping to the next line, which affects usability. Fix it if you can!

Happy Coding!

sure , i will try to solve this by next week

sohan10012 · 2024-11-29T15:33:05Z

Screen.Recording.2024-11-29.210140.mp4

does this work ?? i mean when the tools wrap up they get overlapped on the above tools , vivibility becomes quite bad and also difficult

itz-rj-here · 2024-11-29T15:51:58Z

Screen.Recording.2024-11-29.210140.mp4

does this work ?? i mean when the tools wrap up they get overlapped on the above tools , vivibility becomes quite bad and also difficult

I don't think someone will use portrait monitor for the extention 😄

prem-k-r · 2024-11-29T15:58:14Z

Screen.Recording.2024-11-29.210140.mp4
does this work ?? i mean when the tools wrap up they get overlapped on the above tools , vivibility becomes quite bad and also difficult

yeah kind of, what else we can do lol.
It seems okay

sohan10012 · 2024-11-29T15:59:11Z

so should i push ?? if u have any tips u give me , i will try implementing it
like adding a glassmorphism so something ...

prem-k-r · 2024-11-29T15:59:46Z

Btw current responsiveness:

responsiveness.shortcuts.mp4

prem-k-r · 2024-11-29T16:00:39Z

so should i push ?? if u have any tips u give me , i will try implementing it like adding a glassmorphism so something ...

glassmorphism .. maybe not
rest let's wait for XengShi

sohan10012 · 2024-11-29T16:03:04Z

Screen.Recording.2024-11-29.213217.mp4

this is how it looks right now,

yeah okay i can wait✌️

prem-k-r · 2024-11-29T16:05:27Z

Screen.Recording.2024-11-29.213217.mp4
this is how it looks right now,

yeah okay i can wait✌️

seems fine, please push it

… AI tools container remains in its original position.- Removed border radius for a cleaner look.- Added margin to AI tools when they start wrapping up to maintain a well-organized layout.- Ensured smooth transitions for a consistent appearance across different screen sizes.

sohan10012 · 2024-11-30T14:25:22Z

Screen.Recording.2024-11-30.195458.mp4

final screen recording

itz-rj-here

Conflicts

prem-k-r · 2024-12-01T10:02:10Z

Conflicts... Maybe replicate the changes in new branch with copy of current main

..

itz-rj-here · 2024-12-01T10:15:52Z

Conflicts... Maybe replicate the changes in new branch with copy of current main

..

Yup it's a better idea.

sohan10012 · 2024-12-01T16:38:04Z

ok sure , i will do it tomorrow

sohan10012 · 2024-12-01T17:38:28Z

Done with the conflicts 👍, please check once

XengShi · 2024-12-02T08:17:05Z

On the first load or after reloading the page, the "AI Tools" section occupies extra space, overlapping the shortcut icons and making them unclickable.

And, the animations feel quite slow,

sohan10012 · 2024-12-02T13:22:02Z

Screen.Recording.2024-12-02.184917.mp4

Screen.Recording.2024-12-02.184749.mp4

is the animation speed okay?

style.css

sohan10012 · 2024-12-02T14:36:10Z

Screen.Recording.2024-12-02.200420.mp4

screen record of the ai tools

prem-k-r · 2024-12-02T14:43:55Z

prem-k-r · 2024-12-02T14:45:43Z

it's fine to some extent, everything seems good

sohan10012 · 2024-12-04T09:12:44Z

Hi @prem-k-r @itz-rj-here , could you please provide an update on my PR? Thank you!

prem-k-r · 2024-12-04T09:14:59Z

Seems good to merge..
@XengShi can test, give suggestions if any, and merge it

itz-rj-here

The code looks ok for me

XengShi · 2024-12-05T16:00:26Z

@sohan10012
Everything is looking fine but 'AI Tools' button shouldn't change its position:

Screencast.From.2024-12-05.21-21-53.mp4

sohan10012 · 2024-12-06T06:21:11Z

@sohan10012
Everything is looking fine but 'AI Tools' button shouldn't change its position:

Screencast.From.2024-12-05.21-21-53.mp4

Sorry I am unable to do that , the height of the page isn't getting altered to fix the overflow of the container .

XengShi · 2024-12-07T07:15:20Z

@sohan10012
Everything is looking fine but 'AI Tools' button shouldn't change its position:

Screencast.From.2024-12-05.21-21-53.mp4

Sorry I am unable to do that , the height of the page isn't getting altered to fix the overflow of the container .

Checkout https://github.com/XengShi/materialYouNewTab/tree/chrome-v2.5

I have added a scrolling effect instead of wrapping

sohan10012 · 2024-12-08T07:12:27Z

Sure I will look into it

Improved responsiveness of shortcuts section

c8c6aeb

itz-rj-here approved these changes Nov 29, 2024

View reviewed changes

itz-rj-here requested changes Nov 29, 2024

View reviewed changes

prem-k-r requested changes Nov 29, 2024

View reviewed changes

Reverted back to orignal shortcut section allignment - Centre

70d7843

resolved issues

ee1409a

itz-rj-here requested changes Dec 1, 2024

View reviewed changes

Merge branch 'main' into sohan10012

6e56e90

Resolved issues of animation and AI tools taking extra space

2a20da4

prem-k-r requested changes Dec 2, 2024

View reviewed changes

style.css Outdated Show resolved Hide resolved

Increased border radius issue

bb64eb6

prem-k-r previously approved these changes Dec 2, 2024

View reviewed changes

itz-rj-here approved these changes Dec 2, 2024

View reviewed changes

itz-rj-here previously approved these changes Dec 4, 2024

View reviewed changes

prem-k-r mentioned this pull request Dec 5, 2024

Added Claude to AI tools #261

Closed

Merge branch 'main' into sohan10012

d2d0323

sohan10012 dismissed stale reviews from prem-k-r and itz-rj-here via d2d0323 December 29, 2024 15:37

itz-rj-here added the changes required PR requires updates based on review feedback label Jan 1, 2025

Improved responsiveness of shortcuts section #227

Are you sure you want to change the base?

Improved responsiveness of shortcuts section #227

Conversation

sohan10012 commented Nov 29, 2024

itz-rj-here left a comment

Choose a reason for hiding this comment

itz-rj-here commented Nov 29, 2024

XengShi commented Nov 29, 2024

itz-rj-here left a comment

Choose a reason for hiding this comment

itz-rj-here Nov 29, 2024

Choose a reason for hiding this comment

sohan10012 commented Nov 29, 2024 via email

sohan10012 commented Nov 29, 2024

itz-rj-here commented Nov 29, 2024

sohan10012 commented Nov 29, 2024

sohan10012 commented Nov 29, 2024

prem-k-r left a comment

Choose a reason for hiding this comment

sohan10012 commented Nov 29, 2024

prem-k-r commented Nov 29, 2024

itz-rj-here commented Nov 29, 2024

sohan10012 commented Nov 29, 2024

itz-rj-here commented Nov 29, 2024 • edited Loading

XengShi commented Nov 29, 2024

sohan10012 commented Nov 29, 2024

sohan10012 commented Nov 29, 2024

sohan10012 commented Nov 29, 2024

itz-rj-here commented Nov 29, 2024

prem-k-r commented Nov 29, 2024

sohan10012 commented Nov 29, 2024

prem-k-r commented Nov 29, 2024

prem-k-r commented Nov 29, 2024

sohan10012 commented Nov 29, 2024

prem-k-r commented Nov 29, 2024

sohan10012 commented Nov 30, 2024

itz-rj-here left a comment

Choose a reason for hiding this comment

prem-k-r commented Dec 1, 2024

itz-rj-here commented Dec 1, 2024

sohan10012 commented Dec 1, 2024

sohan10012 commented Dec 1, 2024

XengShi commented Dec 2, 2024

sohan10012 commented Dec 2, 2024

sohan10012 commented Dec 2, 2024

prem-k-r commented Dec 2, 2024

prem-k-r commented Dec 2, 2024 • edited Loading

sohan10012 commented Dec 4, 2024

prem-k-r commented Dec 4, 2024

itz-rj-here left a comment

Choose a reason for hiding this comment

XengShi commented Dec 5, 2024

sohan10012 commented Dec 6, 2024

XengShi commented Dec 7, 2024 • edited Loading

sohan10012 commented Dec 8, 2024

itz-rj-here commented Nov 29, 2024 •

edited

Loading

prem-k-r commented Dec 2, 2024 •

edited

Loading

XengShi commented Dec 7, 2024 •

edited

Loading