From 2539f4d80fb1f070296d3f81e72228412f0f910c Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 5 Jun 2025 14:47:52 -0500 Subject: [PATCH 1/7] Tighter tray widths --- app/assets/stylesheets/_global.css | 1 + app/assets/stylesheets/trays.css | 4 ---- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index 6861d229e..1cfdf362c 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -31,6 +31,7 @@ /* Components */ --btn-size: 2.65em; --footer-height: 3.5rem; + --tray-size: clamp(14rem, 25dvw, 24rem); /* Z-index */ --z-events-column-header: 1; diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 2267ea20d..77771ac12 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -1,7 +1,3 @@ -:root { - --tray-size: max(20dvw, 18rem); -} - @layer components { /* Container /* ------------------------------------------------------------------------ */ From b4417718e4871e844a0d3b2bd43469873c464eea Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 5 Jun 2025 15:46:19 -0500 Subject: [PATCH 2/7] Basic working responsive styles --- app/assets/stylesheets/_global.css | 2 +- app/assets/stylesheets/trays.css | 64 +++++++++++++++++++++++--- app/views/my/pins/_tray.html.erb | 4 +- app/views/notifications/_tray.html.erb | 4 +- 4 files changed, 65 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index 1cfdf362c..b7d38f0fa 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -31,7 +31,7 @@ /* Components */ --btn-size: 2.65em; --footer-height: 3.5rem; - --tray-size: clamp(14rem, 25dvw, 24rem); + --tray-size: clamp(12rem, 25dvw, 24rem); /* Z-index */ --z-events-column-header: 1; diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 77771ac12..1b362d4ec 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -4,14 +4,14 @@ .tray { --tray-duration: 350ms; - --tray-margin: var(--inline-space); + --tray-margin: 0.5rem; --tray-radius: 0.25rem; --tray-timing-function: cubic-bezier(0.25, 1.25, 0.5, 1); align-items: end; - block-size: calc(var(--footer-height) - var(--tray-margin) * 2); + block-size: var(--footer-height); display: grid; - inset-block: auto var(--tray-margin); + inset-block: auto 0; inline-size: var(--tray-size); position: fixed; z-index: var(--z-tray); @@ -21,6 +21,15 @@ grid-column-start: 1; grid-row-start: 1; } + + @media (max-width: 799px) { + &:has(.tray__dialog[open]) { + background-color: var(--color-terminal-bg); + inline-size: calc(100% - var(--tray-margin) * 2); + inset-inline-start: var(--tray-margin); + z-index: calc(var(--z-tray) + 2); + } + } } /* Dialog @@ -38,6 +47,7 @@ &:not([open]) { block-size: var(--footer-height); + /* padding-block-end: var(--tray-margin); */ pointer-events: none; } @@ -46,7 +56,7 @@ box-shadow: 0 0 0 1px var(--color-ink-lighter), 0 0 16px oklch(var(--lch-black) / 33%); - inset-block-end: calc(var(--footer-height) - var(--tray-margin)); + inset-block-end: var(--footer-height); overflow: hidden; } } @@ -61,13 +71,27 @@ align-self: stretch; background: transparent; border: 0; - margin-block: calc(-1 * var(--tray-margin)); + display: grid; + place-content: center; z-index: calc(var(--z-tray) + 1); + .icon { + color: var(--color-canvas); + display: none; + } + .tray__dialog[open] ~ &, .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ & { display: none; } + + @media (max-width: 799px) { + inline-size: var(--footer-height); + + .icon { + display: block; + } + } } .tray__actions { @@ -132,14 +156,18 @@ .tray__dialog & { font-size: 10px; + margin-block-end: var(--tray-item-margin); transition: var(--tray-duration) var(--tray-timing-function); transition-delay: var(--tray-item-delay); transition-property: margin, scale; z-index: var(--tray-item-z); + &:first-child { + --tray-item-margin: var(--tray-margin); + } + &:not(:first-child) { scale: var(--tray-item-scale); - margin-block-end: var(--tray-item-margin); } &:nth-child(1) { --tray-item-index: 1; } @@ -300,6 +328,13 @@ .card__bubble { display: none; } + + @media (max-width: 799px) { + .tray__expander { + border-inline-end: 1px dashed oklch(var(--lch-white) / 50%); + translate: calc(-1 * var(--tray-margin)) 0; + } + } } /* Notifications tray @@ -326,5 +361,22 @@ .card__notification-meta { font-size: var(--text-x-small); } + + @media (max-width: 799px) { + .tray__expander { + border-inline-start: 1px dashed oklch(var(--lch-white) / 50%); + translate: var(--tray-margin) 0; + } + } + } +} + +:root { + @media (max-width: 799px) { + --tray-size: var(--footer-height); + + .tray__dialog:not([open]) .tray__item { + opacity: 0; + } } } diff --git a/app/views/my/pins/_tray.html.erb b/app/views/my/pins/_tray.html.erb index 955f34003..615b61e96 100644 --- a/app/views/my/pins/_tray.html.erb +++ b/app/views/my/pins/_tray.html.erb @@ -12,5 +12,7 @@ - + diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb index 03faacab3..3cae87bf1 100644 --- a/app/views/notifications/_tray.html.erb +++ b/app/views/notifications/_tray.html.erb @@ -33,5 +33,7 @@ <% end %> - + From bd8e10f3354d0907772ac461270be166a0cde1fa Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 5 Jun 2025 15:53:13 -0500 Subject: [PATCH 3/7] Don't hide expander on small screens with 1 item --- app/assets/stylesheets/trays.css | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 1b362d4ec..9dc99bd0a 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -133,6 +133,12 @@ } } + @media (max-width: 799px) { + .tray__dialog:not([open]) ~ & { + opacity: 0 !important; + } + } + @media (prefers-color-scheme: dark) { .btn--reversed { color: var(--color-ink); @@ -264,15 +270,6 @@ .tray--pins { inset-inline: var(--tray-margin) auto; - /* Don't expand if there's only one pin */ - .tray__dialog:has(.tray__item:only-child) { - pointer-events: unset; - - ~ .tray__expander { - display: none; - } - } - .tray__item { --tray-item-z: calc(10 - var(--tray-item-index)); @@ -329,6 +326,17 @@ display: none; } + /* Don't expand if there's only one pin on large viewports */ + @media (min-width: 800px) { + .tray__dialog:has(.tray__item:only-child) { + pointer-events: unset; + + ~ .tray__expander { + display: none; + } + } + } + @media (max-width: 799px) { .tray__expander { border-inline-end: 1px dashed oklch(var(--lch-white) / 50%); From 87e93074aec2728af5a39c3af9665aace617b187 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 9 Jun 2025 11:29:25 -0500 Subject: [PATCH 4/7] Complete Pins section --- app/assets/stylesheets/trays.css | 42 ++++++++++++++++++++++++-------- 1 file changed, 32 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 9dc99bd0a..842d75990 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -80,11 +80,12 @@ display: none; } - .tray__dialog[open] ~ &, - .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ & { + /* Always hide when dialog is open */ + .tray__dialog[open] ~ & { display: none; } + /* On mobile, add an icon */ @media (max-width: 799px) { inline-size: var(--footer-height); @@ -92,6 +93,13 @@ display: block; } } + + /* On desktop, hide if there aren't any items to show */ + @media (min-width: 800px) { + .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ & { + display: none + } + } } .tray__actions { @@ -136,6 +144,10 @@ @media (max-width: 799px) { .tray__dialog:not([open]) ~ & { opacity: 0 !important; + + .btn { + pointer-events: none; + } } } @@ -326,7 +338,24 @@ display: none; } - /* Don't expand if there's only one pin on large viewports */ + /* On mobile, add a border */ + @media (max-width: 799px) { + .tray__expander { + border-inline-end: 1px dashed oklch(var(--lch-white) / 50%); + translate: calc(-1 * var(--tray-margin)) 0; + } + + /* …and disable the expander if there aren't items to show */ + .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ .tray__expander { + pointer-events: none; + + .icon { + opacity: 0.5; + } + } + } + + /* On desktop, don't expand if there's only one pin */ @media (min-width: 800px) { .tray__dialog:has(.tray__item:only-child) { pointer-events: unset; @@ -336,13 +365,6 @@ } } } - - @media (max-width: 799px) { - .tray__expander { - border-inline-end: 1px dashed oklch(var(--lch-white) / 50%); - translate: calc(-1 * var(--tray-margin)) 0; - } - } } /* Notifications tray From 827b5801925a60d3863f1f188ebcb9998e9ac30e Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 9 Jun 2025 11:49:13 -0500 Subject: [PATCH 5/7] Add indicator when there's something to show --- app/assets/stylesheets/trays.css | 24 ++++++++++++++++++++++-- app/views/notifications/_tray.html.erb | 1 + 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 842d75990..4848f1910 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -47,7 +47,6 @@ &:not([open]) { block-size: var(--footer-height); - /* padding-block-end: var(--tray-margin); */ pointer-events: none; } @@ -61,7 +60,7 @@ } } - /* Expander & Actions + /* Expander /* ------------------------------------------------------------------------ */ .tray__expander { @@ -92,6 +91,17 @@ .icon { display: block; } + + /* Show a red dot if there are items to show*/ + .tray__dialog:has(.tray__item:not(.tray__item--overflow)) ~ &:after { + background: tomato; + block-size: 1ch; + border-radius: 50%; + content: ""; + inline-size: 1ch; + inset: 25% 25% auto auto; + position: absolute; + } } /* On desktop, hide if there aren't any items to show */ @@ -102,6 +112,9 @@ } } + /* Actions + /* ------------------------------------------------------------------------ */ + .tray__actions { --hover-size: 0; @@ -392,11 +405,18 @@ font-size: var(--text-x-small); } + /* On mobile… */ @media (max-width: 799px) { + /* Add a border to the expander */ .tray__expander { border-inline-start: 1px dashed oklch(var(--lch-white) / 50%); translate: var(--tray-margin) 0; } + + /* Hide the dialog if there aren't items */ + .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) { + display: none; + } } } } diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb index 3cae87bf1..ad5275251 100644 --- a/app/views/notifications/_tray.html.erb +++ b/app/views/notifications/_tray.html.erb @@ -23,6 +23,7 @@ <%= link_to tag.span("Notifications"), notifications_path, class: "btn btn--reversed borderless fill-transparent center txt-uppercase txt-x-small full-width", + title: "See all notifications", data: { action: "click->dialog#close" } %> <%= link_to settings_notifications_path, From 9679d8c8ee76597585ca94eca483313369cae458 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 9 Jun 2025 12:02:05 -0500 Subject: [PATCH 6/7] Tidy up --- app/assets/stylesheets/_global.css | 4 ++ app/assets/stylesheets/trays.css | 66 ++++++++++++++---------------- 2 files changed, 34 insertions(+), 36 deletions(-) diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index b7d38f0fa..f5b4bffd5 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -33,6 +33,10 @@ --footer-height: 3.5rem; --tray-size: clamp(12rem, 25dvw, 24rem); + @media (max-width: 799px) { + --tray-size: var(--footer-height); + } + /* Z-index */ --z-events-column-header: 1; --z-events-day-header: 2; diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 4848f1910..fd9356baf 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -45,11 +45,6 @@ transition: var(--tray-duration) var(--tray-timing-function); transition-property: background-color, box-shadow, inset-block-end; - &:not([open]) { - block-size: var(--footer-height); - pointer-events: none; - } - &[open] { border-radius: var(--tray-radius); box-shadow: @@ -58,6 +53,11 @@ inset-block-end: var(--footer-height); overflow: hidden; } + + &:not([open]) { + block-size: var(--footer-height); + pointer-events: none; + } } /* Expander @@ -79,12 +79,11 @@ display: none; } - /* Always hide when dialog is open */ .tray__dialog[open] ~ & { display: none; } - /* On mobile, add an icon */ + /* On mobile, add an icon to the expander button */ @media (max-width: 799px) { inline-size: var(--footer-height); @@ -92,9 +91,9 @@ display: block; } - /* Show a red dot if there are items to show*/ + /* Show a red dot if there are items to show */ .tray__dialog:has(.tray__item:not(.tray__item--overflow)) ~ &:after { - background: tomato; + background: oklch(var(--lch-red-medium)); block-size: 1ch; border-radius: 50%; content: ""; @@ -129,12 +128,6 @@ transition: translate var(--tray-duration) var(--tray-timing-function); translate: 0 var(--footer-height); - .tray__dialog[open] ~ &, - .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ & { - opacity: 1; - translate: 0 0; - } - /* Get the circle buttons to be full-height without magic numbers */ form { aspect-ratio: 1; @@ -154,13 +147,16 @@ } } - @media (max-width: 799px) { - .tray__dialog:not([open]) ~ & { - opacity: 0 !important; + .tray__dialog[open] ~ & { + opacity: 1; + translate: 0 0; + } - .btn { - pointer-events: none; - } + /* On desktop, show actions when there aren't items */ + @media (min-width: 800px) { + .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ & { + opacity: 1; + translate: 0 0; } } @@ -218,6 +214,12 @@ --tray-item-scale: 1; } + .tray__dialog:not([open]) & { + @media (max-width: 799px) { + opacity: 0; + } + } + .bubble { display: none; } @@ -238,6 +240,7 @@ justify-content: center; } + /* Only show when there are 7+ items */ .tray__dialog:has(.tray__item:nth-child(7)) & { display: flex; } @@ -289,7 +292,7 @@ } } - /* Pins tray + /* Pin-specific styles /* ------------------------------------------------------------------------ */ .tray--pins { @@ -351,8 +354,9 @@ display: none; } - /* On mobile, add a border */ + /* On mobile… */ @media (max-width: 799px) { + /* …add a border */ .tray__expander { border-inline-end: 1px dashed oklch(var(--lch-white) / 50%); translate: calc(-1 * var(--tray-margin)) 0; @@ -380,7 +384,7 @@ } } - /* Notifications tray + /* Notification-specific styles /* ------------------------------------------------------------------------ */ .tray--notifications { @@ -407,26 +411,16 @@ /* On mobile… */ @media (max-width: 799px) { - /* Add a border to the expander */ + /* …add a border */ .tray__expander { border-inline-start: 1px dashed oklch(var(--lch-white) / 50%); translate: var(--tray-margin) 0; } - /* Hide the dialog if there aren't items */ + /* …and hide the dialog if there aren't items to show */ .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) { display: none; } } } } - -:root { - @media (max-width: 799px) { - --tray-size: var(--footer-height); - - .tray__dialog:not([open]) .tray__item { - opacity: 0; - } - } -} From fb291c814d149c567208a3f36bdbb68c1b655126 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 10 Jun 2025 10:09:35 -0500 Subject: [PATCH 7/7] Dark mode corrections --- app/assets/stylesheets/_global.css | 1 + app/assets/stylesheets/terminals.css | 1 - app/assets/stylesheets/trays.css | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index f5b4bffd5..c7e4cedd0 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -283,6 +283,7 @@ --lch-pink-lighter: 30% 0.03 346; --lch-pink-lightest: 25% 0.011 348; + --color-terminal-bg: var(--color-black); --color-terminal-text-light: oklch(var(--lch-green-dark)); --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42), diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css index f5a97bf0a..e0902fd49 100644 --- a/app/assets/stylesheets/terminals.css +++ b/app/assets/stylesheets/terminals.css @@ -12,7 +12,6 @@ z-index: var(--z-terminal); @media (prefers-color-scheme: dark) { - background-color: var(--color-black); border-block-start: 1px solid var(--color-ink-lighter); } } diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index fd9356baf..59592c714 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -75,7 +75,7 @@ z-index: calc(var(--z-tray) + 1); .icon { - color: var(--color-canvas); + color: var(--color-white); display: none; }