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

Merge pull request #19 from dderbentsov/UC-1

Browse Source 
Исправила HeaderInputs с tailwind
This commit is contained in:
Daria Golova
2022-10-12 00:15:49 +03:00
committed by GitHub
parent d7f61c7039 0005716e82
commit 75b1f361ac
4 changed files with 66 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@@ -10,14 +10,14 @@
import TheHeader from "@/components/TheHeader";
import TheSidebar from "@/components/TheSidebar";
export default {
name: 'App',
name: "App",
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%

3
src/assets/sass/variables.sass
View File

@@ -1,4 +1,4 @@
:root
\:root
--bg-lavender-color: #E9E9F6
--bg-white-color: #F8F8FF
--bg-ligth-blue-color: #E6EAFC
@@ -7,3 +7,4 @@
--btn-blue-color: #4772F2
--font-grey-color: #9294A7
--border-light-grey-color: #9294A7
--default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)

102
src/components/HeaderInputs.vue
View File

@@ -1,16 +1,16 @@
<template lang="pug">
.wrapper(:class="{ open: isOpen }")
.select-wrapper(@click="changeState")
.select
img.icon-wrapper.loupe(src="@/assets/icons/search.svg" alt="Search")
span.inputs.select-input {{ selectedFilter }}
.icon-wrapper.arrow.icon-down-arrow
.filter-options(v-if="isOpen")
.options(v-for="filter in filters" :key="filter" @click="selectFilter(filter)")
.icon-wrapper
.icon-ok.ok(v-if="filter === selectedFilter")
.options-text.text-lg {{ filter }}
input.inputs.search-input(placeholder="Искать ...")
.header-inputs-wrapper.flex.items-center.font-medium.text-base(:class="{ open: isOpen }")
.select-container(@click="changeState")
.select-wrapper.flex.items-center.mx-4.my-2
img.icon-wrapper.flex.justify-center.items-center.loupe(src="@/assets/icons/search.svg" alt="Search")
span.custom-input.select-input.inline-block.box-border.align-middle.pl-2.pr-1 {{ selectedFilter }}
.arrow.icon-down-arrow.flex.justify-center.items-center
.options-wrapper.flex.flex-col.box-border.p-4.mt-1(v-if="isOpen")
.option-list.flex.flex-row.mb-4(v-for="filter in filters" :key="filter" @click="selectFilter(filter)")
.icon-wrapper.mr-2.flex.justify-center
.icon-ok.flex.justify-center.items-center(v-if="filter === selectedFilter")
.options-text {{ filter }}
input.custom-input.search-input.inline-block.box-border.align-middle.px-4(class="py-2.5" placeholder="Искать ...")
</template>
<script>
@@ -19,8 +19,8 @@
props: {},
data() {
return {
selectedFilter: 'Календарь',
filters: ['Календарь', 'Клиенты'],
selectedFilter: "Календарь",
filters: ["Календарь", "Клиенты"],
isOpen: false
}
},
@@ -43,89 +43,51 @@
.arrow
transform: rotate(180deg)
.wrapper
.header-inputs-wrapper
background-color: var(--bg-white-color)
display: flex
align-items: center
.inputs-wrapper
display: flex
align-items: center
border-radius: 4px
.select-container
border-radius: 4px 0 0 4px
border: 1px solid var(--border-light-grey-color)
.select-wrapper
color: var(--btn-blue-color)
border-right: none
.icon-wrapper
width: 24px
height: 24px
display: flex
justify-content: center
align-items: center
.loupe
margin: 8px 0 8px 16px
font-size: 21px
color: var(--btn-blue-color)
.inputs
cursor: pointer
.custom-input
border: none
outline: none
background-color: transparent
color: var(--btn-blue-color)
height: 100%
box-sizing: border-box
font-style: normal
font-weight: 500
font-size: 16px
line-height: 19px
font-feature-settings: 'pnum' on, 'lnum' on
display: inline-block
vertical-align: middle
padding: 10px 16px
&::placeholder
color: var(--font-grey-color)
.select
display: flex
align-items: center
border-radius: 4px 0 0 4px
border: 1px solid var(--border-light-grey-color)
border-right: none
.select-wrapper
position: relative
z-index: 2
cursor: pointer
.select-input
width: 100px
padding: 10px 4px 10px 8px
.filter-options
display: flex
flex-direction: column
width: 173px
box-sizing: border-box
padding: 16px
.options-wrapper
width: 172px
background-color: var(--bg-white-color)
color: var(--font-dark-blue-color)
margin-top: 4px
border-radius: 4px
position: absolute
box-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
box-shadow: var(--default-shadow)
.search-input
border-radius: 0 4px 4px 0
border: 1px solid var(--border-light-grey-color)
&::placeholder
color: var(--font-grey-color)
.options
display: flex
flex-direction: row
margin-bottom: 16px
font-weight: 500
font-size: 16px
line-height: 19px
color: var(--font-dark-blue-color)
.option-list
cursor: pointer
&:last-child
margin: 0
@@ -137,9 +99,13 @@
align-items: center
.arrow
margin: 12px 16px 12px 0
font-size: 8px
color: var(--btn-blue-color)
.ok
margin-right: 8px
.icon-ok
font-size: 13px
.icon-down-arrow
width: 16px
height: 16px
</style>

71
src/components/TheHeader.vue
View File

@@ -1,22 +1,22 @@
<template lang="pug">
div.header-wrapper
div.header-left-side
.header-wrapper.flex.flex-row.space-between.justify-between.box-border.py-2.px-6
.left-side.flex.items-center.box-border
img.logo-img(src="@/assets/images/logo.svg" alt="Logo")
div.header-right-side
header-inputs
button.header-buttons.btn-notification
img.bell-icon(src="@/assets/icons/bell.svg" alt="Notifications")
div.avatar-wrapper
img.avatar-img(:src="avatarSrc")
button.header-buttons.btn-down-arrow
img.arrow-icon(src="@/assets/icons/down-arrow-2.svg" alt="Down Arrow")
.flex.flex-row
header-inputs.mr-10
button.header-buttons.flex.justify-center.items-center.mr-8.p-0
.icon-bell
.flex.flex-row.justify-centflexer.items-center
img.avatar-img.mr-2(:src="avatarSrc")
button.header-buttons
.icon-down-arrow.flex.justify-center.items-center.p-0
</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',
name: "TheHeader",
components: {HeaderInputs},
data() {
return {
@@ -26,70 +26,39 @@
}
</script>
<style lang='sass' scoped>
input
padding: 0
<style lang="sass" scoped>
.header-buttons
outline: none
border: none
background-color: transparent
cursor: pointer
padding: 0
color: var(--font-dark-blue-color)
.header-wrapper
display: flex
flex-direction: row
justify-content: space-between
width: 100%
padding: 8px 24px
background-color: var(--bg-white-color)
box-sizing: border-box
position: relative
z-index: 2
.header-right-side
display: flex
flex-direction: row
.header-left-side
box-sizing: border-box
margin: 4px 0
height: 32px
.left-side
cursor: pointer
.logo-img
height: 32px
width: 70px
.btn-notification
display: flex
justify-content: center
align-items: center
margin-right: 32px
.arrow-icon
.icon-down-arrow
width: 24px
height: 24px
font-size: 12px
.bell-icon
.icon-bell
width: 24px
height: 24px
.avatar-wrapper
display: flex
flex-direction: row
justify-content: center
align-items: center
.btn-down-arrow
display: flex
justify-content: center
align-items: center
font-size: 24px
color: var(--font-dark-blue-color)
.avatar-img
width: 32px
height: 32px
margin-right: 8px
</style>