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 %> - +