From a6267d8bb87de06818eea2a7bc646c8821fb1790 Mon Sep 17 00:00:00 2001
From: Arne Schauf <git@asw.io>
Date: Sat, 3 Mar 2018 13:23:12 +0100
Subject: fix voting and show scenario tags

---
 .quasar/entry.js               |  4 +-
 quasar.conf.js                 |  1 +
 src/components/UploadVoter.vue |  2 +-
 src/pages/UploadDetail.vue     | 13 +++++--
 src/pages/UploadList.vue       | 85 ++++++++++++++++++++++++------------------
 5 files changed, 62 insertions(+), 43 deletions(-)

diff --git a/.quasar/entry.js b/.quasar/entry.js
index f8e54ce..f86359c 100644
--- a/.quasar/entry.js
+++ b/.quasar/entry.js
@@ -40,12 +40,12 @@ import 'src/css/app.styl'
 
 
 import Vue from 'vue'
-import Quasar, {QAlert,QLayout,QLayoutHeader,QLayoutDrawer,QPageContainer,QPage,QToolbar,QToolbarTitle,QBtn,QIcon,QList,QListHeader,QInput,QItem,QItemMain,QItemSide,QTable,QTabs,QRouteTab,QInnerLoading,QField,QStep,QStepper,QStepperNavigation,QTd,QSpinner,QCard,QCardTitle,QCardMain,QCardMedia,QCardSeparator,QCardActions,QParallax,QCheckbox,Ripple,LocalStorage,Notify} from 'quasar'
+import Quasar, {QAlert,QLayout,QLayoutHeader,QLayoutDrawer,QPageContainer,QPage,QToolbar,QToolbarTitle,QBtn,QIcon,QList,QListHeader,QInput,QItem,QItemMain,QItemSide,QTable,QTabs,QRouteTab,QInnerLoading,QField,QStep,QStepper,QStepperNavigation,QTd,QSpinner,QCard,QCardTitle,QCardMain,QCardMedia,QCardSeparator,QCardActions,QParallax,QCheckbox,QChip,Ripple,LocalStorage,Notify} from 'quasar'
 
 Vue.config.productionTip = false
 import App from 'src/App'
 
-Vue.use(Quasar, {components: {QAlert,QLayout,QLayoutHeader,QLayoutDrawer,QPageContainer,QPage,QToolbar,QToolbarTitle,QBtn,QIcon,QList,QListHeader,QInput,QItem,QItemMain,QItemSide,QTable,QTabs,QRouteTab,QInnerLoading,QField,QStep,QStepper,QStepperNavigation,QTd,QSpinner,QCard,QCardTitle,QCardMain,QCardMedia,QCardSeparator,QCardActions,QParallax,QCheckbox},directives: {Ripple},plugins: {LocalStorage,Notify}})
+Vue.use(Quasar, {components: {QAlert,QLayout,QLayoutHeader,QLayoutDrawer,QPageContainer,QPage,QToolbar,QToolbarTitle,QBtn,QIcon,QList,QListHeader,QInput,QItem,QItemMain,QItemSide,QTable,QTabs,QRouteTab,QInnerLoading,QField,QStep,QStepper,QStepperNavigation,QTd,QSpinner,QCard,QCardTitle,QCardMain,QCardMedia,QCardSeparator,QCardActions,QParallax,QCheckbox,QChip},directives: {Ripple},plugins: {LocalStorage,Notify}})
 
 
 
diff --git a/quasar.conf.js b/quasar.conf.js
index 2d0a893..0ea65c1 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -90,6 +90,7 @@ module.exports = function (ctx) {
         'QCardActions',
         'QParallax',
         'QCheckbox',
+        'QChip',
       ],
       directives: [
         'Ripple'
diff --git a/src/components/UploadVoter.vue b/src/components/UploadVoter.vue
index 91019dd..035aa11 100644
--- a/src/components/UploadVoter.vue
+++ b/src/components/UploadVoter.vue
@@ -40,7 +40,7 @@
     methods: {
       vote (impact) {
         let that = this
-        this.$http.put(`/uploads/${this.upload._id}/vote`, {vote: {impact: impact}}).then(response => that.$emit('voted'))
+        this.$http.post(`/uploads/${this.upload._id}/vote`, {vote: {impact: impact}}).then(response => that.$emit('voted'))
       },
     },
   }
diff --git a/src/pages/UploadDetail.vue b/src/pages/UploadDetail.vue
index 956e324..3bde141 100644
--- a/src/pages/UploadDetail.vue
+++ b/src/pages/UploadDetail.vue
@@ -1,8 +1,10 @@
 <template>
   <div>
