Fix varies of style issues for community page #43740

nekomeowww · 2023-10-30T09:25:02Z

Changes

Fixed overflowed line through of headings, use a better solution to achieve the same effect
Adjusted the font size of headings when in smaller screens, it was way too big for mobile devices and reduces readability
Added paddings for the Recent News section, it used to have no paddings and looks weird
Adjusted the navigation anchor links for sections, the button style was way too big and not harmony with the rest of the design pattern
Added comments for blocks
Make it more consistent for paddings, margins and other styles for each of the sections
Fixed the entangled styles with the size of view ports, make it more smoother when resizes
Remove hard-coded paddings and margins
Fixed incorrect vw unit usages, center navigation items, linted function calls
Added some small animation transitions for the smoother experience

Pull Request Dependency

Requires

Improve readabilities by restricting X (Twitter) widget width and height in /community page #43766

After

Desktop

Mobile

netlify · 2023-10-30T09:27:34Z

✅ Pull request preview available for checking

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`31dc056`
🔍 Latest deploy log	https://app.netlify.com/sites/kubernetes-io-main-staging/deploys/656ed2ce80c9ba00082cefff
😎 Deploy Preview	https://deploy-preview-43740--kubernetes-io-main-staging.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.

dipesh-rawat · 2023-10-30T10:58:41Z

/area web-development

dipesh-rawat

Based on the quick look of the Preview Page, this looks like an improvement!
LGTM

Preview Community Page

Gauravpadam

LGTM

A significant improvement! Thanks for this PR

Gauravpadam · 2023-10-30T15:12:59Z

@nekomeowww while we're at it, I can see some more improvements we can make (only if you wish to make them)

The navigation items can be centred (with or without media queries)
There's some persistent horizontal scrolling, If you can possibly target that?

Rest all good, Thanks again

nekomeowww · 2023-10-30T15:35:38Z

@nekomeowww while we're at it, I can see some more improvements we can make (only if you wish to make them)

The navigation items can be centred (with or without media queries)

There's some persistent horizontal scrolling, If you can possibly target that?

Rest all good, Thanks again

Absolutely! Although, it's a bit late for tonight in my time zone, I will tweak it and get it squashed and updated tomorrow ASAP.

nekomeowww · 2023-10-31T03:40:09Z

The navigation items can be centred (with or without media queries)

Is this the navigation items you talked about? What do you mean by "can be centered"? It is now centered on screens except mobile devices, it will left align the navigation items on left. Are you saying you want to center these navigation items even on mobile devices?

There's some persistent horizontal scrolling, If you can possibly target that?

@Gauravpadam Can you provide me some screenshots or steps to reproduce? On what size of the device are you experiencing such horizontal scroll issue?

Gauravpadam · 2023-10-31T04:27:01Z

I'm on a viewport of ~1600px width

Is this the navigation items you talked about?

Correct, In smaller viewports, Flex can act up and break the alignment as so

Perhaps some justify-content will help?

Can you provide me some screenshots or steps to reproduce?

nekomeowww · 2023-10-31T04:39:59Z

@Gauravpadam

Perhaps some justify-content will help?

Yes. Adjusted.

Interesting. I've tested all sorts of the viewports all the way from 4K to 720P with or without refreshes, I never got the overflow scroll like you did.

Do you know how to use devtools to point the elements? May I ask you to help me to find the overflow element that causes the scroll?

Gauravpadam · 2023-10-31T04:46:58Z

Do you know how to use devtools to point the elements? May I ask you to help me to find the overflow element that causes the scroll?

Sure, I'll try some tinkering and get back to you

Gauravpadam

Addressing these should solve our problems

static/css/community.css

Gauravpadam

Now that fits!

LGTM, Thanks for the good work @nekomeowww
(You'll have to wait a bit more for an approver's approval though)

sftim · 2023-10-31T11:54:50Z

On a wide viewport, these changes make the menu list harder to read (very big gaps between items).

Before

After

however, I don't object if the changes are overall a benefit. What do other reviewers think?

sftim · 2023-10-31T11:57:01Z

Aside / doesn't block a merge
The X (aka Twitter) content is a lot to scroll through; if we can shrink that and still have it useful, even better.

nekomeowww · 2023-10-31T13:26:25Z

On a wide viewport, these changes make the menu list harder to read (very big gaps between items).

@sftim I agree with you. I should keep the padding around navigation items to prevent it being to wide to read. I will adjust it as suggested and make it more closer to the previous design.

The X (aka Twitter) content is a lot to scroll through; if we can shrink that and still have it useful, even better.

Good point. I will try to find a suitable design to try to make it better to scroll so the footer won't be such meaningless.

