aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/CommentVoter.vue4
-rw-r--r--src/components/UploadVoter.vue29
-rw-r--r--src/pages/UploadDetail.vue120
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>
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2026-01-12 10:05:36 +0000