diff --git a/cms/src/components/BasePage.vue b/cms/src/components/BasePage.vue index d4f5ba88a6..47004fa70a 100644 --- a/cms/src/components/BasePage.vue +++ b/cms/src/components/BasePage.vue @@ -33,7 +33,7 @@ const router = useRouter(); const isEditContentPage = computed(() => router.currentRoute.value.name === "edit"); const isEditLanguagePage = computed(() => router.currentRoute.value.name === "language"); const breakpoints = useBreakpoints(breakpointsTailwind); -const isMobileScreen = breakpoints.smaller("lg"); +const isLargeScreen = breakpoints.smaller("lg"); const handleMobileSidebarToggle = () => { if (isEditContentPage.value) router.push({ name: "overview" }); @@ -54,7 +54,7 @@ const handleMobileSidebarToggle = () => { ]" > @@ -307,8 +305,8 @@ const onInlineBackspace = () => { class="relative flex w-full justify-between gap-2 rounded-md bg-white focus-within:outline focus-within:outline-offset-[-2px] focus-within:outline-zinc-950" :class="{ 'border-[1px] border-zinc-300': !noBorder, - 'pl-1 pr-3': smallInput && isMobileScreen, - 'pl-3 pr-3': !smallInput || !isMobileScreen, + 'pl-1 pr-3': smallInput && isLargeScreen, + 'pl-3 pr-3': !smallInput || !isLargeScreen, }" tabindex="0" v-bind="attrsWithoutStyles" @@ -329,9 +327,7 @@ const onInlineBackspace = () => { ref="inputElement" class="z-0 w-full flex-1 border-0 bg-transparent p-0 text-zinc-900 ring-zinc-300 placeholder:text-sm placeholder:text-zinc-400 focus:ring-0" :class="[ - smallInput && isMobileScreen - ? 'h-[30px] text-sm' - : 'h-[38px]', + smallInput && isLargeScreen ? 'h-[30px] text-sm' : 'h-[38px]', { 'w-96': $slots.actions && !isSmallScreen }, ]" :placeholder="placeholder ?? 'Type to select...'" diff --git a/cms/src/components/groups/EditAclByGroup.vue b/cms/src/components/groups/EditAclByGroup.vue index 9364a24247..bd19f22fbd 100644 --- a/cms/src/components/groups/EditAclByGroup.vue +++ b/cms/src/components/groups/EditAclByGroup.vue @@ -6,7 +6,7 @@ import { type GroupDto, AclPermission, type GroupAclEntryDto } from "luminary-sh import { capitaliseFirstLetter, getTheFirstLetter } from "@/util/string"; import { validDocTypes, isPermissionAvailable } from "./permissions"; import _ from "lodash"; -import { isMobileScreen } from "@/globalConfig"; +import { isLargeScreen } from "@/globalConfig"; import DisplayCard from "@/components/common/DisplayCard.vue"; import LModal from "../modals/LModal.vue"; import LButton from "@/components/button/LButton.vue"; @@ -119,7 +119,7 @@ onMounted(() => {
{{ assignedGroup.name }}
@@ -220,7 +220,7 @@ onMounted(() => { Add / Remove diff --git a/cms/src/components/groups/EditAclEntry.spec.ts b/cms/src/components/groups/EditAclEntry.spec.ts index 5c09d56a98..039bde7d91 100644 --- a/cms/src/components/groups/EditAclEntry.spec.ts +++ b/cms/src/components/groups/EditAclEntry.spec.ts @@ -10,7 +10,7 @@ vi.mock("@/globalConfig", async (importOriginal) => { const actual = await importOriginal(); return { ...(actual as any), - isMobileScreen: ref(false), + isLargeScreen: ref(false), isSmallScreen: ref(false), }; }); diff --git a/cms/src/components/groups/EditAclEntry.vue b/cms/src/components/groups/EditAclEntry.vue index 7beafe9f8c..fb445a59fa 100644 --- a/cms/src/components/groups/EditAclEntry.vue +++ b/cms/src/components/groups/EditAclEntry.vue @@ -5,7 +5,7 @@ import { capitaliseFirstLetter } from "@/util/string"; import { isPermissionAvailable, validateAclEntry } from "./permissions"; import { CheckCircleIcon } from "@heroicons/vue/20/solid"; import _ from "lodash"; -import { isMobileScreen } from "@/globalConfig"; +import { isLargeScreen } from "@/globalConfig"; import { PencilSquareIcon } from "@heroicons/vue/24/outline"; import LDropdown from "@/components/common/LDropdown.vue"; type Props = { @@ -51,7 +51,7 @@ const activePermissions = computed(() => {
{{ capitaliseFirstLetter(aclEntry.type) }}
diff --git a/cms/src/components/images/ImageEditor.spec.ts b/cms/src/components/images/ImageEditor.spec.ts index caf7b1bce5..f78312e0e5 100644 --- a/cms/src/components/images/ImageEditor.spec.ts +++ b/cms/src/components/images/ImageEditor.spec.ts @@ -65,7 +65,7 @@ vi.mock("@/globalConfig", async (importOriginal) => { ...(actual as any), clientAppUrl: ref("http://localhost:4174"), isSmallScreen: ref(false), - isMobileScreen: ref(false), + isLargeScreen: ref(false), }; }); @@ -181,7 +181,13 @@ describe("ImageEditor", () => { const origBuckets = [...mockImageBuckets.value]; mockImageBuckets.value = [ ...origBuckets, - { _id: "bucket-2", name: "Second", publicUrl: "http://test2.com", storageType: "image", mimeTypes: ["image/*"] }, + { + _id: "bucket-2", + name: "Second", + publicUrl: "http://test2.com", + storageType: "image", + mimeTypes: ["image/*"], + }, ]; const parent: ContentParentDto = { @@ -195,7 +201,11 @@ describe("ImageEditor", () => { const component = wrapper.vm as any; const mockFile = new File(["img"], "test.jpg", { type: "image/jpeg" }); - const fileList = { 0: mockFile, length: 1, item: (i: number) => (i === 0 ? mockFile : null) }; + const fileList = { + 0: mockFile, + length: 1, + item: (i: number) => (i === 0 ? mockFile : null), + }; component.handleFiles(fileList); await wrapper.vm.$nextTick(); @@ -241,7 +251,11 @@ describe("ImageEditor", () => { const mockFile = new File(["image-data"], "test.jpg", { type: "image/jpeg" }); Object.defineProperty(mockFile, "size", { value: 1024 }); // Small file - const fileList = { 0: mockFile, length: 1, item: (i: number) => (i === 0 ? mockFile : null) }; + const fileList = { + 0: mockFile, + length: 1, + item: (i: number) => (i === 0 ? mockFile : null), + }; const component = wrapper.vm as any; component.handleFiles(fileList); @@ -268,7 +282,11 @@ describe("ImageEditor", () => { const mockFile = new File(["x"], "huge.jpg", { type: "image/jpeg" }); Object.defineProperty(mockFile, "size", { value: largeSize }); - const fileList = { 0: mockFile, length: 1, item: (i: number) => (i === 0 ? mockFile : null) }; + const fileList = { + 0: mockFile, + length: 1, + item: (i: number) => (i === 0 ? mockFile : null), + }; const component = wrapper.vm as any; component.handleFiles(fileList); @@ -294,7 +312,11 @@ describe("ImageEditor", () => { // An actual upload is a real user edit and should persist the effective bucket. const mockFile = new File(["x"], "img.jpg", { type: "image/jpeg" }); Object.defineProperty(mockFile, "size", { value: 1024 }); - const fileList = { 0: mockFile, length: 1, item: (i: number) => (i === 0 ? mockFile : null) }; + const fileList = { + 0: mockFile, + length: 1, + item: (i: number) => (i === 0 ? mockFile : null), + }; (wrapper.vm as any).handleFiles(fileList); await wrapper.vm.$nextTick(); diff --git a/cms/src/components/languages/LanguageDisplayCard.vue b/cms/src/components/languages/LanguageDisplayCard.vue index 56fe112100..d36932f6ae 100644 --- a/cms/src/components/languages/LanguageDisplayCard.vue +++ b/cms/src/components/languages/LanguageDisplayCard.vue @@ -4,7 +4,7 @@ import { db, type LanguageDto } from "luminary-shared"; import LBadge from "@/components/common/LBadge.vue"; import { DateTime } from "luxon"; import { ClockIcon } from "@heroicons/vue/24/outline"; -import { isMobileScreen } from "@/globalConfig"; +import { isLargeScreen } from "@/globalConfig"; type Props = { languagesDoc: LanguageDto; @@ -52,7 +52,7 @@ const isLocalChanges = db.isLocalChangeAsRef(props.languagesDoc._id); db .toDateTime(languagesDoc.updatedTimeUtc) .toLocaleString( - isMobileScreen + isLargeScreen ? DateTime.DATE_SHORT : DateTime.DATETIME_SHORT, ) diff --git a/cms/src/components/media/MediaEditor.spec.ts b/cms/src/components/media/MediaEditor.spec.ts index c8ded41f53..bc8abda3b0 100644 --- a/cms/src/components/media/MediaEditor.spec.ts +++ b/cms/src/components/media/MediaEditor.spec.ts @@ -64,7 +64,7 @@ vi.mock("@/globalConfig", async (importOriginal) => { ...(actual as any), cmsLanguageIdAsRef: ref("lang-eng"), isSmallScreen: ref(false), - isMobileScreen: ref(false), + isLargeScreen: ref(false), }; }); @@ -192,7 +192,13 @@ describe("MediaEditor.vue", () => { const origBuckets = [...mockMediaBuckets.value]; mockMediaBuckets.value = [ ...origBuckets, - { _id: "bucket-media-2", name: "Second Media", publicUrl: "http://test2.com", storageType: "media", mimeTypes: ["audio/*"] }, + { + _id: "bucket-media-2", + name: "Second Media", + publicUrl: "http://test2.com", + storageType: "media", + mimeTypes: ["audio/*"], + }, ]; parent.mediaBucketId = undefined; @@ -202,7 +208,11 @@ describe("MediaEditor.vue", () => { }); const mockFile = new File(["audio"], "test.mp3", { type: "audio/mp3" }); - const fileList = { 0: mockFile, length: 1, item: (i: number) => (i === 0 ? mockFile : null) }; + const fileList = { + 0: mockFile, + length: 1, + item: (i: number) => (i === 0 ? mockFile : null), + }; const component = wrapper.vm as any; component.handleFiles(fileList); @@ -245,7 +255,9 @@ describe("MediaEditor.vue", () => { // Language selector dialog should open const dialogs = wrapper.findAllComponents(LDialog); - const languageDialog = dialogs.find((d) => d.props("title") === "Select Language for Audio"); + const languageDialog = dialogs.find( + (d) => d.props("title") === "Select Language for Audio", + ); expect(languageDialog).toBeDefined(); expect(languageDialog?.props("open")).toBe(true); }); @@ -260,7 +272,11 @@ describe("MediaEditor.vue", () => { // Open language selector const mockFile = new File(["audio"], "test.mp3", { type: "audio/mp3" }); - const fileList = { 0: mockFile, length: 1, item: (i: number) => (i === 0 ? mockFile : null) }; + const fileList = { + 0: mockFile, + length: 1, + item: (i: number) => (i === 0 ? mockFile : null), + }; const component = wrapper.vm as any; component.handleFiles(fileList); @@ -268,7 +284,9 @@ describe("MediaEditor.vue", () => { // Cancel const dialogs = wrapper.findAllComponents(LDialog); - const languageDialog = dialogs.find((d) => d.props("title") === "Select Language for Audio"); + const languageDialog = dialogs.find( + (d) => d.props("title") === "Select Language for Audio", + ); const cancelAction = languageDialog?.props("secondaryAction") as Function; cancelAction(); await wrapper.vm.$nextTick(); @@ -314,7 +332,11 @@ describe("MediaEditor.vue", () => { // Open language selector const mockFile = new File(["audio"], "test.mp3", { type: "audio/mp3" }); - const fileList = { 0: mockFile, length: 1, item: (i: number) => (i === 0 ? mockFile : null) }; + const fileList = { + 0: mockFile, + length: 1, + item: (i: number) => (i === 0 ? mockFile : null), + }; const component = wrapper.vm as any; component.handleFiles(fileList); diff --git a/cms/src/components/modals/LModal.vue b/cms/src/components/modals/LModal.vue index 4e4fcafee8..dd8ee96362 100644 --- a/cms/src/components/modals/LModal.vue +++ b/cms/src/components/modals/LModal.vue @@ -44,7 +44,7 @@ watch(modalRef, (el) => { }); const breakpoints = useBreakpoints(breakpointsTailwind); -const isMobileScreen = breakpoints.smaller("sm"); +const isLargeScreen = breakpoints.smaller("sm");