Skip to content

Commit

Permalink
Merge pull request #146 from IBEC-BOX/feat/gallery
Browse files Browse the repository at this point in the history 
Feat/gallery
  • Loading branch information
@Zh3nyaZh3nya
Zh3nyaZh3nya authored Dec 11, 2024
2 parents 87c16bd + 0f57fcc commit 68a5a5d
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 52 deletions.
58 changes: 30 additions & 28 deletions src/runtime/components/Pages/TestVuetify.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,34 +42,36 @@
<NuxtPage class="bg-primary" />
<section class="h-100 bg-primary">
<v-container class="px-4">
<!-- <client-only>-->
<!-- <partsSlider-->
<!-- id="slider-about"-->
<!-- :slides="slides"-->
<!-- slider-allow-touch-move="false"-->
<!-- slider-speed="500"-->
<!-- :static-chips="{-->
<!-- text: 'about',-->
<!-- attrs: {-->
<!-- class: 'mt-12 mb-8 ml-9 ml-md-13',-->
<!-- color: 'white',-->
<!-- variant: 'outlined',-->
<!-- style: 'margin-top: 123px !important;'-->
<!-- }-->
<!-- }"-->
<!-- :slider-pagination="true"-->
<!-- :show-buttons="false"-->
<!-- slider-direction="vertical"-->
<!-- :slider-pagination-active-variant="'white'"-->
<!-- :height="'800px'"-->
<!-- :control-scroll="true"-->
<!-- :slider-background-image="'https://images.unsplash.com/photo-1562043236-559c3b65a6e2?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'"-->
<!-- :slider-background-image-zoom="true"-->
<!-- :slider-background-image-zoom-scale="1.5"-->
<!-- class="main__about__slider"-->
<!-- />-->
<!-- </client-only>-->
<v-btn @click="model = !model">gfdgfsdgf</v-btn>
<!-- <client-only>-->
<!-- <partsSlider-->
<!-- id="slider-about"-->
<!-- :slides="slides"-->
<!-- slider-allow-touch-move="false"-->
<!-- slider-speed="500"-->
<!-- :static-chips="{-->
<!-- text: 'about',-->
<!-- attrs: {-->
<!-- class: 'mt-12 mb-8 ml-9 ml-md-13',-->
<!-- color: 'white',-->
<!-- variant: 'outlined',-->
<!-- style: 'margin-top: 123px !important;'-->
<!-- }-->
<!-- }"-->
<!-- :slider-pagination="true"-->
<!-- :show-buttons="false"-->
<!-- slider-direction="vertical"-->
<!-- :slider-pagination-active-variant="'white'"-->
<!-- :height="'800px'"-->
<!-- :control-scroll="true"-->
<!-- :slider-background-image="'https://images.unsplash.com/photo-1562043236-559c3b65a6e2?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'"-->
<!-- :slider-background-image-zoom="true"-->
<!-- :slider-background-image-zoom-scale="1.5"-->
<!-- class="main__about__slider"-->
<!-- />-->
<!-- </client-only>-->
<v-btn @click="model = !model">
gfdgfsdgf
</v-btn>
<parts-gallery-row
:blocks="gallery2"
:disable-links="false"
Expand Down
5 changes: 4 additions & 1 deletion src/runtime/components/Parts/Footer/Erg.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,10 @@
<h2 class="text-dark-1 text-h6 text-md-h5 text-lg-h4 font-weight-medium mb-4">
{{ contact?.title }}
</h2>
<ul class="footer-contacts-list d-flex" :class="contacts.length === 2 ? 'flex-column' : 'flex-wrap'">
<ul
class="footer-contacts-list d-flex"
:class="contacts.length === 2 ? 'flex-column' : 'flex-wrap'"
>
<li
v-if="contact.phone"
class="d-flex align-start footer-contacts-list-item"
Expand Down
29 changes: 24 additions & 5 deletions src/runtime/components/Parts/Gallery/Row.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,42 @@
>
<template v-if="!disableLinks">
<nuxt-link :to="`/gallery/${block.id}`">
<v-card elevation="0" height="290px" class="row-gallery-blocks-card bg-transparent">
<v-img :src="block.preview" height="290px" width="100%" cover class="row-gallery-blocks-card-image" />
<v-card
elevation="0"
height="290px"
class="row-gallery-blocks-card bg-transparent"
>
<v-img
:src="block.preview"
height="290px"
width="100%"
cover
class="row-gallery-blocks-card-image"
/>
<div class="row-gallery-blocks-card-title py-3 px-4">
<span>{{ block.category.title }}</span>
</div>
</v-card>
</nuxt-link>
</template>
<template v-else>
<v-card elevation="0" height="290px" class="row-gallery-blocks-card bg-transparent">
<v-img :src="block.preview" height="290px" width="100%" cover class="row-gallery-blocks-card-image" />
<v-card
elevation="0"
height="290px"
class="row-gallery-blocks-card bg-transparent"
>
<v-img
:src="block.preview"
height="290px"
width="100%"
cover
class="row-gallery-blocks-card-image"
/>
<div class="row-gallery-blocks-card-title py-3 px-4">
<span>{{ block.category.title }}</span>
</div>
</v-card>
</template>

