WIP Изменила сайдбар приложения

2023-05-25 16:45:42 +03:00
parent 09df012d5e
commit 164a531a5a
10 changed files with 76 additions and 35 deletions
--- a/src/components/LoggedInLayout.vue
+++ b/src/components/LoggedInLayout.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.w-full.h-full.gap-y-2
+  .flex.flex-col.w-full.h-full.gap-y-2.pb-2
    the-header(
      :url="url",
      :is-open-form="isOpenForm",
@@ -61,5 +61,5 @@ export default {
 </script>
 <style lang="sass" scoped>
 .page-wrapper
-  height: calc(100vh - 56px - 8px)
+  height: calc(100vh - 56px - 16px)
 </style>
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-  .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border(:style="bordersStyle")
-    .flex.flex-col.gap-y-6
+  .sidebar.flex.flex-col.justify-between.flex-auto.pt-4.px-2.pb-7.rounded
+    .flex.flex-col.gap-y-4
      base-button-sidebar(
        v-for="button in pageSettings.filter((el) => el.id !== 'settings')",
        :path="button.path",
@@ -8,7 +8,7 @@
        :active="button.active",
        :change-style-page="changeStylePage"
      )
-        q-icon(:name="`app:${button.icon}`", size="36px")
+        q-icon(:name="`app:${button.icon}`", size="25px")
    .flex.text-4xl.flex-col.gap-y-6
      base-button-sidebar(
        :path="getSettings.path",
@@ -16,7 +16,7 @@
        :active="getSettings.active",
        :change-style-page="changeStylePage"
      )
-        q-icon(:name="`app:${getSettings.icon}`", size="36px")
+        q-icon(:name="`app:${getSettings.icon}`", size="25px")
 </template>

 <script>
@@ -63,12 +63,6 @@ export default {
    getSettings() {
      return this.pageSettings.find((el) => el.id === "settings");
    },
-    bordersStyle() {
-      return {
-        "border-top-right-radius": this.currentPageBorder ? "0px" : "4px",
-        //"border-bottom-right-radius": this.currentPageBorder ? "0px" : "4px",
-      };
-    },
  },
  mounted() {
    let href = window.location.href.slice(22);
@@ -93,7 +87,7 @@ export default {

 <style lang="sass" scoped>
 .sidebar
-  max-width: 80px
-  min-width: 80px
+  max-width: 64px
+  min-width: 64px
  background-color: var(--default-white)
 </style>
--- a/src/components/base/BaseSidebarButton.vue
+++ b/src/components/base/BaseSidebarButton.vue
@@ -1,11 +1,11 @@
 <template lang="pug">
  q-btn(
-    padding="14px 14px 14px 10px",
-    style="width: 76px"
+    style="width: 48px; height: 48px"
    :class="checkActive",
    :href="path",
    :id="id",
    @click="(e) => changeStylePage(e)"
+    rounded
  )
    slot
 </template>
@@ -35,14 +35,10 @@ export default {
 <style lang="sass" scoped>
 .button
  background-color: trnsparent
-  border-radius: 0 4px 4px 0
-  border-left: 4px solid transparent
 .active
  background-color: var(--btn-blue-color-1)
-  border-left-color: var(--btn-blue-color)
  color: var(--btn-blue-color)
 .button:hover
  background-color: var(--btn-blue-color-1)
-  border-left-color: var(--btn-blue-color)
  color: var(--btn-blue-color)
 </style>
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -325,7 +325,7 @@ export default {
 <style lang="sass" scoped>
 .wrapper-table
  background-color: var(--default-white)
-  height: calc(100vh - 64px)
+  height: calc(100vh - 72px)
 .table-container
  overflow: auto
  &::-webkit-scrollbar
--- a/src/pages/clients/components/ClientsWrapper.vue
+++ b/src/pages/clients/components/ClientsWrapper.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .wrapper.flex.w-full.relative
+  .wrapper.flex.w-full.relative.rounded
    clients-table(
      :open-form="openForm",
      :is-open-form="isOpenForm",
@@ -33,6 +33,4 @@ export default {
 <style lang="sass" scoped>
 .wrapper
  overflow: auto
-  border-top-left-radius: 4px
-  border-top-right-radius: 4px
 </style>
--- a/src/pages/newCalendar/TheCalendar.vue
+++ b/src/pages/newCalendar/TheCalendar.vue
@@ -1,16 +1,18 @@
 <template lang="pug">
-  .calendar-container.flex
+  .w-full.flex.gap-x-2
    calendar-open-sidebar(v-if="isOpen", :open-sidebar="openSidebar")
    calendar-sidebar(v-else, :open-sidebar="openSidebar")
+    calendar-wrapper
 </template>

 <script>
 import CalendarSidebar from "@/pages/newCalendar/components/CalendarSidebar";
 import CalendarOpenSidebar from "@/pages/newCalendar/components/CalendarOpenSidebar";
+import CalendarWrapper from "@/pages/newCalendar/components/CalendarWrapper";

 export default {
  name: "TheCalendar",
-  components: { CalendarSidebar, CalendarOpenSidebar },
+  components: { CalendarSidebar, CalendarOpenSidebar, CalendarWrapper },
  data() {
    return {
      isOpen: false,
@@ -23,8 +25,3 @@ export default {
  },
 };
 </script>
-
-<style lang="sass" scoped>
-.calendar-container
-  width: calc(100vw - 80px)
-</style>
--- a/src/pages/newCalendar/components/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -0,0 +1,40 @@
+<template lang="pug">
+  .calendar-header-wrapper.w-full.flex.items-center.justify-between.py-4.pl-4.pr-6
+</template>
+
+<script>
+export default {
+  name: "CalendarHeader",
+};
+</script>
+
+<style lang="sass" scoped>
+.calendar-header-wrapper
+  background-color: var(--default-white)
+  height: 72px
+  border-radius: 4px
+  z-index: 10
+
+.left-arrow
+  padding: 3px 4px 0 4px !important
+  transform: rotate(90deg)
+
+.right-arrow
+  padding: 3px 4px 0 4px !important
+  transform: rotate(270deg)
+
+.text
+  color: var(--font-dark-blue-color)
+
+.today
+  opacity: 0.5
+
+.bg-blue-grey-1
+  background: var(--bg-light-grey) !important
+
+.q-btn--round
+  width: 32px !important
+  height: 32px !important
+  min-width: 32px !important
+  min-height: 32px !important
+</style>
--- a/src/pages/newCalendar/components/CalendarWrapper.vue
+++ b/src/pages/newCalendar/components/CalendarWrapper.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  calendar-header.flex-1   
+</template>
+
+<script>
+import CalendarHeader from "@/pages/newCalendar/components/CalendarHeader";
+export default {
+  name: "CalendarWrapper",
+  components: { CalendarHeader },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="sass" scoped></style>
--- a/src/pages/newMedicalCard/TheMedicalCard.vue
+++ b/src/pages/newMedicalCard/TheMedicalCard.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .w-full.h-full
+  .w-full.h-full.flex.flex-col
    .flex.w-full.gap-x-2.pb-2
      medical-header(
        v-model="currentMenuItem",
--- a/src/pages/newMedicalCard/components/MedicalBaseInfo.vue
+++ b/src/pages/newMedicalCard/components/MedicalBaseInfo.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .base-info-wrapper.w-full.flex.gap-x-2
+  .base-info-wrapper.w-full.flex.gap-x-2.flex-1
    medical-sidebar(v-model="currentMenuItem")
    component(
      v-if="currentMenuItem",
@@ -31,6 +31,6 @@ export default {
 </script>
 <style lang="sass" scoped>
 .base-info-wrapper
-  height: 79.7%
-  max-height: calc(100% - 190px - 16px)
+  height: 80.4%
+  max-height: calc(100% - 190px - 8px)
 </style>