ksenia_mikhailova
/
demo-int-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

small css

This commit is contained in:
Kseninia Mikhaylova 2024-08-20 15:34:09 +03:00
parent 90fd46058e
commit 667b2dbcbd
3 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
front/src/assets/sidebar.scss
View File

@ -27,7 +27,7 @@ $primary: #E75B12;
} }
&.open { &.open {
right: 20vw; right: 31vw;
svg { svg {
transform: scale(-1, 1); transform: scale(-1, 1);
@ -37,7 +37,7 @@ $primary: #E75B12;
.sidebar { .sidebar {
position: fixed; position: fixed;
width: 19vw; width: 30vw;
top: 4rem; top: 4rem;
right: -50%; right: -50%;
bottom: 0; bottom: 0;
@ -51,6 +51,11 @@ $primary: #E75B12;
right: 0; right: 0;
} }
&-inner {
max-height: calc(100vh - 38rem);
overflow: auto;
}
&-content { &-content {
max-height: 100%; max-height: 100%;
overflow: auto; overflow: auto;

16
front/src/components/Promo/sidebar.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref, watch } from 'vue';
import { RouterLink, useRoute } from 'vue-router'; import { RouterLink, useRoute } from 'vue-router';
import { usePromoSidebar } from '../../stores/promo_sidebar'; import { usePromoSidebar } from '../../stores/promo_sidebar';
import { usePromoScene } from '../../stores/promo_scene'; import { usePromoScene } from '../../stores/promo_scene';
@ -15,6 +15,12 @@ const opened_desc = ref()
const openedChange = () => { const openedChange = () => {
sidebar.open(opened_desc.value) sidebar.open(opened_desc.value)
} }
watch(() => sidebar.$state.is_open, () => {
if (sidebar.is_open == false) {
opened_desc.value = null
}
})
</script> </script>
<template> <template>
<div class="sidebar" :class="[{ 'open': sidebar.is_open }]" ref="sidebar_obj"> <div class="sidebar" :class="[{ 'open': sidebar.is_open }]" ref="sidebar_obj">
@ -24,20 +30,20 @@ const openedChange = () => {
<h2>{{ sidebar_scene.name }}</h2> <h2>{{ sidebar_scene.name }}</h2>
<div class="sidebar-list"> <div class="sidebar-list">
<div class="sidebar-list-item" v-for="item in sidebar_scene.list"> <div class="sidebar-list-item" v-for="item in sidebar_scene.list">
<input type="radio" v-model=opened_desc :value="item.id" :id="item.id" <input type="radio" v-model=opened_desc :value="item.id" :id="item.id.toString()"
:checked="opened_desc == item.id" @change="openedChange" :checked="opened_desc == item.id" @change="openedChange"
:class="[{ checked: opened_desc == item.id }]" /> :class="[{ checked: opened_desc == item.id }]" />
<label :for="item.id">{{ item.name }}</label> <label :for="item.id.toString()">{{ item.name }}</label>
</div> </div>
</div> </div>
</div> </div>
<div class="sidebar-content" v-if="sidebar.title"> <div class="sidebar-content" v-if="sidebar.title">
<h2>{{ sidebar.title }}</h2> <h2>{{ sidebar.title }}</h2>
<template v-if="sidebar.description"> <div class="sidebar-inner" v-if="sidebar.description">
<template v-for="p in sidebar.description.split('\n')"> <template v-for="p in sidebar.description.split('\n')">
<p>{{ p }}</p> <p>{{ p }}</p>
</template> </template>
</template> </div>
<RouterLink class="btn" :to="`/${route.params.item}/${sidebar.target}`" v-if="sidebar.target"> <RouterLink class="btn" :to="`/${route.params.item}/${sidebar.target}`" v-if="sidebar.target">
<i-mdi-arrow-right /> <i-mdi-arrow-right />
</RouterLink> </RouterLink>

2
front/src/stores/promo_sidebar.ts
View File

@ -13,7 +13,7 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
} as PromoSidebar } as PromoSidebar
}, },
actions: { actions: {
open(id: number) { open(id?: number) {
if (id) { if (id) {
const clickable = useClickable() const clickable = useClickable()
const target = clickable.list.find(el => el.id == id) const target = clickable.list.find(el => el.id == id)