From 10d7462d0266dd5619627705aeaf557afc26a5bb Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Wed, 28 Jul 2021 20:16:27 +0100 Subject: [PATCH] [TWIG][SETTINGS] WIP. Settings navigation early sketch. Signed-off-by: Eliseu Amaro --- public/assets/css/base.css | 12 + public/assets/css/reset.css | 1 - public/assets/css/settings/settings.css | 354 ++++----------------- public/assets/icons/arrow-down.svg.twig | 7 + public/assets/icons/plus-circle.svg.twig | 7 + templates/settings/account.html.twig | 24 +- templates/settings/avatar.html.twig | 5 +- templates/settings/base.html.twig | 106 ++++-- templates/settings/notifications.html.twig | 43 +-- templates/settings/profile.html.twig | 42 +-- 10 files changed, 197 insertions(+), 404 deletions(-) create mode 100644 public/assets/icons/arrow-down.svg.twig create mode 100644 public/assets/icons/plus-circle.svg.twig diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 49692f6663..ed3d982efb 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -360,4 +360,16 @@ figcaption a:link { opacity: unset; transform: none; } +} + +@keyframes fadeOut { + 100% { + opacity: 0; + transform: translateY(-10px); + } + + 0% { + opacity: unset; + transform: none; + } } \ No newline at end of file diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css index 43e90d9cca..74e8c44118 100644 --- a/public/assets/css/reset.css +++ b/public/assets/css/reset.css @@ -61,7 +61,6 @@ details > summary::-webkit-details-marker { /* have IE ignore the detail elements altogether */ @supports not (-ms-ime-align: auto) { - details summary { cursor: pointer; } diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css index fbd36f71fd..776603eda5 100644 --- a/public/assets/css/settings/settings.css +++ b/public/assets/css/settings/settings.css @@ -1,307 +1,87 @@ -.content { - display: flex; - flex-wrap: wrap; - margin-top: calc(4 * var(--main-size)); - justify-content: center; - align-items: center; - margin-left: var(--nav-size); - margin-right: var(--nav-size); +.main-nav { margin-bottom: var(--unit-size); + font-size: var(--main-size); + border-radius: var(--unit-size); + padding: var(--unit-size); + box-sizing: border-box; + + background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)), + url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); + background-blend-mode: multiply; } -.main { - width: 100%; - margin-left: var(--unit-size); - margin-right: var(--unit-size); - box-shadow: var(--shadow); - border-radius: var(--small-size); - border: solid 2px var(--accent-low); - background-color: var(--bg3); +.main-nav ul { + margin-top: var(--main-size); } -.set-nav { - order: 1; - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - flex: 1; - background-color: var(--bg1); - padding: var(--medium-size); +.main-nav ul li { font-size: var(--medium-size); - font-family: var(--head-font); - border-radius: var(--small-size) var(--small-size) 0 0; -} -.set-nav 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; -} + border-radius: var(--unit-size); + box-sizing: border-box; -.set-nav li { - display: block; - flex: 0 1 auto; - list-style-type: none; - font-weight: 700; -} + padding: var(--unit-size); + margin-bottom: var(--small-size); -.set-nav a { - color: var(--accent); -} - -.set-nav a:hover { - color: var(--fg); - transition: all 0.8s ease; -} - -.active { - color: var(--fg) !important; - font-weight: 700; -} - -.secondary { - display: flex; - flex-wrap: wrap; - background-color: var(--bg3); - margin: var(--unit-size); - border: solid 2px var(--accent-low); - border-radius: var(--small-size); - box-shadow: var(--shadow); + background-color: var(--translucent); } .form { - order: 3; - padding: calc(2 * var(--unit-size)); - height: 100%; - width: 100%; - border-radius: 0 0 var(--small-size) var(--small-size); -} - -.form-single { - order: 2; - padding: calc(2 * var(--unit-size)); - height: 100%; - width: 100%; - border-radius: var(--small-size); -} - -.form label, -.form-single label { - font-size: var(--medium-size); -} - -/* FORMS ------------------------------*/ -label { - display: inline-block; - font-family: 'Montserrat', sans-serif; - font-weight: 700; - width: 100%; -} - -input[type=text] { - margin-top: calc(var(--unit-size) * 0.5); - width: calc(100% - var(--unit-size)); - background-color: var(--bg2); - box-shadow: var(--shadow); - border: solid 2px var(--accent-low); - padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); - color: var(--fg); - border-radius: calc(var(--unit-size) * 0.5); - font-size: var(--medium-size); -} - -.form input[type=checkbox] { - float: left; - margin-right: calc(var(--unit-size) * 0.5); - margin-top: calc(var(--unit-size) * 0.2); -} - -button[type=submit] { - background: var(--bg1); - padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2); - color: var(--fg); - border-style: solid; - border-color: var(--accent); + font-size: var(--main-size); border-radius: var(--unit-size); - border-width: 2px; - font-family: 'Montserrat', sans-serif; - font-size: var(--small-size); - font-weight: 700; + padding: var(--unit-size); + box-sizing: border-box; + + background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)), + url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); + background-blend-mode: multiply; } -#save_bio { - margin-top: calc(var(--unit-size) * 0.5); - width: calc(100% - var(--unit-size)); - height: calc(10 * var(--unit-size)); - box-shadow: var(--shadow); - background-color: var(--bg2); - border: solid 2px var(--accent-low); - padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); - color: var(--fg); - border-radius: calc(var(--unit-size) * 0.5); +.form #save { + margin-top: var(--main-size); + font-size: var(--medium-size); - word-wrap: break-word; - resize: vertical; -} - -#save_phone_number { - margin-top: calc(var(--unit-size) * 0.5); - width: calc(100% - var(--unit-size)); - background-color: var(--bg2); - box-shadow: var(--shadow); - border: solid 2px var(--accent-low); - padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); - color: var(--fg); - border-radius: calc(var(--unit-size) * 0.5); - font-size: var(--medium-size); -} - -#save_language { - margin-top: calc(var(--unit-size) * 0.5); - background-color: var(--bg2); - box-shadow: var(--shadow); - border: solid 2px var(--accent-low); - padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5); - color: var(--fg); - border-radius: calc(var(--unit-size) * 0.5); - font-size: var(--medium-size); -} - -select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-image: url("../../icons/drop.svg"); - background-size: var(--main-size); - background-position: 95% 50%; - background-repeat: no-repeat; -} - -.help-text { - font-size: var(--medium-size); - font-style: italic; - color: var(--fg); - margin-bottom: var(--unit-size); -} - -.form-single input[type=checkbox] { - margin-left: var(--unit-size); -} - -/* JS CROPPING */ -#img-cropped { - display: block; - max-width: 100%; -} - -#img-container { - margin: var(--main-size) auto; - max-width: 60%; -} - -.cropper-view-box, -.cropper-face { - border-radius: 50%; -} - -/* NOTIFICATIONS TABS */ -/* visual feedback */ -ul input[type=radio] + label { - color: var(--accent); -} - -ul input[type=radio]:checked + label { - color: var(--fg); -} - -ul input[type=radio]:focus + label { - color: var(--fg); -} - -/* 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; - width: 100%; - font-size: var(--medium-size); -} - -#form-tabs ul { - display: flex; - flex-wrap: wrap; - border-radius: 0 0 var(--unit-size) var(--unit-size); - background-color: var(--bg1); - justify-content: space-evenly; - width: 100%; -} - -#form-tabs ul label { - order: 1; - flex: 0; -} - -#tabs { - padding: var(--medium-size); - text-transform: capitalize; -} - -#form-tabs ul .form { - order: 2; - padding: calc(2 * var(--unit-size)); - background-color: var(--bg3) !important; - height: 100%; - margin-left: 0; - margin-right: 0; - margin-top: 0; - box-shadow: none; - border-radius: 0 0 var(--unit-size) var(--unit-size); - font-size: var(--unit-size); -} - -#form-tabs ul .form form { - width: 100%; -} - -#form-tabs ul .form form div label { - margin-bottom: calc(var(--unit-size) * 0.5); -} - -.secondary button[type=submit] { - background: var(--bg1); - padding: 0.6em 1.2em; - color: var(--fg); - border-style: solid; - border-color: var(--accent); border-radius: var(--unit-size); - border-width: 2px; - font-family: 'Montserrat', sans-serif; - font-weight: 700; + padding: var(--unit-size); + box-sizing: border-box; + background-color: var(--translucent); } -.secondary button[type=submit]:focus, -.secondary button[type=submit]:hover { - border-radius: var(--unit-size); - box-shadow: 0 0 8px var(--accent); +.icon-details-open { + fill: var(--white); +} + +.section-title-settings summary:focus, +.section-title-settings summary:hover { + border-radius: var(--unit-size) !important; + padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size) !important; + background: var(--white) !important; + color: var(--bg1) !important; + transition: all 0.4s ease; +} + +.section-title-settings summary:focus .icon-details-open, +.section-title-settings summary:hover .icon-details-open { + fill: var(--bg1); + transition: all 0.4s ease; +} + +/* SECTION DETAILS OPENED */ +.section-title-settings[open] svg { + transform: rotate(180deg); + animation: fadeOut 300ms; +} + +.section-title-settings[open] .set-nav li:first-of-type { + margin-top: var(--unit-size); +} + +.section-title-settings[open] .set-nav li:last-of-type { + margin-bottom: 0; +} + +/* SECTION DETAILS CLOSED */ +.section-title-settings:not([open]) svg { + transform: initial; + animation: fadeIn 300ms; } \ No newline at end of file diff --git a/public/assets/icons/arrow-down.svg.twig b/public/assets/icons/arrow-down.svg.twig new file mode 100644 index 0000000000..edb5d58162 --- /dev/null +++ b/public/assets/icons/arrow-down.svg.twig @@ -0,0 +1,7 @@ + + + + arrow-down + + \ No newline at end of file diff --git a/public/assets/icons/plus-circle.svg.twig b/public/assets/icons/plus-circle.svg.twig new file mode 100644 index 0000000000..2618026107 --- /dev/null +++ b/public/assets/icons/plus-circle.svg.twig @@ -0,0 +1,7 @@ + + + + plus-circle + + \ No newline at end of file diff --git a/templates/settings/account.html.twig b/templates/settings/account.html.twig index a1656a74c6..14dd2168d3 100644 --- a/templates/settings/account.html.twig +++ b/templates/settings/account.html.twig @@ -1,22 +1,12 @@ {% extends 'settings/base.html.twig' %} -{% block title %}Notification Settings{% endblock %} +{% block title %}Account Settings{% endblock %} -{% block body %} +{% block page_name %}Account{% endblock %} -
-
- {% block primary_nav %} - {{ parent() }} - {% endblock primary_nav %} -
- {% block form %} -
- {{ form(acc) }} -
- {% endblock form %} -
-
+{% block form %} +
+

