Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-15 07:57:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

platform picker wip

Browse source
This commit is contained in:
Gamebrary 2021-04-22 14:36:31 -07:00
parent f43ac84110
commit d13bb903d1
1 changed files with 52 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/components/Board/PlatformPicker.vue
View file

@ -1,5 +1,23 @@
<!-- TODO: relayout on change, watcher? -->
<template lang="html"> <template lang="html">
<div class="platform-picker"> <div>
<b-button-toolbar aria-label="Toolbar with button groups and dropdown menu">
<b-button-group class="mx-1">
<b-button>New</b-button>
<b-button>Edit</b-button>
<b-button>Undo</b-button>
</b-button-group>
<b-dropdown class="mx-1" right text="menu">
<b-dropdown-item>Item 1</b-dropdown-item>
<b-dropdown-item>Item 2</b-dropdown-item>
<b-dropdown-item>Item 3</b-dropdown-item>
</b-dropdown>
<b-button-group class="mx-1">
<b-button>Save</b-button>
<b-button>Cancel</b-button>
</b-button-group>
</b-button-toolbar>
<!-- <div class="d-flex mb-2"> <!-- <div class="d-flex mb-2">
<div class="filter mr-2"> <div class="filter mr-2">
<small class="d-block text-muted">Show:</small> <small class="d-block text-muted">Show:</small>
@ -17,32 +35,31 @@
</div> </div>
</div> --> </div> -->
<!-- <pre>{{ filteredPlatforms }}</pre> --> <div class="platform-picker">
<b-button
<b-list-group class="platforms mb-3">
<b-list-group-item
v-for="platform in filteredPlatforms" v-for="platform in filteredPlatforms"
class="platform"
:variant="value.includes(platform.id) ? 'primary' : 'secondary'"
:key="platform.id" :key="platform.id"
:variant="value.includes(platform.id) ? 'success' : ''"
button
@click="handleClick(platform.id)" @click="handleClick(platform.id)"
> >
<b-img <b-img
:src="`/static/logos/platforms/${platform.slug}.${platform.logoFormat}`" :src="`/static/logos/platforms/${platform.slug}.${platform.logoFormat}`"
:alt="platform.name" :alt="platform.name"
width="60" class="platform-logo pr-2"
thumbnail
class="pr-2"
/> />
{{ platform.name }} <small :class="value.includes(platform.id) ? '' : 'text-muted'">
</b-list-group-item> {{ platform.name }}
</b-list-group> </small>
</b-button>
</div>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import Packery from 'packery';
import orderby from 'lodash.orderby'; import orderby from 'lodash.orderby';
export default { export default {
@ -52,6 +69,7 @@ export default {
data() { data() {
return { return {
packery: null,
// sort: , // sort: ,
// filter: , // filter: ,
}; };
@ -73,6 +91,10 @@ export default {
}, },
}, },
mounted() {
this.packery = new Packery('.platform-picker', { itemSelector: '.platform', gutter: 8 });
},
methods: { methods: {
handleClick(platformId) { handleClick(platformId) {
if (this.value.includes(platformId)) { if (this.value.includes(platformId)) {
@ -94,3 +116,20 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" rel="stylesheet/scss" scoped>
.platforms {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.platform {
width: 135.5px;
}
.platform-logo {
height: auto;
max-height: 80px;
width: 100%;
}
</style>