Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-12-18 15:23:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

update list view modal

Browse source
This commit is contained in:
Roman Cervantes 2020-10-21 16:48:22 -07:00
parent 03217e6131
commit 793c63049d
1 changed files with 41 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
src/components/Lists/ChangeListView.vue
View file

@ -24,51 +24,47 @@
/> />
</template> </template>
<form ref="renameListForm" @submit.prevent="save"> <form class="list-view" ref="renameListForm" @submit.prevent="save">
<b-form-radio-group <!-- TODO: use named components and for loop -->
v-model="view" <h6>{{ $t('board.list.views.single') }}</h6>
required
:options="listViews" <game-card-default
class="mb-2" :game-id="randomGameId"
buttons :list="list"
:class="{ 'border-2 border-success': !view || view === 'single'}"
@click.native="view = 'single'"
/> />
<!-- TODO: use dynamic named component --> <h6>{{ $t('board.list.views.grid') }}</h6>
<template v-if="randomGameId">
<game-card-default
v-if="!view || view === 'single'"
:game-id="randomGameId"
:list="list"
/>
<b-form-row v-if="view === 'grid'"> <b-form-row>
<b-col cols="6"> <b-col cols="6">
<game-card-grid <game-card-grid
:game-id="randomGameId" :game-id="randomGameId"
:list="list" :list="list"
/> :class="{ 'rounded border border-success': view === 'grid'}"
</b-col> @click.native="view = 'grid'"
/>
</b-col>
<b-col cols="6"> <b-col cols="6" />
<game-card-grid </b-form-row>
:game-id="randomGameId"
:list="list"
/>
</b-col>
</b-form-row>
<game-card-compact <h6>{{ $t('board.list.views.compact') }}</h6>
v-if="view === 'compact'" <game-card-compact
:game-id="randomGameId" :game-id="randomGameId"
:list="list" :list="list"
/> :class="{ 'border-success': view === 'compact'}"
@click.native="view = 'compact'"
/>
<game-card-text <h6>{{ $t('board.list.views.text') }}</h6>
v-if="view === 'text'" <game-card-text
:game-id="randomGameId" :game-id="randomGameId"
:list="list" :list="list"
/> :class="{ 'border-success': view === 'text'}"
</template> @click.native="view = 'text'"
/>
</form> </form>
<template v-slot:modal-footer="{ cancel }"> <template v-slot:modal-footer="{ cancel }">
@ -117,13 +113,6 @@ export default {
view: null, view: null,
saving: false, saving: false,
randomGameId: null, randomGameId: null,
// TODO: put in constants file
listViews: [
{ text: this.$t('board.list.views.single'), value: 'single' },
{ text: this.$t('board.list.views.grid'), value: 'grid' },
{ text: this.$t('board.list.views.compact'), value: 'compact' },
{ text: this.$t('board.list.views.text'), value: 'text' },
],
}; };
}, },
@ -188,3 +177,9 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" rel="stylesheet/scss" scoped>
.list-view {
width: 300px;
}
</style>