Merge pull request #17 from dderbentsov/UC-5

Изменены стили под использование сетки, поправлены зависимости

package.json

@@ -8,15 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@tailwindcss/forms": "^0.5.3",
-    "@webdiscus/pug-loader": "^2.9.3",
-    "autoprefixer": "^10.4.12",
     "core-js": "^3.8.3",
-    "css-loader": "^6.7.1",
-    "postcss": "^8.4.17",
-    "postcss-loader": "^7.0.1",
-    "style-loader": "^3.3.1",
-    "tailwindcss": "^3.1.8",
     "vue": "^3.2.13",
     "vue-router": "^4.1.5",
     "vuex": "^4.0.2"
@@ -27,12 +19,17 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "@webdiscus/pug-loader": "^2.9.4",
+    "autoprefixer": "^10.4.12",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "node-sass": "^7.0.3",
+    "postcss": "^8.4.17",
+    "postcss-loader": "^7.0.1",
     "pug": "^3.0.2",
     "pug-plain-loader": "^1.1.0",
-    "sass-loader": "^13.0.2"
+    "sass-loader": "^13.0.2",
+    "tailwindcss": "^3.1.8"
   },
   "eslintConfig": {
     "root": true,

src/components/BaseSelect.vue

@@ -0,0 +1,61 @@
+<template lang="pug">
+  .flex.gap-2.py-2.px-4.container(@click="selectOpen")
+    .relative.flex.flex-col
+      .not-italic.text-base.select {{optionData}}
+        .absolute.options(v-if="isOpen" :id="id" @click="(event)=>chooseOption(event)")
+          .not-italic.text-base.option(v-for="(responsible, index) in listData" :key="index" :id="index") {{responsible}}
+    .select-form-separator
+    .text-sm.icon-down-arrow.icon
+</template>
+
+<script>
+  export default {
+    name: "BaseSelect",
+    props: {
+      id: String,
+      optionData: String,
+      listData: Array,
+      chooseOption: Function,
+      isOpen: Boolean,
+      selectOpen: Function
+    }
+  }
+</script>
+
+<style lang="sass" scoped>
+  .container
+    align-items: center
+    cursor: pointer
+    border-radius: 4px
+    width: fit-content
+    background-color: var(--bg-ligth-blue-color)
+  .select
+    appearance: none
+    border: none
+    outline: none
+    cursor: pointer
+    color: rgba(9, 10, 21, 0.5)
+    background-color: rgba(9, 10, 21, 0)
+    &::-webkit-calendar-picker-indicator
+      display: none
+      -webkit-appearance: none
+  .options
+    z-index: 3
+    width: max-content
+    background-color: var(--bg-ligth-blue-color)
+  .option
+    color: var(--font-black-color)
+    &:hover
+      background-color: var(--btn-blue-color)
+  .select-form-separator
+    background-color: rgba(65, 105, 225, 0.2)
+    height: 24px
+    width: 1px
+    border-radius: 1px
+  .icon
+    text-align: center
+    color: var(--font-dark-blue-color)
+    &:hover
+      color: var(--btn-blue-color)
+</style>
+

src/components/TheSidebar.vue

@@ -1,13 +1,13 @@
 <template lang="pug">
-  .sidebar-container
+  .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border
-    .top-button-container
+    .flex.flex-col.gap-y-6
       the-button-sidebar(id="home" path="#/")
         .icon-home
       the-button-sidebar(id="calendar" path="#/calendar")
         .icon-calendar-2
       the-button-sidebar(id="user" path="#/user")
         .icon-person-2
-    .bottom-button-container
+    .flex.text-4xl.flex-col.gap-y-6
       the-button-sidebar(id="settings" path="#/settings")
         .icon-settings
 </template>
@@ -22,21 +22,7 @@
 </script>
 
 <style lang="sass" scoped>
-  #person
+  .sidebar
-    font-style: normal
-  .sidebar-container
-    display: flex
-    flex-direction: column
-    justify-content: space-between
-    flex: auto
-    padding: 24px 0 24px 0
-    box-sizing: border-box
     max-width: 80px
     background-color: #F8F8FF
-
-  .top-button-container
-    display: flex
-    font-size: 40px
-    flex-direction: column
-    row-gap: 24px
 </style>

src/components/base/buttons/BaseAddEvent.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  button(class="add-button-event") Создать событие
+  button.event-button.not-italic.leading-5.text-base.py-3.px-4 Создать событие
 </template>
 
 <script>
@@ -9,16 +9,12 @@
 </script>
 
 <style lang="sass" scoped>
-  .add-button-event
+  .event-button
     outline: none
     border: none
     cursor: pointer
-    font-style: normal
-    line-height: 19px
-    font-size: 16px
     width: fit-content
     color: var(--bg-white-color)
     background-color: var(--btn-blue-color)
-    padding: 11px 16px 11px 16px
     border-radius: 4px
 </style>

src/components/base/buttons/BaseButtonPlus.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  button.icon-plus(class="button-plus")
+  button.icon-plus.button-plus.text-xs.pt-1
 </template>
 
 <script>
@@ -12,10 +12,11 @@
   .button-plus
     outline: none
     border: none
-    font-size: 12px
     cursor: pointer
+    width: 24px
+    height: 24px
+    max-height: 24px
     color: #4772F2
-    padding: 7px 7px 5px 7px
     background-color: rgba(65, 105, 225, 0.25)
     border-radius: 50%
 </style>

src/components/base/buttons/BaseSidebarButton.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   a(:href="path")
-    button(:id="id" class='button-icon-item')
+    button.button.text-4xl.py-3.pr-4.pl-3(:id="id")
       slot
 </template>
 
@@ -21,11 +21,9 @@
 </script>
 
 <style lang="sass" scoped>
-  .button-icon-item
+  .button
     width: fit-content
-    padding: 12px 16px 12px 12px
     cursor: pointer
-    font-size: 40px
     background-color: rgb(65, 105, 225, 0)
     border-radius: 0 4px 4px 0
     border-left-color: rgb(65, 105, 225, 0)
@@ -34,11 +32,11 @@
     border-top: none
     border-bottom: none
     border-left-style: solid
-  .button-icon-item:focus
+  .button:focus
     background-color: rgb(65, 105, 225, 0.3)
     border-left-color: rgb(65, 105, 225, 1)
     color: #4169E1
-  .button-icon-item:hover
+  .button:hover
     background-color: rgb(65, 105, 225, 0.3)
     border-left-color: rgb(65, 105, 225, 1)
     color: #4169E1

src/pages/calendar/TheCalendar.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
-  form-add-event
+  calendar-form-add-event
 </template>
 
 <script>
-  import FormAddEvent from './components/CalendarFormAddEvent.vue';
+  import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
   export default {
     name: "TheCalendar",
-    components: {FormAddEvent}
+    components: {CalendarFormAddEvent}
   }
 </script>

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -1,64 +1,67 @@
 <template lang="pug">
-  .event-form-change(v-if="formOpen")
+  .flex.flex-col.gap-y-6.pt-5.pb-6.px-8.event-form(v-if="formOpen")
-    .form-item-container
+    .flex.flex-col.gap-y-2
-      .close-icon-position
+      .flex.justify-between.pt-2
-        span.title-form Ответственный
+        span.not-italic.text-xs.opacity-40.leading-3 Ответственный
-        .icon-cancel.close-icon(@click="closeEventForm")
+        .icon-cancel.close-icon.text-xs(@click="closeEventForm")
-      .input-container(@click="openSelectResponsible")
+      base-select(
-        .form-select
+        id="responsible"
-          .form-item-input.select-container-res {{eventData.responsible}}
+        :option-data="eventData.responsible"
-            .option-container(v-if="selectResponsibleOpen" id="responsible" @click="(event)=>chooseOption(event)")
+        :list-data="listResponsible"
-              .option-item(v-for="(responsible, index) in listResponsible" :key="index" :id="index") {{responsible}}
+        :choose-option="chooseOption"
-        .select-form-separator
+        :is-open="selectResponsibleOpen"
-        .icon-down-arrow.arrow-icon
+        :select-open="openSelectResponsible"
-    .form-item-container
+      )
-      span.title-form Оновная информация
+    .flex.flex-col.gap-y-2
-      .form-inform-container
+      span.not-italic.text-xs.opacity-40.leading-3 Оновная информация
-        .icon-time.container-icon
+      .flex.gap-x-4.items-center
-        .time-input-container
+        .icon-time.text-xl.icon
-          .input-container
+        .flex.gap-x-2.items-center
-            input.form-item-input(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
+          .form-item.flex.gap-x-2.px-4.py-2.items-center
+            input.item-input.no-italic.text-base(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
           span —
-          .input-container
+          .form-item.flex.gap-x-2.px-4.py-2.items-center
-            input.form-item-input(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
+            input.item-input.no-italic.text-base(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
-      .form-inform-container
+      .flex.gap-x-4.items-center
-        .icon-person.container-icon
+        .icon-person.text-xl.icon
-        .input-container
+        .form-item.flex.gap-x-2.px-4.py-2.items-center
-          input.form-item-input(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
+          input.item-input.no-italic.text-base(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
-    .form-item-container(class='additional-information')
+    .flex.flex-col.gap-y-2(class='additional-information')
-      .form-inform-container
+      .flex.gap-x-4.items-center
-        span.title-form Дополнительная информация
+        span.not-italic.text-xs.opacity-40.leading-3 Дополнительная информация
         button-plus(id="addInfo" @click="(e)=>addFriendInfo(e)")
-      .form-inform-container(v-for="(info, index) in listFriendInfo" :key="index")
+      .flex.gap-x-4.items-center(v-for="(info, index) in listFriendInfo" :key="index")
-        span.number-additional {{info}}
+        span.ml-1 {{info}}
-        .input-container
+        .form-item.flex.gap-x-2.px-4.py-2.items-center
-          input.form-item-input(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
+          input.item-input.no-italic.text-base(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
-    .form-item-container
+    .flex.flex-col.gap-y-2
-      span.title-form Вид события
+      span.not-italic.text-xs.opacity-40.leading-3 Вид события
-      .input-container(@click="openSelectKindEvent")
+      base-select(
-        .form-select
+        id="kind"
-          .form-item-input.select-container-kind {{eventData.kindEvent}}
+        :option-data="eventData.kindEvent"
-            .option-container(v-if="selectKindEventOpen" id="kind" @click="(event)=>chooseOption(event)")
+        :list-data="kindEvents"
-              .option-item(v-for="(kind, index) in kindEvents" :key="index" :id="index") {{kind}}
+        :choose-option="chooseOption"
-        .select-form-separator
+        :is-open="selectKindEventOpen"
-        .icon-down-arrow.arrow-icon
+        :select-open="openSelectKindEvent"
-    .form-item-container
+      )
-      .form-inform-container
+    .flex.flex-col.gap-y-2
-        span.title-form Контакты
+      .flex.gap-x-4.items-center
+        span.not-italic.text-xs.opacity-40.leading-3 Контакты
         button-plus(id="addContact" @click="(e)=>addFriendInfo(e)")
-      .form-inform-container(v-for="(contact, index) in listContacts" :key="index")
+      .flex.gap-x-4.items-center(v-for="(contact, index) in listContacts" :key="index")
-        .icon-mail.container-icon
+        .icon-mail.text-xl.icon
-        .input-container
+        .form-item.flex.gap-x-2.px-4.py-2.items-center
-          input.form-item-input(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
+          input.item-input.no-italic.text-base(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
     add-event-button(@click="createEvent")
 </template>
 
 <script>
-import AddEventButton from "@/components/base/buttons/BaseAddEvent";
+  import BaseSelect from "@/components/BaseSelect";
-import ButtonPlus from "@/components/base/buttons/BaseButtonPlus";
+  import AddEventButton from "@/components/base/buttons/BaseAddEvent";
-export default {
+  import ButtonPlus from "@/components/base/buttons/BaseButtonPlus";
+  export default {
     name: "FormChangeEvent",
-  components: {AddEventButton, ButtonPlus},
+    components: {AddEventButton, ButtonPlus, BaseSelect},
     props: {
       listResponsible: {
         default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."]
@@ -115,43 +118,22 @@ export default {
         }
       }
     }
-}
+  }
 </script>
 
 <style lang="sass" scoped>
-  .event-form-change
+  .event-form
-    position: relative
-    display: flex
-    flex-direction: column
     height: fit-content
-    row-gap: 24px
     min-width: 448px
-    padding: 21px 32px 24px 32px
     background-color: var(--bg-white-color)
     box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
     border-radius: 4px
-  .title-form
+  .form-item
-    font-size: 12px
-    line-height: 14px
-    font-style: normal
-    opacity: 0.4
-  .form-item-container
-    display: flex
-    flex-direction: column
-    row-gap: 8px
-  .input-container
-    display: flex
-    column-gap: 8px
-    align-items: center
     cursor: pointer
     border-radius: 4px
-    padding: 8px 16px 8px 16px
     width: fit-content
     background-color: var(--bg-ligth-blue-color)
-  .form-item-input
+  .item-input
-    font-family: Raleway, sans-serif
-    font-style: normal
-    font-size: 16px
     appearance: none
     border: none
     outline: none
@@ -161,61 +143,17 @@ export default {
     &::-webkit-calendar-picker-indicator
       display: none
       -webkit-appearance: none
-  .select-form-separator
+  .icon
-    background-color: rgba(65, 105, 225, 0.2)
-    height: 24px
-    width: 1px
-    border-radius: 1px
-  .time-input-container
-    display: flex
-    align-items: center
-    column-gap: 8px
-  .form-inform-container
-    display: flex
-    align-items: center
-    column-gap: 16px
-  .number-additional
-    margin-left: 6px
-  .arrow-icon
-    margin-bottom: -12px
-    text-align: center
-    font-size: 14px
-    color: var(--font-dark-blue-color)
-    &:hover
-      color: var(--btn-blue-color)
-  .container-icon
     width: 24px
     height: 24px
-    font-size: 21px
     color: var(--font-dark-blue-color)
   .close-icon
     cursor: pointer
-    font-size: 14px
     color: var(--font-dark-blue-color)
     &:hover
       color: var(--btn-blue-color)
-  .close-icon-position
+  //.select-container-res
-    display: flex
+  //  min-width: 205px
-    justify-content: space-between
+  //.select-container-kind
-    padding-top: 10px
+  //  min-width: 119px
-  .form-select
-    position: relative
-    display: flex
-    flex-direction: column
-  .option-container
-    position: absolute
-    width: max-content
-    background-color: var(--bg-ligth-blue-color)
-    z-index: 3
-  .option-item
-    color: var(--font-black-color)
-    font-family: Raleway, sans-serif
-    font-style: normal
-    font-size: 16px
-    &:hover
-      background-color: var(--btn-blue-color)
-  .select-container-res
-    min-width: 205px
-  .select-container-kind
-    min-width: 119px
 </style>

tailwind.config.js

@@ -18,6 +18,7 @@ module.exports = {
         xl: ['20px', { lineHeight: '23px' }],
         '2xl': ['28px', { lineHeight: '33px' }],
         '3xl': ['60px', { lineHeight: '70px' }],
+        '4xl': ['44px', { lineHeight: '48px' }],
       }
     },
   },

vue.config.js

@@ -36,12 +36,6 @@ module.exports = defineConfig({
             {
               loader: 'postcss-loader'
             },
-            {
-              loader: 'style-loader'
-            },
-            {
-              loader: 'css-loader'
-            },
             {
               loader: 'sass-loader'
             },