➕ サイズ調整つけた

ti-aiuto · May 7, 2021 · e8f6114 · e8f6114
1 parent 8da278c
commit e8f6114
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/src/app/application.scss b/src/app/application.scss
@@ -5,6 +5,7 @@
 
 body {
   font-family: sans-serif;
+  user-select: none;
 }
 
 .container {
@@ -14,4 +15,29 @@ body {
 
 .timer-wrapper {
   margin: 12px;
+  transform-origin: top;
+}
+
+.zoom-buttons {
+  margin: 8px;
+  text-align: center;
+
+  button {
+    font-size: 0.7rem;
+    margin: 6px;
+    padding: 8px 8px;
+    border-radius: 12px;
+    font-family: monospace;
+    touch-action: manipulation;
+    border: none;
+    border-top: solid 1px #eee;
+    background-color: #fff;
+    box-shadow: 0 1px 2px #777;
+    color: #555;
+    flex: 1;
+  }
+
+  button:active:not(:disabled) {
+    box-shadow: 0 0px 2px #777 inset;
+  }
 }
diff --git a/src/app/application.ts b/src/app/application.ts
@@ -6,6 +6,9 @@ import Timer from '@/app/components/timer.vue'
 document.addEventListener('DOMContentLoaded', () => {
   new Vue({
     el: '#timer-ui',
-    components: { Timer }
+    components: { Timer },
+    data(): { scale: number } {
+      return { scale: 1 }
+    },
   })
 })
diff --git a/src/app/index.html b/src/app/index.html
@@ -15,7 +15,16 @@
   </head>
   <body>
     <div class="container" id="timer-ui">
-      <timer time-up-audio-src="timer-timeup.mp3" class="timer-wrapper"></timer>
+      <div class="zoom-buttons">
+        <button @click="scale += 0.1">拡大</button>
+        <button @click="scale -= 0.1">縮小</button>
+        <button @click="scale = 1">リセット</button>
+      </div>
+      <timer
+        time-up-audio-src="timer-timeup.mp3"
+        class="timer-wrapper"
+        :style="{transform: 'scale(' + scale + ')'}"
+      ></timer>
     </div>
   </body>
 </html>