moanos/Notfellchen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Use real toggle

Browse Source
This commit is contained in:
moanos [he/him] 2024-12-17 22:46:01 +01:00
parent 4b45b01e2a
commit 858c6d4468
2 changed files with 65 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/fellchensammlung/static/fellchensammlung/css/styles.css
View File

@ -210,6 +210,57 @@ select, .button {
margin: 5px; margin: 5px;
} }
.switch {
cursor: pointer;
display: inline-block;
}
.toggle-switch {
display: inline-block;
background: #ccc;
border-radius: 16px;
width: 58px;
height: 32px;
position: relative;
vertical-align: middle;
transition: background 0.25s;
}
.toggle-switch:before, .toggle-switch:after {
content: "";
}
.toggle-switch:before {
display: block;
background: linear-gradient(to bottom, #fff 0%, #eee 100%);
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
width: 24px;
height: 24px;
position: absolute;
top: 4px;
left: 4px;
transition: left 0.25s;
}
.toggle:hover .toggle-switch:before {
background: linear-gradient(to bottom, #fff 0%, #fff 100%);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.checked + .toggle-switch {
background: #56c080;
}
.checked + .toggle-switch:before {
left: 30px;
}
.toggle-checkbox {
position: absolute;
visibility: hidden;
}
.slider-label {
margin-left: 5px;
position: relative;
top: 2px;
}
/*********************/ /*********************/
/* UNIQUE COMPONENTS */ /* UNIQUE COMPONENTS */

18
src/fellchensammlung/templates/fellchensammlung/details/detail-user.html
View File

@ -13,11 +13,21 @@
<form class="card" action="" method="POST"> <form class="card" action="" method="POST">
{% csrf_token %} {% csrf_token %}
{% if user.email_notifications %} {% if user.email_notifications %}
<input class="btn" type="submit" name="toggle_email_notifications" <label class="toggle">
value="{% translate 'E-Mail Benachrichtigungen deaktivieren' %}"> <input type="submit" class="toggle-checkbox checked" name="toggle_email_notifications">
<div class="toggle-switch round "></div>
<span class="slider-label">
{% translate 'E-Mail Benachrichtigungen' %}
</span>
</label>
{% else %} {% else %}
<input class="btn" type="submit" name="toggle_email_notifications" <label class="toggle">
value="{% translate 'E-Mail Benachrichtigungen aktivieren' %}"> <input type="submit" class="toggle-checkbox" name="toggle_email_notifications">
<div class="toggle-switch round"></div>
<span class="slider-label">
{% translate 'E-Mail Benachrichtigungen' %}
</span>
</label>
{% endif %} {% endif %}
</form> </form>
<div class="card"> <div class="card">