jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed slot cards to column layout

Browse Source
This commit is contained in:
Stefan Zermatten
2022-08-16 13:40:58 +02:00
parent 9284c9ad76
commit 193d5eec50
4 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/imports/ui/components/ColumnLayout.vue
View File

@@ -18,7 +18,7 @@ export default {
}; };
</script> </script>
<style lang="css" scoped> <style lang="css">
.column-layout { .column-layout {
column-count: 12; column-count: 12;
column-fill: balance; column-fill: balance;
@@ -35,7 +35,7 @@ export default {
transform: translateZ(0); transform: translateZ(0);
padding: 4px; padding: 4px;
} }
.column-layout >>> > div { .column-layout > div, .column-layout > span > div {
/* /*
Table and width set because firefox does not support break-inside: avoid Table and width set because firefox does not support break-inside: avoid
*/ */

4
app/imports/ui/creature/character/characterSheetTabs/BuildTab.vue
View File

@@ -9,9 +9,7 @@
</v-col> </v-col>
</v-row> </v-row>
<v-row dense> <v-row dense>
<v-col cols="12"> <slot-cards-to-fill :creature-id="creatureId" />
<slot-cards-to-fill :creature-id="creatureId" />
</v-col>
</v-row> </v-row>
<v-row dense> <v-row dense>
<v-col <v-col

3
app/imports/ui/creature/slots/SlotCard.vue
View File

@@ -6,7 +6,6 @@
:style="`border: solid 1px ${accentColor};`" :style="`border: solid 1px ${accentColor};`"
hover hover
class="slot-card d-flex flex-column" class="slot-card d-flex flex-column"
style="max-width: 400px;"
@mouseover="hover = true" @mouseover="hover = true"
@mouseleave="hover = false" @mouseleave="hover = false"
@click="$emit('click')" @click="$emit('click')"
@@ -17,7 +16,7 @@
<v-card-title> <v-card-title>
{{ model.name }} {{ model.name }}
</v-card-title> </v-card-title>
<v-card-text> <v-card-text v-if="model.description">
<property-description <property-description
text text
:model="model.description" :model="model.description"

29
app/imports/ui/creature/slots/SlotCardsToFill.vue
View File

@@ -1,26 +1,30 @@
<template> <template>
<div class="slots-to-fill"> <column-layout wide-columns class="slots-to-fill">
<v-slide-y-transition <v-fade-transition
group group
leave-absolute leave-absolute
hide-on-leave
> >
<slot-card <div
v-for="slot in slots" v-for="slot in slots"
:key="slot._id" :key="slot._id"
:model="slot" style="transition: all 0.3s !important"
class="ma-1" >
hover <slot-card
style="display: inline-block !important; transition: all 0.3s !important;" :model="slot"
@ignore="ignoreSlot(slot._id)" hover
@click="fillSlot(slot._id)" @ignore="ignoreSlot(slot._id)"
/> @click="fillSlot(slot._id)"
</v-slide-y-transition> />
</div> </div>
</v-fade-transition>
</column-layout>
</template> </template>
<script lang="js"> <script lang="js">
import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js'; import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
import SlotCard from '/imports/ui/creature/slots/SlotCard.vue'; import SlotCard from '/imports/ui/creature/slots/SlotCard.vue';
import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
import updateCreatureProperty from '/imports/api/creature/creatureProperties/methods/updateCreatureProperty.js'; import updateCreatureProperty from '/imports/api/creature/creatureProperties/methods/updateCreatureProperty.js';
import insertPropertyFromLibraryNode from '/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js'; import insertPropertyFromLibraryNode from '/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js';
import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js'; import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
@@ -28,6 +32,7 @@ import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
export default { export default {
components: { components: {
SlotCard, SlotCard,
ColumnLayout,
}, },
inject: { inject: {
context: { default: {} } context: { default: {} }