Changes to make the docs homepage cards look consistent #43166

Gauravpadam · 2023-09-22T14:27:22Z

Closes #23914
This PR is an extension of #43164 to cover the styling changes and make some additional markup changes

Please have a look at the Deploy Preview for a better perspective of the PR

netlify · 2023-09-22T14:44:12Z

✅ Pull request preview available for checking

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`0b4c196`
🔍 Latest deploy log	https://app.netlify.com/sites/kubernetes-io-main-staging/deploys/65140e60da07c800080df604
😎 Deploy Preview	https://deploy-preview-43166--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.

aj11anuj

Lgtm as it's a replica of #43164 (scss commit), 👍

dipesh-rawat · 2023-09-23T00:22:07Z

/area web-development

aj11anuj · 2023-09-23T06:06:46Z

For finishing touch, few things that are coming to my mind:-

(3rd row, 3rd column) Card/Tile's hyperlink text can be changed to "Documentation versions" and it can be turned into a blue button, as it's looking a little odd that only this card doesn't have any button like others.
(3rd row, 3rd column) Card/Tile's heading can be changed to "Available Docs", as sometimes in smaller devices like mobile, that "documentation" word is looking like :-
documentat
ion
At some cards there is some gap between blue button and hyperlinks, maybe by adding some relevant hyperlinks related to that card/tile, this space can be filled.

Gauravpadam · 2023-09-23T10:26:47Z

@aj11anuj, I appreciate the time taken for the review :)

So regarding the 'Documentation word wrap' which you addressed in the second pointer, We need not change the front matter for that as CSS should adapt to html and not the other way around. I'll just reduce the padding which will render the text properly on most viewports

I'm afraid that the first and the third issues can't be addressed with this PR, As they need some changes over the homepage index . I'd be happy to see a follow-up PR from your end to propose these changes

sftim · 2023-09-23T11:00:52Z

I don't think the blue card background improves things
The page would look better with whitespace above the buttons

Ideal outcome: also use flexbox and a variable layout so that there are fewer columns - maybe just 1 - on a narrow, mobile-device viewport.

sftim · 2023-09-23T11:01:50Z

I recommend against making content change in this PR. Style changes should work for the content we have, which is in 13(ish) localizations, and ideally for the content we might have in the future. Pages can get reworded etc.

Gauravpadam · 2023-09-23T13:09:01Z

I get your point @sftim, I've removed the background and focused more on the alignments in the recent push. The page would work just fine on most viewports now

sftim · 2023-09-23T19:12:50Z

assets/scss/_custom.scss

The new buttons can be a bit wide:

Though that's not a standard viewport, I do see the problem here @sftim. I'll figure something out

If you need / want to change the HTML templating to help this land, that's fine.

I think it's more of a css ball game. Should we perhaps try borders if backgrounds don't work? You see the problem here is actually addressing the disconnect between the text alignment and the centred button

I'd either use padding on an outer <div> or look at using flexbox. It's CSS though, so there are hundreds of options.

😉

Gauravpadam · 2023-09-25T04:24:16Z

/hold I'd like to try out some ideas

Gauravpadam · 2023-09-27T09:40:07Z

/unhold
Good for review now

Reduced padding to make text compatible Some amendments ; bg removed Buttons left aligned Grid is more suitable for context added a wrapper div with flex

sftim

LGTM

I'd like to hear what other reviewers think.

sftim · 2023-09-27T15:11:34Z

assets/scss/_custom.scss

One weirdness is that the buttons are different widths (and still quite wide).

I think this is overall an improvement though.

Ah, I understand that It might look a little off sometimes 😬. While we've tried some other approaches, I personally feel that this one offers the best consistency and alignment over many viewports

LGTM. @sftim - on training https://deploy-preview-43166--kubernetes-io-main-staging.netlify.app/training/. - There was light background for tile with no border, do you think is it worth to get inline with that.

There was light background for tile with no border, do you think is it worth to get inline with that.

I don't - the docs have a simpler look whereas the training page is a bit more promotional.

But, thanks for suggesting it.

sftim

I'm going to treat #43166 (comment) as LGTM

/lgtm
from that.

/approve
from me

and thank you for the PR!

sftim · 2023-10-05T06:56:21Z

assets/scss/_custom.scss

