Responsive design

This commit is contained in:
2024-09-02 17:28:30 +02:00
parent 35d356ae22
commit 175f6c3fcb
7 changed files with 92 additions and 48 deletions

View File

@@ -224,10 +224,10 @@ dark:border-dark-purple
<template>
<Suspense>
<template #default>
<div id="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart.passive="onTouchStart"
@dragstart.prevent="" class="absolute top-0 left-0 overflow-hidden w-full h-full"
<div id="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart="onTouchStart"
@dragstart.prevent="" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none"
:style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
<div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute top-2 left-2 z-[100] overflow-hidden">
<div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-30 overflow-hidden">
<div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer"
aria-label="Zoom in" data-tooltip-position="left">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"