diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/UploadDetail.vue | 13 | ||||
| -rw-r--r-- | src/pages/UploadList.vue | 85 |
2 files changed, 58 insertions, 40 deletions
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> |