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.

Sign up for GitHub

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

Jump to bottom

MINOR: [Docs] Make cards on index page of docs responsive #38693

Merged
merged 2 commits into from
Nov 18, 2023
Merged

MINOR: [Docs] Make cards on index page of docs responsive #38693

merged 2 commits into from
Nov 18, 2023

Conversation

amoeba
Copy link
Member

@amoeba amoeba commented Nov 13, 2023

Rationale for this change

The text inside the Specifications and Development cards in the docs get squished on mobile or small-viewport devices because their CSS grid definition isn't responsive. Example:

arrow apache org_docs_(iPhone SE)

What changes are included in this PR?

This changes this specific use of the grid-item directive to take advantage of the responsive variant,

or four numbers for extra-small (<576px), small (768px), medium (992px) and large screens (>1200px),

For the extra-small variant, the grid dynamically switches to a single-column which prevents squishing of the text inside the card. Otherwise a two-column grid is used.

Are these changes tested?

Yes, I built the docs in a local conda env and tested that the cards look right at all widths. At narrow widths, it looks like this:

devd io_8000_(iPhone XR)

Are there any user-facing changes?

Just to docs, see above.

@amoeba amoeba requested a review from AlenkaF November 13, 2023 22:36
@amoeba
Copy link
Member Author

amoeba commented Nov 13, 2023

I just pushed 8b4ab43 which makes the same change in the other places we have this issue.

@AlenkaF
Copy link
Member

AlenkaF commented Nov 14, 2023

This looks great, didn't even know about it! =)

@AlenkaF
Copy link
Member

AlenkaF commented Nov 14, 2023

@github-actions crossbow submit preview-docs

@github-actions GitHub Actions
Copy link

Revision: 8b4ab43

Submitted crossbow builds: ursacomputing/crossbow @ actions-5f711a3fe6

Task Status
preview-docs Github Actions

@AlenkaF
Copy link
Member

AlenkaF commented Nov 14, 2023

Opened an issue for the docs build failure: #38711

@AlenkaF AlenkaF mentioned this pull request Nov 14, 2023
Closed
@AlenkaF
Copy link
Member

AlenkaF commented Nov 15, 2023

@github-actions crossbow submit preview-docs

@github-actions GitHub Actions
Copy link

Revision: 8b4ab43

Submitted crossbow builds: ursacomputing/crossbow @ actions-50427bf095

Task Status
preview-docs Github Actions

@AlenkaF
Copy link
Member

AlenkaF commented Nov 16, 2023

@github-actions crossbow submit preview-docs

@github-actions GitHub Actions
Copy link

Revision: 8b4ab43

Submitted crossbow builds: ursacomputing/crossbow @ actions-5b59e37ad4

Task Status
preview-docs Github Actions

@AlenkaF
Copy link
Member

AlenkaF commented Nov 16, 2023

@amoeba could you rebase the PR please? The docs preview uses the code from this branch not from main as I previously thought.

@amoeba amoeba force-pushed the minor-docs-responsive-cards branch from 8b4ab43 to 2785703 Compare November 16, 2023 16:46
@amoeba
Copy link
Member Author

amoeba commented Nov 16, 2023

I've rebased my branch.

@AlenkaF
Copy link
Member

AlenkaF commented Nov 16, 2023

Thank you!

@AlenkaF
Copy link
Member

AlenkaF commented Nov 16, 2023

@github-actions crossbow submit preview-docs

@github-actions GitHub Actions
Copy link

Revision: 2785703

Submitted crossbow builds: ursacomputing/crossbow @ actions-e493b84531

Task Status
preview-docs Github Actions

AlenkaF
AlenkaF approved these changes Nov 18, 2023
View reviewed changes
Copy link
Member

@AlenkaF AlenkaF left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Checked the change on my mobile, looks great! Thank you again @amoeba !

@github-actions github-actions bot added awaiting committer review Awaiting committer review and removed awaiting review Awaiting review labels Nov 18, 2023
@AlenkaF AlenkaF merged commit 8301eb5 into apache:main Nov 18, 2023
@AlenkaF AlenkaF removed the awaiting committer review Awaiting committer review label Nov 18, 2023
@conbench-apache-arrow conbench-apache-arrow
Copy link

After merging your PR, Conbench analyzed the 4 benchmarking runs that have been run so far on merge-commit 8301eb5.

There were no benchmark performance regressions. 🎉

The full Conbench report has more details. It also includes information about 1 possible false positive for unstable benchmarks that are known to sometimes produce them.

dgreiss pushed a commit to dgreiss/arrow that referenced this pull request Feb 19, 2024
@amoeba @dgreiss
MINOR: [Docs] Make cards on index page of docs responsive (apache#38693)
a9eeab9 
### Rationale for this change

The text inside the Specifications and Development cards in the docs get squished on mobile or small-viewport devices because their CSS grid definition isn't responsive. Example:

![arrow apache org_docs_(iPhone SE)](https://github.com/apache/arrow/assets/563/a38faf2a-fb8c-4390-a57c-9ee1d6c33a25)

### What changes are included in this PR?

This changes this specific use of the [`grid-item`](https://sphinx-design.readthedocs.io/en/latest/grids.html) directive to take advantage of the responsive variant,

> or four numbers for extra-small (<576px), small (768px), medium (992px) and large screens (>1200px),

For the extra-small variant, the grid dynamically switches to a single-column which prevents squishing of the text inside the card. Otherwise a two-column grid is used.

### Are these changes tested?

Yes, I built the docs in a local conda env and tested that the cards look right at all widths. At narrow widths, it looks like this:

![devd io_8000_(iPhone XR)](https://github.com/apache/arrow/assets/563/fe417e7f-92b2-42d9-ab74-d242c7c6acae)

### Are there any user-facing changes?

Just to docs, see above.

Authored-by: Bryce Mecum <[email protected]>
Signed-off-by: AlenkaF <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@AlenkaF AlenkaF AlenkaF approved these changes

Assignees
No one assigned
Labels
Component: Documentation
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@amoeba @AlenkaF