adjust zoom

app/javascript/template_builder/area.vue

@@ -198,7 +198,7 @@
           width="100%"
           height="100%"
           class="opacity-50"
-          :style="{ maxHeight: isInlineSize ? '5cqmin' : '40px' }"
+          :style="{ maxHeight: isInlineSize ? '4.4cqmin' : '40px' }"
         />
       </span>
     </div>

app/javascript/template_builder/builder.vue

@@ -652,21 +652,18 @@
       >
         <div class="absolute left-0 right-0 bottom-4 flex justify-center">
           <div class="join shadow pointer-events-auto">
-            <span class="join-item bg-base-content text-white pl-4 pr-3 h-9 inline-flex items-center text-sm font-semibold cursor-default">
+            <span class="join-item bg-base-content text-white pl-2 pr-2.5 h-9 items-center text-sm font-medium cursor-default w-16 flex justify-end">
-              {{ Math.round(zoomLevel * 100) }}%
+              <span>
+                {{ Math.round(zoomLevel * 100) }}%
+              </span>
             </span>
-            <div
+            <button
-              class="tooltip tooltip-top"
+              type="button"
-              :data-tip="t('reset_zoom')"
+              class="join-item bg-base-content text-white h-9 pl-2 pr-3 inline-flex items-center justify-center cursor-pointer hover:opacity-90 border-l border-white/20"
+              @click="zoomLevel = 1"
             >
-              <button
+              <IconX class="w-4 h-4 stroke-2" />
-                type="button"
+            </button>
-                class="join-item bg-base-content text-white h-9 pl-2 pr-3 inline-flex items-center justify-center cursor-pointer hover:opacity-90 border-l border-white/20"
-                @click="zoomLevel = 1"
-              >
-                <IconX class="w-5 h-5" />
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -2068,7 +2065,7 @@ export default {
       event.preventDefault()
 
       const oldZoom = this.zoomLevel
-      const nextZoom = Math.max(1, Math.min(3, oldZoom - event.deltaY * 0.002))
+      const nextZoom = Math.max(1, Math.min(3, oldZoom - event.deltaY * 0.006))
 
       if (nextZoom === oldZoom) return
 

app/javascript/template_builder/i18n.js

@@ -219,8 +219,7 @@ const en = {
   revisions: 'Revisions',
   apply: 'Apply',
   no_revisions_yet: 'No revisions yet',
-  viewing_revision_from: 'Viewing revision from {date}',
+  viewing_revision_from: 'Viewing revision from {date}'
-  reset_zoom: 'Reset zoom'
 }
 
 const es = {
@@ -444,8 +443,7 @@ const es = {
   revisions: 'Revisiones',
   apply: 'Aplicar',
   no_revisions_yet: 'Aún no hay revisiones',
-  viewing_revision_from: 'Viendo revisión del {date}',
+  viewing_revision_from: 'Viendo revisión del {date}'
-  reset_zoom: 'Restablecer zoom'
 }
 
 const it = {
@@ -669,8 +667,7 @@ const it = {
   revisions: 'Revisioni',
   apply: 'Applica',
   no_revisions_yet: 'Nessuna revisione ancora',
-  viewing_revision_from: 'Visualizzazione revisione del {date}',
+  viewing_revision_from: 'Visualizzazione revisione del {date}'
-  reset_zoom: 'Reimposta zoom'
 }
 
 const pt = {
@@ -894,8 +891,7 @@ const pt = {
   revisions: 'Revisões',
   apply: 'Aplicar',
   no_revisions_yet: 'Nenhuma revisão ainda',
-  viewing_revision_from: 'Visualizando revisão de {date}',
+  viewing_revision_from: 'Visualizando revisão de {date}'
-  reset_zoom: 'Redefinir zoom'
 }
 
 const fr = {
@@ -1119,8 +1115,7 @@ const fr = {
   revisions: 'Révisions',
   apply: 'Appliquer',
   no_revisions_yet: 'Aucune révision pour le moment',
-  viewing_revision_from: 'Affichage de la révision du {date}',
+  viewing_revision_from: 'Affichage de la révision du {date}'
-  reset_zoom: 'Réinitialiser le zoom'
 }
 
 const de = {
@@ -1344,8 +1339,7 @@ const de = {
   revisions: 'Revisionen',
   apply: 'Anwenden',
   no_revisions_yet: 'Noch keine Revisionen',
-  viewing_revision_from: 'Ansicht der Revision vom {date}',
+  viewing_revision_from: 'Ansicht der Revision vom {date}'
-  reset_zoom: 'Zoom zurücksetzen'
 }
 
 const nl = {
@@ -1569,8 +1563,7 @@ const nl = {
   revisions: 'Revisies',
   apply: 'Toepassen',
   no_revisions_yet: 'Nog geen revisies',
-  viewing_revision_from: 'Revisie van {date} bekijken',
+  viewing_revision_from: 'Revisie van {date} bekijken'
-  reset_zoom: 'Zoom terugzetten'
 }
 
 export { en, es, it, pt, fr, de, nl }