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

This commit is contained in:
Eliseu Amaro 2021-08-16 21:59:19 +01:00 committed by Hugo Sales
parent 44a581f0f6
commit c81795eb96
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
10 changed files with 198 additions and 126 deletions

View File

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

View File

@ -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,

View File

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

View File

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

View File

@ -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>

After

Width:  |  Height:  |  Size: 376 B

View File

@ -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>

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -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"/>

Before

Width:  |  Height:  |  Size: 368 B

After

Width:  |  Height:  |  Size: 433 B

View File

@ -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 %}
<label for="inputPassword">{{ "Password" | trans }}</label>
<p class="help-text">{{ "Your nickname." | trans }}</p>
</div>
<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') }}">
<p class="checkbox mb-3">
<span 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">
Sign in
</button>
<div>
<button class="btn btn-lg btn-primary" type="submit">Sign in</button>
</div>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
{% endif %}
</fieldset>
</form>
</section>
</div>
{% endblock body %}

View File

@ -9,22 +9,24 @@
{% block body %}
<div class='content'>
{% for flashError in app.flashes('verify_email_error') %}
<div class="alert alert-danger" role="alert">{{ flashError }}</div>
{% endfor %}
<section class="section-widget">
{{ form_start(registration_form) }}
<fieldset>
<legend>Register a new account</legend>
<fieldset class="section-widget-form">
<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 %}

View File

@ -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>