Skip to content

Mobile column view redux #1720

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

Draft
andyra wants to merge 24 commits into
base: main
Choose a base branch
from
+329 −256
Draft

Mobile column view redux #1720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
3d69ec3
Remove old mobile columns
andyra Nov 24, 2025
f9935aa
Fold in "not(.is-collapsed)" styles
andyra Nov 24, 2025
221a128
Only apply collapsed styles on larger viewports
andyra Nov 24, 2025
43d2434
Size columns to view viewport
andyra Nov 24, 2025
040000b
Correct body grid-row-template on mobile
andyra Nov 24, 2025
f1136b6
Rejigger main layout
andyra Nov 24, 2025
5dad4df
Adapt column view to new application grid layout
andyra Nov 24, 2025
3d47346
WIP
andyra Nov 25, 2025
91a59b8
Scroll snap
andyra Nov 25, 2025
9acf35d
Move cards__list out of pagination partial
andyra Nov 25, 2025
7b419a1
Don't allow overflow on left/right containers
andyra Nov 25, 2025
f0e4077
Remove is-off-screen stuff
andyra Nov 25, 2025
b466e4b
Fix typo
andyra Nov 25, 2025
57f15cd
Merge branch 'main' into mobile-column-view-redux
jzimdars Nov 26, 2025
d594d50
Hide scrollbars
jzimdars Nov 26, 2025
9d28a7a
Fix scroll lock
andyra Dec 1, 2025
5b350bb
Move watching card inside scrollable list
andyra Dec 1, 2025
5b0b134
Remove the new column testing styles
andyra Dec 1, 2025
3eeea90
Defer global scrolling to inner elements only for board permas on mobile
adjogima Dec 2, 2025
05d10f1
Merge pull request #1806 from basecamp/mobile-column-view-redux+conta…
adjogima Dec 2, 2025
329e3e1
Use contained scrolling on desktop column view
andyra Dec 10, 2025
30faed4
Testing an idea
andyra Dec 11, 2025
9746839
Merge branch 'main' into mobile-column-view-redux
andyra Dec 11, 2025
3f4d92f
Fix merge goof
andyra Dec 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/assets/stylesheets/_global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@

/* Components */
--btn-size: 2.65em;
--footer-height: 2.65rem;
--bar-height: 2.65rem;
--tray-size: clamp(12rem, 25dvw, 24rem);

/* Focus rings for keyboard navigation */
Expand All @@ -63,7 +63,7 @@
--ease-out-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1);

@media (max-width: 799px) {
--tray-size: var(--footer-height);
--tray-size: var(--bar-height);
}

/* Layout */
Expand Down
4 changes: 2 additions & 2 deletions app/assets/stylesheets/bar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
--row-gap: 0.2lh;

background-color: var(--color-terminal-bg);
block-size: calc(var(--footer-height) + env(safe-area-inset-bottom));
block-size: calc(var(--bar-height) + env(safe-area-inset-bottom));
color: var(--color-terminal-text);
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -54,7 +54,7 @@
inline-size: 100vw;
inset: auto 0 0 0;
max-inline-size: 100vw;
margin-block-end: calc(var(--footer-height) - 0.3rem + env(safe-area-inset-bottom));
margin-block-end: calc(var(--bar-height) - 0.3rem + env(safe-area-inset-bottom));
position: fixed;
z-index: -1;

Expand Down
3 changes: 2 additions & 1 deletion app/assets/stylesheets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,8 @@
}

/* Turbo */
turbo-frame {
turbo-frame,
turbo-cable-stream-source {
display: contents;
}

Expand Down
Loading
Loading