-    <q-btn class="pull-right" @click="$router.push({name: 'upload-list'})" outline icon="fa-list">Back to list</q-btn>
-    <div v-if="upload" class="row">
-      <q-card class="col-6">
+    <p class="text-right">
+      <q-btn @click="$router.push({name: 'upload-list'})" outline icon-right="fa-times" label="Close" />
+    </p>
+    <div v-if="upload">
+      <q-card>
         <q-card-media v-if="upload.pic" overlay-position="top">
           <q-card-title slot="overlay">
             Mod: {{ upload.title }}
@@ -18,9 +20,12 @@
         </q-card-title>
         <q-card-separator />
         <q-card-main>
-          <p class="text-faded description">
+          <p class="text-faded">
             {{ upload.description }}
           </p>
+          <div class="group">
+            <q-chip v-for="tag of upload.tags" :key="tag">{{ tag }}</q-chip>
+          </div>
         </q-card-main>
         <q-card-actions>
           <q-btn @click="openInOpenclonk" color="positive" outline>
diff --git a/src/pages/UploadList.vue b/src/pages/UploadList.vue
index da297ba..3aba9f7 100644
--- a/src/pages/UploadList.vue
+++ b/src/pages/UploadList.vue
@@ -1,37 +1,42 @@
 <template>
-  <div>
-    <transition :enter="showList ? 'fadeInLeft' : 'fadeInRight'" :leave="showList ? 'fadeOutRight' : 'fadeOutLeft'" mode="out-in" duration="500">
-      <div v-if="showList">
-        <h4>Available Mods</h4>
-        <q-table
-          no-data-label="No mods available"
-          row-key="name"
-          :data="uploads"
-          :config="tableConfig"
-          :columns="tableColumns"
-          @refresh="refresh">
-          <q-td slot='body-cell-action' slot-scope="props" :props='props'>
-            <q-btn color="primary"
-                   small
-                   outline
-                   icon="fa-info-circle"
-                   @click="$router.push({name: 'upload-detail', params: {uploadId: props.row._id}})">
-              Details</q-btn>
-            <q-btn color="negative"
-                   outline
-                   small
-                   icon="fa-trash-o"
-                   v-if="props.row.author.username === $store.state.user.decodedToken.username"
-                   @click="deleteUpload(cell.row)">
-              Delete</q-btn>
-          </q-td>
-          <q-td slot='body-cell-voting' slot-scope="props" :props='props'>
-            {{ props.value.sum }} <i class="fa" :class="{'fa-caret-up text-positive': props.value.sum > 0, 'fa-caret-down text-negative': props.value.sum < 0, 'fa-sort text-dark': props.value.sum === 0}"></i>
-          </q-td>
-        </q-table>
-      </div>
-      <router-view></router-view>
-    </transition>
+  <div class="flex row no-wrap gutter-lg">
+    <div class="animateMaxWidth" :class="showList ? 'col-12' : 'gt-sm col-md-6'">
+      <h4>Available Mods</h4>
+      <q-table
+        no-data-label="No mods available"
+        row-key="name"
+        :data="uploads"
+        :config="tableConfig"
+        :columns="tableColumns"
+        :visible-columns="visibleColumns"
+        @refresh="refresh">
+        <q-td slot='body-cell-action' slot-scope="props" :props='props'>
+          <q-btn color="primary"
+                 small
+                 outline
+                 icon="fa-info-circle"
+                 @click="$router.push({name: 'upload-detail', params: {uploadId: props.row._id}})">
+            Details</q-btn>
+          <q-btn color="negative"
+                 outline
+                 small
+                 icon="fa-trash-o"
+                 v-if="props.row.author.username === $store.state.user.decodedToken.username"
+                 @click="deleteUpload(cell.row)">
+            Delete</q-btn>
+        </q-td>
+        <q-td slot='body-cell-voting' slot-scope="props" :props='props'>
+          {{ props.value.sum }} <i class="fa" :class="{'fa-caret-up text-positive': props.value.sum > 0, 'fa-caret-down text-negative': props.value.sum < 0, 'fa-sort text-dark': props.value.sum === 0}"></i>
+        </q-td>
+      </q-table>
+    </div>
+    <div class="col-sm-12 col-md-6">
+      <transition appear
+                  enter-active-class="animated fadeIn"
+                  leave-active-class="animated fadeOut">
+        <router-view></router-view>
+      </transition>
+    </div>
   </div>
 </template>
 
@@ -45,7 +50,15 @@
     computed: {
       showList () {
         return this.$route.name === 'upload-list'
-      }
+      },
+      visibleColumns () {
+        let that = this
+        let removeOnSmall = ['description']
+        return this.tableColumns.map(el => el.name).filter(el => that.showList || removeOnSmall.indexOf(el) === -1)
+      },
+    },
+    mounted () {
+      this.refresh()
     },
     watch: {
       showList: {
@@ -121,6 +134,6 @@
 </script>
 
 <style lang="styl" type="text/stylus" scoped>
-  .description
-    max-width: 400px
+  .animateMaxWidth
+    transition: max-width .5s ease-in-out;
 </style>
-- 
cgit v1.2.3-54-g00ecf