isledecomp/isle.pizza
1
0
Fork 0
mirror of https://github.com/isledecomp/isle.pizza.git synced 2026-03-01 06:17:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Save editor UI improvements

Browse Source 
- Make save slot cards fixed width (85px) to prevent resizing with name length
- Make save slot cards more compact (smaller icons, padding, font)
- Remove Act selection from Character section
- Remove box-shadow from selected character to fix collapsed section bleed
This commit is contained in:
Christian Semmler 2026-01-31 13:44:07 -08:00
parent 2083dfb569
commit 9c9b0e5599
1 changed files with 26 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/lib/SaveEditorPage.svelte
View File

@ -189,12 +189,7 @@
e.target.select(); e.target.select();
} }
// Character/Act handlers // Character handler
function handleActChange(e) {
currentAct = parseInt(e.target.value);
handleHeaderUpdate({ currentAct });
}
function handleActorSelect(id) { function handleActorSelect(id) {
actorId = id; actorId = id;
handleHeaderUpdate({ actorId: id }); handleHeaderUpdate({ actorId: id });
@ -300,42 +295,27 @@
<div class="config-section-card"> <div class="config-section-card">
<button type="button" class="config-card-header" onclick={() => toggleSection('character')}> <button type="button" class="config-card-header" onclick={() => toggleSection('character')}>
Character / Act Character
</button> </button>
<div class="config-card-content" class:open={openSection === 'character'}> <div class="config-card-content" class:open={openSection === 'character'}>
<div class="section-inner"> <div class="section-inner">
<div class="character-act-row"> <div class="character-icons">
<div class="character-selection"> {#each actorOptions as actor}
<label class="form-group-label">Character</label> <button
<div class="character-icons"> type="button"
{#each actorOptions as actor} class="character-icon-btn"
<button class:selected={actorId === actor.id}
type="button" onclick={() => handleActorSelect(actor.id)}
class="character-icon-btn" title={actor.name}
class:selected={actorId === actor.id} >
onclick={() => handleActorSelect(actor.id)} <img
title={actor.name} src={actorId === actor.id
> ? characterIcons[actor.id].selected
<img : characterIcons[actor.id].normal}
src={actorId === actor.id alt={actor.name}
? characterIcons[actor.id].selected />
: characterIcons[actor.id].normal} </button>
alt={actor.name} {/each}
/>
</button>
{/each}
</div>
</div>
<div class="act-selection">
<label class="form-group-label" for="act-select">Act</label>
<div class="select-wrapper">
<select id="act-select" value={currentAct} onchange={handleActChange}>
<option value={0}>Act 1</option>
<option value={1}>Act 2</option>
<option value={2}>Act 3</option>
</select>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -370,11 +350,12 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 6px; gap: 4px;
padding: 8px 12px; padding: 6px 8px;
min-width: 85px;
background: var(--gradient-panel); background: var(--gradient-panel);
border: 2px solid var(--color-border-medium); border: 2px solid var(--color-border-medium);
border-radius: 8px; border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
@ -390,14 +371,14 @@
} }
.slot-character-icon { .slot-character-icon {
width: 40px; width: 32px;
height: 46px; height: 37px;
image-rendering: pixelated; image-rendering: pixelated;
} }
.slot-name { .slot-name {
color: var(--color-text-light); color: var(--color-text-light);
font-size: 0.85em; font-size: 0.75em;
font-weight: bold; font-weight: bold;
} }
@ -436,20 +417,6 @@
border-color: var(--color-border-light); border-color: var(--color-border-light);
} }
.character-act-row {
display: flex;
gap: 30px;
align-items: flex-start;
flex-wrap: wrap;
}
.character-selection,
.act-selection {
display: flex;
flex-direction: column;
gap: 8px;
}
.character-icons { .character-icons {
display: flex; display: flex;
gap: 4px; gap: 4px;
@ -470,7 +437,6 @@
.character-icon-btn.selected { .character-icon-btn.selected {
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 0 6px var(--color-primary-glow);
} }
.character-icon-btn img { .character-icon-btn img {