improve upload detail page

3 files changed, 73 insertions, 80 deletions

diff --git a/src/components/CommentVoter.vue b/src/components/CommentVoter.vue
index 9ab9e72..4747571 100644
--- a/src/components/CommentVoter.vue
+++ b/src/components/CommentVoter.vue
@@ -8,8 +8,8 @@
         {{ comment.voting.sum }}
       </span>
       <span v-if="!myVote">
-        <q-btn color="negative" round size="sm" flat icon="fa-thumbs-down" @click="vote(-1)"></q-btn>
-        <q-btn color="positive" round size="sm" flat icon="fa-thumbs-up" @click="vote(1)"></q-btn>
+        <q-btn color="negative" round size="sm" outline icon="fa-thumbs-down" @click="vote(-1)"></q-btn>
+        <q-btn color="positive" round size="sm" outline icon="fa-thumbs-up" @click="vote(1)"></q-btn>
       </span>
       <span v-if="myVote">You voted <i :class="`fas fa-thumbs-${myVote.impact === 1 ? 'up text-positive' : 'down text-negative'}`"></i></span>
     </div>
diff --git a/src/components/UploadVoter.vue b/src/components/UploadVoter.vue
index 031cd82..e5d18ae 100644
--- a/src/components/UploadVoter.vue
+++ b/src/components/UploadVoter.vue
@@ -1,17 +1,22 @@
 <template>
   <div>
-    <div class="flex row items-center group" v-if="$store.getters['user/loggedIn']">
-      <h5 style="margin: 0 1rem">
-        <i class="fa"
-           :class="{'fa-caret-up text-positive': upload.voting.sum > 0, 'fa-caret-down text-negative': upload.voting.sum < 0, 'fa-sort text-dark': upload.voting.sum === 0}">
-        </i>
-        {{ upload.voting.sum }}
-      </h5>
-      <span v-if="!myVote">
-        <q-btn color="negative" round small icon="fa-thumbs-down" @click="vote(-1)"></q-btn>
-        <q-btn color="positive" round small icon="fa-thumbs-up" @click="vote(1)"></q-btn>
-      </span>
-      <span v-if="myVote">You voted <i :class="`fas fa-thumbs-${myVote.impact === 1 ? 'up text-positive' : 'down text-negative'}`"></i></span>
+    <div v-if="$store.getters['user/loggedIn']">
+      <p style="margin: 0 1rem">
+        <big>
+          <i class="fa"
+             :class="{'fa-caret-up text-positive': upload.voting.sum > 0, 'fa-caret-down text-negative': upload.voting.sum < 0, 'fa-sort text-dark': upload.voting.sum === 0}">
+          </i>
+          {{ upload.voting.sum }}
+        </big>
+        <small v-if="myVote">
+          You voted <i :class="`fas fa-thumbs-${myVote.impact === 1 ? 'up text-positive' : 'down text-negative'}`"></i>
+        </small>
+      </p>
+      <div class="generic-margin">
+        Change your vote:
+        <q-btn v-if="!myVote || myVote.impact === 1" color="negative" round outline size="sm" icon="fa-thumbs-down" @click="vote(-1)"></q-btn>
+        <q-btn v-if="!myVote || myVote.impact === -1" color="positive" round outline size="sm" icon="fa-thumbs-up" @click="vote(1)"></q-btn>
+      </div>
     </div>
     <div class="group" v-else>
       <i class="fa"
diff --git a/src/pages/UploadDetail.vue b/src/pages/UploadDetail.vue
index 223ad35..d1412d3 100644
--- a/src/pages/UploadDetail.vue
+++ b/src/pages/UploadDetail.vue
@@ -22,30 +22,53 @@
         </q-card-title>
         <q-card-separator />
         <q-card-actions>
-          <q-btn @click="openInOpenclonk" color="positive" outline>
-            Install mod with OpenClonk
-          </q-btn>
+          <q-btn @click="openInOpenclonk"
+                 color="positive"
+                 outline
+                 icon="fa-download"
+                 label="Install mod with OpenClonk" />
           <q-btn v-if="username === upload.author.username"
                  outline
                  color="negative"
-                 icon="fa-trash-o"
-                 @click="deleteUpload(upload)">
-            Delete mod
-          </q-btn>
+                 icon="fa-trash"
+                 @click="deleteUpload(upload)"
+                 label="Delete mod" />
         </q-card-actions>
         <q-card-main>
           <p class="text-faded">
             <vue-markdown class="markdown" :html="false" :source="upload.description"></vue-markdown>
           </p>
         </q-card-main>
-        <q-card-title>Tags</q-card-title>
+        <q-card-separator />
+        <q-card-title><i class="far fa-hand-point-right"></i> Tags</q-card-title>
         <q-card-main>
           <div class="group">
             <q-chip v-for="tag of upload.tags" :key="tag">{{ tag }}</q-chip>
           </div>
         </q-card-main>
-        <q-card-title>Comments</q-card-title>
+        <q-card-separator />
+        <q-card-title><i class="far fa-hand-point-right"></i> Comments</q-card-title>
         <q-card-main>