+
+      button {
+        height: min-content;
+        width: auto;


A bit of CSS calc() here could improve the look further. If you want to put the work in there (it's fine not to!)

Sure, Might as well try that. If I'll like what I see, A PR will be on it's way

k8s-ci-robot · 2023-10-05T06:56:41Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: aj11anuj, 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 · 2023-10-05T06:56:41Z

LGTM label has been added.

Git tree hash: 257156edd54fdb7ec524340f41d4992b72369ca9

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

k8s-ci-robot requested review from kbhawkey and mengjiao-liu September 22, 2023 14:28

Gauravpadam changed the title ~~SCSS changes for docs home page card layout~~ SCSS changes to make the docs home page cards look consistent Sep 22, 2023

Gauravpadam changed the title ~~SCSS changes to make the docs home page cards look consistent~~ SCSS changes to make the docs homepage cards look consistent Sep 22, 2023

aj11anuj approved these changes Sep 22, 2023

View reviewed changes

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

Gauravpadam force-pushed the docs-homepage-SCSS-changes branch from ee226f3 to 6957ce8 Compare September 23, 2023 10:32

sftim reviewed Sep 23, 2023

View reviewed changes

k8s-ci-robot added the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Sep 25, 2023

k8s-ci-robot removed the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Sep 27, 2023

Gauravpadam changed the title ~~SCSS changes to make the docs homepage cards look consistent~~ Changes to make the docs homepage cards look consistent Sep 27, 2023

Changes for docs home page card layout

0b4c196

Reduced padding to make text compatible Some amendments ; bg removed Buttons left aligned Grid is more suitable for context added a wrapper div with flex

Gauravpadam force-pushed the docs-homepage-SCSS-changes branch from f2eec2b to 0b4c196 Compare September 27, 2023 11:13

Gauravpadam requested a review from sftim September 27, 2023 11:46

sftim reviewed Sep 27, 2023

View reviewed changes

aj11anuj mentioned this pull request Sep 29, 2023

Button for "About the documentation" #43249

Closed

sftim reviewed Oct 5, 2023

View reviewed changes

k8s-ci-robot assigned sftim Oct 5, 2023

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

k8s-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Oct 5, 2023

k8s-ci-robot merged commit 7986211 into kubernetes:main Oct 5, 2023
6 checks passed

Gauravpadam mentioned this pull request Dec 18, 2023

REQUEST: New membership for Gauravpadam kubernetes/org#4629

Closed

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Changes to make the docs homepage cards look consistent #43166

Changes to make the docs homepage cards look consistent #43166

Gauravpadam commented Sep 22, 2023 •

edited

Loading

netlify bot commented Sep 22, 2023 •

edited

Loading

aj11anuj left a comment

dipesh-rawat commented Sep 23, 2023

aj11anuj commented Sep 23, 2023 •

edited

Loading

Gauravpadam commented Sep 23, 2023

sftim commented Sep 23, 2023

sftim commented Sep 23, 2023

Gauravpadam commented Sep 23, 2023

sftim Sep 23, 2023

Gauravpadam Sep 23, 2023

sftim Sep 23, 2023

Gauravpadam Sep 23, 2023

sftim Sep 23, 2023

Gauravpadam commented Sep 25, 2023

Gauravpadam commented Sep 27, 2023

sftim left a comment

sftim Sep 27, 2023

Gauravpadam Sep 27, 2023

Goclipse27 Oct 4, 2023 •

edited

Loading

sftim Oct 5, 2023

sftim left a comment

sftim Oct 5, 2023

Gauravpadam Oct 5, 2023

k8s-ci-robot commented Oct 5, 2023

k8s-ci-robot commented Oct 5, 2023

Changes to make the docs homepage cards look consistent #43166

Changes to make the docs homepage cards look consistent #43166

Conversation

Gauravpadam commented Sep 22, 2023 • edited Loading

netlify bot commented Sep 22, 2023 • edited Loading

✅ Pull request preview available for checking

aj11anuj left a comment

Choose a reason for hiding this comment

dipesh-rawat commented Sep 23, 2023

aj11anuj commented Sep 23, 2023 • edited Loading

Gauravpadam commented Sep 23, 2023

sftim commented Sep 23, 2023

sftim commented Sep 23, 2023

Gauravpadam commented Sep 23, 2023

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

Gauravpadam commented Sep 25, 2023

Gauravpadam commented Sep 27, 2023

sftim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Goclipse27 Oct 4, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sftim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

k8s-ci-robot commented Oct 5, 2023

k8s-ci-robot commented Oct 5, 2023

Gauravpadam commented Sep 22, 2023 •

edited

Loading

netlify bot commented Sep 22, 2023 •

edited

Loading

aj11anuj commented Sep 23, 2023 •

edited

Loading

Goclipse27 Oct 4, 2023 •

edited

Loading