From 062fbf84df4605aabda30b29ba4759a6d2ed110c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Fri, 1 Nov 2019 19:31:15 +0100
Subject: [PATCH] styling & improvements

---
 src/App.vue                |  17 +++++
 src/components/Player.vue  |  48 ++++++++-----
 src/components/Sidebar.vue | 135 ++++++++++++++++++++++---------------
 3 files changed, 128 insertions(+), 72 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d0972a3..5dc5204 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,8 +54,25 @@ html, body, #app {
   font-size: .95em;
 }
 
+input, button {
+  font-family: Consolas, Inconsolata, monospace, serif;
+}
+
 input {
   font-size: .95em;
+  padding: 4px 0;
+  background: white;
+  border: 1px solid black;
+}
+
+input[type="file"] {
+  border: none;
+}
+
+button {
+  background: white;
+  border: 1px solid black;
+  box-shadow: 2px 2px #272727;
 }
 
 #menu-wrap, #canvas-wrap {
diff --git a/src/components/Player.vue b/src/components/Player.vue
index c9a8433..be038ff 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -2,18 +2,18 @@
   <div id="player">
     <div>
       <label for="zoom">Zoom:</label>
-      <input type="number" min="0.01" value="1" step="0.1" class="slider" v-model.number="zoom" id="zoom">
+      <input type="number" min="0.1" value="1" step="0.1" class="slider" v-model.number="zoom" id="zoom">
     </div>
-    <div id="player-canvas-container">
+    <div class="player-container">
       <canvas ref="canvas" id="player-canvas"
               :height="canvas_height" :width="canvas_width">
       </canvas>
-    </div>
-    <div id="controls">
       <div>
         <input type="range" min="0" :max="frames - 1" value="0" class="slider"
                v-model.number="position" :disabled=recording>
       </div>
+    </div>
+    <div class="controls">
       <div>
         <button @click="playOnceOrPause">{{!this.playing ? "PLAY ONCE" : "STOP"}}</button>
       </div>
@@ -23,6 +23,8 @@
       <div>
         <button @click="loopFullscreen">LOOP & FULLSCREEN</button>
       </div>
+    </div>
+    <div class="options">
       <div>
         <label for="sort">Sort by size</label>
         <input type="checkbox" v-model="sortBySize" id="sort">
@@ -252,21 +254,31 @@ export default {
   text-align: center;
 }
 
-.fullscreen {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: rgba(1, 1, 1, .9);
-  width: 100%;
-  height: 100%;
-}
-
-.fullscreen-controls {
-  position: absolute;
-  bottom: 0;
-}
-
 #zoom {
   width: 3em;
+  text-align: center;
+}
+
+.player-container {
+  padding: 2em 0 1em 0;
+}
+
+.controls, .options {
+  display: flex;
+  flex-direction: column;
+}
+
+.controls button {
+  width: 12em;
+  margin: .25em;
+}
+
+.options {
+  padding-top: 1em;
+}
+
+.options div {
+  display: flex;
+  justify-content: space-between;
 }
 </style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index b6dd7ab..d1419e3 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,54 +1,63 @@
 <template>
   <div id="sidebar-container">
-    <div>
-      <input type="file" id="file" @change="loadImage($event)">
+    <div class="sidebar-section">
+      <div>
+        <input type="file" id="file" @change="loadImage($event)">
+      </div>
+      <div class="section-formlike">
+        <label>Image size:</label>
+        <div class="readout">{{imageSize[0]}} x {{imageSize[1]}}</div>
+      </div>
     </div>
-    <div>
-      <label>Image size: {{imageSize[0]}} x {{imageSize[1]}}</label>
+    <div class="sidebar-section">
+      <div class="section-formlike">
+        <label for="slice_x">Slice X: </label>
+        <input class="spinBox" id="slice_x" v-model.number="guideSizeX" type="number"
+               min="2" :max="imageSize[0]/2" step="1" value="64">
+      </div>
+      <div>
+        <label for="slice_x">X remainder: {{this.imageSize[0] % this.guideSizeX}}</label>
+      </div>
+      <div class="section-formlike">
+        <label for="slice_y">Slice Y: </label>
+        <input class="spinBox" id="slice_y" v-model.number="guideSizeY" type="number"
+               min="2" :max="imageSize[1]/2" step="1" value="64">
+      </div>
+      <div>
+        <label for="slice_x">Y remainder: {{this.imageSize[1] % this.guideSizeY}}</label>
+      </div>
+      <div class="section-formlike">
+        <label for="lockSize">Maintain square ratio: </label>
+        <input type="checkbox" id="lockSize" v-model="lockSize">
+      </div>
+      <div class="section-formlike">
+        <label for="cleanSize">Allow only clean sizes: </label>
+        <input type="checkbox" id="cleanSize" v-model="cleanSize">
+      </div>
     </div>
-    <hr>
-    <div>
-      <label for="slice_x">Slice X: </label>
-      <input class="spinBox" id="slice_x" v-model.number="guideSizeX" type="number" min="2" :max="imageSize[0]/2"
-             step="1" value="64">
+    <div class="sidebar-section">
+      <div class="section-formlike">
+        <label>Offset: x={{offset[0]}}, y={{offset[1]}}</label>
+        <button @click="$emit('params', {type: 'offset', x: 0, y: 0})">RESET</button>
+      </div>
     </div>
-    <div>
-      <label for="slice_x">No X remainder: {{noXremainder}}</label>
+    <div class="sidebar-section">
+      <div class="section-formlike">
+        <label>Total amount of slices:</label>
+        <div class="readout">{{slices}}</div>
+      </div>
+      <div class="section-formlike">
+        <label for="fps">FPS: </label>
+        <input class="spinBox" id="fps" v-model="fps" type="number" min="1" max="60" step="1" value="60" disabled>
+      </div>
+      <div class="section-formlike">
+        <label>Est. length:</label>
+        <div class="readout">{{length}}</div>
+      </div>
     </div>
-    <div>
-      <label for="slice_y">Slice Y: </label>
-      <input class="spinBox" id="slice_y" v-model.number="guideSizeY" type="number" min="2" :max="imageSize[1]/2"
-             step="1" value="64">
+    <div class="sidebar-section player-section">
+      <player class="player" :width="guideSizeX" :height="guideSizeY" :offset="offset" @frames="(n)=>{slices=n}"/>
     </div>
-    <div>
-      <label for="slice_x">No Y remainder: {{noYremainder}}</label>
-    </div>
-    <div>
-      <label for="lockSize">Maintain square ratio: </label>
-      <input type="checkbox" id="lockSize" v-model="lockSize">
-    </div>
-    <div>
-      <label for="cleanSize">Allow only clean sizes: </label>
-      <input type="checkbox" id="cleanSize" v-model="cleanSize">
-    </div>
-    <hr>
-    <div>
-      <label>Offset: x={{offset[0]}}, y={{offset[1]}}</label>
-      <button @click="$emit('params', {type: 'offset', x: 0, y: 0})">RESET</button>
-    </div>
-    <hr>
-    <div>
-      <label>Total amount of slices: {{slices}}</label>
-    </div>
-    <div>
-      <label for="fps">FPS: </label>
-      <input class="spinBox" id="fps" v-model="fps" type="number" min="1" max="60" step="1" value="60" disabled>
-    </div>
-    <div>
-      <label>Est. length: {{length}}</label>
-    </div>
-    <hr>
-    <player :width="guideSizeX" :height="guideSizeY" :offset="offset" @frames="(n)=>{slices=n}"/>
   </div>
 </template>
 
@@ -160,12 +169,6 @@ export default {
         return "~" + seconds + " seconds" + (mins > 0 ? (" (" + mins + "m " + secs + "s)") : "");
       }
     },
-    noXremainder: function () {
-      return this.imageSize[0] % this.guideSizeX === 0;
-    },
-    noYremainder: function () {
-      return this.imageSize[1] % this.guideSizeY === 0;
-    },
   },
   methods: {
     loadImage (e) {
@@ -193,17 +196,41 @@ export default {
 
 <style scoped>
 #sidebar-container {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
 
   border-right: 1px solid black;
 }
 
-.spinBox {
-  height: 1em;
+.sidebar-section {
+  padding: .5em;
+  border-bottom: 1px solid grey;
 }
 
-.green {
-  background-color: green;
+.sidebar-section > div {
+  padding: .25em;
+}
+
+.section-formlike {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.section-formlike input[type="number"] {
+  width: 4em;
+  text-align: center;
+}
+
+.section-formlike .readout {
+  min-width: 4em;
+  text-align: center;
+}
+
+.player-section {
+  border-bottom: none;
 }
 </style>