nekomeowww · 2023-11-17T03:39:08Z

Please note this "Nothing to see here - yet" empty list for Twitter (X) widget wasn't broke by either the related #43766 Pull Request and this Pull Request.

It is something the developer platform of Twitter (X) team should address and get fixed.

About the "Nothing to see here - yet" issue of Twitter (X) widget, there are two forums that are actively being used by community to report the incidents, read more and follow here:

Embedded Tweets Not Working - Publisher Tools / Twitter for Websites - Twitter Developers
[Again] List Widget says “Nothing to see here - yet” if logged out - Publisher Tools / Twitter for Websites - Twitter Developers

nekomeowww · 2023-11-20T02:37:22Z

@sftim @Gauravpadam Could you please take a review on this?

aj11anuj

Layout break problem is already fixed for main website of this page even for smaller viewports. But all the changes and enhancements of this PR seems betterment of whole page. Just one thing, if you can increase the size of headings a bit for smaller viewports, then it will look better.

nekomeowww · 2023-12-05T07:34:24Z

Layout break problem is already fixed for main website of this page even for smaller viewports. But all the changes and enhancements of this PR seems betterment of whole page. Just one thing, if you can increase the size of headings a bit for smaller viewports, then it will look better.

Sure. No problem.

But which one does everyone prefer?

Use `24px`

Use `28px`

1. Fixed overflowed line through of headings, use a better solution to achieve the same effect 2. Adjusted the font size of headings when in smaller screens, it was way too big for mobile devices and reduces readability 3. Added paddings for the Recent News section, it used to have no paddings and looks weird 4. Adjusted the navigation anchor links for sections, the button style was way too big and not harmony with the rest of the design pattern 5. Added comments for blocks 6. Make it more consistent for paddings, margins and other styles for each of the sections 7. Fixed the entangled styles with the size of view ports, make it more smoother when resizes 8. Remove hard-coded paddings and margins 9. Fixed incorrect vw unit usages, center navigation items, linted function calls 10. Added some small animation transitions for the smoother experience Signed-off-by: Neko Ayaka <neko@ayaka.moe>

aj11anuj

/lgtm

k8s-ci-robot · 2023-12-07T14:36:52Z

LGTM label has been added.

Git tree hash: fe6eb6a4eb3bdbdf8536e9b9567c559424febde5

sftim · 2024-01-07T22:06:55Z

/approve

k8s-ci-robot · 2024-01-07T22:07:16Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: sftim

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~OWNERS~~ [sftim]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

k8s-ci-robot added cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/L Denotes a PR that changes 100-499 lines, ignoring generated files. sig/docs Categorizes an issue or PR as relevant to SIG Docs. labels Oct 30, 2023

k8s-ci-robot requested review from bradtopol and reylejano October 30, 2023 09:25

nekomeowww mentioned this pull request Oct 30, 2023

[zh] Sync outdated style and structure of /community page #43739

Merged

k8s-ci-robot added the area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes label Oct 30, 2023

dipesh-rawat reviewed Oct 30, 2023

View reviewed changes

Gauravpadam reviewed Oct 30, 2023

View reviewed changes

nekomeowww force-pushed the dev/docs-community-styles branch from ed09083 to 462315a Compare October 31, 2023 04:26

Gauravpadam reviewed Oct 31, 2023

View reviewed changes

nekomeowww force-pushed the dev/docs-community-styles branch from 6655854 to 1f3a9cb Compare October 31, 2023 08:17

nekomeowww requested review from Gauravpadam and dipesh-rawat October 31, 2023 08:19

Gauravpadam reviewed Oct 31, 2023

View reviewed changes

Gauravpadam mentioned this pull request Oct 31, 2023

fix community page horizontal scrolling #42341

Merged

nekomeowww force-pushed the dev/docs-community-styles branch from 1f3a9cb to 6c1cd08 Compare October 31, 2023 14:26

nekomeowww requested a review from Gauravpadam October 31, 2023 14:26

k8s-ci-robot added the language/en Issues or PRs related to English language label Oct 31, 2023

nekomeowww mentioned this pull request Nov 1, 2023

Improve readabilities by restricting X (Twitter) widget width and height in /community page #43766

Merged

Gauravpadam mentioned this pull request Nov 6, 2023

Vertical white space line causing layout break in mobile view of "Community" page #42795

Closed

nekomeowww closed this Nov 17, 2023

nekomeowww force-pushed the dev/docs-community-styles branch from 6440875 to ee960b6 Compare November 17, 2023 03:25

