extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-02-18 03:11:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

ux: always render the label so prompts are aligned and add a min-width to the label to support two digit numbers

Browse Source
This commit is contained in:
Ben Zichettello 2023-08-31 15:25:05 -04:00
parent 73b3beb81b
commit 0a87a7bec3
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/media/css/main.css
View File

@ -715,15 +715,26 @@ div.img-preview img {
.header-content > .drag-handle { .header-content > .drag-handle {
min-width: initial !important; min-width: initial !important;
} }
.taskStatusLabel, .taskNumberOfImagesLabel { .taskLabel {
font-size: 8pt; font-size: 8pt;
background:var(--background-color2); background:var(--background-color2);
border: 1px solid rgb(61, 62, 66); border: 1px solid rgb(61, 62, 66);
padding: 2pt 4pt; padding: 2pt 4pt;
border-radius: 2pt; border-radius: 2pt;
margin-right: 5pt;
display: inline; display: inline;
} }
.taskStatusLabel {
margin-right: 5pt;
}
.multiNumberOfImages {
font-weight: bold;
}
.taskNumberOfImagesLabel {
min-width: 30px;
display: inline-block;
text-align: center;
}
.activeTaskLabel { .activeTaskLabel {
background:rgb(0, 90, 30); background:rgb(0, 90, 30);
border: 1px solid rgb(0, 75, 19); border: 1px solid rgb(0, 75, 19);

4
ui/media/js/main.js
View File

@ -1102,8 +1102,8 @@ function createTask(task) {
taskEntry.className = "imageTaskContainer" taskEntry.className = "imageTaskContainer"
taskEntry.innerHTML = ` <div class="header-content panel collapsible active"> taskEntry.innerHTML = ` <div class="header-content panel collapsible active">
<i class="drag-handle fa-solid fa-grip"></i> <i class="drag-handle fa-solid fa-grip"></i>
${task.numOutputsTotal > 1 ? `<div class="taskNumberOfImagesLabel">✕${task.numOutputsTotal}</div>` : ''} <div class="taskLabel taskNumberOfImagesLabel ${task.numOutputsTotal > 1 ? 'multiNumberOfImages' : ''}">✕${task.numOutputsTotal}</div>
<div class="taskStatusLabel">Enqueued</div> <div class="taskLabel taskStatusLabel">Enqueued</div>
<button class="secondaryButton stopTask"><i class="fa-solid fa-xmark"></i> Cancel</button> <button class="secondaryButton stopTask"><i class="fa-solid fa-xmark"></i> Cancel</button>
<button class="tertiaryButton useSettings"><i class="fa-solid fa-redo"></i> Use these settings</button> <button class="tertiaryButton useSettings"><i class="fa-solid fa-redo"></i> Use these settings</button>
<div class="preview-prompt"></div> <div class="preview-prompt"></div>