+          <p v-if="loggedIn">
+            <q-input
+              v-model="comment"
+              placeholder="Write a comment"
+              :max-height="100"
+              @keyup.enter="sendComment"
+              :after="[
+                        {
+                          icon: 'fa-paper-plane',
+                          content: true,
+                          handler () {
+                            sendComment()
+                          }
+                        }
+                      ]"
+            />
+          </p>
+          <div v-else>
+            <em>Please log in to comment</em>
+          </div>
           <div class="flex row no-wrap items-center"
                v-for="comment of comments.comments"
                :key="comment._id">
@@ -63,50 +86,19 @@
                    @click="deleteComment(comment)"/>
             <comment-voter @voted="loadComments" :comment="comment"></comment-voter>
           </div>
-          <div>
-            <q-input
-              v-model="comment"
-              type="textarea"
-              placeholder="Write a comment"
-              :max-height="100"
-              @keyup.enter="sendComment"
-              :after="[
-                        {
-                          icon: 'fa-paper-plane',
-                          content: true,
-                          handler () {
-                            sendComment()
-                          }
-                        }
-                      ]"
-            />
-            <q-inner-loading :visible="commentSaving"><q-spinner-comment></q-spinner-comment></q-inner-loading>
-          </div>
         </q-card-main>
-        <q-card-media v-if="upload.pic" overlay-position="bottom">
-          <q-card-title slot="overlay">
-            Voting
-          </q-card-title>
-          <q-parallax :src="`${$http.defaults.baseURL}/media/${upload.pic._id}`" :height="150">
-          </q-parallax>
-        </q-card-media>
-        <q-card-title v-else>
-          Voting
+        <q-card-separator />
+        <q-card-title>
+          <i class="far fa-hand-point-right"></i> Voting
         </q-card-title>
         <q-card-main>
           <div class="group">
             <upload-voter :upload="upload" @voted="refresh"></upload-voter>
           </div>
         </q-card-main>
-        <q-card-media v-if="upload.pic" overlay-position="bottom">
-          <q-card-title slot="overlay">
-            Dependencies
-          </q-card-title>
-          <q-parallax :src="`${$http.defaults.baseURL}/media/${upload.pic._id}`" :height="150">
-          </q-parallax>
-        </q-card-media>
-        <q-card-title v-else>
-          Dependencies
+        <q-card-separator />
+        <q-card-title>
+          <i class="far fa-hand-point-right"></i> Dependencies
         </q-card-title>
         <q-card-main>
           <q-btn disabled flat v-if="!Array.isArray(upload.dependencies) || upload.dependencies.length === 0">
@@ -121,15 +113,9 @@
             </div>
           </div>
         </q-card-main>
-        <q-card-media v-if="upload.pic" overlay-position="bottom">
-          <q-card-title slot="overlay">
-            File downloads
-          </q-card-title>
-          <q-parallax :src="`${$http.defaults.baseURL}/media/${upload.pic._id}`" :height="150">
-          </q-parallax>
-        </q-card-media>
-        <q-card-title v-else>
-          File downloads
+        <q-card-separator />
+        <q-card-title>
+          <i class="far fa-hand-point-right"></i> File downloads
         </q-card-title>
         <q-card-main>
           <q-btn disabled flat v-if="!Array.isArray(upload.files) || upload.files.length === 0">
@@ -141,10 +127,13 @@
                :key="fid._id">
             <q-btn loader
                    no-caps
+                   outline
+                   icon="fa-download"
                    color="primary"
                    :percentage="(downloadProgresses[fid._id] || {}).percentage"
-                   @click="(event, done) => {downloadMedia(fid._id, fid.filename, done)}">
-              {{ fid.filename }} ({{ fid.length|prettyBytes }})
+                   :loading="downloadProgresses[fid._id] && downloadProgresses[fid._id].percentage < 100"
+                   @click="(event, done) => {downloadMedia(fid._id, fid.filename, done)}"
+                   :label="`${fid.filename} (${$options.filters.prettyBytes(fid.length)})`">
               <span slot="loading">Downloading...</span>
             </q-btn>
             <span v-if="downloadProgresses[fid._id]">
@@ -157,15 +146,9 @@
               </span>
           </div>
         </q-card-main>
-        <q-card-media v-if="upload.pic" overlay-position="bottom">
-          <q-card-title slot="overlay">
-            Other data
-          </q-card-title>
-          <q-parallax :src="`${$http.defaults.baseURL}/media/${upload.pic._id}`" :height="150">
-          </q-parallax>
-        </q-card-media>
-        <q-card-title v-else>
-          Other data
+        <q-card-separator />
+        <q-card-title>
+          <i class="far fa-hand-point-right"></i> Other data
         </q-card-title>
         <q-card-main>
           <p>ID: {{ upload._id }}</p>
@@ -198,6 +181,9 @@
       username () {
         return this.$store.state.user.decodedToken.username
       },
+      loggedIn () {
+        return this.$store.getters['user/loggedIn']
+      },
     },
     watch: {
       routeId: {
@@ -310,4 +296,6 @@
 </script>
 
 <style lang="styl" type="text/stylus" scoped>
+  .q-card-main
+    margin-left: 1rem
 </style>