From 92b4ee1cea22114f713356934e203bbaaf285970 Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Fri, 6 Dec 2024 22:34:49 +0200
Subject: [PATCH] fix css

---
 .../src/components/create/CreateSection.vue   |  8 ++++---
 .../src/components/manage/QRCodeCard.vue      |  4 +++-
 apps/frontend/src/layouts/LayoutWithTabs.vue  | 22 +++++++++----------
 apps/frontend/src/router/index.ts             | 14 ++++++------
 apps/frontend/src/views/CreateView.vue        |  1 +
 .../views/{ => manage}/ManageChatsView.vue    |  7 ++----
 .../{ => manage}/ManageQRCodeChatView.vue     |  0
 .../{ => manage}/ManageQRCodeReadyView.vue    |  0
 .../views/{ => manage}/ManageQRCodeView.vue   |  2 +-
 .../views/{ => manage}/ManageQRCodesView.vue  |  2 +-
 10 files changed, 31 insertions(+), 29 deletions(-)
 rename apps/frontend/src/views/{ => manage}/ManageChatsView.vue (85%)
 rename apps/frontend/src/views/{ => manage}/ManageQRCodeChatView.vue (100%)
 rename apps/frontend/src/views/{ => manage}/ManageQRCodeReadyView.vue (100%)
 rename apps/frontend/src/views/{ => manage}/ManageQRCodeView.vue (98%)
 rename apps/frontend/src/views/{ => manage}/ManageQRCodesView.vue (95%)

