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

View file

@ -7,17 +7,19 @@
<menu id="scene-navigation-active" class="scene-navigation-menu flexcol">
{{#each scenes.active as |scene|}}
<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}}>
<span class="scene-name ellipsis">{{scene.name}}</span>
{{#if scene.users}}
<ul class="scene-players">
{{#each scene.users as |user|}}
<li class="scene-player" style="--color-bg:{{user.color}}; --color-border:{{user.border}}"
data-tooltip aria-label="{{user.name}}">{{user.letter}}</li>
{{/each}}
</ul>
{{/if}}
</div>
<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>
{{#if scene.users}}
<ul class="scene-players">
{{#each scene.users as |user|}}
<li class="scene-player" style="--color-bg:{{user.color}}; --color-border:{{user.border}}"
data-tooltip aria-label="{{user.name}}">{{user.letter}}</li>
{{/each}}
</ul>
{{/if}}
</li>
</ul>
{{#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>
{{/if}}
@ -27,9 +29,11 @@
<menu id="scene-navigation-inactive" class="scene-navigation-menu flexcol">
{{#each scenes.inactive as |scene|}}
<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>
</div>
</li>
</ul>
</li>
{{/each}}
</menu>