choer: update layouts with unocss

mnenie · Dec 6, 2024 · 8c0c8f9 · 8c0c8f9
1 parent 4f5f3af
commit 8c0c8f9
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 70 deletions.
diff --git a/core/client/src/layouts/ui/AuthLayout.vue b/core/client/src/layouts/ui/AuthLayout.vue
@@ -1,12 +1,5 @@
 <template>
-  <div :class="$style.auth_layout">
+  <div class="h-dvh w-full">
     <slot />
   </div>
 </template>
-
-<style module lang="scss">
-.auth_layout {
-  height: 100dvh;
-  width: 100%;
-}
-</style>
diff --git a/core/client/src/layouts/ui/DefaultLayout.vue b/core/client/src/layouts/ui/DefaultLayout.vue
@@ -55,7 +55,7 @@ const boards = ref<Board[]>([
 </script>
 
 <template>
-  <Splitpanes :class="$style.default_layout">
+  <Splitpanes class="flex flex-row flex-1 w-full h-dvh">
     <Pane
       min-size="4"
       max-size="18"
@@ -65,48 +65,15 @@ const boards = ref<Board[]>([
       <AppSidebar :boards />
     </Pane>
     <Pane :size="widthMainContainer">
-      <div :class="$style.main_part">
+      <div class="flex flex-col h-full overflow-hidden">
         <HeaderMain :projects="boards" />
         <div
-          :class="$style.slot_wrapper"
-          :style="{ padding: $route.name !== RouteNames.board ? '20px 20px 20px 30px' : '0' }"
+          class="relative h-full w-full bg-main"
+          :style="{ padding: $route.name !== RouteNames.board ? '20px' : '0' }"
         >
           <slot />
         </div>
       </div>
     </Pane>
   </Splitpanes>
 </template>
-
-<style module lang="scss">
-.default_layout {
-  display: flex;
-  flex-direction: row;
-  flex: 1 1 0%;
-  width: 100%;
-  height: 100dvh;
-
-  .main_part {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    height: 100%;
-
-    .slot_wrapper {
-      background-color: var(--main-slotted);
-      position: relative;
-      height: 100%;
-      width: 100%;
-    }
-  }
-}
-
-.new_header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 15px;
-  width: 100%;
-  background-color: var(--zinc-50);
-}
-</style>
diff --git a/core/client/src/layouts/ui/WelcomeLayout.vue b/core/client/src/layouts/ui/WelcomeLayout.vue
@@ -8,32 +8,13 @@ useColorMode({
 </script>
 
 <template>
-  <div :class="$style.welcome_layout">
+  <div class="relative min-h-dvh w-full flex flex-col">
     <HeaderWelcome />
-    <div :class="$style.slot">
+    <div class="flex-1">
       <slot />
     </div>
-    <div :class="$style.footer_wrapper">
+    <div class="flex justify-center">
       <AppFooter />
     </div>
   </div>
 </template>
-
-<style module lang="scss">
-.welcome_layout {
-  position: relative;
-  min-height: 100dvh;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .slot {
-    flex: 1 1 0%;
-  }
-
-  .footer_wrapper{
-    display: flex;
-    justify-content: center;
-  }
-}
-</style>
diff --git a/core/client/src/shared/config/types-shared.ts b/core/client/src/shared/config/types-shared.ts
@@ -1,12 +1,12 @@
-import type { Component } from 'vue'
+import type { IconifyIcon } from '@iconify/vue'
 
 interface Path {
   pathName: string
 }
 
 export interface WorkspaceLink extends Path {
   name: string
-  icon?: Component | string
+  icon?: IconifyIcon | string
 }
 export interface ProjectLink extends Path {
   _id: string

diff --git a/core/client/src/widgets/layout/ui/header/HeaderMain.vue b/core/client/src/widgets/layout/ui/header/HeaderMain.vue
@@ -3,6 +3,7 @@ import type { Board } from '@/entities/board'
 import type { ProjectLink } from '@/shared/config/types-shared'
 import { type User, UserAvatar } from '@/entities/user'
 import { useLayoutPaths } from '@/shared/lib/composables'
+import { Icon } from '@iconify/vue'
 import { computed, shallowReactive, toRef } from 'vue'
 import { links } from '../../model'
 import UserMenu from './UserMenu.vue'
@@ -38,7 +39,7 @@ const { active } = useLayoutPaths(links, _projects)
 <template>
   <header :class="$style.header">
     <div :class="$style.about">
-      <component :is="active?.extendedAttrs.icon" :class="$style.icon_main" />
+      <Icon v-if="active.extendedAttrs.icon" :icon="active?.extendedAttrs.icon" :class="$style.icon_main" />
       <div
         v-if="active.extendedAttrs.color"
         i-jenda-custom-project

diff --git a/core/client/uno.config.ts b/core/client/uno.config.ts
@@ -41,6 +41,9 @@ export default defineConfig({
       'form-field': 'grid gap-2 justify-items-start',
       'form-label': 'text-sm text-neutral-900 !fw500 dark:text-neutral-200',
     },
+    {
+      'bg-main': 'bg-white dark:bg-#262626',
+    },
   ],
   rules: [
     [