diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug index b5841883b..91f4d6606 100644 --- a/packages/backend/src/server/web/views/base.pug +++ b/packages/backend/src/server/web/views/base.pug @@ -31,7 +31,7 @@ html meta(name='theme-color-orig' content= themeColor || '#31748f') meta(property='twitter:card' content='summary') meta(property='og:site_name' content= instanceName || 'Calckey') - meta(name='viewport' content='width=device-width, initial-scale=1') + meta(name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no') link(rel='icon' href= icon || `/favicon.ico?${ timestamp }`) link(rel='apple-touch-icon' href= icon || `/apple-touch-icon.png?${ timestamp }`) link(rel='manifest' href='/manifest.json') diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts index 43a92a316..7a004688d 100644 --- a/packages/client/src/init.ts +++ b/packages/client/src/init.ts @@ -104,17 +104,6 @@ import { getAccountFromId } from "@/scripts/get-account-from-id"; }); //#endregion - // If mobile, insert the viewport meta tag - if (["smartphone", "tablet"].includes(deviceKind)) { - const viewport = document.getElementsByName("viewport").item(0); - viewport.setAttribute( - "content", - `${viewport.getAttribute( - "content", - )}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`, - ); - } - //#region Set lang attr const html = document.documentElement; html.setAttribute("lang", lang); @@ -311,12 +300,11 @@ import { getAccountFromId } from "@/scripts/get-account-from-id"; if (ColdDeviceStorage.get("syncDeviceDarkMode")) { defaultStore.set("darkMode", isDeviceDarkmode()); } - - window.matchMedia("(prefers-color-scheme: dark)").addListener((mql) => { + window.matchMedia("(prefers-color-scheme: dark)").onchange = (mql) => { if (ColdDeviceStorage.get("syncDeviceDarkMode")) { defaultStore.set("darkMode", mql.matches); } - }); + }; //#endregion fetchInstanceMetaPromise.then(() => { diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue index 5b61c1b2c..3784ef8af 100644 --- a/packages/client/src/ui/universal.vue +++ b/packages/client/src/ui/universal.vue @@ -15,10 +15,7 @@ :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu" > -
- -
-
+ @@ -173,6 +170,7 @@ import type { PageMetadata } from "@/scripts/page-metadata"; import { instanceName, ui } from "@/config"; import { StickySidebar } from "@/scripts/sticky-sidebar"; import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue"; +import XSidebar from "@/ui/_common_/navbar.vue"; import * as os from "@/os"; import { defaultStore } from "@/store"; import { navbarItemDef } from "@/navbar"; @@ -186,7 +184,6 @@ import { import { deviceKind } from "@/scripts/device-kind"; const XWidgets = defineAsyncComponent(() => import("./universal.widgets.vue")); -const XSidebar = defineAsyncComponent(() => import("@/ui/_common_/navbar.vue")); const XStatusBars = defineAsyncComponent( () => import("@/ui/_common_/statusbars.vue") ); @@ -462,6 +459,11 @@ console.log(mainRouter.currentRoute.value.name); &.isMobile { --stickyBottom: 6rem; } + &:not(.isMobile) { + > .contents { + border-right: .5px solid var(--divider); + } + } &.wallpaper { background: var(--wallpaperOverlay); } @@ -470,6 +472,10 @@ console.log(mainRouter.currentRoute.value.name); justify-content: center; &:not(.isMobile) { --navBg: transparent; + > .contents { + border-inline: .5px solid var(--divider); + margin-inline: -1px; + } } > :deep(.sidebar:not(.iconOnly)) { @@ -545,18 +551,19 @@ console.log(mainRouter.currentRoute.value.name); } } - > .sidebar { - border-right: solid 0.5px var(--divider); - } - > .contents { width: 100%; min-width: 0; + $widgets-hide-threshold: 1090px; + @media (max-width: $widgets-hide-threshold) { + padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); + } } > .widgets { padding: 0 var(--margin); - border-left: solid 0.5px var(--divider); + width: 300px; + box-sizing: content-box; @media (max-width: $widgets-hide-threshold) { display: none; @@ -732,14 +739,4 @@ console.log(mainRouter.currentRoute.value.name); top: 0; left: 0; } - -.spacer { - $widgets-hide-threshold: 1090px; - - height: calc(env(safe-area-inset-bottom, 0px) + 96px); - - @media (min-width: ($widgets-hide-threshold + 1px)) { - display: none; - } -}