admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #20 from dderbentsov/UC-5

Browse Source 
Поправлены стили формы добавления ивента, исправлены зависимости pack…
This commit is contained in:
Алексей Дёмин
2022-10-12 02:51:17 +03:00
committed by GitHub
parent 75b1f361ac f86702f653
commit 0c6df7ca54
22 changed files with 1654 additions and 1267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
babel.config.js
View File

@@ -1,5 +1,3 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
presets: ["@vue/cli-plugin-babel/preset"],
};

2049
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

14
package.json
View File

@@ -8,7 +8,6 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.1.5",
"vuex": "^4.0.2"
@@ -21,13 +20,13 @@
"@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",
"eslint": "^8.25.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^9.6.0",
"postcss": "^8.4.17",
"postcss-loader": "^7.0.1",
"pug": "^3.0.2",
"pug-plain-loader": "^1.1.0",
"prettier": "^2.4.1",
"sass-loader": "^13.0.2",
"tailwindcss": "^3.1.8"
},
@@ -38,7 +37,8 @@
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
"eslint:recommended",
"plugin:prettier/recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"

8
postcss.config.js
View File

@@ -1,7 +1,7 @@
const tailwind = require('tailwindcss')
const autoprefixer = require('autoprefixer')
const tailwindConfig = require('./tailwind.config')
const tailwind = require("tailwindcss");
const autoprefixer = require("autoprefixer");
const tailwindConfig = require("./tailwind.config");
module.exports = {
plugins: [tailwind(tailwindConfig), autoprefixer],
}
};

19
src/App.vue
View File

@@ -1,7 +1,7 @@
<template lang="pug">
.app-container
.flex.flex-col.w-full.h-full.gap-y-2
the-header
.pages-container
.flex.flex-auto
the-sidebar
router-view
</template>
@@ -11,27 +11,18 @@
import TheSidebar from "@/components/TheSidebar";
export default {
name: "App",
components: {TheHeader, TheSidebar}
}
components: { TheHeader, TheSidebar },
};
</script>
<style lang="sass">
#app
font-feature-settings: "pnum" on, "lnum" on
font-feature-settings: 'pnum' on, 'lnum' on
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
height: 100%
width: 100%
line-height: normal
.pages-container
display: flex
flex: auto
.app-container
height: 100%
width: 100%
row-gap: 8px
display: flex
flex-direction: column
body
background-color: var(--bg-lavender-color)
margin: 0

61
src/components/BaseSelect.vue
View File

@@ -1,61 +0,0 @@
<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>

22
src/components/HeaderInputs.vue
View File

@@ -21,21 +21,19 @@
return {
selectedFilter: "Календарь",
filters: ["Календарь", "Клиенты"],
isOpen: false
}
},
computed: {
isOpen: false,
};
},
computed: {},
methods: {
changeState() {
this.isOpen = !this.isOpen
this.isOpen = !this.isOpen;
},
selectFilter(filter) {
this.selectedFilter = filter
}
}
}
this.selectedFilter = filter;
},
},
};
</script>
<style lang="sass" scoped>
@@ -43,8 +41,10 @@
.arrow
transform: rotate(180deg)
.header-inputs-wrapper
.wrapper
background-color: var(--bg-white-color)
display: flex
align-items: center
.select-container
border-radius: 4px 0 0 4px

12
src/components/TheHeader.vue
View File

@@ -13,17 +13,17 @@
</template>
<script>
import img from "@/assets/images/avatar.svg"
import HeaderInputs from "./HeaderInputs.vue"
import img from "@/assets/images/avatar.svg";
import HeaderInputs from "./HeaderInputs.vue";
export default {
name: "TheHeader",
components: { HeaderInputs },
data() {
return {
avatarSrc: img
}
}
}
avatarSrc: img,
};
},
};
</script>
<style lang="sass" scoped>

2
src/components/TheSidebar.vue
View File

@@ -18,7 +18,7 @@
export default {
name: "TheSidebar",
components: { TheButtonSidebar },
}
};
</script>
<style lang="sass" scoped>

63
src/components/base/BaseSelect.vue Normal file
View File

