fix(style): fix missposition theme checkbox

apps/gnous_eu/static/stylesheets/sass/uikit_fix.scss

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

apps/gnous_eu/templates/layouts/foot.html

@@ -12,9 +12,18 @@ Don't judge me
 
 <!-- theme -->
 <script>
-    window.theme = document.querySelector('input[name=theme]');
+    window.themeCheckboxes = ["theme", "themeSidebar"];
-    theme.checked = document.documentElement.getAttribute('data-theme') === 'dark';
 
+    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>
 

apps/gnous_eu/templates/layouts/footer.html

@@ -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>

apps/gnous_eu/templates/layouts/sidebar.html

@@ -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">
+                <div class="uk-flex-between uk-flex">
-                    {% csrf_token %}
+                    <div>
-                    {% get_current_language as LANGUAGE_CODE %}
+                        <form action="{% url 'set_language' %}" method="post" name="languageForm2">
-                    {% if LANGUAGE_CODE == 'en' %}
+                            {% csrf_token %}
-                        <img src="{% static 'images/icons/fr.svg' %}" alt="en" onclick="window.document.languageForm2.submit()" width="18">
+                            {% get_current_language as LANGUAGE_CODE %}
-                        <input type="hidden" name="language" value="fr">
+                            {% if LANGUAGE_CODE == 'en' %}
-                    {% else %}
+                                <img src="{% static 'images/icons/fr.svg' %}" alt="en"
-                        <img src="{% static 'images/icons/en.svg' %}" alt="fr" onclick="window.document.languageForm2.submit()" width="18">
+                                     onclick="window.document.languageForm2.submit()" width="18">
-                        <input type="hidden" name="language" value="en">
+                                <input type="hidden" name="language" value="fr">
-                    {% endif %}
+                            {% else %}
-                </form>
+                                <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>