eliseuamaro/gnu-social
1
0
Fork 0
forked from GNUsocial/gnu-social
Code Issues Pull Requests 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 a71f54c6bf
commit 246bf30c41
2 changed files with 56 additions and 44 deletions
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);
} }

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

@@ -12,18 +12,15 @@
<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 }}">
<label for="toggle-{{ transport }}" id='tabs' style = "text-transform:capitalize;">
{{ transport }} {{ transport }}
</li> </label>
{% endfor %}
</ul>
</div>
<div id='form-content'>
{% for transport, form in tabbed_forms %}
<div id="form_{{ transport }}" class='form'> <div id="form_{{ transport }}" class='form'>
{{ form(form) }} {{ form(form) }}
</div> </div>
{% endfor %} {% endfor %}
</ul>
</div> </div>
{% endblock form %} {% endblock form %}
</div> </div>