@@ -0,0 +1,63 @@
<template lang="pug">
.flex.gap-2.py-2.px-4.w-full.container(@click="selectOpen")
.relative.flex.flex-col
.not-italic.text-base.select(:style="{ minWidth : width}") {{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.ml-2.pt-1.icon-down-arrow.icon(:class="{ open: isOpen}")
</template>
<script>
export default {
name: "BaseSelect",
props: {
id: String,
width: 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)
&.open
transform: rotate(180deg)
</style>

4
src/components/base/buttons/BaseAddEvent.vue
View File

@@ -4,8 +4,8 @@
<script>
export default {
name: "AddEventButton"
}
name: "AddEventButton",
};
</script>
<style lang="sass" scoped>

2
src/components/base/buttons/BaseButtonPlus.vue
View File

@@ -5,7 +5,7 @@
<script>
export default {
name: "ButtonPlus",
}
};
</script>
<style lang="sass" scoped>

22
src/components/base/buttons/BaseSidebarButton.vue
View File

@@ -10,34 +10,34 @@
props: {
path: String,
id: String,
changeStyle: Function
changeStyle: Function,
},
data() {
return {
selectedStyle: false
}
}
}
selectedStyle: false,
};
},
};
</script>
<style lang="sass" scoped>
.button
width: fit-content
cursor: pointer
background-color: rgb(65, 105, 225, 0)
background-color: rgba(65, 105, 225, 0)
border-radius: 0 4px 4px 0
border-left-color: rgb(65, 105, 225, 0)
border-left-color: rgba(65, 105, 225, 0)
border-left-width: 4px
border-right: none
border-top: none
border-bottom: none
border-left-style: solid
.button:focus
background-color: rgb(65, 105, 225, 0.3)
border-left-color: rgb(65, 105, 225, 1)
background-color: rgba(65, 105, 225, 0.3)
border-left-color: rgba(65, 105, 225, 1)
color: #4169E1
.button:hover
background-color: rgb(65, 105, 225, 0.3)
border-left-color: rgb(65, 105, 225, 1)
background-color: rgba(65, 105, 225, 0.3)
border-left-color: rgba(65, 105, 225, 1)
color: #4169E1
</style>

14
src/main.js
View File

@@ -1,9 +1,9 @@
import { createApp } from 'vue'
import App from './App.vue'
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import './assets/sass/fonts.sass'
import './assets/sass/tailwind.sass'
import './assets/sass/variables.sass'
import './assets/css/iconfonts.css'
import "./assets/sass/fonts.sass";
import "./assets/sass/tailwind.sass";
import "./assets/sass/variables.sass";
import "./assets/css/iconfonts.css";
createApp(App).use(router).mount('#app')
createApp(App).use(router).mount("#app");

4
src/pages/calendar/TheCalendar.vue
View File

@@ -6,6 +6,6 @@
import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
export default {
name: "TheCalendar",
components: {CalendarFormAddEvent}
}
components: { CalendarFormAddEvent },
};
</script>

40
src/pages/calendar/components/CalendarFormAddEvent.vue
View File

@@ -6,6 +6,7 @@
.icon-cancel.close-icon.text-xs(@click="closeEventForm")
base-select(
id="responsible"
width="205px"
:option-data="eventData.responsible"
:list-data="listResponsible"
:choose-option="chooseOption"
@@ -38,6 +39,7 @@
span.not-italic.text-xs.opacity-40.leading-3 Вид события
base-select(
id="kind"
width="118px"
:option-data="eventData.kindEvent"
:list-data="kindEvents"
:choose-option="chooseOption"
@@ -56,7 +58,7 @@
</template>
<script>
import BaseSelect from "@/components/BaseSelect";
import BaseSelect from "@/components/base/BaseSelect";
import AddEventButton from "@/components/base/buttons/BaseAddEvent";
import ButtonPlus from "@/components/base/buttons/BaseButtonPlus";
export default {
@@ -64,8 +66,8 @@
components: { AddEventButton, ButtonPlus, BaseSelect },
props: {
listResponsible: {
default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."]
}
default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."],
},
},
data() {
return {
@@ -84,41 +86,45 @@
},
friendInfo: {},
kindEvent: "Вид события",
contacts: {}
}
}
contacts: {},
},
};
},
methods: {
createEvent() {
this.formOpen = !this.formOpen
this.formOpen = !this.formOpen;
},
addFriendInfo(e) {
if (e.currentTarget.id === "addInfo") {
this.listFriendInfo.push(this.listFriendInfo[this.listFriendInfo.length-1]+1)
this.listFriendInfo.push(
this.listFriendInfo[this.listFriendInfo.length - 1] + 1
);
}
if (e.currentTarget.id === "addContact") {
this.listContacts.push(this.listContacts[this.listContacts.length-1]+1)
this.listContacts.push(
this.listContacts[this.listContacts.length - 1] + 1
);
}
},
closeEventForm() {
this.formOpen=!this.formOpen
this.formOpen = !this.formOpen;
},
openSelectResponsible() {
this.selectResponsibleOpen = !this.selectResponsibleOpen
this.selectResponsibleOpen = !this.selectResponsibleOpen;
},
openSelectKindEvent() {
this.selectKindEventOpen = !this.selectKindEventOpen
this.selectKindEventOpen = !this.selectKindEventOpen;
},
chooseOption(event) {
if (event.currentTarget.id === "responsible") {
this.eventData.responsible=this.listResponsible[event.target.id]
this.eventData.responsible = this.listResponsible[event.target.id];
}
if (event.currentTarget.id === "kind") {
this.eventData.kindEvent=this.kindEvents[event.target.id]
}
}
}
this.eventData.kindEvent = this.kindEvents[event.target.id];
}
},
},
};
</script>
<style lang="sass" scoped>

