bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic scrolling setup

Browse Source
This commit is contained in:
Andy Smith
2025-12-15 14:56:27 -06:00
parent ffb5474a79
commit f2591e7da6
6 changed files with 51 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/base.css
+2 -1
View File
@@ -102,7 +102,8 @@
}
/* Turbo */
turbo-frame {
turbo-frame,
turbo-cable-stream-source {
display: contents;
}
app/assets/stylesheets/card-columns.css
+25
View File
@@ -1,4 +1,27 @@
@layer components {
/* Layout adjustments for contained scrolling
/* ------------------------------------------------------------------------ */
body.contained-scrolling {
block-size: 100dvh;
grid-template-rows: 1fr var(--footer-height);
#global-container,
#main {
display: grid;
grid-template-rows: auto 1fr;
}
#global-container {
overflow: hidden;
}
#main {
overflow: auto;
padding: 0;
}
}
/* Column container
/* ------------------------------------------------------------------------ */
@@ -22,6 +45,7 @@
display: grid;
gap: var(--column-gap);
grid-template-columns: 1fr auto 1fr;
inline-size: 100%;
margin-inline: auto;
max-inline-size: var(--main-width);
outline: none;
@@ -88,6 +112,7 @@
scroll-snap-align: start;
@media (max-width: 639px) {
overflow-y: auto;
scroll-snap-align: center;
}
app/assets/stylesheets/layout.css
+10 -5
View File
@@ -8,6 +8,16 @@
}
}
/* Required for the card column page on mobile, but not needed otherwise */
:where(#global-container) {
display: contents;
}
:where(#header) {
position: relative;
z-index: var(--z-nav);
}
:where(#main) {
inline-size: 100dvw;
margin-inline: auto;
@@ -22,11 +32,6 @@
max-inline-size: 100dvw;
}
:where(#header) {
position: relative;
z-index: var(--z-nav);
}
:is(#header, #footer) {
@media print {
display: none;
app/assets/stylesheets/utilities.css
-6
View File
@@ -95,12 +95,6 @@
.overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; }
.overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.overflow-hide-scrollbar::-webkit-scrollbar {
@media (pointer: course) {
display: none;
}
}
.overflow-line-clamp {
-webkit-line-clamp: var(--lines, 2);
-webkit-box-orient: vertical;
app/views/boards/show.html.erb
+1
View File
@@ -1,4 +1,5 @@
<% @page_title = @board.name %>
<% @body_class = "contained-scrolling" %>
<% turbo_exempts_page_from_cache %>
<%= turbo_stream_from @board %>
app/views/layouts/application.html.erb
+13 -11
View File
@@ -2,19 +2,21 @@
<html lang="en">
<%= render "layouts/shared/head" %>
<body data-controller="local-time timezone-cookie turbo-navigation theme" data-action="turbo:morph@window->local-time#refreshAll turbo:before-visit@document->turbo-navigation#rememberLocation">
<header class="header <%= @header_class %>" id="header">
<a href="#main" class="header__skip-navigation btn" data-turbo="false">Skip to main content</a>
<%= render "my/menu" if Current.user %>
<%= yield :header %>
</header>
<body class="<%= @body_class %>" data-controller="local-time timezone-cookie turbo-navigation theme" data-action="turbo:morph@window->local-time#refreshAll turbo:before-visit@document->turbo-navigation#rememberLocation">
<div id="global-container">
<header class="header <%= @header_class %>" id="header">
<a href="#main" class="header__skip-navigation btn" data-turbo="false">Skip to main content</a>
<%= render "my/menu" if Current.user %>
<%= yield :header %>
</header>
<%= render "layouts/shared/flash" %>
<%= render "layouts/shared/time_zone" if Current.user %>
<%= render "layouts/shared/flash" %>
<%= render "layouts/shared/time_zone" if Current.user %>
<main id="main">
<%= yield %>
</main>
<main id="main">
<%= yield %>
</main>
</div>
<footer id="footer">
<%= yield :footer %>