diff options
| -rw-r--r-- | .quasar/entry.js | 4 | ||||
| -rw-r--r-- | quasar.conf.js | 1 | ||||
| -rw-r--r-- | src/components/UploadVoter.vue | 2 | ||||
| -rw-r--r-- | src/pages/UploadDetail.vue | 13 | ||||
| -rw-r--r-- | 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> |