4
src/pages/home/TheHome.vue
View File

@@ -4,6 +4,6 @@
<script>
export default {
name: "TheHome"
}
name: "TheHome",
};
</script>

4
src/pages/settings/TheSettings.vue
View File

@@ -4,6 +4,6 @@
<script>
export default {
name: "TheSettings"
}
name: "TheSettings",
};
</script>

4
src/pages/user/TheUser.vue
View File

@@ -4,6 +4,6 @@
<script>
export default {
name: "TheUser"
}
name: "TheUser",
};
</script>

6
src/router.js
View File

@@ -10,6 +10,6 @@ export default createRouter({
{ path: "/", component: TheHome },
{ path: "/calendar", component: TheCalendar },
{ path: "/user", component: TheUser },
{ path: "/settings", component: TheSettings }
]
})
{ path: "/settings", component: TheSettings },
],
});

29
tailwind.config.js
View File

@@ -1,25 +1,22 @@
module.exports = {
content: [
'./index.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx,vue}"],
theme: {
extend: {
fontFamily: {
sans: ['Raleway', 'sans-serif'],
sans: ["Raleway", "sans-serif"],
},
fontSize: {
xxs: ['12px', { lineHeight: '14px' }],
xs: ['13px', { lineHeight: '15px' }],
sm: ['14px', { lineHeight: '16px' }],
base: ['16px', { lineHeight: '19px' }],
m: ['16px', { lineHeight: '21.6px' }],
lg: ['18px', { lineHeight: '21px' }],
xl: ['20px', { lineHeight: '23px' }],
'2xl': ['28px', { lineHeight: '33px' }],
'3xl': ['60px', { lineHeight: '70px' }],
'4xl': ['44px', { lineHeight: '48px' }],
}
xxs: ["12px", { lineHeight: "14px" }],
xs: ["13px", { lineHeight: "15px" }],
sm: ["14px", { lineHeight: "16px" }],
base: ["16px", { lineHeight: "19px" }],
m: ["16px", { lineHeight: "21.6px" }],
lg: ["18px", { lineHeight: "21px" }],
xl: ["20px", { lineHeight: "23px" }],
"2xl": ["28px", { lineHeight: "33px" }],
"3xl": ["60px", { lineHeight: "70px" }],
"4xl": ["44px", { lineHeight: "48px" }],
},
},
},
plugins: [],

24
vue.config.js
View File

@@ -1,9 +1,8 @@
const { defineConfig } = require('@vue/cli-service');
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
chainWebpack: (config) => {
const pugRule = config.module.rule('pug');
const pugRule = config.module.rule("pug");
pugRule.uses.clear();
pugRule.oneOfs.clear();
@@ -17,30 +16,19 @@ module.exports = defineConfig({
oneOf: [
{
resourceQuery: /^\?vue/u,
loader: '@webdiscus/pug-loader',
loader: "@webdiscus/pug-loader",
options: {
method: 'html',
method: "html",
},
},
{
loader: '@webdiscus/pug-loader',
loader: "@webdiscus/pug-loader",
options: {
method: 'compile',
method: "compile",
},
},
],
},
{
test: /\.scss$/,
use: [
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
},
]
},
],
},
},