Settings / Profile

+ {{ form(acc) }}
- -{% endblock body %} +{% endblock form %} diff --git a/templates/settings/avatar.html.twig b/templates/settings/avatar.html.twig index b191cd632a..7309c70682 100644 --- a/templates/settings/avatar.html.twig +++ b/templates/settings/avatar.html.twig @@ -8,12 +8,9 @@ {% endblock %} -{% block body %} - {{ parent() }} -{% endblock body %} - {% block form %}
+

Settings / Profile

{{ form(avatar) }}
diff --git a/templates/settings/base.html.twig b/templates/settings/base.html.twig index 2a61a53a6d..1fb2354e5d 100644 --- a/templates/settings/base.html.twig +++ b/templates/settings/base.html.twig @@ -2,18 +2,14 @@ {% block meta %} {{ parent() }} + {% endblock %} {% block title %}{% endblock %} {% block stylesheets %} {{ parent() }} - - - + {% endblock %} {% block header %} @@ -21,37 +17,83 @@ {% endblock %} {% block body %} - {% block left %} - {{ parent() }} - {% endblock %} -
-
- {% block primary_nav %} -
+ + + {# Notifications #} + + + + +
+ + {% block form %} + {% endblock %}
{% endblock body %} diff --git a/templates/settings/notifications.html.twig b/templates/settings/notifications.html.twig index 69cb54f175..317a23c1fc 100644 --- a/templates/settings/notifications.html.twig +++ b/templates/settings/notifications.html.twig @@ -6,32 +6,21 @@ {{ parent() }} {% endblock %} -{% block body %} -
-
- {% block primary_nav %} - {{ parent() }} - {% endblock primary_nav %} +{% block form %} +
+

Settings / Notifications

-
- {% block form %} -
-
    - {% for transport, form in tabbed_forms %} - - -
    - {{ form(form) }} -
    - {% endfor %} -
-
- {% endblock form %} -
-
+
    + {% for transport, form in tabbed_forms %} + + +
    + {{ form(form) }} +
    + {% endfor %} +
- -{% endblock body %} +{% endblock form %} \ No newline at end of file diff --git a/templates/settings/profile.html.twig b/templates/settings/profile.html.twig index f5633b2ae0..611f3f14cc 100644 --- a/templates/settings/profile.html.twig +++ b/templates/settings/profile.html.twig @@ -2,41 +2,11 @@ {% block title %}Profile Settings{% endblock %} -{% block body %} -
-
- {% block primary_nav %} - {{ parent() }} - {% endblock primary_nav %} +{% block form %} +
+

Settings / Profile

-
- {% block secundary_nav %} - - {% endblock secundary_nav %} - - {% block form %} -
- {{ form(prof) }} -
- {% endblock form %} -
-
+ {{ form(prof) }}
-{% endblock body %} +{% endblock form %} +