_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

scrollable actions

Browse Source
This commit is contained in:
Hanusiak Piotr 2022-01-25 15:09:34 +01:00
parent 67627637aa
commit 907026463d
1 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
front/src/Components/ActionsMenu/ActionsMenu.svelte
View File

@ -4,6 +4,7 @@
import { requestActionsMenuStore, requestVisitCardsStore } from '../../Stores/GameStore'; import { requestActionsMenuStore, requestVisitCardsStore } from '../../Stores/GameStore';
let possibleActions: Map<string, ActionsMenuInterface>; let possibleActions: Map<string, ActionsMenuInterface>;
let backgroundHeight = 100;
const unsubscribe = actionsMenuStore.subscribe(value => { const unsubscribe = actionsMenuStore.subscribe(value => {
possibleActions = value; possibleActions = value;
}); });
@ -22,10 +23,10 @@
<svelte:window on:keydown={onKeyDown} /> <svelte:window on:keydown={onKeyDown} />
<div class="actions-menu nes-container is-rounded"> <div class="actions-menu nes-container is-rounded" style="--background-height: {backgroundHeight};">
<button type="button" class="nes-btn is-error close" on:click={closeActionsMenu}>&times</button> <button type="button" class="nes-btn is-error close" on:click={closeActionsMenu}>&times</button>
<h2>Actions</h2> <h2>Actions</h2>
<nav> <div class="actions">
{#each [...possibleActions] as [key, menuAction]} {#each [...possibleActions] as [key, menuAction]}
<button <button
type="button" type="button"
@ -35,7 +36,7 @@
{menuAction.displayName} {menuAction.displayName}
</button> </button>
{/each} {/each}
</nav> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
@ -43,8 +44,8 @@
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
width: 230px !important; width: 260px !important;
height: 300px !important; max-height: 300px;
margin-top: 200px; margin-top: 200px;
pointer-events: auto; pointer-events: auto;
@ -52,14 +53,27 @@
background-color: #333333; background-color: #333333;
color: whitesmoke; color: whitesmoke;
.actions {
max-height: 200px;
width: 100%;
display:block;
overflow-x:hidden;
overflow-y:auto;
button {
width: calc(100% - 10px);
margin-bottom: 10px;
}
}
.actions::-webkit-scrollbar {
display: none;
}
h2 { h2 {
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} font-family: "Press Start 2P";
nav button {
width: 100%;
margin-bottom: 10px;
} }
.nes-btn.is-error.close { .nes-btn.is-error.close {