external-repos/ivatar
1
0
Fork 0
mirror of https://git.linux-kernel.at/oliver/ivatar.git synced 2025-11-20 06:58:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix tile selection UI persistence in /tools/check page

Browse Source
This commit is contained in:
Oliver Falk
2025-10-30 20:54:56 +01:00
parent 9385f5e86c
commit a1e8619b56
1 changed files with 212 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
ivatar/tools/templates/check.html
View File

@@ -2,6 +2,116 @@
{% load i18n %}
{% load static %}
{% block header %}
<style>
/* Base tile styles - highest specificity */
.custom-select-grid .select-option,
.form-group .custom-select-grid .select-option,
div.custom-select-grid div.select-option {
transition: all 0.3s ease !important;
cursor: pointer !important;
border: 2px solid #dee2e6 !important;
background-color: #fff !important;
color: #333 !important;
padding: 1rem !important;
border-radius: 12px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.75rem !important;
min-height: 100px !important;
justify-content: center !important;
}
/* Hover state for non-selected tiles */
.custom-select-grid .select-option:hover:not(.selected),
.form-group .custom-select-grid .select-option:hover:not(.selected),
div.custom-select-grid div.select-option:hover:not(.selected) {
border-color: #335ecf !important;
background-color: #e8f0ff !important;
color: #335ecf !important;
transform: translateY(-2px) !important;
}
.custom-select-grid .select-option:hover:not(.selected) .select-option-text,
.form-group .custom-select-grid .select-option:hover:not(.selected) .select-option-text,
div.custom-select-grid div.select-option:hover:not(.selected) .select-option-text {
color: #335ecf !important;
font-weight: 500 !important;
}
/* Selected state - always takes priority */
.custom-select-grid .select-option.selected,
.form-group .custom-select-grid .select-option.selected,
div.custom-select-grid div.select-option.selected {
background-color: #335ecf !important;
border-color: #335ecf !important;
color: #fff !important;
box-shadow: 0 4px 16px rgba(51, 94, 207, 0.4) !important;
transform: translateY(-1px) !important;
}
.custom-select-grid .select-option.selected .select-option-text,
.form-group .custom-select-grid .select-option.selected .select-option-text,
div.custom-select-grid div.select-option.selected .select-option-text {
color: #fff !important;
font-weight: 600 !important;
}
.custom-select-grid .select-option.selected .select-option-preview,
.form-group .custom-select-grid .select-option.selected .select-option-preview,
div.custom-select-grid div.select-option.selected .select-option-preview {
border-color: rgba(255, 255, 255, 0.5) !important;
}
/* Selected state hover - slightly different shade */
.custom-select-grid .select-option.selected:hover,
.form-group .custom-select-grid .select-option.selected:hover,
div.custom-select-grid div.select-option.selected:hover {
background-color: #2a4bb8 !important;
border-color: #2a4bb8 !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(51, 94, 207, 0.5) !important;
}
.custom-select-grid .select-option.selected:hover .select-option-text,
.form-group .custom-select-grid .select-option.selected:hover .select-option-text,
div.custom-select-grid div.select-option.selected:hover .select-option-text {
color: #fff !important;
font-weight: 600 !important;
}
/* Force all child elements in selected state */
.custom-select-grid .select-option.selected *,
.form-group .custom-select-grid .select-option.selected *,
div.custom-select-grid div.select-option.selected * {
color: #fff !important;
}
/* Ensure selected state persists even with inline styles */
.select-option[data-selected="true"] {
background-color: #335ecf !important;
border-color: #335ecf !important;
color: #fff !important;
box-shadow: 0 4px 16px rgba(51, 94, 207, 0.4) !important;
}
.select-option[data-selected="true"] .select-option-text {
color: #fff !important;
font-weight: 600 !important;
}
/* Override any potential theme conflicts */
body .select-option.selected,
html .select-option.selected {
background-color: #335ecf !important;
border-color: #335ecf !important;
color: #fff !important;
}
</style>
{% endblock header %}
{% block title %}{% trans 'Check e-mail or openid' %}{% endblock title %}
{% block content %}
@@ -22,68 +132,89 @@
<div class="form-group">
<label for="id_mail" class="form-label">{% trans 'E-Mail' %}</label>
{% if form.mail.value %}
<input type="email" name="mail" maxlength="254" minlength="6" class="form-control" placeholder="{% trans 'E-Mail' %}" value="{{ form.mail.value }}" id="id_mail">
<input type="email" name="mail" maxlength="254" minlength="6" class="form-control"
placeholder="{% trans 'E-Mail' %}" value="{{ form.mail.value }}" id="id_mail">
{% else %}
<input type="email" name="mail" maxlength="254" minlength="6" class="form-control" placeholder="{% trans 'E-Mail' %}" id="id_mail">
<input type="email" name="mail" maxlength="254" minlength="6" class="form-control"
placeholder="{% trans 'E-Mail' %}" id="id_mail">
{% endif %}
</div>
<div class="form-group">
<label for="id_openid" class="form-label">{% trans 'OpenID' %}</label>
{% if form.openid.value %}
<input type="text" name="openid" maxlength="255" minlength="11" class="form-control" placeholder="{% trans 'OpenID' %}" value="{{ form.openid.value }}" id="id_openid">
<input type="text" name="openid" maxlength="255" minlength="11" class="form-control"
placeholder="{% trans 'OpenID' %}" value="{{ form.openid.value }}" id="id_openid">
{% else %}
<input type="text" name="openid" maxlength="255" minlength="11" class="form-control" placeholder="{% trans 'OpenID' %}" id="id_openid">
<input type="text" name="openid" maxlength="255" minlength="11" class="form-control"
placeholder="{% trans 'OpenID' %}" id="id_openid">
{% endif %}
</div>
<div class="form-group">
<label for="id_size" class="form-label">{% trans 'Size' %}</label>
{% if form.size.value %}
<input type="number" name="size" min="5" max="512" class="form-control" placeholder="{% trans 'Size' %}" value="{{ form.size.value }}" required id="id_size">
<input type="number" name="size" min="5" max="512" class="form-control" placeholder="{% trans 'Size' %}"
value="{{ form.size.value }}" required id="id_size">
{% else %}
<input type="number" name="size" min="5" max="512" class="form-control" placeholder="{% trans 'Size' %}" value="100" required id="id_size">
<input type="number" name="size" min="5" max="512" class="form-control" placeholder="{% trans 'Size' %}"
value="100" required id="id_size">
{% endif %}
</div>
<div class="form-group">
<label for="id_default_url" class="form-label">{% trans 'Default URL or special keyword' %}</label>
{% if form.default_url.value %}
<input type="text" name="default_url" class="form-control" placeholder="{% trans 'Default' %}" value="{{ form.default_url.value }}" id="id_default_url">
<input type="text" name="default_url" class="form-control" placeholder="{% trans 'Default' %}"
value="{{ form.default_url.value }}" id="id_default_url">
{% else %}
<input type="text" name="default_url" class="form-control" placeholder="{% trans 'Default' %}" id="id_default_url">
<input type="text" name="default_url" class="form-control" placeholder="{% trans 'Default' %}"
id="id_default_url">
{% endif %}
</div>
<div class="form-group">
<label class="form-label">{% trans 'Default (special keyword)' %}</label>
<input type="hidden" name="default_opt" id="id_default_opt" value="{% if form.default_opt.value %}{{ form.default_opt.value }}{% endif %}">
<input type="hidden" name="default_opt" id="id_default_opt"
value="{% if form.default_opt.value %}{{ form.default_opt.value }}{% endif %}">
<div class="custom-select-grid">
<div class="select-option {% if form.default_opt.value == 'retro' %}selected{% endif %}" data-value="retro">
<img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=retro&forcedefault=y" alt="Retro preview" class="select-option-preview">
<img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=retro&forcedefault=y" alt="Retro preview"
class="select-option-preview">
<span class="select-option-text">Retro (d=retro)</span>
</div>
<div class="select-option {% if form.default_opt.value == 'robohash' %}selected{% endif %}" data-value="robohash">
<img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=robohash&forcedefault=y" alt="Roboter preview" class="select-option-preview">
<div class="select-option {% if form.default_opt.value == 'robohash' %}selected{% endif %}"
data-value="robohash">
<img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=robohash&forcedefault=y" alt="Roboter preview"
class="select-option-preview">
<span class="select-option-text">Roboter (d=robohash)</span>
</div>
<div class="select-option {% if form.default_opt.value == 'wavatar' %}selected{% endif %}" data-value="wavatar">
<img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=wavatar&forcedefault=y" alt="Wavatar preview" class="select-option-preview">
<div class="select-option {% if form.default_opt.value == 'wavatar' %}selected{% endif %}"
data-value="wavatar">
<img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=wavatar&forcedefault=y" alt="Wavatar preview"
class="select-option-preview">
<span class="select-option-text">Wavatar (d=wavatar)</span>
</div>
<div class="select-option {% if form.default_opt.value == 'monsterid' %}selected{% endif %}" data-value="monsterid">
<img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=monsterid&forcedefault=y" alt="Monster preview" class="select-option-preview">
<div class="select-option {% if form.default_opt.value == 'monsterid' %}selected{% endif %}"
data-value="monsterid">
<img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=monsterid&forcedefault=y" alt="Monster preview"
class="select-option-preview">
<span class="select-option-text">Monster (d=monsterid)</span>
</div>
<div class="select-option {% if form.default_opt.value == 'identicon' %}selected{% endif %}" data-value="identicon">
<img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=identicon&forcedefault=y" alt="Identicon preview" class="select-option-preview">
<div class="select-option {% if form.default_opt.value == 'identicon' %}selected{% endif %}"
data-value="identicon">
<img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=identicon&forcedefault=y"
alt="Identicon preview" class="select-option-preview">
<span class="select-option-text">Identicon (d=identicon)</span>
</div>
<div class="select-option {% if form.default_opt.value == 'mm' %}selected{% endif %}" data-value="mm">
<img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=mm&forcedefault=y" alt="Mystery man preview" class="select-option-preview">
<img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=mm&forcedefault=y" alt="Mystery man preview"
class="select-option-preview">
<span class="select-option-text">Mystery man (d=mm)</span>
</div>
<div class="select-option {% if form.default_opt.value == 'mmng' %}selected{% endif %}" data-value="mmng">
<img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=mmng&forcedefault=y" alt="Mystery man NG preview" class="select-option-preview">
<img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=mmng&forcedefault=y"
alt="Mystery man NG preview" class="select-option-preview">
<span class="select-option-text">Mystery man NG (d=mmng)</span>
</div>
<div class="select-option select-option-none {% if form.default_opt.value == 'none' %}selected{% endif %}" data-value="none">
<div class="select-option select-option-none {% if form.default_opt.value == 'none' %}selected{% endif %}"
data-value="none">
<span class="select-option-text">None</span>
</div>
</div>
@@ -218,13 +349,32 @@ document.addEventListener('DOMContentLoaded', function() {
// Remove selected class from all options
selectOptions.forEach(function (opt) {
opt.classList.remove('selected');
opt.removeAttribute('data-selected');
// Clear any inline styles that might interfere with CSS
opt.style.backgroundColor = '';
opt.style.borderColor = '';
opt.style.color = '';
opt.style.fontWeight = '';
opt.style.transform = '';
opt.style.boxShadow = '';
const textElement = opt.querySelector('.select-option-text');
if (textElement) {
textElement.style.color = '';
textElement.style.fontWeight = '';
}
});
// Add selected class to clicked option
this.classList.add('selected');
this.setAttribute('data-selected', 'true');
// Update hidden input value
hiddenInput.value = this.getAttribute('data-value');
// Force a reflow to ensure CSS is applied immediately
this.offsetHeight;
});
});
});