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

Merge branch 'main' into public-collections

Browse Source 
* main:
  Dark mode corrections
  Tidy up
  Add indicator when there's something to show
  Complete Pins section
  Don't hide expander on small screens with 1 item
  Basic working responsive styles
  Tighter tray widths
This commit is contained in:
Jason Zimdars
2025-06-10 12:27:46 -05:00
parent aa3c32f916 9dbc890cdb
commit 2f23f24c3f
5 changed files with 140 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/_global.css
+6
View File
@@ -31,6 +31,11 @@
/* Components */
--btn-size: 2.65em;
--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;
@@ -278,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),
app/assets/stylesheets/terminals.css
-1
View File
@@ -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);
}
}
app/assets/stylesheets/trays.css
+127 -35
View File
@@ -1,21 +1,17 @@
:root {
--tray-size: max(20dvw, 18rem);
}
@layer components {
/* Container
/* ------------------------------------------------------------------------ */
.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);
@@ -25,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
@@ -40,22 +45,22 @@
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:
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;
}
&:not([open]) {
block-size: var(--footer-height);
pointer-events: none;
}
}
/* Expander & Actions
/* Expander
/* ------------------------------------------------------------------------ */
.tray__expander {
@@ -65,15 +70,50 @@
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);
.tray__dialog[open] ~ &,
.tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ & {
.icon {
color: var(--color-white);
display: none;
}
.tray__dialog[open] ~ & {
display: none;
}
/* On mobile, add an icon to the expander button */
@media (max-width: 799px) {
inline-size: var(--footer-height);
.icon {
display: block;
}
/* Show a red dot if there are items to show */
.tray__dialog:has(.tray__item:not(.tray__item--overflow)) ~ &:after {
background: oklch(var(--lch-red-medium));
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 */
@media (min-width: 800px) {
.tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ & {
display: none
}
}
}
/* Actions
/* ------------------------------------------------------------------------ */
.tray__actions {
--hover-size: 0;
@@ -88,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;
@@ -113,6 +147,19 @@
}
}
.tray__dialog[open] ~ & {
opacity: 1;
translate: 0 0;
}
/* 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;
}
}
@media (prefers-color-scheme: dark) {
.btn--reversed {
color: var(--color-ink);
@@ -136,14 +183,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; }
@@ -163,6 +214,12 @@
--tray-item-scale: 1;
}
.tray__dialog:not([open]) & {
@media (max-width: 799px) {
opacity: 0;
}
}
.bubble {
display: none;
}
@@ -183,6 +240,7 @@
justify-content: center;
}
/* Only show when there are 7+ items */
.tray__dialog:has(.tray__item:nth-child(7)) & {
display: flex;
}
@@ -238,21 +296,12 @@
}
}
/* Pins tray
/* Pin-specific styles
/* ------------------------------------------------------------------------ */
.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));
@@ -308,9 +357,38 @@
.card__bubble {
display: none;
}
/* 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;
}
/* …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;
~ .tray__expander {
display: none;
}
}
}
}
/* Notifications tray
/* Notification-specific styles
/* ------------------------------------------------------------------------ */
.tray--notifications {
@@ -334,5 +412,19 @@
.card__notification-meta {
font-size: var(--text-x-small);
}
/* On mobile… */
@media (max-width: 799px) {
/* …add a border */
.tray__expander {
border-inline-start: 1px dashed oklch(var(--lch-white) / 50%);
translate: var(--tray-margin) 0;
}
/* …and hide the dialog if there aren't items to show */
.tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) {
display: none;
}
}
}
}
app/views/my/pins/_tray.html.erb
+3 -1
View File
@@ -12,5 +12,7 @@
</button>
</div>
<button class="tray__expander" data-action="dialog#toggle" aria-label="Expand pins stack"></button>
<button class="tray__expander" data-action="dialog#toggle" aria-label="Expand pins stack">
<%= icon_tag "pinned" %>
</button>
</section>
app/views/notifications/_tray.html.erb
+4 -1
View File
@@ -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,
@@ -33,5 +34,7 @@
<% end %>
</div>
<button class="tray__expander" data-action="dialog#toggle" aria-label="Expand notifications stack"></button>
<button class="tray__expander" data-action="dialog#toggle" aria-label="Expand notifications stack">
<%= icon_tag "bell" %>
</button>
</section>