From 3525c03eaea481c02382635bb2ec83961d24b0e2 Mon Sep 17 00:00:00 2001
From: Arne Schauf <git@asw.io>
Date: Thu, 15 Mar 2018 19:36:19 +0100
Subject: do some layout stuff

---
 src/assets/bodybg.jpg      | Bin 0 -> 150843 bytes
 src/layouts/default.vue    |  51 ++++++++++++++++++++++++++++-----------------
 src/pages/UploadCreate.vue |  10 ++++-----
 src/pages/UploadList.vue   |   4 +++-
 4 files changed, 40 insertions(+), 25 deletions(-)
 create mode 100644 src/assets/bodybg.jpg

diff --git a/src/assets/bodybg.jpg b/src/assets/bodybg.jpg
new file mode 100644
index 0000000..16fb0e6
Binary files /dev/null and b/src/assets/bodybg.jpg differ
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 84db2c1..fdb0022 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,35 +1,32 @@
 <template>
   <q-layout view="lHh Lpr lFf">
     <q-layout-header>
-      <q-toolbar color="primary" glossy>
-
+      <q-toolbar>
         <q-toolbar-title>
           Larry UI
           <div slot="subtitle">Official source of mods for OpenClonk</div>
         </q-toolbar-title>
 
-        <q-toolbar-title v-if="$store.getters['user/loggedIn']">
-          Hi {{ $store.state.user.decodedToken.username }}
-        </q-toolbar-title>
+        <q-tabs>
+          <q-route-tab slot="title"
+                       icon="fa-list"
+                       :to="{name: 'upload-list'}"
+                       replace
+                       hide="icon"
+                       label="Browse mods" />
+
+          <q-route-tab slot="title"
+                       icon="fa-upload"
+                       :to="{name: 'upload-create'}"
+                       replace hide="icon"
+                       label="Upload mod" />
+        </q-tabs>
+
         <q-btn flat icon="fa-sign-out" v-if="$store.getters['user/loggedIn']" @click="$store.commit('user/logout')">
           Logout
         </q-btn>
       </q-toolbar>
 
-      <q-tabs>
-        <q-route-tab slot="title"
-                     icon="fa-list"
-                     :to="{name: 'upload-list'}"
-                     replace
-                     hide="icon"
-                     label="Browse mods" />
-
-        <q-route-tab slot="title"
-                     icon="fa-upload"
-                     :to="{name: 'upload-create'}"
-                     replace hide="icon"
-                     label="Upload mod" />
-      </q-tabs>
     </q-layout-header>
 
     <q-page-container>
@@ -71,6 +68,22 @@
 </script>
 
 <style>
+  body {
+    background: white url('/assets/bodybg.jpg') no-repeat fixed;
+  }
+
+  .q-layout-header .q-toolbar {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .q-layout-header .q-tabs-head {
+    background-color: transparent;
+  }
+
+  .light-bg, .q-card, .q-stepper {
+    background-color: rgba(255, 255, 255, 0.8);
+  }
+
   .indent {
     margin-left: 1rem;
   }
diff --git a/src/pages/UploadCreate.vue b/src/pages/UploadCreate.vue
index 1c2506a..7c16bb6 100644
--- a/src/pages/UploadCreate.vue
+++ b/src/pages/UploadCreate.vue
@@ -1,6 +1,9 @@
 <template>
-  <div class="flex row">
-    <div class="col" v-if="authToken">
+  <div>
+    <h5 v-if="!authToken">
+      Please log in first
+    </h5>
+    <div v-else>
       <h5>Upload your own mod</h5>
       <q-stepper ref="stepper" style="max-width: 800px" alternative-labels>
         <q-step default name="data" title="Enter data" :error="errors.slug || errors.title || errors.description">
@@ -121,9 +124,6 @@
         <q-inner-loading :visible="saving" />
       </q-stepper>
     </div>
-    <div v-else>
-      Please log in first
-    </div>
   </div>
 </template>
 
diff --git a/src/pages/UploadList.vue b/src/pages/UploadList.vue
index 8aac81c..15b56f1 100644
--- a/src/pages/UploadList.vue
+++ b/src/pages/UploadList.vue
@@ -7,8 +7,10 @@
     </transition>
     <div class="animateMaxWidth" :class="showList ? 'col-12' : 'gt-md col-lg-4 col-xl-5'">
       <q-table
+        class="light-bg"
         no-data-label="No mods available"
         row-key="name"
+        title="Available Mods"
         :data="uploads"
         :config="tableConfig"
         :columns="tableColumns"
@@ -44,7 +46,7 @@
       },
       visibleColumns () {
         let that = this
-        let removeOnSmall = ['description']
+        let removeOnSmall = ['description', 'action']
         return this.tableColumns.map(el => el.name).filter(el => that.showList || removeOnSmall.indexOf(el) === -1)
       },
     },
-- 
cgit v1.2.3-54-g00ecf