diff --git a/apps/frontend/src/components/create/CreateSection.vue b/apps/frontend/src/components/create/CreateSection.vue
index 4a1dda0..3338fd4 100644
--- a/apps/frontend/src/components/create/CreateSection.vue
+++ b/apps/frontend/src/components/create/CreateSection.vue
@@ -16,12 +16,14 @@ watch(
   () => sectionRef.value && props.isNextActiveSection,
   (isNextActiveSection) => {
     if (isNextActiveSection) {
+      sectionRef.value?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+
       const input = sectionRef.value?.querySelector('input[type="text"]')
       if (input instanceof HTMLInputElement) {
-        input.focus()
+        setTimeout(() => {
+          input.focus()
+        }, 200)
       }
-
-      sectionRef.value?.scrollIntoView({ behavior: 'smooth' })
     }
   },
   { immediate: true },
diff --git a/apps/frontend/src/components/manage/QRCodeCard.vue b/apps/frontend/src/components/manage/QRCodeCard.vue
index dbf8251..4d821f5 100644
--- a/apps/frontend/src/components/manage/QRCodeCard.vue
+++ b/apps/frontend/src/components/manage/QRCodeCard.vue
@@ -12,7 +12,9 @@
       <!--        class="p-button-outlined p-button-sm"-->
       <!--      />-->
     </div>
-    <div class="text-gray-500">Создано: {{ formatedCreatedAt }}</div>
+    <div class="text-gray-500">
+      Создан: <span class="text-nowrap">{{ formatedCreatedAt }}</span>
+    </div>
   </RouterLink>
 </template>
 
diff --git a/apps/frontend/src/layouts/LayoutWithTabs.vue b/apps/frontend/src/layouts/LayoutWithTabs.vue
index 67e96b6..0ded7bf 100644
--- a/apps/frontend/src/layouts/LayoutWithTabs.vue
+++ b/apps/frontend/src/layouts/LayoutWithTabs.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="grid h-full sm:grid-rows-[auto_1fr_auto] grid-rows-[1fr_auto_auto] overflow-hidden">
-    <div
-      class="flex flex-1 overflow-auto pb-safe-or-4 sm:pt-safe sm:max-w-prose mx-auto w-full px-4 touch-pan-y"
-    >
-      <slot />
+    <div class="flex overflow-auto pb-safe-or-4 sm:pt-safe w-full px-4 touch-pan-y">
+      <div class="sm:max-w-prose grid grid-cols-1 mx-auto my-5">
+        <slot />
+      </div>
     </div>
 
     <slot name="footer">
@@ -29,11 +29,11 @@ const slots = defineSlots<{
   default?: () => void
   footer?: () => void
 }>()
-</script>
 
-<style>
-html,
-body {
-  overflow: hidden;
-}
-</style>
+const layoutPageHead = useHead({
+  htmlAttrs: { class: 'overflow-hidden' },
+  bodyAttrs: { class: 'overflow-hidden' },
+})
+
+onBeforeUnmount(() => layoutPageHead?.dispose())
+</script>
diff --git a/apps/frontend/src/router/index.ts b/apps/frontend/src/router/index.ts
index c7a20dc..2259684 100644
--- a/apps/frontend/src/router/index.ts
+++ b/apps/frontend/src/router/index.ts
@@ -11,7 +11,7 @@ const routes = [
     name: ROUTE_NAMES.HOME,
     component: () =>
       isRunningStandalone()
-        ? import('@/views/ManageQRCodesView.vue')
+        ? import('@/views/manage/ManageQRCodesView.vue')
         : import('@/views/HomeView.vue'),
   },
   {
@@ -22,37 +22,37 @@ const routes = [
   {
     path: '/manage',
     name: ROUTE_NAMES.MANAGE_DASHBOARD_QR_CODES,
-    component: () => import('@/views/ManageQRCodesView.vue'),
+    component: () => import('@/views/manage/ManageQRCodesView.vue'),
     props: true,
   },
   {
     path: '/manage/qr',
     name: ROUTE_NAMES.MANAGE_DASHBOARD_QR,
-    component: () => import('@/views/ManageQRCodesView.vue'),
+    component: () => import('@/views/manage/ManageQRCodesView.vue'),
     props: true,
   },
   {
     path: '/manage/chats',
     name: ROUTE_NAMES.MANAGE_DASHBOARD_CHATS,
-    component: () => import('@/views/ManageChatsView.vue'),
+    component: () => import('@/views/manage/ManageChatsView.vue'),
     props: true,
   },
   {
     path: '/manage/qr/:qr_code_uri',
     name: ROUTE_NAMES.MANAGE_QR_CODE,
-    component: () => import('@/views/ManageQRCodeView.vue'),
+    component: () => import('@/views/manage/ManageQRCodeView.vue'),
     props: true,
   },
   {
     path: '/manage/qr/:qr_code_uri/ready',
     name: ROUTE_NAMES.MANAGE_QR_CODE_READY,
-    component: () => import('@/views/ManageQRCodeReadyView.vue'),
+    component: () => import('@/views/manage/ManageQRCodeReadyView.vue'),
     props: true,
   },
   {
     path: '/manage/qr/:qr_code_uri/chat/:chat',
     name: ROUTE_NAMES.MANAGE_QR_CODE_CHAT,
-    component: () => import('@/views/ManageQRCodeChatView.vue'),
+    component: () => import('@/views/manage/ManageQRCodeChatView.vue'),
     props: true,
   },
   {
diff --git a/apps/frontend/src/views/CreateView.vue b/apps/frontend/src/views/CreateView.vue
index 91fc235..f8267cc 100644
--- a/apps/frontend/src/views/CreateView.vue
+++ b/apps/frontend/src/views/CreateView.vue
@@ -69,6 +69,7 @@ const {
 } = useMutation({
   mutationKey: ['createQrCode'],
   mutationFn: async () => {
+    throw new Error('wtf')
     const qrCodeDocument = await createQrCodeDocument({
       name: name.value,
       placement: placement.value!,
diff --git a/apps/frontend/src/views/ManageChatsView.vue b/apps/frontend/src/views/manage/ManageChatsView.vue
similarity index 85%
rename from apps/frontend/src/views/ManageChatsView.vue
rename to apps/frontend/src/views/manage/ManageChatsView.vue
index c47ce36..507c30f 100644
--- a/apps/frontend/src/views/ManageChatsView.vue
+++ b/apps/frontend/src/views/manage/ManageChatsView.vue
@@ -15,11 +15,8 @@
           class="flex flex-col gap-5 my-4 grid grid-cols-1 sm:grid-cols-3 gap-4"
         />
 
-        <div
-          v-else
-          class="flex-1 flex flex-col items-center place-self-center text-center text-gray-500"
-        >
-          <h1 class="text-2xl font-bold mb-4 text-center sm:text-left">Страница в разработке</h1>
+        <div v-else class="place-self-center">
+          <h1 class="text-2xl font-bold mb-4 text-gray-500">Страница в разработке</h1>
         </div>
       </template>
 
diff --git a/apps/frontend/src/views/ManageQRCodeChatView.vue b/apps/frontend/src/views/manage/ManageQRCodeChatView.vue
similarity index 100%
rename from apps/frontend/src/views/ManageQRCodeChatView.vue
rename to apps/frontend/src/views/manage/ManageQRCodeChatView.vue
diff --git a/apps/frontend/src/views/ManageQRCodeReadyView.vue b/apps/frontend/src/views/manage/ManageQRCodeReadyView.vue
similarity index 100%
rename from apps/frontend/src/views/ManageQRCodeReadyView.vue
rename to apps/frontend/src/views/manage/ManageQRCodeReadyView.vue
diff --git a/apps/frontend/src/views/ManageQRCodeView.vue b/apps/frontend/src/views/manage/ManageQRCodeView.vue
similarity index 98%
rename from apps/frontend/src/views/ManageQRCodeView.vue
rename to apps/frontend/src/views/manage/ManageQRCodeView.vue
index 646389a..b5076e8 100644
--- a/apps/frontend/src/views/ManageQRCodeView.vue
+++ b/apps/frontend/src/views/manage/ManageQRCodeView.vue
@@ -9,7 +9,7 @@
             content="Просматривайте и управляйте сообщениями, отправленными через ваш QR-код. Полная конфиденциальность и удобный интерфейс чата"
           />
         </MetaHead>
-        <div class="bg-white p-6 rounded-lg shadow-md my-5">
+        <div class="">
           <div class="flex items-center justify-between mb-4">
             <div class="flex items-center">
               <QRCodePlacementIcon :placement="qrCodeDoc.placement" />
diff --git a/apps/frontend/src/views/ManageQRCodesView.vue b/apps/frontend/src/views/manage/ManageQRCodesView.vue
similarity index 95%
rename from apps/frontend/src/views/ManageQRCodesView.vue
rename to apps/frontend/src/views/manage/ManageQRCodesView.vue
index 329c9a0..4672ee5 100644
--- a/apps/frontend/src/views/ManageQRCodesView.vue
+++ b/apps/frontend/src/views/manage/ManageQRCodesView.vue
@@ -11,7 +11,7 @@
     <QueryRender :query="query">
       <template #default="{ data }">
         <div
-          class="flex-1 grid grid-cols-2 sm:grid-cols-3 gap-5 my-5 place-content-center sm:place-content-start justify-items-center"
+          class="flex-1 grid grid-cols-2 sm:grid-cols-3 gap-5 place-self-center sm:place-self-start"
           v-if="data.rows.length > 0"
         >
           <QRCodeCard v-for="{ doc: qrCode } in data.rows" :key="qrCode!.uri" :qrCode="qrCode!" />