diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/assets/bodybg.jpg | bin | 0 -> 150843 bytes | |||
| -rw-r--r-- | src/layouts/default.vue | 51 | ||||
| -rw-r--r-- | src/pages/UploadCreate.vue | 10 | ||||
| -rw-r--r-- | src/pages/UploadList.vue | 4 |
4 files changed, 40 insertions, 25 deletions
diff --git a/src/assets/bodybg.jpg b/src/assets/bodybg.jpg Binary files differnew file mode 100644 index 0000000..16fb0e6 --- /dev/null +++ b/src/assets/bodybg.jpg diff --git a/src/layouts/default.vue b/src/layouts/default.vue index 84db2c1..fdb0022 100644 --- a/src/layouts/default.vue +++ b/src/layouts/default.vue @@ -1,35 +1,32 @@ <template> <q-layout view="lHh Lpr lFf"> <q-layout-header> - <q-toolbar color="primary" glossy> - + <q-toolbar> <q-toolbar-title> Larry UI <div slot="subtitle">Official source of mods for OpenClonk</div> </q-toolbar-title> - <q-toolbar-title v-if="$store.getters['user/loggedIn']"> - Hi {{ $store.state.user.decodedToken.username }} - </q-toolbar-title> + <q-tabs> + <q-route-tab slot="title" + icon="fa-list" + :to="{name: 'upload-list'}" + replace + hide="icon" + label="Browse mods" /> + + <q-route-tab slot="title" + icon="fa-upload" + :to="{name: 'upload-create'}" + replace hide="icon" + label="Upload mod" /> + </q-tabs> + <q-btn flat icon="fa-sign-out" v-if="$store.getters['user/loggedIn']" @click="$store.commit('user/logout')"> Logout </q-btn> </q-toolbar> - <q-tabs> - <q-route-tab slot="title" - icon="fa-list" - :to="{name: 'upload-list'}" - replace - hide="icon" - label="Browse mods" /> - - <q-route-tab slot="title" - icon="fa-upload" - :to="{name: 'upload-create'}" - replace hide="icon" - label="Upload mod" /> - </q-tabs> </q-layout-header> <q-page-container> @@ -71,6 +68,22 @@ </script> <style> + body { + background: white url('/assets/bodybg.jpg') no-repeat fixed; + } + + .q-layout-header .q-toolbar { + background-color: rgba(0, 0, 0, 0.5); + } + + .q-layout-header .q-tabs-head { + background-color: transparent; + } + + .light-bg, .q-card, .q-stepper { + background-color: rgba(255, 255, 255, 0.8); + } + .indent { margin-left: 1rem; } diff --git a/src/pages/UploadCreate.vue b/src/pages/UploadCreate.vue index 1c2506a..7c16bb6 100644 --- a/src/pages/UploadCreate.vue +++ b/src/pages/UploadCreate.vue @@ -1,6 +1,9 @@ <template> - <div class="flex row"> - <div class="col" v-if="authToken"> + <div> + <h5 v-if="!authToken"> + Please log in first + </h5> + <div v-else> <h5>Upload your own mod</h5> <q-stepper ref="stepper" style="max-width: 800px" alternative-labels> <q-step default name="data" title="Enter data" :error="errors.slug || errors.title || errors.description"> @@ -121,9 +124,6 @@ <q-inner-loading :visible="saving" /> </q-stepper> </div> - <div v-else> - Please log in first - </div> </div> </template> diff --git a/src/pages/UploadList.vue b/src/pages/UploadList.vue index 8aac81c..15b56f1 100644 --- a/src/pages/UploadList.vue +++ b/src/pages/UploadList.vue @@ -7,8 +7,10 @@ </transition> <div class="animateMaxWidth" :class="showList ? 'col-12' : 'gt-md col-lg-4 col-xl-5'"> <q-table + class="light-bg" no-data-label="No mods available" row-key="name" + title="Available Mods" :data="uploads" :config="tableConfig" :columns="tableColumns" @@ -44,7 +46,7 @@ }, visibleColumns () { let that = this - let removeOnSmall = ['description'] + let removeOnSmall = ['description', 'action'] return this.tableColumns.map(el => el.name).filter(el => that.showList || removeOnSmall.indexOf(el) === -1) }, }, |
