Merge pull request #124 from SzymCode/dev

Dev

atomic/_old_structure/sass/app.scss

@@ -38,6 +38,10 @@ body {
     background: $body-bg;
 }
 
+main {
+    overflow: hidden;
+}
+
 body:has(
     #home,
     #login,

atomic/_old_structure/sass/styles/components/card.scss

@@ -8,7 +8,7 @@
 .myCard {
     width: $card-width;
     background: $content-bg;
-    box-shadow: $box-shadow-none;
+    box-shadow: $my-card-box-shadow;
     border: $border-none;
     border-radius: $border-radius-none;
 

atomic/_old_structure/sass/styles/components/datatable.scss

@@ -43,6 +43,7 @@
         }
         .actionColumn {
             width: $action-column-width;
+            min-width: 49px;
 
             .actionColumnContent {
                 display: $action-column-content-display;

atomic/_old_structure/sass/styles/components/panel_container.scss

@@ -8,18 +8,36 @@
     display: $panel-container-display;
     flex-direction: $panel-container-flex-direction;
     gap: $panel-container-gap;
+}
 
-    // Min width 992px
-    @media (min-width: $min-width-lg2) {
-        top: $panel-container-top-lg2;
+body:has(.p-dock.p-dock-top) {
+    .panelContainer {
+        padding-top: $panel-container-top;
     }
 }
 
-body:has(.p-dock.p-dock-top) .panelContainer {
-    top: $panel-container-top;
+body:has(.p-dock.p-dock-right) {
+    .panelContainer {
+        padding-top: 8px;
+        padding-right: 80px;
+    }
+}
+
+body:has(.p-dock.p-dock-left) {
+     .panelContainer {
+         padding-top: 8px;
+         padding-left: 80px;
+     }
+ }
+
+body:has(.p-dock.p-dock-bottom) {
+    .panelContainer {
+        padding-bottom: $panel-container-top;
 
-    // Min width 992px
-    @media (min-width: $min-width-lg2) {
-        top: $panel-container-top-lg2;
+        // Min width 992px
+        @media (min-width: $min-width-lg2) {
+            padding-top: 8px;
+            padding-bottom: 81px;
+        }
     }
 }

atomic/_old_structure/sass/styles/pages/admin/admin_bricks.scss

@@ -1,5 +1,6 @@
 @import '../../../variables/pages/admin/admin_bricks_variables';
 
+@import '../../../variables/base/box_shadows_variables';
 @import '../../../variables/base/colors_variables';
 @import '../../../variables/base/fonts_variables';
 @import '../../../variables/base/medias_variables';
@@ -55,6 +56,7 @@
             max-height: $admin-bricks-grid-item-max-height;
             aspect-ratio: $admin-bricks-grid-item-aspect-ratio;
             font-size: $font-size-big;
+            box-shadow: $my-card-box-shadow;
 
             .pi {
                 margin-top: $admin-bricks-grid-item-pi-margin-top;

atomic/_old_structure/sass/variables/base/_box_shadows_variables.scss

@@ -5,5 +5,6 @@ $primary-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 $secondary-card-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
 $my-card-box-shadow:
-    inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.1),
-    2px 2px 4px rgba(0, 0, 0, 0.1);
+    0px 4px 10px rgba(0, 0, 0, 0.03),
+    0px 0px 2px rgba(0, 0, 0, 0.06),
+    0px 2px 6px rgba(0, 0, 0, 0.12);

atomic/_old_structure/sass/variables/components/_panel_containers_variables.scss

@@ -1,9 +1,9 @@
 $panel-container-position: relative;
-$panel-container-top: 71px;
-$panel-container-padding: 7px;
+$panel-container-top: 80px;
+$panel-container-padding: 8px;
 $panel-container-display: flex;
 $panel-container-flex-direction: column;
-$panel-container-gap: 7px;
+$panel-container-gap: 8px;
 
 // Min width 992px
-$panel-container-top-lg2: 0;
+$panel-container-top-lg2: 4px;

atomic/_old_structure/sass/variables/pages/admin/_admin_bricks_variables.scss

@@ -57,7 +57,7 @@ $admin-bricks-padding-xs2: 4px !important;
 // Min width 519px
 $admin-bricks-display-sm0: flex !important;
 $admin-bricks-gap-sm0: 12px;
-$admin-bricks-padding-sm0: 0 0 8px 0 !important;
+$admin-bricks-padding-sm0: 0 0 12px 0 !important;
 $admin-bricks-circle-width-sm0: 100px;
 $admin-bricks-circle-height-sm0: 100px;
 $admin-bricks-circle-number-top-sm0: 3px !important;

atomic/_old_structure/ts/components/Activity/ActivityDashboard.vue

@@ -54,7 +54,7 @@ const { results, loading, getAllActivities, deleteActivity } =
 const { activityStyle } = handleStyles()
 
 onMounted(() => {
-    getAllActivities(500)
+    getAllActivities()
 })
 
 const dialogs = computed(() => [

atomic/_old_structure/ts/components/Admin/AdminPanel.vue

@@ -130,9 +130,9 @@ const {
 const { results: users, loading: usersLoading, getAllUsers } = userApiMethods()
 
 onMounted(() => {
-    getAllArticles(500)
-    getAllContacts(500)
-    getAllUsers(500)
+    getAllArticles()
+    getAllContacts()
+    getAllUsers()
 })
 
 const {

atomic/_old_structure/ts/components/Article/ArticleDashboard.vue

@@ -74,7 +74,7 @@ const {
 const { articleStyle } = handleStyles()
 
 onMounted(() => {
-    getAllArticles(500)
+    getAllArticles()
 })
 
 const dialogs = computed(() => [

atomic/_old_structure/ts/components/Contact/ContactDashboard.vue

@@ -75,7 +75,7 @@ const {
 const { contactStyle } = handleStyles()
 
 onMounted(() => {
-    getAllContacts(500)
+    getAllContacts()
 })
 
 const dialogs = computed(() => [

atomic/_old_structure/ts/utils/activity/activityApiMethods.ts

@@ -24,9 +24,8 @@ export default function activityApiMethods(): ActivityLogApiMethodsInterface {
     async function getAllActivities(
         timeout?: number
     ): GetAllActivitiesAxiosFunctionType {
-        if (timeout) {
-            setLoading(true)
-        }
+        setLoading(true)
+
         return await axios
             .get('/api/activity-log')
             .then((response: AxiosResponse<ActivityLogInterface[]>) => {
@@ -50,6 +49,8 @@ export default function activityApiMethods(): ActivityLogApiMethodsInterface {
             .finally((): void => {
                 if (timeout) {
                     setLoading(false, timeout)
+                } else {
+                    setLoading(false)
                 }
             })
     }

atomic/_old_structure/ts/utils/article/articleApiMethods.ts

@@ -26,9 +26,8 @@ export default function articleApiMethods(): ArticleApiMethodsInterface {
     async function getAllArticles(
         timeout?: number
     ): GetAllArticlesFunctionType {
-        if (timeout) {
-            setLoading(true)
-        }
+        setLoading(true)
+
         return await axios
             .get('/api/articles')
             .then((response: GetAllArticlesAxiosFunctionType) => {
@@ -52,6 +51,8 @@ export default function articleApiMethods(): ArticleApiMethodsInterface {
             .finally((): void => {
                 if (timeout) {
                     setLoading(false, timeout)
+                } else {
+                    setLoading(false)
                 }
             })
     }

atomic/_old_structure/ts/utils/contact/contactApiMethods.ts

@@ -26,9 +26,8 @@ export default function contactApiMethods(): ContactApiMethodsInterface {
     async function getAllContacts(
         timeout?: number
     ): GetAllContactsFunctionType {
-        if (timeout) {
-            setLoading(true)
-        }
+        setLoading(true)
+
         return await axios
             .get('/api/contacts')
             .then((response: GetAllContactsAxiosFunctionType) => {
@@ -53,6 +52,8 @@ export default function contactApiMethods(): ContactApiMethodsInterface {
             .finally((): void => {
                 if (timeout) {
                     setLoading(false, timeout)
+                } else {
+                    setLoading(false)
                 }
             })
     }

atomic/_old_structure/ts/utils/user/userApiMethods.ts

@@ -25,9 +25,8 @@ export default function userApiMethods(): UserApiMethodsInterface {
         useToast()
 
     async function getAllUsers(timeout?: number): GetAllUsersFunctionType {
-        if (timeout) {
-            setLoading(true)
-        }
+        setLoading(true)
+
         return await axios
             .get('/api/users')
             .then((response: GetAllUsersAxiosFunctionType) => {
@@ -51,6 +50,8 @@ export default function userApiMethods(): UserApiMethodsInterface {
             .finally((): void => {
                 if (timeout) {
                     setLoading(false, timeout)
+                } else {
+                    setLoading(false)
                 }
             })
     }

atomic/bosons/styles/molecules/_index.scss

@@ -1,2 +1 @@
-@use 'dock';
 @use 'item';

atomic/bosons/styles/organisms/_index.scss

@@ -1,2 +1,3 @@
 @use 'datatable';
 @use 'dialog';
+@use 'dock';

atomic/bosons/styles/molecules/dock/_index.scss → atomic/bosons/styles/organisms/dock/_index.scss

@@ -5,6 +5,34 @@
     position: fixed;
     z-index: 999;
 
+    @media (min-width: 992px) {
+        &.p-dock-top,
+        &.p-dock-bottom {
+            width: 100%;
+
+            .p-dock-list-container {
+                width: 100%;
+
+                ul {
+                    width: 100%;
+                }
+            }
+        }
+    }
+
+    &.p-dock-left,
+    &.p-dock-right {
+        height: 100%;
+
+        .p-dock-list-container {
+            height: 100%;
+
+            ul {
+                height: 100%;
+            }
+        }
+    }
+
     .p-dock-list-container {
         padding: 0;
         border: 0;
@@ -15,7 +43,7 @@
             background: $white-body-bg;
             padding: 0;
             margin: 0;
-            border-radius: 8px;
+            border-radius: 0;
 
             .p-dock-item {
                 @include center-content;
@@ -87,6 +115,10 @@
                     }
                 }
             }
+
+            @media (min-width: $min-width-lg) {
+                gap: 4px;
+            }
         }
     }
 }

atomic/bosons/types/atoms/Toast/types.ts

@@ -19,5 +19,5 @@ export type ToastPositionType =
 export type FlashToastFunctionType = (
     messageOrMessages: MessageOrMessagesType,
     severity: ToastSeverityType,
-    life: number
+    life?: number
 ) => void

atomic/bosons/utils/atoms/Toast/useToast.ts

@@ -21,7 +21,7 @@ export function useToast(): UseToastInterface {
     function flashToast(
         messageOrMessages: MessageOrMessagesType,
         severity: ToastSeverityType,
-        life: number
+        life?: number
     ): void {
         closeToast()
 

atomic/organisms/Dock.vue

@@ -32,20 +32,32 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, Ref, ref } from 'vue'
+import { onMounted, Ref, ref, watch } from 'vue'
 
 import { useIsAdmin } from '@/utils'
-
 import { dockItems, positions } from 'atomic/bosons/constants'
 import { PositionType } from 'atomic/bosons/types'
 import { useItemStyles } from 'atomic/bosons/utils'
 
 const { getItemStyles } = useItemStyles()
 
-const position: Ref<PositionType> = ref('bottom')
+const LOCAL_STORAGE_KEY = 'dockPosition'
+
+const position = ref<PositionType>('bottom')
 let isAdmin: Ref<boolean> = ref(false)
 
+function setDockPositionForScreenSize() {
+    if (window.innerWidth == 992) {
+        position.value = 'bottom'
+    }
+}
+
 onMounted(async () => {
+    const savedPosition = localStorage.getItem(LOCAL_STORAGE_KEY)
+    if (savedPosition) {
+        position.value = savedPosition as PositionType
+    }
+
     const { isAdmin: isAdminStatus } = await useIsAdmin()
 
     // eslint-disable-next-line
@@ -58,5 +70,11 @@ onMounted(async () => {
             url: '/admin',
         })
     }
+
+    window.addEventListener('resize', setDockPositionForScreenSize)
+})
+
+watch(position, (newPosition) => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, newPosition)
 })
 </script>