From 7d3935a38d4085e20df2e720920983481dae9b14 Mon Sep 17 00:00:00 2001 From: Truman Gao <106889354+tdgao@users.noreply.github.com> Date: Mon, 16 Mar 2026 08:32:07 -0700 Subject: [PATCH] fix: misc fixes (#5584) * fix: PATs editing bug #4908 * fix: gallery edit do not do falsy check on title and description * feat: add aspect ratio on gallery images * change aspect ratio to 16:9 * fix: mobile nav bar #5580 * use css::after instead for navbar fix * adjust after content to fix thin line * add save area inset for transform --- apps/frontend/src/layouts/default.vue | 13 ++++++++++++- apps/frontend/src/pages/[type]/[id].vue | 8 ++++---- apps/frontend/src/pages/[type]/[id]/gallery.vue | 6 +++--- .../src/pages/[type]/[id]/settings/gallery.vue | 6 +++--- apps/frontend/src/pages/settings/pats.vue | 14 +++++++------- 5 files changed, 29 insertions(+), 18 deletions(-) diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue index 3c144d344..00a71868a 100644 --- a/apps/frontend/src/layouts/default.vue +++ b/apps/frontend/src/layouts/default.vue @@ -1279,7 +1279,7 @@ const { cycle: changeTheme } = useTheme() left: 0; background-color: var(--color-raised-bg); z-index: 11; // 20 = modals, 10 = svg icons - transform: translateY(100%); + transform: translateY(calc(100% + env(safe-area-inset-bottom))); transition: transform 0.4s cubic-bezier(0.54, 0.84, 0.42, 1); border-radius: var(--size-rounded-card) var(--size-rounded-card) 0 0; box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0); @@ -1367,6 +1367,17 @@ const { cycle: changeTheme } = useTheme() border-top: 2px solid rgba(0, 0, 0, 0); box-sizing: border-box; + &::after { + content: ''; + position: absolute; + bottom: 2px; + left: 0; + width: 100%; + height: 300px; + background-color: var(--color-raised-bg); + transform: translateY(100%); + } + &.expanded { box-shadow: none; border-radius: 0; diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue index 9526da063..3d2212552 100644 --- a/apps/frontend/src/pages/[type]/[id].vue +++ b/apps/frontend/src/pages/[type]/[id].vue @@ -2071,10 +2071,10 @@ const createGalleryItemMutation = useMutation({ file.type.split('/')[file.type.split('/').length - 1] }&featured=${featured ?? false}` - if (title) { + if (title != null) { url += `&title=${encodeURIComponent(title)}` } - if (description) { + if (description != null) { url += `&description=${encodeURIComponent(description)}` } if (ordering !== null && ordering !== undefined) { @@ -2132,10 +2132,10 @@ const editGalleryItemMutation = useMutation({ mutationFn: async ({ projectId, imageUrl, title, description, featured, ordering }) => { let url = `project/${projectId}/gallery?url=${encodeURIComponent(imageUrl)}&featured=${featured ?? false}` - if (title) { + if (title != null) { url += `&title=${encodeURIComponent(title)}` } - if (description) { + if (description != null) { url += `&description=${encodeURIComponent(description)}` } if (ordering !== null && ordering !== undefined) { diff --git a/apps/frontend/src/pages/[type]/[id]/gallery.vue b/apps/frontend/src/pages/[type]/[id]/gallery.vue index a732d5ef5..591843ade 100644 --- a/apps/frontend/src/pages/[type]/[id]/gallery.vue +++ b/apps/frontend/src/pages/[type]/[id]/gallery.vue @@ -484,8 +484,8 @@ async function editGalleryItem() { const imageUrl = filteredGallery.value[editIndex.value].url const success = await contextEditGalleryItem( imageUrl, - editTitle.value || undefined, - editDescription.value || undefined, + editTitle.value, + editDescription.value, editFeatured.value, editOrder.value ? Number(editOrder.value) : undefined, ) @@ -683,7 +683,7 @@ async function deleteGalleryImage() { margin-bottom: 0; border-radius: var(--size-rounded-card) var(--size-rounded-card) 0 0; - min-height: 10rem; + aspect-ratio: 16 / 9; object-fit: cover; } diff --git a/apps/frontend/src/pages/[type]/[id]/settings/gallery.vue b/apps/frontend/src/pages/[type]/[id]/settings/gallery.vue index 9ff5b64c9..bd8b67008 100644 --- a/apps/frontend/src/pages/[type]/[id]/settings/gallery.vue +++ b/apps/frontend/src/pages/[type]/[id]/settings/gallery.vue @@ -427,8 +427,8 @@ const editGalleryItem = async () => { const success = await editGalleryItemMutation( filteredGallery.value[editIndex.value].url, - editTitle.value || undefined, - editDescription.value || undefined, + editTitle.value, + editDescription.value, editFeatured.value, editOrder.value ?? undefined, ) @@ -643,7 +643,7 @@ onUnmounted(() => { margin-bottom: 0; border-radius: var(--size-rounded-card) var(--size-rounded-card) 0 0; - min-height: 10rem; + aspect-ratio: 16 / 9; object-fit: cover; } diff --git a/apps/frontend/src/pages/settings/pats.vue b/apps/frontend/src/pages/settings/pats.vue index 69bc7936a..50ad7ea54 100644 --- a/apps/frontend/src/pages/settings/pats.vue +++ b/apps/frontend/src/pages/settings/pats.vue @@ -10,7 +10,7 @@