</swiper-slide>
</swiper-container>
</template>
Expand Down
69 changes: 51 additions & 18 deletions src/runtime/components/Parts/Gallery/View.vue
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,27 @@
<template>
<v-overlay v-model="localModelValue" class="bg-background-overlay gallery-view-overlay">
<v-overlay
v-model="localModelValue"
class="bg-background-overlay gallery-view-overlay"
>
<v-container class="pa-md-16 px-0 px-md-16 gallery-view-container">
<div class="mb-6 cursor-pointer gallery-view-close px-1 px-md-0" @click="localModelValue = false">
<v-icon icon="mdi-close"></v-icon>
<div
class="mb-6 cursor-pointer gallery-view-close px-1 px-md-0"
@click="localModelValue = false"
>
<v-icon icon="mdi-close" />
</div>
<v-row class="d-flex flex-column-reverse flex-md-row">
<v-col cols="12" md="2">
<v-col
cols="12"
md="2"
>
<client-only>
<swiper-container
ref="thumbsSwiperRef"
:direction="mdAndUp ? 'vertical' : 'horizontal'"
class="gallery-view-swiper-blocks d-block"
:style="{ height: mdAndUp ? '100vh' : '100%', overflow: 'auto' }"
centeredSlides
centered-slides
:slides-per-view="mdAndUp ? 6.8 : 4.2"
space-between="0"
mousewheel
Expand All @@ -22,21 +31,31 @@
<swiper-slide
v-for="(img, index) in localGallery"
:key="`gallery-thumb-${index}`"
@click="setActiveImage(index)"
class="gallery-view-swiper-blocks-slide"
@click="setActiveImage(index)"
>
<v-card
elevation="0"
class="gallery-view-swiper-blocks-slide-card bg-transparent cursor-pointer"
:class="{ active: img.active }"
>
<v-img :src="img.image" height="120px" width="100%" cover class="rounded-lg gallery-view-swiper-blocks-slide-card-img" />
<v-img
:src="img.image"
height="120px"
width="100%"
cover
class="rounded-lg gallery-view-swiper-blocks-slide-card-img"
/>
</v-card>
</swiper-slide>
</swiper-container>
</client-only>
</v-col>
<v-col cols="12" md="10" class="position-relative">
<v-col
cols="12"
md="10"
class="position-relative"
>
<client-only>
<swiper-container
ref="mainSwiperRef"
Expand All @@ -62,14 +81,26 @@
/>
</swiper-slide>
</swiper-container>

</client-only>
<div class="main-controls mb-2" v-if="mdAndUp">
<v-btn icon color="primary" rounded="lg" @click="mainPrev">
<v-icon icon="mdi-chevron-left"></v-icon>
<div
v-if="mdAndUp"
class="main-controls mb-2"
>
<v-btn
icon
color="primary"
rounded="lg"
@click="mainPrev"
>
<v-icon icon="mdi-chevron-left" />
</v-btn>
<v-btn icon color="primary" rounded="lg" @click="mainNext">
<v-icon icon="mdi-chevron-right"></v-icon>
<v-btn
icon
color="primary"
rounded="lg"
@click="mainNext"
>
<v-icon icon="mdi-chevron-right" />
</v-btn>
</div>
</v-col>
Expand Down Expand Up @@ -102,11 +133,11 @@ const props = defineProps({
},
});
const emit = defineEmits(["update:modelValue"]);
const emit = defineEmits(["update:modelValue", "update:gallery"]);
const mainSwiperRef = ref();
const thumbsSwiperRef = ref();
const localGallery = ref(Object.values(props.gallery));
const localGallery = ref(Object.assign({}, props.gallery)); // Копируем объект
function setActiveImage(index) {
updateActiveImage(index);
Expand All @@ -121,11 +152,13 @@ function setActiveImage(index) {
}
function updateActiveImage(index) {
const keys = Object.keys(props.gallery);
const keys = Object.keys(localGallery.value);
keys.forEach((key, idx) => {
props.gallery[key].active = idx === index;
localGallery.value[key].active = idx === index;
});
emit('update:gallery', localGallery.value);
if (thumbsSwiperRef.value?.swiper) {
thumbsSwiperRef.value.swiper.slideTo(index);
thumbsSwiperRef.value.swiper.update();
Expand Down

0 comments on commit 68a5a5d

Please sign in to comment.