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

Add an overlay on top of cards

Browse Source 
Clicking the card won't paint over text anymore.

Additional changes,
- Refactored a part of the refreshTagsList function
This commit is contained in:
Haka 2022-09-23 15:31:22 +03:00
parent af3de448bd
commit 0efa4ffb23
1 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
ui/index.html
View File

@ -268,7 +268,7 @@
grid-template-rows: 18em 3.5em; grid-template-rows: 18em 3.5em;
height: 21.5em; height: 21.5em;
} }
.modifier-card-size_5 .modifier-card-overlay { .modifier-card-size_5 .modifier-card-image-overlay {
font-size: 8em; font-size: 8em;
} }
.modifier-card-size_4 { .modifier-card-size_4 {
@ -276,7 +276,7 @@
grid-template-rows: 14em 3.5em; grid-template-rows: 14em 3.5em;
height: 17.5em; height: 17.5em;
} }
.modifier-card-size_4 .modifier-card-overlay { .modifier-card-size_4 .modifier-card-image-overlay {
font-size: 7em; font-size: 7em;
} }
.modifier-card-size_3 { .modifier-card-size_3 {
@ -284,7 +284,7 @@
grid-template-rows: 11em 3.5em; grid-template-rows: 11em 3.5em;
height: 14.5em; height: 14.5em;
} }
.modifier-card-size_3 .modifier-card-overlay { .modifier-card-size_3 .modifier-card-image-overlay {
font-size: 6em; font-size: 6em;
} }
.modifier-card-size_2 { .modifier-card-size_2 {
@ -292,7 +292,7 @@
grid-template-rows: 10em 3.5em; grid-template-rows: 10em 3.5em;
height: 13.5em; height: 13.5em;
} }
.modifier-card-size_2 .modifier-card-overlay { .modifier-card-size_2 .modifier-card-image-overlay {
font-size: 6em; font-size: 6em;
} }
.modifier-card-size_1 { .modifier-card-size_1 {
@ -300,7 +300,7 @@
grid-template-rows: 9em 3.5em; grid-template-rows: 9em 3.5em;
height: 12.5em; height: 12.5em;
} }
.modifier-card-size_1 .modifier-card-overlay { .modifier-card-size_1 .modifier-card-image-overlay {
font-size: 5em; font-size: 5em;
} }
.modifier-card-size_-1 { .modifier-card-size_-1 {
@ -308,7 +308,7 @@
grid-template-rows: 7em 3.5em; grid-template-rows: 7em 3.5em;
height: 10.5em; height: 10.5em;
} }
.modifier-card-size_-1 .modifier-card-overlay { .modifier-card-size_-1 .modifier-card-image-overlay {
font-size: 4em; font-size: 4em;
} }
.modifier-card-size_-2 { .modifier-card-size_-2 {
@ -316,7 +316,7 @@
grid-template-rows: 6em 3.5em; grid-template-rows: 6em 3.5em;
height: 9.5em; height: 9.5em;
} }
.modifier-card-size_-2 .modifier-card-overlay { .modifier-card-size_-2 .modifier-card-image-overlay {
font-size: 3em; font-size: 3em;
} }
.modifier-card-size_-3 { .modifier-card-size_-3 {
@ -324,7 +324,7 @@
grid-template-rows: 5em 3.5em; grid-template-rows: 5em 3.5em;
height: 8.5em; height: 8.5em;
} }
.modifier-card-size_-3 .modifier-card-overlay { .modifier-card-size_-3 .modifier-card-image-overlay {
font-size: 3em; font-size: 3em;
} }
.modifier-card-size_-3 p { .modifier-card-size_-3 p {
@ -378,7 +378,7 @@
padding: 4px; padding: 4px;
word-break: break-word; word-break: break-word;
} }
.modifier-card-overlay { .modifier-card-image-overlay {
width: inherit; width: inherit;
height: inherit; height: inherit;
background-color: rgb(0 0 0 / 50%); background-color: rgb(0 0 0 / 50%);
@ -393,7 +393,13 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.modifier-card:hover > .modifier-card-image-container .modifier-card-overlay { .modifier-card-overlay {
width: inherit;
height: inherit;
position: absolute;
z-index: 3;
}
.modifier-card:hover > .modifier-card-image-container .modifier-card-image-overlay {
opacity: 1; opacity: 1;
} }
.modifier-card:hover > .modifier-card-image-container img { .modifier-card:hover > .modifier-card-image-container img {
@ -1412,19 +1418,17 @@ function refreshTagsList() {
} }
activeTags.forEach((tag, index) => { activeTags.forEach((tag, index) => {
tag.element.querySelector('.modifier-card-overlay').innerText = '-'; tag.element.querySelector('.modifier-card-image-overlay').innerText = '-';
tag.element.classList.add('modifier-card-tiny'); tag.element.classList.add('modifier-card-tiny');
editorModifierTagsList.appendChild(tag.element); editorModifierTagsList.appendChild(tag.element);
tag.element.addEventListener('click', () => { tag.element.addEventListener('click', () => {
let idx = activeTags.indexOf(tag); if (index !== -1) {
activeTags[index].originElement.classList.remove(activeCardClass);
activeTags[index].originElement.querySelector('.modifier-card-image-overlay').innerText = '+';
if (idx !== -1) { activeTags.splice(index, 1);
activeTags[idx].originElement.classList.remove(activeCardClass);
activeTags[idx].originElement.querySelector('.modifier-card-overlay').innerText = '+';
activeTags.splice(idx, 1);
refreshTagsList(); refreshTagsList();
} }
}); });
@ -1460,8 +1464,9 @@ function createModifierCard(name, previews) {
const modifierCard = document.createElement('div'); const modifierCard = document.createElement('div');
modifierCard.className = 'modifier-card'; modifierCard.className = 'modifier-card';
modifierCard.innerHTML = ` modifierCard.innerHTML = `
<div class="modifier-card-overlay"></div>
<div class="modifier-card-image-container"> <div class="modifier-card-image-container">
<div class="modifier-card-overlay">+</div> <div class="modifier-card-image-overlay">+</div>
<p class="modifier-card-error-label"></p> <p class="modifier-card-error-label"></p>
<img onerror="this.remove()" alt="Modifier Image" class="modifier-card-image"> <img onerror="this.remove()" alt="Modifier Image" class="modifier-card-image">
</div> </div>
@ -1593,7 +1598,7 @@ async function loadModifiers() {
activeTags = activeTags.filter(x => x.name != modifierName); activeTags = activeTags.filter(x => x.name != modifierName);
modifierCard.classList.remove(activeCardClass); modifierCard.classList.remove(activeCardClass);
modifierCard.querySelector('.modifier-card-overlay').innerText = '+'; modifierCard.querySelector('.modifier-card-image-overlay').innerText = '+';
} else { } else {
// add modifier to active array // add modifier to active array
activeTags.push({ activeTags.push({
@ -1605,7 +1610,7 @@ async function loadModifiers() {
modifierCard.classList.add(activeCardClass); modifierCard.classList.add(activeCardClass);
modifierCard.querySelector('.modifier-card-overlay').innerText = '-'; modifierCard.querySelector('.modifier-card-image-overlay').innerText = '-';
} }
refreshTagsList(); refreshTagsList();