From c81795eb96b6c3511c741ebbe0f21369ca1d80a4 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Mon, 16 Aug 2021 21:59:19 +0100 Subject: [PATCH] [TWIG][CSS] More consistent classes. Checkbox styling done. Register and Login pages now done. --- config/packages/twig.yaml | 2 + public/assets/css/base.css | 116 ++++++++++++++++++++-- public/assets/css/reset.css | 21 +++- public/assets/css/right/right.css | 58 ----------- public/assets/icons/check-off.svg | 5 + public/assets/icons/heart.svg | 2 +- public/assets/icons/menu.svg.twig | 2 + templates/security/login.html.twig | 74 ++++++++------ templates/security/register.html.twig | 34 ++++--- templates/sidepanel/right/right.html.twig | 10 +- 10 files changed, 198 insertions(+), 126 deletions(-) create mode 100644 config/packages/twig.yaml create mode 100644 public/assets/icons/check-off.svg diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml new file mode 100644 index 0000000000..b9533f169b --- /dev/null +++ b/config/packages/twig.yaml @@ -0,0 +1,2 @@ +twig: + form_themes: ['form_div_layout.html.twig'] \ No newline at end of file diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 97a6478ea6..eb78e26fb9 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -242,9 +242,6 @@ height: auto; } -/* BUTTONS AND INPUT */ - - /* MEDIA RESIZE */ @media (min-width: 1200px) { /* no need to make the panels disappear at this size */ @@ -307,9 +304,96 @@ } } +/* SECTIONS */ +.section-widget { + display: flex; + flex-direction: column; + width: 100%; + padding: var(--unit-size); + + background-color: var(--translucent); + border-radius: var(--unit-size); + border: solid 2px var(--bg2); + + font-family: var(--main-font); + font-weight: 400; + color: var(--white); +} + +.section-title { + font-family: var(--display-font); + font-weight: 900; + font-size: var(--main-size); + + border-radius: var(--unit-size); + padding: 2px var(--unit-size); + + background-color: var(--translucent); +} +.section-title-menu { + display: flex; + justify-content: space-between; +} +.section-title-menu svg { + align-self: center; + fill: var(--white); +} + +.section-form { + display: flex; + flex-direction: column; + padding: var(--unit-size); +} +.section-form-legend { + padding: unset; + margin-bottom: var(--unit-size); +} + +.section-form-label { + display: block; + + font-family: var(--display-font); + font-size: var(--small-size); + font-weight: 700; + line-height: 1.00; + letter-spacing: -0.20px; + word-spacing: 1.00px; + text-transform: none; + + margin-bottom: 2px; +} +.section-form-label + input { + width: 100%; +} +.help-text { + font-style: italic; + font-size: var(--small-size); +} + +.section-form-options { + display: block !important; + margin-bottom: var(--unit-size); +} + +.section-form-textarea { + border-radius: var(--unit-size); + background-color: var(--translucent); + color: var(--white); + + width: 100%; + max-width: 100%; + height: calc(6 * var(--main-size)); + + border: 2px solid transparent; + margin-top: var(--unit-size); + margin-bottom: var(--unit-size); + padding: var(--unit-size); + resize: vertical; +} + /* BUTTONS AND INPUT SHENANIGANS */ button, -input:not([type=text]) { +input:not([type=radio]):not([type=checkbox]) { font-size: var(--small-size) !important; background-image: linear-gradient(180deg, var(--bg2), transparent) !important; color: var(--white) !important; @@ -322,19 +406,33 @@ textarea:focus { border-color: var(--bg3) !important; } -/* TODO: hover and focus feedback, checkbox */ -input[type=radio]:hover, -input[type=radio]:focus { - border-color: var(--bg3) !important; -} input[type=radio] { border: solid 0.25em var(--bg2) !important; background-color: var(--bg1) !important; } +input[type=radio]:hover, +input[type=radio]:focus { + border-color: var(--bg3) !important; +} input[type=radio]:checked { background-color: var(--white) !important; } +input[type=checkbox] { + background-color: var(--bg2) !important; + background-size: cover; + mask-image: url("../icons/check-off.svg") !important; + +} +input[type=checkbox]:hover, +input[type=checkbox]:focus { + background-color: var(--bg3) !important; +} +input[type=checkbox]:checked { + background-color: var(--bg3) !important; + mask-image: url("../icons/check-on.svg") !important; +} + button:hover, button:focus, input:hover, diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css index 9bdd9a1f2e..8abe9820d8 100644 --- a/public/assets/css/reset.css +++ b/public/assets/css/reset.css @@ -196,18 +196,19 @@ hr { /* BUTTONS AND FILEPICKER */ button { + cursor: pointer !important; float: right !important; - width: min-content !important; + /*width: min-content !important;*/ align-self: end !important; } +input { + cursor: text !important; +} button, -input:not([type=text]) { +input { all: unset; - - cursor: pointer; font-size: var(--medium-size); - border-radius: var(--unit-size); padding: 6px 12px; } @@ -216,8 +217,18 @@ input:not([type=text]) { all: unset; } +input[type=checkbox] { + all: unset; + cursor: pointer !important; + + display: inline-block; + width: 1em; + height: 1em; +} input[type=radio] { all: unset; + cursor: pointer !important; + display: inline-block; width: 1em; height: 1em; diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css index 1edb614e41..0a1851d916 100644 --- a/public/assets/css/right/right.css +++ b/public/assets/css/right/right.css @@ -1,61 +1,3 @@ #right-panel { right: 0; -} - -.section-widget { - display: flex; - flex-direction: column; - width: 100%; - - background-color: var(--translucent); - border-radius: var(--unit-size); - border: solid 2px var(--bg2); - - font-family: var(--main-font); - font-weight: 400; - color: var(--white); -} - -.section-title { - font-family: var(--display-font); - font-weight: 900; - font-size: var(--main-size); - - border-radius: var(--unit-size); - padding: 2px var(--unit-size); - - background-color: var(--translucent); -} -.section-title-menu { - display: flex; - justify-content: space-between; -} -.section-title-menu svg { - align-self: center; - fill: var(--white); -} - -.section-form { - padding: var(--unit-size); -} - -.form-options { - display: block !important; - margin-bottom: var(--unit-size); -} - -.form-input { - border-radius: var(--unit-size); - background-color: var(--translucent); - color: var(--white); - - width: 100%; - max-width: 100%; - height: calc(6 * var(--main-size)); - - border: 2px solid transparent; - margin-top: var(--unit-size); - margin-bottom: var(--unit-size); - padding: var(--unit-size); - resize: vertical; } \ No newline at end of file diff --git a/public/assets/icons/check-off.svg b/public/assets/icons/check-off.svg new file mode 100644 index 0000000000..4ef37c7372 --- /dev/null +++ b/public/assets/icons/check-off.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/public/assets/icons/heart.svg b/public/assets/icons/heart.svg index e1908f6667..4e07a0a4fc 100644 --- a/public/assets/icons/heart.svg +++ b/public/assets/icons/heart.svg @@ -1,3 +1,3 @@ - + diff --git a/public/assets/icons/menu.svg.twig b/public/assets/icons/menu.svg.twig index e60d8e2278..46b4a66c77 100644 --- a/public/assets/icons/menu.svg.twig +++ b/public/assets/icons/menu.svg.twig @@ -1,3 +1,5 @@ + + Open left sidepanel. diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig index dc8db1dd3c..e4b88e8045 100644 --- a/templates/security/login.html.twig +++ b/templates/security/login.html.twig @@ -9,42 +9,52 @@ {% block body %}
-
-
- {{ "Login" | trans }} +
+ +
+

{{ "Login" | trans }}

 - {% if error %} -
{{ error.messageKey | trans(error.messageData, 'security') }}
- {% endif %} + {% if error %} +
    + {% for flashError in app.flashes('verify_email_error') %} +
  • {{ error.messageKey | trans(error.messageData, 'security') }}
    • + {% endfor %} +
+ {% endif %} - {% if app.user %} -

- {{ "You are logged in as" | trans }} {{ app.user.username }}. - -

- {% else %} - {# TODO: Login can be done with email, so the id's and stuff should reflect that, along with using the translation facilities #} - - - {% endif %} + {% if app.user %} +

+ {{ "You are logged in as" | trans }} {{ app.user.username }}. + +

+ {% else %} + {# TODO: Login can be done with email, so the id's and stuff should reflect that, along with using the translation facilities #} +
+ + +

{{ "Your nickname." | trans }}

+
+
+ + +

{{ "Your account's password." | trans }}

+
- - + + + + - - -

- - -

- - -
- +
+ +
+ + {% endif %} +
+ +
{% endblock body %} diff --git a/templates/security/register.html.twig b/templates/security/register.html.twig index 1a395d23c5..270e3f36fb 100644 --- a/templates/security/register.html.twig +++ b/templates/security/register.html.twig @@ -9,22 +9,24 @@ {% block body %}
- {% for flashError in app.flashes('verify_email_error') %} - - {% endfor %} - - {{ form_start(registration_form) }} -
- Register a new account - {{ form_row(registration_form.nickname) }} -

- {{ form_row(registration_form.email) }} -

- {{ form_row(registration_form.password) }} -

- {{ form_row(registration_form.register) }} -
- {{ form_end(registration_form) }} +
+ {{ form_start(registration_form) }} +
+ +

{{ "Register a new account" | trans }}

+ +
    + {% for flashError in app.flashes('verify_email_error') %} + + {% endfor %} +
+ {{ form_row(registration_form.nickname) }} + {{ form_row(registration_form.email) }} + {{ form_row(registration_form.password) }} + {{ form_row(registration_form.register) }} +
+ {{ form_end(registration_form) }} +
{% endblock body %} diff --git a/templates/sidepanel/right/right.html.twig b/templates/sidepanel/right/right.html.twig index 78d57d9cbd..6400530779 100644 --- a/templates/sidepanel/right/right.html.twig +++ b/templates/sidepanel/right/right.html.twig @@ -15,20 +15,20 @@
{{ form_start(post_form) }} - + {{ form_label(post_form.to) }} {{ form_widget(post_form.to) }} - {{ form_row(post_form.visibility, {'attr': {'class': 'form-scope'}}) }} + {{ form_row(post_form.visibility, {'attr': {'class': 'section-form-scope'}}) }} - {{ form_row(post_form.content, {'attr': {'class': 'form-input'}}) }} + {{ form_row(post_form.content, {'attr': {'class': 'section-form-textarea'}}) }} -