extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-11-25 01:34:38 +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 {
min-width: initial !important;
}
.taskStatusLabel, .taskNumberOfImagesLabel {
.taskLabel {
font-size: 8pt;
background:var(--background-color2);
border: 1px solid rgb(61, 62, 66);
padding: 2pt 4pt;
border-radius: 2pt;
margin-right: 5pt;
display: inline;
}
.taskStatusLabel {
margin-right: 5pt;
}
.multiNumberOfImages {
font-weight: bold;
}
.taskNumberOfImagesLabel {
min-width: 30px;
display: inline-block;
text-align: center;
}
.activeTaskLabel {
background:rgb(0, 90, 30);
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.innerHTML = ` <div class="header-content panel collapsible active">
<i class="drag-handle fa-solid fa-grip"></i>
${task.numOutputsTotal > 1 ? `<div class="taskNumberOfImagesLabel">✕${task.numOutputsTotal}</div>` : ''}
<div class="taskStatusLabel">Enqueued</div>
<div class="taskLabel taskNumberOfImagesLabel ${task.numOutputsTotal > 1 ? 'multiNumberOfImages' : ''}">✕${task.numOutputsTotal}</div>
<div class="taskLabel taskStatusLabel">Enqueued</div>
<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>
<div class="preview-prompt"></div>