commit a1920c8e617b9d2fd38590ca620837f8efeeccbf
parent 4bdcd948632989e472eb5c456787142c917dd1b9
Author: Jack Mordaunt <jackmordaunt@gmail.com>
Date: Wed, 14 Nov 2018 11:40:44 +1300
[~] Use simple flexbox instead of semantic ui containers.
Toggle wireframing based on config "debug" value.
Diffstat:
2 files changed, 138 insertions(+), 94 deletions(-)
diff --git a/cmd/desktop/ui/src/App.vue b/cmd/desktop/ui/src/App.vue
@@ -1,74 +1,86 @@
<template>
-<div id="app">
- <sui-grid id="my-container" middle aligned>
- <sui-grid-row stretched>
- <sui-grid-column>
- <sui-segment>
- <h1>Giffer</h1>
- <sui-form
- id="main-form"
- :loading="loading"
- @submit.prevent="submit"
- >
- <sui-form-field>
- <label>url</label>
- <input id="url" name="url" type="url" placeholder="https://youtube.com/..." required v-model="form.url">
- </sui-form-field>
- <sui-form-field>
- <label>start</label>
- <input name="start" type="number" placeholder="120" min="0" required v-model="form.start">
- </sui-form-field>
- <sui-form-field>
- <label>end</label>
- <input name="end" type="number" placeholder="170" min="0" required v-model="form.end">
- </sui-form-field>
- <sui-form-field>
- <label>width</label>
- <input name="width" type="number" placeholder="400" min="0" v-model="form.width">
- </sui-form-field>
- <sui-form-field>
- <label>height</label>
- <input name="height" type="number" placeholder="250" min="0" v-model="form.height">
- </sui-form-field>
- <sui-form-field>
- <label>fps</label>
- <input name="fps" type="number" placeholder="24" min="0" v-model="form.fps">
- </sui-form-field>
- <sui-form-field>
- <label>quality</label>
- <sui-dropdown
- name="quality"
- fluid
- placeholder="Select quality"
- selection
- search
- :options="qualities"
- v-model="form.quality"
- >
- </sui-dropdown>
- </sui-form-field>
- <sui-form-field class="form-group">
- <sui-button primary type="submit">Submit</sui-button>
- </sui-form-field>
- </sui-form>
- </sui-segment>
- </sui-grid-column>
- </sui-grid-row>
- <sui-grid-row v-if="link.length > 0">
- <sui-image :src="link" size="medium" bordered />
- </sui-grid-row>
- <sui-grid-row stretched>
- <pre v-for="(err, ii) in errors" :key="ii" class="errors">
- {{err}}
- </pre>
- </sui-grid-row>
- </sui-grid>
+<div id="app" :class="mode">
+ <div class="header top-level">
+ <h1>Giffer</h1>
+ </div>
+ <div class="container top-level">
+ <div class="flex-grid">
+ <div class="col">
+ <sui-form
+ id="input-form"
+ class="top-level"
+ :loading="loading"
+ @submit.prevent="submit"
+ >
+ <sui-form-field>
+ <label>url</label>
+ <input id="url" name="url" type="url" placeholder="https://youtube.com/..." required v-model="form.url">
+ </sui-form-field>
+ <sui-form-field>
+ <label>start</label>
+ <input name="start" type="number" placeholder="120" min="0" required v-model="form.start">
+ </sui-form-field>
+ <sui-form-field>
+ <label>end</label>
+ <input name="end" type="number" placeholder="170" min="0" required v-model="form.end">
+ </sui-form-field>
+ <sui-form-field>
+ <label>width</label>
+ <input name="width" type="number" placeholder="400" min="0" v-model="form.width">
+ </sui-form-field>
+ <sui-form-field>
+ <label>height</label>
+ <input name="height" type="number" placeholder="250" min="0" v-model="form.height">
+ </sui-form-field>
+ <sui-form-field>
+ <label>fps</label>
+ <input name="fps" type="number" placeholder="24" min="0" v-model="form.fps">
+ </sui-form-field>
+ <sui-form-field>
+ <label>quality</label>
+ <sui-dropdown
+ name="quality"
+ fluid
+ placeholder="Select quality"
+ selection
+ search
+ :options="qualities"
+ v-model="form.quality"
+ >
+ </sui-dropdown>
+ </sui-form-field>
+ <sui-form-field>
+ <sui-button
+ id="input-form-button"
+ primary
+ type="submit"
+ >
+ Create
+ </sui-button>
+ </sui-form-field>
+ </sui-form>
+ </div>
+ <div class="col">
+ <div v-if="link.length > 0">
+ <sui-image :src="link" size="medium" bordered />
+ </div>
+ </div>
+ <div class="col">
+ <div v-for="(err, ii) in errors" :key="ii">
+ <sui-message error>
+ <sui-message-header>Error</sui-message-header>
+ <pre>{{err}}</pre>
+ </sui-message>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</template>
<script>
+import config from "@/config.js"
import axios from "axios"
-import "vue-awesome/icons"
import Icon from "vue-awesome/components/Icon"
export default {
@@ -112,33 +124,39 @@ export default {
}
axios.post("gifify", this.form)
.then(resp => {
- console.log(resp)
+ // console.log(resp)
if (resp.data.error) {
this.errors.push(resp.data.error)
return
}
- console.log("waiting for download to be ready...")
+ // console.log("waiting for download to be ready...")
let { file, info } = resp.data
let updates = new WebSocket(`ws://localhost:8081${info}`)
updates.onmessage = (msg) => {
this.loading = false
updates.close()
let data = JSON.parse(msg.data)
- console.log(data)
+ // console.log(data)
if (data.error !== undefined) {
this.errors.push(data.error)
return
}
- console.log("ready to download!")
+ // console.log("ready to download!")
this.link = `http://localhost:8081${file}`
}
})
.catch(err => {
- console.log("catching error")
+ // console.log("catching error")
+ // console.log(err.response.data)
this.errors.push(err.response.data)
})
}
},
+ computed: {
+ mode() {
+ return config.debug ? "wireframe" : ""
+ }
+ },
components: {
Icon,
}
@@ -146,40 +164,62 @@ export default {
</script>
<style>
-html {
- padding: 0;
- margin: 0;
+/* .wireframe outlines all child elements for debugging. */
+.wireframe * {
+ outline: 0.5px dotted black;
}
body {
- padding: 0;
- margin: 0;
- position: fixed;
- min-width: 100vw;
- min-height: 100vh;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
+ height: 100vh;
}
-#my-container {
+#app {
+ height: 100vh;
+}
+
+#input-form {
+ /* height: calc(100vh - 35px);
+ overflow-y: auto; */
+ padding: 20px 20px 0 20px;
+}
+
+#input-form-button {
+ margin-bottom: 20px;
+}
+
+.flex-grid {
display: flex;
- align-items: center;
- justify-content: center;
- height: 100%;
- width: 100%;
- margin: 0;
- padding: 10px;
}
-#main-form {
+.col {
+ flex: 1
+}
+
+.flex-grid-thirds {
+ display: flex;
+ justify-content: space-between;
+}
+
+.flex-grid-thirds .col {
+ width: 32%;
+}
+
+/* top-level specifies that the element's height is derived from the window
+ size and header.
+*/
+.top-level {
+ height: calc(100vh - 35px);
overflow-y: auto;
}
-.errors {
- display: flex;
- max-height: 20vh;
- overflow: scroll;
+.top-level.header {
+ height: 35px;
+ overflow: hidden;
+}
+
+@media (max-width: 400px) {
+ .flex-grid {
+ display: block;
+ }
}
</style>
diff --git a/cmd/desktop/ui/src/config.js b/cmd/desktop/ui/src/config.js
@@ -0,0 +1,3 @@
+export default {
+ debug: false,
+}
+\ No newline at end of file
