styling & improvements
parent
0c1656b87e
commit
062fbf84df
17
src/App.vue
17
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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue