mirror of
https://git.linux-kernel.at/oliver/ivatar.git
synced 2025-11-20 06:58:02 +00:00
Fix tile selection UI persistence in /tools/check page
This commit is contained in:
Oliver Falk
@@ -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 %}
|
||||
@@ -11,9 +121,9 @@
|
||||
<div class="check-layout">
|
||||
<div class="check-form-section">
|
||||
{% if form.errors %}
|
||||
{% for error in form.non_field_errors %}
|
||||
<div class="alert alert-danger" role="alert">{{ error|escape }}</div>
|
||||
{% endfor %}
|
||||
{% for error in form.non_field_errors %}
|
||||
<div class="alert alert-danger" role="alert">{{ error|escape }}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<div class="form-container">
|
||||
@@ -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>
|
||||
@@ -105,17 +236,17 @@
|
||||
|
||||
<div class="hash-info">
|
||||
{% if mail_hash %}
|
||||
<div class="hash-display">
|
||||
<strong>MD5 hash (mail):</strong> <code>{{ mail_hash }}</code>
|
||||
</div>
|
||||
<div class="hash-display">
|
||||
<strong>SHA256 hash (mail):</strong> <code>{{ mail_hash256 }}</code>
|
||||
</div>
|
||||
<div class="hash-display">
|
||||
<strong>MD5 hash (mail):</strong> <code>{{ mail_hash }}</code>
|
||||
</div>
|
||||
<div class="hash-display">
|
||||
<strong>SHA256 hash (mail):</strong> <code>{{ mail_hash256 }}</code>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if openid_hash %}
|
||||
<div class="hash-display">
|
||||
<strong>SHA256 hash (OpenID):</strong> <code>{{ openid_hash }}</code>
|
||||
</div>
|
||||
<div class="hash-display">
|
||||
<strong>SHA256 hash (OpenID):</strong> <code>{{ openid_hash }}</code>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -191,43 +322,62 @@
|
||||
|
||||
{% if mailurl or openidurl %}
|
||||
<script>
|
||||
// Auto-scroll to results on mobile after form submission
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Check if we're on mobile and have results
|
||||
if (window.innerWidth <= 768 && document.getElementById('avatar-results')) {
|
||||
// Small delay to ensure page is fully rendered
|
||||
setTimeout(function() {
|
||||
document.getElementById('avatar-results').scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
// Auto-scroll to results on mobile after form submission
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Check if we're on mobile and have results
|
||||
if (window.innerWidth <= 768 && document.getElementById('avatar-results')) {
|
||||
// Small delay to ensure page is fully rendered
|
||||
setTimeout(function () {
|
||||
document.getElementById('avatar-results').scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
// Custom select box functionality
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const selectOptions = document.querySelectorAll('.select-option');
|
||||
const hiddenInput = document.getElementById('id_default_opt');
|
||||
// Custom select box functionality
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const selectOptions = document.querySelectorAll('.select-option');
|
||||
const hiddenInput = document.getElementById('id_default_opt');
|
||||
|
||||
selectOptions.forEach(function(option) {
|
||||
option.addEventListener('click', function() {
|
||||
// Remove selected class from all options
|
||||
selectOptions.forEach(function(opt) {
|
||||
opt.classList.remove('selected');
|
||||
selectOptions.forEach(function (option) {
|
||||
option.addEventListener('click', 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;
|
||||
});
|
||||
|
||||
// Add selected class to clicked option
|
||||
this.classList.add('selected');
|
||||
|
||||
// Update hidden input value
|
||||
hiddenInput.value = this.getAttribute('data-value');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
Reference in New Issue
Block a user