GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[UI] Notification settings tabs functional

Browse Source
This commit is contained in:
rainydaysavings 2020-08-07 23:47:03 +01:00 committed by Hugo Sales
parent 884d2529d3
commit bdae49718f
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
2 changed files with 56 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
public/assets/css/settings/settings.css
View File

@ -39,21 +39,6 @@
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
} }
#form-tabs ul {
display: flex;
align-items: stretch;
justify-content: space-evenly;
width: 100%;
margin-left: calc(2 * var(--side-margin));
margin-right: calc(2 * var(--side-margin));
padding: 0;
}
#form-tabs li {
display: block;
flex: 0 1 auto;
list-style-type: none;
font-weight: 700;
}
#form-content { #form-content {
order: 3; order: 3;
background-color: #00000050; background-color: #00000050;
@ -265,7 +250,14 @@ select {
margin-left: var(--unit-size); margin-left: var(--unit-size);
} }
/* JS Cropping */ button {
background-color: #f6f6f6;
padding: var(--small-size);
border: none;
border-radius: var(--small-size);
}
/* JS CROPPING */
#img-cropped { #img-cropped {
display: block; display: block;
max-width: 100%; max-width: 100%;
@ -279,9 +271,32 @@ select {
border-radius: 50%; border-radius: 50%;
} }
button { /* NOTIFICATIONS TABS */
background-color: #f6f6f6; /* visual feedback */
padding: var(--small-size); ul input[type=radio] + label {
border: none; color: #91B9D0;
border-radius: var(--small-size); }
ul input[type=radio]:checked + label {
color: #F6F6F6;
}
ul input[type=radio]:focus + label {
color: #F6F6F6;
}
/* show/hide each tab */
ul input[type=radio]:not(:checked) + label + div {
display: none;
}
ul input[type=radio]:checked + label + div {
display: flex;
}
/* hide radio buttons */
input[type=radio] {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
} }

43
templates/settings/notifications.html.twig
View File

@ -3,29 +3,26 @@
{% block title %}Notification Settings{% endblock %} {% block title %}Notification Settings{% endblock %}
{% block body %} {% block body %}
<div class='content'> <div class='content'>
{% block primary_nav %} {% block primary_nav %}
{{ parent() }} {{ parent() }}
{% endblock primary_nav %} {% endblock primary_nav %}
{% block form %} {% block form %}
<div id='form-tabs'> <div id='form-tabs'>
<ul> <ul>
{% for transport, form in tabbed_forms %} {% for transport, form in tabbed_forms %}
<li class='hover-effect'> <input type="radio" id="toggle-{{ transport }}" name="tabs" value="toggle-{{ transport }}">
{{ transport }} <label for="toggle-{{ transport }}" id='tabs' style = "text-transform:capitalize;">
</li> {{ transport }}
{% endfor %} </label>
</ul> <div id="form_{{ transport }}" class='form'>
</div> {{ form(form) }}
<div id='form-content'> </div>
{% for transport, form in tabbed_forms %} {% endfor %}
<div id="form_{{ transport }}" class='form'> </ul>
{{ form(form) }} </div>
</div> {% endblock form %}
{% endfor %} </div>
</div>
{% endblock form %}
</div>
{% endblock body %} {% endblock body %}