Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make the video section height on the main page flexible #49443

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

shurup
Copy link
Member

@shurup shurup commented Jan 15, 2025

This PR improves the KubeCon links section redesign introduced in #49167. While propagating these recent changes to various localisations, I stumbled upon an issue in #49442. When we have a lot of content in the video block (which includes the KubeCon links section), some links might not fit due to a limited height. Here, you can see a missing (hidden) link to the 5th event in the Portuguese localisation:

image

To prevent this from happening, this PR gets rid of fixed heights for the video block. With overflow:hidden added, it makes its height flexible. E.g., we'll be able to add even more events with no issue:

image

To keep backward compatibility with the pages using old KubeCon links, the #video:has(#desktopKCButton) workaround is added to _base.scss.

My changes also remove an unnecessary 200px-height video block with no content for the mobile layout — it will just disappear. Let me know if we really need it back for mobiles:

image

P.S. I tested the changes in two browsers (Chrome & Firefox) and various localisations (e.g., those that have already adopted new KubeCon links and those that have not).

Signed-off-by: Dmitry Shurupov <[email protected]>
@k8s-ci-robot k8s-ci-robot added the cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. label Jan 15, 2025
@k8s-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign tengqm for approval. For more information see the Code Review Process.

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

Needs approval from an approver in each of these files:

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 k8s-ci-robot added the area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes label Jan 15, 2025
@k8s-ci-robot k8s-ci-robot added sig/docs Categorizes an issue or PR as relevant to SIG Docs. size/M Denotes a PR that changes 30-99 lines, ignoring generated files. labels Jan 15, 2025
Copy link

netlify bot commented Jan 15, 2025

Pull request preview available for checking

Built without sensitive environment variables

Name Link
🔨 Latest commit ff7c22b
🔍 Latest deploy log https://app.netlify.com/sites/kubernetes-io-main-staging/deploys/67877c00b84e1a00088d796e
😎 Deploy Preview https://deploy-preview-49443--kubernetes-io-main-staging.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. sig/docs Categorizes an issue or PR as relevant to SIG Docs. size/M Denotes a PR that changes 30-99 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants