Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-14 23:47:08 +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">
<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="filter mr-2">
<small class="d-block text-muted">Show:</small>
@ -17,32 +35,31 @@
</div>
</div> -->
<!-- <pre>{{ filteredPlatforms }}</pre> -->
<b-list-group class="platforms mb-3">
<b-list-group-item
<div class="platform-picker">
<b-button
v-for="platform in filteredPlatforms"
class="platform"
:variant="value.includes(platform.id) ? 'primary' : 'secondary'"
:key="platform.id"
:variant="value.includes(platform.id) ? 'success' : ''"
button
@click="handleClick(platform.id)"
>
<b-img
:src="`/static/logos/platforms/${platform.slug}.${platform.logoFormat}`"
:alt="platform.name"
width="60"
thumbnail
class="pr-2"
class="platform-logo pr-2"
/>
{{ platform.name }}
</b-list-group-item>
</b-list-group>
<small :class="value.includes(platform.id) ? '' : 'text-muted'">
{{ platform.name }}
</small>
</b-button>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
import Packery from 'packery';
import orderby from 'lodash.orderby';
export default {
@ -52,6 +69,7 @@ export default {
data() {
return {
packery: null,
// sort: ,
// filter: ,
};
@ -73,6 +91,10 @@ export default {
},
},
mounted() {
this.packery = new Packery('.platform-picker', { itemSelector: '.platform', gutter: 8 });
},
methods: {
handleClick(platformId) {
if (this.value.includes(platformId)) {
@ -94,3 +116,20 @@ export default {
},
};
</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>