diff --git a/src/App.vue b/src/App.vue index 6b98c5a..29c1978 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,6 @@ @@ -61,9 +64,9 @@ export default defineComponent({ }, }, allAdventurers: { - type: Object as PropType<{[key: string]: Adventurer}>, + type: Object as PropType>, default() { - return {} as {[key: string]: Adventurer}; + return [] as Array; }, }, }, @@ -82,22 +85,35 @@ export default defineComponent({ .selection { position: absolute; bottom: 0; - left: 50%; - width: max-content; - max-width: 17rem; - transform: translateX(-50%) translateY(104%); + left: 0; + width: 100%; + max-width: 100%; display: flex; flex-direction: row; justify-content: center; - align-items: center; + align-items: flex-start; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem; - background-color: rgba(0,0,0, 0.2); + background-color: rgba(0,0,0, 0.6); + backdrop-filter: blur(4px); z-index: 2; cursor: default; - max-height: 12rem; - overflow-y: auto; + height: 100%; + overflow-y: scroll; + scrollbar-gutter: stable; + .list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; + max-width: 100%; + } + span { + font-size: 1.5rem; + color: #fff; + } .slot { width: 5rem; height: 5rem; @@ -132,5 +148,8 @@ export default defineComponent({ height: 100%; font-size: 4.5rem; color: #000; + span { + transform: translateY(-0.5rem); + } } diff --git a/src/components/QuestGroup.vue b/src/components/QuestGroup.vue index 9c5d76f..c6101e6 100644 --- a/src/components/QuestGroup.vue +++ b/src/components/QuestGroup.vue @@ -83,7 +83,7 @@ h1 { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); grid-auto-rows: auto; gap: 1rem; - + overflow-x: visible; } } \ No newline at end of file diff --git a/src/components/QuestMissive.vue b/src/components/QuestMissive.vue index 15925c6..f86c877 100644 --- a/src/components/QuestMissive.vue +++ b/src/components/QuestMissive.vue @@ -19,7 +19,7 @@