[TWIG][CSS] More consistent classes. Checkbox styling done. Register and Login pages now done.

config/packages/twig.yaml

@@ -0,0 +1,2 @@
+twig:
+  form_themes: ['form_div_layout.html.twig']

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,

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;

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;
-}

public/assets/icons/check-off.svg

@@ -0,0 +1,5 @@
+<!-- https://github.com/primer/octicons -->
+<!-- MIT License -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+    <path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM0 8a8 8 0 1116 0A8 8 0 010 8zm11.78-1.72a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z"></path>
+</svg>

public/assets/icons/heart.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 32 32">
+<svg xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 32 32" width="32" height="32">
     <path d="M16.02 7.719v-.01l.001-.03.003-.05.005-.069.009-.088.013-.107a4.722 4.722 0 01.042-.268l.031-.159a7.458 7.458 0 01.207-.786 7.65 7.65 0 01.162-.469 7.931 7.931 0 01.206-.506 10.03 10.03 0 01.56-1.082c.055-.093.113-.184.172-.277a11.076 11.076 0 01.384-.551 10.974 10.974 0 01.437-.538 9.665 9.665 0 01.489-.514 8.79 8.79 0 01.54-.479A7.882 7.882 0 0120.83.755a6.871 6.871 0 01.688-.283 7.036 7.036 0 011.088-.287 6.743 6.743 0 011.135-.107 7.148 7.148 0 012.688.49 7.506 7.506 0 01.741.329 8.35 8.35 0 011.058.64 7.866 7.866 0 01.657.519c.106.092.21.187.311.285s.201.198.299.301a9.553 9.553 0 01.555.646 9.644 9.644 0 01.716 1.069 8.62 8.62 0 01.392.768 9.294 9.294 0 01.446 1.218 8.625 8.625 0 01.198.846 8.937 8.937 0 01.13 2.184 9.444 9.444 0 01-.174 1.33 11.73 11.73 0 01-.218.885 11.786 11.786 0 01-.885 2.179 13.702 13.702 0 01-.478.852 17.219 17.219 0 01-.833 1.252 19.77 19.77 0 01-.622.816 24.181 24.181 0 01-.668.802 41.264 41.264 0 01-.706.788 44.134 44.134 0 01-1.111 1.156l-.38.379-.383.376-.385.373-.386.37-.386.367-.386.365-.384.362-.381.359-.377.357-.372.354-.366.351-.36.349-.352.346-.344.343a52.916 52.916 0 00-1.282 1.338 27.889 27.889 0 00-1.103 1.272 27.34 27.34 0 00-.477.605l-.219.293a23.976 23.976 0 00-.397.567c-.062.092-.121.183-.179.272s-.113.177-.166.264l-.153.255c-.049.083-.095.166-.14.246a8.059 8.059 0 00-.242.464 8.263 8.263 0 00-.195.423 6.85 6.85 0 00-.151.377l-.061.17c-.019.055-.036.107-.051.158l-.043.145-.035.131-.028.117a2.744 2.744 0 00-.021.104l-.016.089c-.005.027-.008.052-.011.075l-.007.06-.004.045-.002.03v.015c0 .002 0 .003 0 0v-.015l-.002-.03-.004-.045-.007-.06-.011-.075c-.004-.028-.01-.057-.016-.089a3.86 3.86 0 00-.127-.497l-.051-.158c-.018-.055-.039-.111-.061-.17a9.318 9.318 0 00-.151-.377 8.392 8.392 0 00-.195-.423c-.036-.074-.075-.15-.115-.227s-.083-.156-.127-.237-.091-.163-.14-.246a12.277 12.277 0 00-.319-.519 13.981 13.981 0 00-.371-.552l-.205-.287a17.549 17.549 0 00-.696-.898l-.257-.311a33.058 33.058 0 00-.846-.961 29.77 29.77 0 00-.621-.662 50.15 50.15 0 00-.661-.676l-.344-.343-.352-.346-.36-.349-.366-.351-.372-.354-.377-.357-.381-.359-.383-.362-.386-.365-.386-.367-.386-.37-.385-.373-.383-.376a67.892 67.892 0 01-.756-.761l-.371-.385a32.92 32.92 0 01-.721-.781 25.993 25.993 0 01-1.017-1.198 19.411 19.411 0 01-.622-.816 16.332 16.332 0 01-.57-.831 17.219 17.219 0 01-.51-.845 12.657 12.657 0 01-.445-.859 12.857 12.857 0 01-.532-1.308 10.175 10.175 0 01-.258-.882 11.73 11.73 0 01-.178-.886 9.63 9.63 0 01-.106-1.769 9.185 9.185 0 01.141-1.302A8.948 8.948 0 011.72 3.632a9.553 9.553 0 01.525-.674 9.444 9.444 0 01.584-.617 9.197 9.197 0 01.634-.553 9.092 9.092 0 01.678-.483 8.497 8.497 0 01.714-.408 7.275 7.275 0 01.741-.329A7.38 7.38 0 017.899.084c.129-.006.257-.008.385-.006s.255.007.382.015a6.841 6.841 0 011.485.264 7.036 7.036 0 011.044.398 7.88 7.88 0 01.652.35 7.066 7.066 0 01.609.408 7.882 7.882 0 01.828.702 8.55 8.55 0 01.926 1.052 10.037 10.037 0 01.556.828 9.758 9.758 0 011.096 2.668 12.389 12.389 0 01.07.334 6.117 6.117 0 01.042.268c.005.039.01.074.013.107l.009.088.005.069.003.05.001.03v.01z"/>
 </svg>

