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

Merge pull request #1711 from basecamp/jz-11-24-25

Browse Source 
JZ 11/24/25
This commit is contained in:
Jason Zimdars
2025-11-24 21:31:06 -06:00
committed by GitHub
parent dc2d86ca54 3e0d2d8b4d
commit 30f50d6715
15 changed files with 43 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/_global.css
+2 -2
View File
@@ -74,11 +74,11 @@
--z-events-column-header: 1;
--z-events-day-header: 3;
--z-popup: 10;
--z-bar: 20;
--z-tray: 21;
--z-nav: 30;
--z-flash: 40;
--z-tooltip: 50;
--z-bar: 60;
--z-tray: 61;
/* OKLCH colors: Fixed */
--lch-black: 0% 0 0;
app/assets/stylesheets/bar.css
+4 -2
View File
@@ -11,7 +11,9 @@
inset: auto 0 0 0;
max-block-size: 100%;
padding-block: var(--block-space) calc(var(--block-space) + env(safe-area-inset-bottom));
padding-inline: calc(var(--tray-size) + calc(var(--inline-space) * 3));
padding-inline:
calc(var(--tray-size) + calc(var(--inline-space) * 3) + env(safe-area-inset-left))
calc(var(--tray-size) + calc(var(--inline-space) * 3) + env(safe-area-inset-right));
place-content: center;
position: fixed;
view-transition-name: bar;
@@ -46,7 +48,7 @@
inline-size: 100vw;
inset: auto 0 0 0;
max-inline-size: 100vw;
margin-block-end: calc(var(--footer-height) - 0.3rem);
margin-block-end: calc(var(--footer-height) - 0.3rem + env(safe-area-inset-bottom));
position: fixed;
z-index: -1;
app/assets/stylesheets/card-columns.css
+6
View File
@@ -681,6 +681,7 @@
/* -------------------------------------------------------------------------- */
/* Surface a mini bubble if there are cards with bubbles inside */
.cards--considering:has(.bubble:not([hidden])),
.cards--doing.is-collapsed:has(.bubble:not([hidden])) {
.cards__transition-container {
--bubble-color: var(--card-color, oklch(var(--lch-blue-medium)));
@@ -700,6 +701,11 @@
translate: 20% -20%;
z-index: 1;
}
.cards--considering &:before {
inset: 0 auto auto 0;
translate: 100% 75%;
}
}
}
app/assets/stylesheets/layout.css
+3 -1
View File
@@ -12,7 +12,9 @@
inline-size: 100dvw;
margin-inline: auto;
max-inline-size: 100dvw;
padding-inline: var(--main-padding);
padding-inline:
calc(var(--main-padding) + env(safe-area-inset-left))
calc(var(--main-padding) + env(safe-area-inset-right));
text-align: center;
}
app/assets/stylesheets/nav.css
+9
View File
@@ -75,10 +75,15 @@
0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
grid-template-rows: auto 1fr auto;
gap: var(--nav-section-gap);
max-block-size: calc(100vh - var(--block-space) - var(--footer-height));
overflow: hidden;
padding-block-end: 0;
scrollbar-gutter: stable both-edges;
z-index: var(--z-nav);
@media (max-height: 668px) {
max-block-size: calc(100vh - var(--block-space));
}
}
.nav__scroll-container {
@@ -209,5 +214,9 @@
padding: 1.5ch;
text-align: center;
z-index: 1;
@media (max-height: 668px) {
font-size: var(--text-x-small);
}
}
}
app/assets/stylesheets/popup.css
+2 -1
View File
@@ -9,8 +9,9 @@
--popup-display: flex;
inset: 0 auto auto 50%;
min-inline-size: min(25ch, calc(100vw - (var(--panel-padding) * 2)));
max-block-size: 70dvh;
max-inline-size: min(55ch, calc(100vw - (var(--panel-padding) * 2)));
min-inline-size: min(25ch, calc(100vw - (var(--panel-padding) * 2)));
overflow: auto;
position: absolute;
transform: translateX(-50%);
app/assets/stylesheets/search.css
+2 -18
View File
@@ -50,35 +50,19 @@ summary {
.search__reset {
--btn-background: var(--color-terminal-bg);
--btn-size: 1.25lh;
@media (min-width: 800px) {
.search__input:placeholder-shown ~ & {
opacity: 0;
}
}
--btn-size: 1.5lh;
}
/* Content
/* ------------------------------------------------------------------------ */
.search__header {
align-items: center;
display: flex;
inset: 0 0 auto 0;
justify-content: flex-end;
padding: var(--block-space-half) var(--block-space);
pointer-events: none;
position: absolute;
}
.search__list {
display: grid;
gap: var(--block-space);
list-style: none;
margin: 0 auto;
max-inline-size: 80ch;
max-inline-size: min(80ch, 100%);
padding: 0;
text-align: start;
}
app/assets/stylesheets/tooltips.css
+1 -1
View File
@@ -10,7 +10,7 @@
font-size: var(--text-x-small);
font-weight: normal;
inset: -1ch auto auto 50%;
max-inline-size: 50ch;
max-inline-size: min(50ch, calc(100vw - (var(--inline-space) * 2)));
opacity: 0;
padding: 0.25ch 1ch;
transition: var(--tooltip-duration) ease-out allow-discrete;
app/javascript/controllers/bar_controller.js
+1 -1
View File
@@ -65,8 +65,8 @@ export default class extends Controller {
const autofocusElement = element.querySelector("[autofocus]")
await nextFrame()
autofocusElement?.focus()
await nextFrame()
autofocusElement?.select()
}
app/javascript/controllers/dialog_controller.js
-4
View File
@@ -1,6 +1,5 @@
import { Controller } from "@hotwired/stimulus"
import { orient } from "helpers/orientation_helpers"
import { limitHeightToViewport } from "helpers/sizing_helpers"
export default class extends Controller {
static targets = [ "dialog" ]
@@ -23,8 +22,6 @@ export default class extends Controller {
orient(this.dialogTarget)
}
limitHeightToViewport(this.dialogTarget, this.sizingValue)
this.loadLazyFrames()
this.dialogTarget.setAttribute("aria-hidden", "false")
this.dispatch("show")
@@ -43,7 +40,6 @@ export default class extends Controller {
this.dialogTarget.setAttribute("aria-hidden", "true")
this.dialogTarget.blur()
orient(this.dialogTarget, false)
limitHeightToViewport(this.dialogTarget, false)
this.dispatch("close")
}
app/javascript/helpers/orientation_helpers.js
+11 -12
View File
@@ -1,15 +1,18 @@
const EDGE_THRESHOLD = 16
export function orient(el, orient = true) {
const directions = [
["orient-left", spaceOnRight],
["orient-right", spaceOnLeft],
["orient-top", spaceOnBottom]
];
el.classList.remove("orient-left", "orient-right")
directions.forEach(([className, fn]) =>
el.classList[orient && fn(el) < EDGE_THRESHOLD ? "add" : "remove"](className)
);
if (!orient) return
const rightSpace = spaceOnRight(el)
const leftSpace = spaceOnLeft(el)
if (rightSpace < EDGE_THRESHOLD && rightSpace < leftSpace) {
el.classList.add("orient-left")
} else if (leftSpace < EDGE_THRESHOLD && leftSpace < rightSpace) {
el.classList.add("orient-right")
}
}
function spaceOnLeft(el) {
@@ -19,7 +22,3 @@ function spaceOnLeft(el) {
function spaceOnRight(el) {
return window.innerWidth - el.getBoundingClientRect().right
}
function spaceOnBottom(el) {
return window.innerHeight - el.getBoundingClientRect().bottom
}
app/javascript/helpers/sizing_helpers.js
-12
View File
@@ -1,12 +0,0 @@
export function limitHeightToViewport(el, sizing = true, margin = 64) {
if (!el) return
if (sizing) {
const rect = el.getBoundingClientRect()
const top = Math.max(rect.top, margin)
const max = Math.max(0, window.innerHeight - margin - top)
el.style.maxHeight = `${max}px`
} else {
el.style.maxHeight = ""
}
}
app/views/layouts/shared/_head.html.erb
+1 -1
View File
@@ -7,7 +7,7 @@
<% end %>
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#0d181d" media="(prefers-color-scheme: dark)">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= tag.meta name: "current-user-id", content: Current.user.id if Current.user %>
app/views/pwa/manifest.json.erb
+1 -3
View File
@@ -36,7 +36,5 @@
"url": "<%= root_path %>",
"icons": [{ "src": "<%= image_url("activity.svg") %>", "sizes": "any" }]
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff"
]
}
app/views/searches/_results.html.erb
-7
View File
@@ -1,10 +1,3 @@
<div class="search__header">
<button class="btn txt-x-small" data-action="bar#reset">
<%= icon_tag "remove" %>
<span class="for-screen-reader">Close</span>
</button>
</div>
<section class="search">
<div class="search__results">
<% unless page.used? %>