[TWIG][CSS] More consistent classes. Checkbox styling done. Register and Login pages now done.
This commit is contained in:
Eliseu Amaro
Hugo Sales
parent
44a581f0f6
commit
c81795eb96
2
config/packages/twig.yaml
Normal file
2
config/packages/twig.yaml
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
twig:
|
||||
form_themes: ['form_div_layout.html.twig']
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
5
public/assets/icons/check-off.svg
Normal file
5
public/assets/icons/check-off.svg
Normal 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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -9,42 +9,52 @@
|
|||
|
||||
{% block body %}
|
||||
<div class='content'>
|
||||
<form method="post">
|
||||
<fieldset>
|
||||
<legend>{{ "Login" | trans }}</legend>
|
||||
<section class="section-widget">
|
||||
<form class="section-widget-form" method="post">
|
||||
<fieldset>
|
||||
<legend class="section-form-legend"><h1>{{ "Login" | trans }}</h1></legend>
|
||||
|
||||
{% if error %}
|
||||
<div class="alert alert-danger">{{ error.messageKey | trans(error.messageData, 'security') }}</div>
|
||||
{% endif %}
|
||||
{% if error %}
|
||||
<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 %}
|
||||
<h1 class="mb-3">
|
||||
{{ "You are logged in as" | trans }} {{ app.user.username }}.
|
||||
<button class="btn btn-lg btn-primary">
|
||||
<a href="{{ path('app_logout') }}">{{ "Logout" | trans }}</a>
|
||||
</button>
|
||||
</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>
|
||||
<input type="text" value="{{ last_login_id }}" name="nickname" id="inputNickname" class="form-control" required autofocus>
|
||||
{% endif %}
|
||||
{% if app.user %}
|
||||
<h1 class="mb-3">
|
||||
{{ "You are logged in as" | trans }} {{ app.user.username }}.
|
||||
<button class="btn btn-lg btn-primary">
|
||||
<a href="{{ path('app_logout') }}">{{ "Logout" | trans }}</a>
|
||||
</button>
|
||||
</h1>
|
||||
{% else %}
|
||||
{# TODO: Login can be done with email, so the id's and stuff should reflect that, along with using the translation facilities #}
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<label for="inputPassword">{{ "Password" | trans }}</label>
|
||||
<input type="password" name="password" id="inputPassword" class="form-control" required>
|
||||
<span class="checkbox mb-3">
|
||||
<label>{{ "Remember me" | trans }}</label>
|
||||
<input type="checkbox" name="_remember_me">
|
||||
</span>
|
||||
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
|
||||
|
||||
<p class="checkbox mb-3">
|
||||
<label>{{ "Remember me" | trans }}</label>
|
||||
<input type="checkbox" name="_remember_me">
|
||||
</p>
|
||||
|
||||
<button class="btn btn-lg btn-primary" type="submit">
|
||||
Sign in
|
||||
</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
<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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
{{ form_start(registration_form) }}
|
||||
<fieldset>
|
||||
<legend>Register a new account</legend>
|
||||
{{ 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 class="section-widget">
|
||||
{{ form_start(registration_form) }}
|
||||
<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) }}
|
||||
{{ form_row(registration_form.email) }}
|
||||
{{ form_row(registration_form.password) }}
|
||||
{{ form_row(registration_form.register) }}
|
||||
</fieldset>
|
||||
{{ form_end(registration_form) }}
|
||||
</section>
|
||||
</div>
|
||||
{% endblock body %}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user