gnouseu/gnousdoteu-v3
4
0
Fork 0
Code Issues 3 Pull requests Activity

fix(style): fix missposition theme checkbox

Browse source
This commit is contained in:
Romain J 2021-08-01 17:52:20 +02:00
parent fd0c223877
commit 322ab9fa53
4 changed files with 62 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
apps/gnous_eu/static/stylesheets/sass/uikit_fix.scss
View file

@ -109,15 +109,15 @@
&:before {
content: '';
background-color: #fff;
position: absolute;
width: 20px;
height: 20px;
left: 2px;
bottom: 2px;
border-radius: 50%;
transition-property: transform, box-shadow;
transition-duration: .05s;
background-color: #fff;
position: absolute;
width: 20px;
height: 20px;
left: 2px;
bottom: 2px;
border-radius: 50%;
transition-property: transform, box-shadow;
transition-duration: .05s;
}
}

22
apps/gnous_eu/templates/layouts/foot.html
View file

@ -12,9 +12,18 @@ Don't judge me
<!-- theme -->
<script>
window.theme = document.querySelector('input[name=theme]');
theme.checked = document.documentElement.getAttribute('data-theme') === 'dark';
window.themeCheckboxes = ["theme", "themeSidebar"];
themeCheckboxes.forEach(checkbox => {
const theme = document.querySelector(`input[name=${checkbox}]`);
theme.addEventListener('change', function () {
applyTheme(theme.checked ? 'dark' : 'light');
console.log(theme)
})
theme.checked = document.documentElement.getAttribute('data-theme') === 'dark';
})
window.applyTheme = function (theme) {
document.documentElement.setAttribute('data-theme', theme);
@ -29,10 +38,6 @@ Don't judge me
window.sessionStorage.setItem('theme', theme)
}
theme.addEventListener('change', function () {
applyTheme(theme.checked ? 'dark' : 'light')
})
</script>
<!-- sidebar -->
@ -54,7 +59,10 @@ Don't judge me
theme_session = window.sessionStorage.getItem('theme')
if (theme_session !== null) {
applyTheme(theme_session);
window.theme.checked = theme_session === 'dark'
themeCheckboxes.forEach(checkbox => {
document.querySelector(`input[name=${checkbox}]`).checked = theme_session === 'dark'
})
}
</script>

2
apps/gnous_eu/templates/layouts/footer.html
View file

@ -17,7 +17,7 @@
<span class="uk-text-small uk-text-muted"> | Version: </span>
<a href="https://git.gnous.eu/gnouseu/gnousdoteu/src/commit/{% version 'long' %}" target="_blank" class="uk-text-small uk-button-link">{% version 'short' %}</a>
</div>
<div class="uk-float-right">
<div class="uk-float-right uk-visible@s">
<label class="uk-switch need-js" for="themeSwitcher">
<input type="checkbox" id="themeSwitcher" name="theme">
<span class="uk-switch-slider"></span>

52
apps/gnous_eu/templates/layouts/sidebar.html
View file

@ -14,42 +14,64 @@
<li>
<a href="{% url 'gnous_eu:index' %}"
class="uk-text-bolder"
{% if request.resolver_match.url_name == 'index' %} style="text-decoration: underline" {% endif %}>
{% if request.resolver_match.url_name == 'index' %}
style="text-decoration: underline" {% endif %}>
<span class="uk-margin-small-right uk-icon" data-uk-icon="world"></span> {% trans "Accueil" %}
</a>
</li>
<li>
<a href="{% url 'gnous_eu:services' %}"
class="uk-text-bolder"
{% if request.resolver_match.url_name == 'services' %} style="text-decoration: underline" {% endif %}>
{% if request.resolver_match.url_name == 'services' %}
style="text-decoration: underline" {% endif %}>
<span class="uk-margin-small-right uk-icon" data-uk-icon="grid"></span> {% trans "Services" %}
</a>
</li>
<li>
<a href="{% url 'gnous_eu:about' %}"
class="uk-text-bolder"
{% if request.resolver_match.url_name == 'about' %} style="text-decoration: underline" {% endif %}>
{% if request.resolver_match.url_name == 'about' %}
style="text-decoration: underline" {% endif %}>
<span class="uk-margin-small-right uk-icon" data-uk-icon="info"></span> {% trans "À propos" %}
</a>
<a href="{% url 'gnous_eu:tips' %}"
class="uk-text-bolder"
{% if request.resolver_match.url_name == 'tips' %} style="text-decoration: underline" {% endif %}>
{% if request.resolver_match.url_name == 'tips' %}
style="text-decoration: underline" {% endif %}>
<span class="uk-margin-small-right uk-icon" data-uk-icon="credit-card"></span> {% trans "Donner" %}
</a>
</li>
<li class="uk-nav-divider"></li>
<li>
<form action="{% url 'set_language' %}" method="post" name="languageForm2">
{% csrf_token %}
{% get_current_language as LANGUAGE_CODE %}
{% if LANGUAGE_CODE == 'en' %}
<img src="{% static 'images/icons/fr.svg' %}" alt="en" onclick="window.document.languageForm2.submit()" width="18">
<input type="hidden" name="language" value="fr">
{% else %}
<img src="{% static 'images/icons/en.svg' %}" alt="fr" onclick="window.document.languageForm2.submit()" width="18">
<input type="hidden" name="language" value="en">
{% endif %}
</form>
<div class="uk-flex-between uk-flex">
<div>
<form action="{% url 'set_language' %}" method="post" name="languageForm2">
{% csrf_token %}
{% get_current_language as LANGUAGE_CODE %}
{% if LANGUAGE_CODE == 'en' %}
<img src="{% static 'images/icons/fr.svg' %}" alt="en"
onclick="window.document.languageForm2.submit()" width="18">
<input type="hidden" name="language" value="fr">
{% else %}
<img src="{% static 'images/icons/en.svg' %}" alt="fr"
onclick="window.document.languageForm2.submit()" width="18">
<input type="hidden" name="language" value="en">
{% endif %}
</form>
</div>
<div>
<label class="uk-switch need-js" for="themeSwitcherSidebar">
<input type="checkbox" id="themeSwitcherSidebar" name="themeSidebar">
<span class="uk-switch-slider"></span>
</label>
</div>
</div>
</li>
<li>
</li>
</ul>
</div>