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);
}
#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 {
order: 3;
background-color: #00000050;
@ -265,7 +250,14 @@ select {
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 {
display: block;
max-width: 100%;
@ -279,9 +271,32 @@ select {
border-radius: 50%;
}
button {
background-color: #f6f6f6;
padding: var(--small-size);
border: none;
border-radius: var(--small-size);
/* NOTIFICATIONS TABS */
/* visual feedback */
ul input[type=radio] + label {
color: #91B9D0;
}
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);
}

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

@ -12,18 +12,15 @@
<div id='form-tabs'>
<ul>
{% for transport, form in tabbed_forms %}
<li class='hover-effect'>
<input type="radio" id="toggle-{{ transport }}" name="tabs" value="toggle-{{ transport }}">
<label for="toggle-{{ transport }}" id='tabs' style = "text-transform:capitalize;">
{{ transport }}
</li>
{% endfor %}
</ul>
</div>
<div id='form-content'>
{% for transport, form in tabbed_forms %}
</label>
<div id="form_{{ transport }}" class='form'>
{{ form(form) }}
</div>
{% endfor %}
</ul>
</div>
{% endblock form %}
</div>