wamo/gnu-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[UI] Notifications settings styling finished

Browse Source
This commit is contained in:
rainydaysavings 2020-08-08 02:24:27 +01:00 committed by Hugo Sales
parent 6b85d38ad6
commit db8e783233
No known key found for this signature in database
GPG Key ID: 7D0C7EAFC9D835A0
4 changed files with 158 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -277,6 +277,7 @@ ul input[type=radio]:checked + label + div {
/* hide radio buttons */ /* hide radio buttons */
input[type=radio] { input[type=radio] {
position: absolute; position: absolute;
z-index: 1;
height: 1px; height: 1px;
width: 1px; width: 1px;
overflow: hidden; overflow: hidden;
@ -286,37 +287,40 @@ input[type=radio] {
#form-tabs { #form-tabs {
order: 2; order: 2;
margin-top: var(--unit-size); margin-top: var(--side-margin);
margin-left: var(--side-margin);
margin-right: var(--side-margin);
width: 100%;
font-size: var(--medium-size);
} }
#form-tabs ul { #form-tabs ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: stretch;
justify-content: space-evenly;
padding: 0;
width: 100%;
border-radius: var(--unit-size); border-radius: var(--unit-size);
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
background-color: #00000050; background-color: #00000050;
justify-content: space-evenly;
width: 100%;
} }
#form-tabs ul label { #form-tabs ul label {
order: 1; order: 1;
flex: 1; flex: 0;
} }
#tabs { #tabs {
padding: var(--unit-size); padding: var(--unit-size);
display: inline-flex; text-transform: capitalize;
font-size: var(--medium-size);
} }
#form-tabs ul .form { #form-tabs ul .form {
order: 2; order: 2;
padding: calc(2*var(--unit-size)); padding: calc(2*var(--unit-size));
background-color: #00000000 !important; background-color: #00000000 !important;
font-size: var(--medium-size);
height: 100%; height: 100%;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
margin-top: 0; margin-top: 0;
box-shadow: 0; box-shadow: 0;
border-radius: 0 0 var(--unit-size) var(--unit-size); border-radius: 0 0 var(--unit-size) var(--unit-size);
font-size: var(--unit-size);
} }

72
public/assets/css/settings/settings_mid.css
View File

@ -238,3 +238,75 @@ button {
border: none; border: none;
border-radius: var(--small-size); 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;
z-index: 1;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
#form-tabs {
order: 2;
margin-top: var(--unit-size);
margin-left: var(--side-margin);
margin-right: var(--side-margin);
width: 100%;
font-size: var(--medium-size);
}
#form-tabs ul {
display: flex;
flex-wrap: wrap;
border-radius: var(--unit-size);
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
background-color: #00000050;
justify-content: space-evenly;
width: 100%;
}
#form-tabs ul label {
order: 1;
flex: 0;
}
#tabs {
padding: var(--unit-size);
text-transform: capitalize;
font-size: var(--medium-size);
}
#form-tabs ul .form {
order: 2;
padding: calc(2*var(--unit-size));
background-color: #00000000 !important;
height: 100%;
margin-left: 0;
margin-right: 0;
margin-top: 0;
box-shadow: 0;
border-radius: 0 0 var(--unit-size) var(--unit-size);
font-size: var(--unit-size);
}

71
public/assets/css/settings/settings_small.css
View File

@ -239,3 +239,74 @@ button {
border: none; border: none;
border-radius: var(--small-size); 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;
z-index: 1;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
#form-tabs {
order: 2;
margin-top: var(--main-size);
margin-left: 1%;
margin-right: 1%;
width: 100%;
font-size: var(--medium-size);
}
#form-tabs ul {
display: flex;
flex-wrap: wrap;
border-radius: var(--unit-size);
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
background-color: #00000050;
justify-content: space-evenly;
width: 100%;
}
#form-tabs ul label {
order: 1;
flex: 0;
}
#tabs {
padding: var(--unit-size);
text-transform: capitalize;
}
#form-tabs ul .form {
order: 2;
padding: calc(2*var(--unit-size));
background-color: #00000000 !important;
height: 100%;
margin-left: 0;
margin-right: 0;
margin-top: 0;
box-shadow: 0;
border-radius: 0 0 var(--unit-size) var(--unit-size);
font-size: var(--unit-size);
}

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

@ -12,8 +12,8 @@
<div id='form-tabs'> <div id='form-tabs'>
<ul> <ul>
{% for transport, form in tabbed_forms %} {% for transport, form in tabbed_forms %}
<input type="radio" id="toggle-{{ transport }}" name="tabs" value="toggle-{{ transport }}"> <input type="radio" id="toggle-{{ transport }}" name="tabs" value="toggle-{{ transport }}" {% if transport == "email" %} checked {% endif %}>
<label for="toggle-{{ transport }}" id='tabs' style = "text-transform:capitalize;"> <label for="toggle-{{ transport }}" id='tabs'>
{{ transport }} {{ transport }}
</label> </label>
<div id="form_{{ transport }}" class='form'> <div id="form_{{ transport }}" class='form'>