k8s-ci-robot added size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. and removed size/L Denotes a PR that changes 100-499 lines, ignoring generated files. labels Nov 17, 2023

nekomeowww reopened this Nov 17, 2023

k8s-ci-robot added size/L Denotes a PR that changes 100-499 lines, ignoring generated files. and removed size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. labels Nov 17, 2023

nekomeowww mentioned this pull request Nov 20, 2023

Should update theme/docsy step by step to the latest docsy #44002

Open

k8s-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Nov 29, 2023

nekomeowww force-pushed the dev/docs-community-styles branch from 100f61a to 4ede9c5 Compare November 30, 2023 05:56

k8s-ci-robot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Nov 30, 2023

aj11anuj suggested changes Dec 5, 2023

View reviewed changes

nekomeowww force-pushed the dev/docs-community-styles branch from 4ede9c5 to 31dc056 Compare December 5, 2023 07:35

aj11anuj reviewed Dec 7, 2023

View reviewed changes

k8s-ci-robot assigned aj11anuj Dec 7, 2023

k8s-ci-robot added the lgtm "Looks good to me", indicates that a PR is ready to be merged. label Dec 7, 2023

Gauravpadam mentioned this pull request Dec 18, 2023

REQUEST: New membership for Gauravpadam kubernetes/org#4629

Closed

9 tasks

k8s-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jan 7, 2024

k8s-ci-robot merged commit 7fd7300 into kubernetes:main Jan 7, 2024
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix varies of style issues for community page #43740

Fix varies of style issues for community page #43740

nekomeowww commented Oct 30, 2023 •

edited

Loading

netlify bot commented Oct 30, 2023 •

edited

Loading

dipesh-rawat commented Oct 30, 2023

dipesh-rawat left a comment

Gauravpadam left a comment

Gauravpadam commented Oct 30, 2023

nekomeowww commented Oct 30, 2023

nekomeowww commented Oct 31, 2023 •

edited

Loading

Gauravpadam commented Oct 31, 2023 •

edited

Loading

nekomeowww commented Oct 31, 2023

Gauravpadam commented Oct 31, 2023

Gauravpadam left a comment

Gauravpadam left a comment

sftim commented Oct 31, 2023

sftim commented Oct 31, 2023

nekomeowww commented Oct 31, 2023 •

edited

Loading

nekomeowww commented Nov 17, 2023

nekomeowww commented Nov 20, 2023

aj11anuj left a comment

nekomeowww commented Dec 5, 2023

aj11anuj left a comment

k8s-ci-robot commented Dec 7, 2023

sftim commented Jan 7, 2024

k8s-ci-robot commented Jan 7, 2024

Fix varies of style issues for community page #43740

Fix varies of style issues for community page #43740

Conversation

nekomeowww commented Oct 30, 2023 • edited Loading

Changes

Pull Request Dependency

Previous

Desktop

Inconsistent Padding

Mobile

Height of banner image is too small

Lines overflow

Inconsistent Padding

After

Desktop

Mobile

netlify bot commented Oct 30, 2023 • edited Loading

✅ Pull request preview available for checking

dipesh-rawat commented Oct 30, 2023

dipesh-rawat left a comment

Choose a reason for hiding this comment

Gauravpadam left a comment

Choose a reason for hiding this comment

Gauravpadam commented Oct 30, 2023

nekomeowww commented Oct 30, 2023

nekomeowww commented Oct 31, 2023 • edited Loading

Gauravpadam commented Oct 31, 2023 • edited Loading

nekomeowww commented Oct 31, 2023

Gauravpadam commented Oct 31, 2023

Gauravpadam left a comment

Choose a reason for hiding this comment

Gauravpadam left a comment

Choose a reason for hiding this comment

sftim commented Oct 31, 2023

Before

After

sftim commented Oct 31, 2023

nekomeowww commented Oct 31, 2023 • edited Loading

nekomeowww commented Nov 17, 2023

nekomeowww commented Nov 20, 2023

aj11anuj left a comment

Choose a reason for hiding this comment

nekomeowww commented Dec 5, 2023

Use 24px

Use 28px

aj11anuj left a comment

Choose a reason for hiding this comment

k8s-ci-robot commented Dec 7, 2023

sftim commented Jan 7, 2024

k8s-ci-robot commented Jan 7, 2024

nekomeowww commented Oct 30, 2023 •

edited

Loading

netlify bot commented Oct 30, 2023 •

edited

Loading

nekomeowww commented Oct 31, 2023 •

edited

Loading

Gauravpadam commented Oct 31, 2023 •

edited

Loading

nekomeowww commented Oct 31, 2023 •

edited

Loading

Use `24px`

Use `28px`