public/assets/icons/menu.svg.twig

@@ -1,3 +1,5 @@
+<!-- https://github.com/primer/octicons -->
+<!-- MIT License -->
 <svg class="{{ iconClass|default('') }}" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
 <title>Open left sidepanel.</title>
 <path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z"/>

templates/security/login.html.twig

@@ -9,12 +9,17 @@
 
 {% block body %}
     <div class='content'>
-        <form method="post">
+        <section class="section-widget">
+            <form class="section-widget-form" method="post">
                 <fieldset>
-                <legend>{{ "Login" | trans }}</legend>
+                    <legend class="section-form-legend"><h1>{{ "Login" | trans }}</h1></legend>
 
                     {% if error %}
-                    <div class="alert alert-danger">{{ error.messageKey | trans(error.messageData, 'security') }}</div>
+                        <ul>
+                            {% for flashError in app.flashes('verify_email_error') %}
+                                <li class="alert alert-danger">{{ error.messageKey | trans(error.messageData, 'security') }}</li>
+                            {% endfor %}
+                        </ul>
                     {% endif %}
 
                     {% if app.user %}
@@ -26,25 +31,30 @@
                         </h1>
                     {% else %}
                         {# TODO: Login can be done with email, so the id's and stuff should reflect that, along with using the translation facilities #}
-                    <label for="inputNickname">{{ "Nickname or Email" | trans }}</label>
+                        <div>
+                            <label class="section-form-label" for="inputNickname">{{ "Nickname or Email" | trans }}</label>
                             <input type="text" value="{{ last_login_id }}" name="nickname" id="inputNickname" class="form-control" required autofocus>
-                {% endif %}
+                            <p class="help-text">{{ "Your nickname." | trans }}</p>
-
+                        </div>
-                <label for="inputPassword">{{ "Password" | trans }}</label>
+                        <div>
+                            <label class="section-form-label" for="inputPassword">{{ "Password" | trans }}</label>
                             <input type="password" name="password" id="inputPassword" class="form-control" required>
+                            <p class="help-text">{{ "Your account's password." | trans }}</p>
+                        </div>
 
-                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
+                        <span class="checkbox mb-3">
-
-                <p class="checkbox mb-3">
                             <label>{{ "Remember me" | trans }}</label>
                             <input type="checkbox" name="_remember_me">
-                </p>
+                        </span>
 
-                <button class="btn btn-lg btn-primary" type="submit">
+                        <div>
-                    Sign in
+                            <button class="btn btn-lg btn-primary" type="submit">Sign in</button>
-                </button>
+                        </div>
+                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
+                    {% endif %}
                 </fieldset>
             </form>
+        </section>
     </div>
 {% endblock body %}
 

templates/security/register.html.twig

@@ -9,22 +9,24 @@
 
 {% block body %}
     <div class='content'>
-        {% for flashError in app.flashes('verify_email_error') %}
+        <section class="section-widget">
-            <div class="alert alert-danger" role="alert">{{ flashError }}</div>
-        {% endfor %}
-
             {{ form_start(registration_form) }}
-        <fieldset>
+                <fieldset class="section-widget-form">
-            <legend>Register a new account</legend>
+                    <legend class="section-form-legend">
+                        <h1>{{ "Register a new account" | trans }}</h1>
+                    </legend>
+                    <ul>
+                        {% for flashError in app.flashes('verify_email_error') %}
+                            <li class="alert alert-danger" role="alert">{{ flashError }}</li>
+                        {% endfor %}
+                    </ul>
                     {{ form_row(registration_form.nickname) }}
-            <p></p>
                     {{ form_row(registration_form.email) }}
-            <p></p>
                     {{ form_row(registration_form.password) }}
-            <p></p>
                     {{ form_row(registration_form.register) }}
                 </fieldset>
             {{ form_end(registration_form) }}
+        </section>
     </div>
 {% endblock body %}
 

templates/sidepanel/right/right.html.twig

@@ -15,20 +15,20 @@
             <div class="section-form">
                 {{ form_start(post_form) }}
 
-                <span class="form-target">
+                <span class="section-form-target">
                     {{ form_label(post_form.to) }}
                     {{ form_widget(post_form.to) }}
                 </span>
 
-                {{ 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'}}) }}
 
-                <label for="{{ post_form.attachments.vars.id }}" class="form-options">
+                <label for="{{ post_form.attachments.vars.id }}" class="section-form-options">
                     {{ form_widget(post_form.attachments) }}
                 </label>
 
-                {{ form_row(post_form.post, {'attr': {'class': 'form-send'}}) }}
+                {{ form_row(post_form.post, {'attr': {'class': 'section-form-send'}}) }}
 
                 {{ form_end(post_form) }}
             </div>