Fixed better sceneNavigation compatability

This commit is contained in:
WBHarry 2026-02-11 23:34:10 +01:00
parent 17ec77a349
commit fa19339868
2 changed files with 46 additions and 39 deletions

View file

@ -1,36 +1,39 @@
#ui-left #ui-left-column-2 { #ui-left #ui-left-column-2 {
flex: 0 0 230px; flex: 0 0 230px;
.scene-navigation { .scene-wrapper {
.scene-wrapper { display: flex;
display: flex; gap: 2px;
gap: 2px; height: var(--control-size);
height: var(--control-size); width: 100%;
width: 100%;
.scene-environment { > ul {
padding: 0; margin: 0;
padding: 0;
}
img { .scene-environment {
border-radius: 4px; padding: 0;
}
img {
border-radius: 4px;
} }
} }
}
.scene { .scene {
justify-content: center; justify-content: center;
align-content: center; align-content: center;
background: var(--control-bg-color); background: var(--control-bg-color);
border: 1px solid var(--control-border-color); border: 1px solid var(--control-border-color);
border-radius: 4px; border-radius: 4px;
color: var(--control-icon-color); color: var(--control-icon-color);
pointer-events: all; pointer-events: all;
transition: transition:
border 0.25s, border 0.25s,
color 0.25s; color 0.25s;
text-shadow: none; text-shadow: none;
width: 200px; width: 200px;
max-width: 200px; max-width: 200px;
}
} }
} }

View file

@ -7,17 +7,19 @@
<menu id="scene-navigation-active" class="scene-navigation-menu flexcol"> <menu id="scene-navigation-active" class="scene-navigation-menu flexcol">
{{#each scenes.active as |scene|}} {{#each scenes.active as |scene|}}
<li class="scene-wrapper"> <li class="scene-wrapper">
<div class="ui-control scene {{scene.cssClass}}" data-scene-id="{{scene.id}}" data-action="viewScene" {{#if scene.tooltip}}data-tooltip-text="{{scene.tooltip}}"{{/if}}> <ul>
<span class="scene-name ellipsis">{{scene.name}}</span> <li class="ui-control scene {{scene.cssClass}}" data-scene-id="{{scene.id}}" data-action="viewScene" {{#if scene.tooltip}}data-tooltip-text="{{scene.tooltip}}"{{/if}}>
{{#if scene.users}} <span class="scene-name ellipsis">{{scene.name}}</span>
<ul class="scene-players"> {{#if scene.users}}
{{#each scene.users as |user|}} <ul class="scene-players">
<li class="scene-player" style="--color-bg:{{user.color}}; --color-border:{{user.border}}" {{#each scene.users as |user|}}
data-tooltip aria-label="{{user.name}}">{{user.letter}}</li> <li class="scene-player" style="--color-bg:{{user.color}}; --color-border:{{user.border}}"
{{/each}} data-tooltip aria-label="{{user.name}}">{{user.letter}}</li>
</ul> {{/each}}
{{/if}} </ul>
</div> {{/if}}
</li>
</ul>
{{#if scene.hasEnvironments}} {{#if scene.hasEnvironments}}
<button class="ui-control scene-environment {{#if (gt scene.environments.length 1)}}many-environments{{/if}}" data-action="openSceneEnvironment" data-scene-id="{{scene.id}}"><img src="{{scene.environmentImage}}" /> </button> <button class="ui-control scene-environment {{#if (gt scene.environments.length 1)}}many-environments{{/if}}" data-action="openSceneEnvironment" data-scene-id="{{scene.id}}"><img src="{{scene.environmentImage}}" /> </button>
{{/if}} {{/if}}
@ -27,9 +29,11 @@
<menu id="scene-navigation-inactive" class="scene-navigation-menu flexcol"> <menu id="scene-navigation-inactive" class="scene-navigation-menu flexcol">
{{#each scenes.inactive as |scene|}} {{#each scenes.inactive as |scene|}}
<li class="scene-wrapper"> <li class="scene-wrapper">
<div class="ui-control scene {{scene.cssClass}}" data-scene-id="{{scene.id}}" data-action="viewScene" {{#if scene.tooltip}}data-tooltip-text="{{scene.tooltip}}"{{/if}}> <ul>
<li class="ui-control scene {{scene.cssClass}}" data-scene-id="{{scene.id}}" data-action="viewScene" {{#if scene.tooltip}}data-tooltip-text="{{scene.tooltip}}"{{/if}}>
<span class="scene-name ellipsis">{{scene.name}}</span> <span class="scene-name ellipsis">{{scene.name}}</span>
</div> </li>
</ul>
</li> </li>
{{/each}} {{/each}}
</menu> </menu>