studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Add helper to Interactive360 #62

Browse source
This commit is contained in:
Timothée Goguely 2024-12-16 18:19:39 +01:00
parent f99e33f80e
commit 7ab8812b4c
2 changed files with 31 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/assets/css/src/2.blocks.track.css
View file

@ -36,9 +36,6 @@
height: var(--h);
border: none;
}
.track button {
position: absolute;
}
/* Buttons */
.track .btn--icon {
@ -49,6 +46,7 @@
max-height: var(--space-48);
background: transparent;
padding: var(--space-12);
position: absolute;
}
.track .btn--icon:hover {
background: var(--color-black-10);
@ -85,3 +83,28 @@
top: 50%;
transform: translateY(-50%);
}
/* Helper */
.track #helper {
--row-gap: .5rem;
position: absolute;
inset: -5.75rem -1rem -1rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='540' fill='none' viewBox='0 0 500 540'%3E%3Cpath stroke='url(%23a)' stroke-width='2' d='M497 337c0 .64-.29 1.37-1.03 2.2-.75.82-1.9 1.68-3.51 2.57-3.21 1.76-8.01 3.5-14.28 5.16-12.53 3.33-30.7 6.34-53.22 8.88C379.95 360.87 317.73 364 249 364s-130.94-3.13-175.96-8.2c-22.51-2.53-40.69-5.54-53.22-8.87-6.27-1.67-11.07-3.4-14.28-5.16a13.54 13.54 0 0 1-3.51-2.58C1.29 338.37 1 337.64 1 337c0-.64.29-1.37 1.03-2.2.74-.82 1.9-1.68 3.51-2.57 3.21-1.76 8.01-3.5 14.28-5.16 12.53-3.33 30.7-6.34 53.22-8.88C118.06 313.13 180.27 310 249 310s130.94 3.13 175.96 8.2c22.51 2.53 40.69 5.54 53.22 8.87 6.27 1.67 11.07 3.4 14.28 5.16 1.6.89 2.77 1.75 3.51 2.58.74.82 1.03 1.55 1.03 2.19Z'/%3E%3Cpath stroke='url(%23b)' stroke-width='2' d='M248.9 1.09a.73.73 0 0 1 .1-.08l.1.08c.14.13.33.37.56.78.44.82.92 2.1 1.4 3.88.96 3.53 1.9 8.78 2.79 15.6 1.79 13.62 3.4 33.36 4.76 57.79C261.32 127.97 263 195.45 263 270c0 74.55-1.68 142.03-4.4 190.86-1.35 24.43-2.96 44.17-4.75 57.8-.9 6.81-1.83 12.06-2.8 15.6a18.76 18.76 0 0 1-1.4 3.87 3.08 3.08 0 0 1-.65.86 3.08 3.08 0 0 1-.66-.86c-.44-.82-.92-2.1-1.4-3.88-.96-3.53-1.9-8.78-2.79-15.6-1.79-13.62-3.4-33.36-4.76-57.79C236.68 412.03 235 344.55 235 270c0-74.55 1.68-142.03 4.4-190.86 1.35-24.43 2.96-44.17 4.75-57.8.9-6.81 1.83-12.06 2.8-15.6.47-1.77.95-3.05 1.4-3.87.22-.4.4-.65.55-.78Zm.06 537.92h.01Zm.07 0Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='249' x2='249' y1='301.5' y2='365' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.07' stop-color='%23666' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='225.5' x2='264' y1='270' y2='270' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.13' stop-color='%23666' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
justify-content: center;
z-index: 100;
}
.track #helper > * {
width: 100%;
max-width: 25rem;
}
.track #helper > *:first-child {
margin-top: -15rem;
}
.track .drag-zone {
cursor: grab;
}
.grabbing {
cursor: grabbing;
}

6
src/components/project/virtual-sample/Interactive360.vue
View file

@ -1,8 +1,12 @@
<template>
<figure>
<div @mousedown="enableDragToRotate" class="drag-zone"></div>
<div @mousedown="enableDragToRotate" class="drag-zone" :class="{ 'grabbing': isDragToRotateEnabled }"></div>
<img :src="currentFile.url" alt="" width="500" height="500" />
</figure>
<div hidden id="helper" class="flex flex-col | bg-black-50">
<p class="rounded-lg | text-white bg-grey-800 | p-16">Vous pouvez visualiser l’échantillon sous différents angles en cliquant et en déplaçant la souris de gauche à droite ou de bas en haut.</p>
<button class="btn">J’ai compris</button>
</div>
</template>
<script setup>