ui: use Buefy components to...

... beautify the UI

ui/mock-server.js

@@ -17,31 +17,7 @@ function progressSimulation (res) {
   }, 1500)
 }
 
-app.get('/api/attrs', (req, res) => {
-  res.send(
-    `var base_attributes = {"name":"yuzu","target_url":"https://raw.githubusercontent.com/j-selby/test-installer/master/config.linux.v2.toml"};`
-  )
-})
-
-app.get('/api/dark-mode', (req, res) => {
-  res.json(false)
-})
-
-app.get('/api/installation-status', (req, res) => {
-  res.json({
-    database: { packages: [], shortcuts: [] },
-    install_path: null,
-    preexisting_install: false,
-    is_launcher: false,
-    launcher_path: null
-  })
-})
-
-app.get('/api/default-path', (req, res) => {
-  res.json({ path: '/tmp/test/' })
-})
-
-app.get('/api/config', (req, res) => {
+function returnConfig (res) {
   res.json({
     installing_message:
       'Test Banner <strong>Bold</strong>&nbsp;<pre>Code block</pre>&nbsp;<i>Italic</i>&nbsp;<del>Strike</del>',
@@ -73,6 +49,36 @@ app.get('/api/config', (req, res) => {
     ],
     hide_advanced: false
   })
+}
+
+app.get('/api/attrs', (req, res) => {
+  res.send(
+    `var base_attributes = {"name":"yuzu","target_url":"https://raw.githubusercontent.com/j-selby/test-installer/master/config.linux.v2.toml"};`
+  )
+})
+
+app.get('/api/dark-mode', (req, res) => {
+  res.json(false)
+})
+
+app.get('/api/installation-status', (req, res) => {
+  res.json({
+    database: { packages: [], shortcuts: [] },
+    install_path: null,
+    preexisting_install: false,
+    is_launcher: false,
+    launcher_path: null
+  })
+})
+
+app.get('/api/default-path', (req, res) => {
+  res.json({ path: '/tmp/test/' })
+})
+
+app.get('/api/config', (req, res) => {
+  setTimeout(() => {
+    returnConfig(res)
+  }, 3000)
 })
 
 app.post('/api/start-install', (req, res) => {

ui/src/main.js

@@ -2,9 +2,11 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import { ajax, stream_ajax } from './helpers'
+import Buefy from 'buefy'
 import 'buefy/dist/buefy.css'
 
 Vue.config.productionTip = false
+Vue.use(Buefy)
 
 // Borrowed from http://tobyho.com/2012/07/27/taking-over-console-log/
 function intercept (method) {

ui/src/views/DownloadConfig.vue

@@ -3,7 +3,7 @@
             <h4 class="subtitle">Downloading config...</h4>
 
             <br />
-            <progress class="progress is-info is-medium" value="0" max="100">
+            <progress class="progress is-info is-medium" max="100">
                 0%
             </progress>
     </div>

ui/src/views/ErrorView.vue

@@ -1,25 +1,22 @@
 <template>
-    <div class="column has-padding">
-            <h4 class="subtitle">An error occurred:</h4>
-
-            <pre class="pre-wrap">{{ msg }}</pre>
-
-            <div class="field is-grouped is-right-floating is-bottom-floating">
-                <p class="control">
-                    <a class="button is-primary is-medium" v-if="remaining" v-on:click="go_back">Back</a>
-                </p>
-            </div>
+  <div class="column has-padding">
+    <b-message title="An error occurred" type="is-danger" :closable="false">{{ msg }}</b-message>
+    <div class="field is-grouped is-right-floating is-bottom-floating">
+      <p class="control">
+        <a class="button is-primary is-medium" v-if="remaining" v-on:click="go_back">Back</a>
+      </p>
     </div>
+  </div>
 </template>
 
 <style>
 .pre-wrap {
   /* https://css-tricks.com/snippets/css/make-pre-text-wrap/ */
-  white-space: pre-wrap;       /* css-3 */
-  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-  white-space: -pre-wrap;      /* Opera 4-6 */
-  white-space: -o-pre-wrap;    /* Opera 7 */
-  word-wrap: break-word;       /* Internet Explorer 5.5+ */
+  white-space: pre-wrap; /* css-3 */
+  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+  white-space: -pre-wrap; /* Opera 4-6 */
+  white-space: -o-pre-wrap; /* Opera 7 */
+  word-wrap: break-word; /* Internet Explorer 5.5+ */
 }
 </style>
 

ui/src/views/SelectPackages.vue

@@ -8,8 +8,9 @@
                     <div class="tile is-child">
                         <div class="box clickable-box" v-on:click.capture.stop="Lpackage.default = !Lpackage.default">
                             <label class="checkbox">
-                                <input type="checkbox" v-model="Lpackage.default" />
-                                {{ Lpackage.name }}
+                                <b-checkbox v-model="Lpackage.default">
+                                  {{ Lpackage.name }}
+                                </b-checkbox>
                                 <span v-if="Lpackage.installed"><i>(installed)</i></span>
                             </label>
                             <p>