Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-24 20:23:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

show empty placeholder when dragging card

Browse source
This commit is contained in:
Gamebrary 2020-09-16 17:27:21 -07:00
parent 4a86eb2921
commit b055629ce3
1 changed files with 15 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/components/Lists/List.vue
View file

@ -1,6 +1,6 @@
<template lang="html">
<div
:class="['list mr-3', viewClass, { unique, dragging }]"
:class="['list mr-3', viewClass, { dragging }]"
:id="listIndex"
>
<b-card no-body>
@ -67,6 +67,7 @@ import GameCardCompact from '@/components/GameCards/GameCardCompact';
import GameCardText from '@/components/GameCards/GameCardText';
import AddGameModal from '@/components/Lists/AddGameModal';
import orderby from 'lodash.orderby';
import { DEFAULT_LIST_VIEW } from '@/constants';
import { mapState } from 'vuex';
export default {
@ -141,15 +142,6 @@ export default {
case 'sortByProgress': return orderby(games, [game => this.progresses[game] || 0], ['desc']);
case 'sortByRating': return orderby(games, [game => this.games[game].rating || 0], ['desc']);
case 'sortByName': return orderby(games, [game => this.games[game].name]);
// case 'sortByReleaseDate':
// return orderby(this.list, [(game) => {
// const releaseDate = this.games[game] && this.games[game].release_dates
// ? this.games[game].release_dates
// .find(({ platform }) => this.platform.id === platform)
// : '';
//
// return releaseDate && releaseDate.date;
// }]);
default:
return this.list.games;
}
@ -165,10 +157,6 @@ export default {
return settings && settings.view;
},
unique() {
return this.list.length === 1;
},
showGameCount() {
const { settings } = this.list;
@ -244,13 +232,6 @@ export default {
width: 300px;
border-radius: 3px;
&.unique {
@media(max-width: 780px) {
min-width: 300px;
width: calc(100vw - 80px);
}
}
.games {
display: grid;
height: 100%;
@ -263,9 +244,9 @@ export default {
&.grid {
.games {
padding: .5rem;
padding: .5rem .5rem 0;
grid-template-columns: 1fr 1fr;
grid-gap: .5rem;
grid-column-gap: .5rem;
// https://github.com/w3c/csswg-drafts/issues/129
&::after {
@ -277,20 +258,6 @@ export default {
grid-column: span 2;
}
}
&.unique {
.games {
grid-template-columns: 1fr 1fr 1fr;
// @media($tiny) {
// grid-template-columns: 1fr 1fr;
// }
@media(min-width: 781px) {
grid-template-columns: 1fr 1fr;
}
}
}
}
}
@ -298,3 +265,14 @@ export default {
padding: 1rem;
}
</style>
<style lang="scss" rel="stylesheet/scss">
.card-placeholder {
> div {
visibility: hidden !important;
}
opacity: .1;
background: #000;
}
</style>