[UI] Register and Login rework
This commit is contained in:
rainydaysavings
parent
e8d03e70ea
commit
a9b614bbdd
GPG Key ID:
7D0C7EAFC9D835A0
|
|
@ -1,66 +1,68 @@
|
|||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: var(--nav-size);
|
||||
margin-right: 0;
|
||||
margin-bottom: var(--unit-size);
|
||||
}
|
||||
|
||||
form {
|
||||
font-size: var(--medium-size);
|
||||
background-color: #00000050;
|
||||
padding: calc(2 * var(--unit-size)) calc(3 * var(--unit-size)) calc(3 * var(--unit-size));
|
||||
background-color: #61778C30;
|
||||
padding: calc(2 * var(--unit-size));
|
||||
border-radius: var(--unit-size);
|
||||
margin-top: calc(2 * var(--unit-size));
|
||||
margin-right: var(--side-margin);
|
||||
margin-left: var(--side-margin);
|
||||
margin-right: var(--small-size);
|
||||
margin-left: var(--small-size);
|
||||
box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
h1 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: var(--main-size);
|
||||
margin-bottom: var(--medium-size);
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: var(--unit-size);
|
||||
}
|
||||
input[type=text],
|
||||
input[type=password]
|
||||
input[type=password],
|
||||
input[type=email]
|
||||
{
|
||||
margin-top: calc(var(--unit-size) * 0.5);
|
||||
background-color: rgba(0, 0, 0, 0.30);
|
||||
color: #f6f6f6;
|
||||
border-style: none;
|
||||
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
|
||||
padding: calc(var(--unit-size) * 0.5);
|
||||
border-radius: calc(var(--unit-size) * 0.5);
|
||||
font-size: var(--medium-size);
|
||||
margin-bottom: var(--unit-size);
|
||||
width: calc(100% - var(--unit-size));
|
||||
}
|
||||
|
||||
.pair {
|
||||
float:left;
|
||||
width: 100%;
|
||||
margin-bottom: var(--medium-size);
|
||||
}
|
||||
.pair input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.checkbox label {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: var(--medium-size);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #F6F6F6 !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
input {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 1300px) {
|
||||
.navbar:not(:checked)+.navbar {
|
||||
left: -100%;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
#toggle:checked+.navbar {
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,67 +0,0 @@
|
|||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.content form {
|
||||
font-size: var(--medium-size);
|
||||
background-color: #00000050;
|
||||
padding: calc(2 * var(--unit-size)) calc(3 * var(--unit-size)) calc(3 * var(--unit-size));
|
||||
border-radius: var(--unit-size);
|
||||
margin-top: calc(2 * var(--unit-size));
|
||||
margin-right: var(--side-margin);
|
||||
margin-left: var(--side-margin);
|
||||
box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
.content h1 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: var(--main-size);
|
||||
margin-bottom: var(--medium-size);
|
||||
}
|
||||
|
||||
.content label {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pair input[type=text],
|
||||
.pair input[type=password]
|
||||
{
|
||||
margin-top: calc(var(--unit-size) * 0.5);
|
||||
background-color: rgba(0, 0, 0, 0.30);
|
||||
color: #f6f6f6;
|
||||
border-style: none;
|
||||
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
|
||||
border-radius: calc(var(--unit-size) * 0.5);
|
||||
font-size: var(--medium-size);
|
||||
}
|
||||
|
||||
.pair {
|
||||
float:left;
|
||||
width: 100%;
|
||||
margin-bottom: var(--medium-size);
|
||||
}
|
||||
.pair input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.checkbox label {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: var(--medium-size);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #F6F6F6 !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
input {
|
||||
filter: none;
|
||||
}
|
||||
|
|
@ -1,65 +1,51 @@
|
|||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: var(--unit-size);
|
||||
}
|
||||
|
||||
form {
|
||||
font-size: var(--medium-size);
|
||||
background-color: #00000050;
|
||||
padding: calc(2 * var(--unit-size)) calc(3 * var(--unit-size)) calc(3 * var(--unit-size));
|
||||
background-color: #61778C30;
|
||||
padding: calc(2 * var(--unit-size));
|
||||
border-radius: var(--unit-size);
|
||||
margin-top: calc(2 * var(--unit-size));
|
||||
margin-right: var(--side-margin);
|
||||
margin-left: var(--side-margin);
|
||||
margin-right: var(--small-size);
|
||||
margin-left: var(--small-size);
|
||||
box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
h1 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: var(--main-size);
|
||||
margin-bottom: var(--medium-size);
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: var(--unit-size);
|
||||
}
|
||||
input[type=text],
|
||||
input[type=password]
|
||||
input[type=password],
|
||||
input[type=email]
|
||||
{
|
||||
margin-top: calc(var(--unit-size) * 0.5);
|
||||
background-color: rgba(0, 0, 0, 0.30);
|
||||
color: #f6f6f6;
|
||||
border-style: none;
|
||||
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
|
||||
padding: calc(var(--unit-size) * 0.5);
|
||||
border-radius: calc(var(--unit-size) * 0.5);
|
||||
font-size: var(--medium-size);
|
||||
margin-bottom: var(--unit-size);
|
||||
width: calc(100% - var(--unit-size));
|
||||
}
|
||||
|
||||
.pair {
|
||||
float:left;
|
||||
width: 100%;
|
||||
margin-bottom: var(--medium-size);
|
||||
}
|
||||
.pair input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.checkbox label {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: var(--medium-size);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #F6F6F6 !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
input {
|
||||
filter: none;
|
||||
}
|
||||
|
|
@ -2,45 +2,60 @@
|
|||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login.css') }}" media="screen and (min-width: 1300px)">
|
||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login_mid.css') }}" media="screen and (max-width: 1300px)">
|
||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login_small.css') }}" media="screen and (max-width: 750px)">
|
||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block title %}Log in!{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class='content'>
|
||||
<form method="post">
|
||||
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
|
||||
{% if error %}
|
||||
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
|
||||
{% endif %}
|
||||
{% block left %}
|
||||
<div id='left-panel'>
|
||||
<input type="checkbox" checked id="toggle">
|
||||
<div class="icon-menu">
|
||||
<label for="toggle" id='menu'></label>
|
||||
</div>
|
||||
<div class='navbar'>
|
||||
<div class="left-nav">
|
||||
<a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
|
||||
<div class='content'>
|
||||
<form method="post">
|
||||
{% if error %}
|
||||
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
|
||||
{% endif %}
|
||||
|
||||
{% if app.user %}
|
||||
<div class="mb-3">
|
||||
You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a>
|
||||
{% if app.user %}
|
||||
<div class="mb-3">
|
||||
You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="register-info">
|
||||
<label for="inputNickname">Nickname</label>
|
||||
<input type="text" value="{{ last_username }}" name="nickname" id="inputNickname" class="form-control" required autofocus>
|
||||
<label for="inputPassword">Password</label>
|
||||
<input type="password" name="password" id="inputPassword" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
|
||||
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" name="_remember_me"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-lg btn-primary" type="submit">
|
||||
Sign in
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class='pair'>
|
||||
<label for="inputNickname">Nickname</label>
|
||||
<input type="text" value="{{ last_username }}" name="nickname" id="inputNickname" class="form-control" required autofocus>
|
||||
<a href="{{ path('register') }}" class='hover-effect {{ active('register') }}'>Register</a>
|
||||
</div>
|
||||
<div class='pair' id='pass'>
|
||||
<label for="inputPassword">Password</label>
|
||||
<input type="password" name="password" id="inputPassword" class="form-control" required>
|
||||
<div class="footer">
|
||||
<a href="{{ path('doc_faq') }}" class='hover-effect {{ active('doc_faq') }}'>FAQ</a>
|
||||
<a href="{{ path('doc_tos') }}" class='hover-effect {{ active('doc_tos') }}'>TOS</a>
|
||||
<a href="{{ path('doc_privacy') }}" class='hover-effect {{ active('doc_privacy') }}'>Privacy</a>
|
||||
<a href="{{ path('doc_source') }}" class='hover-effect {{ active('doc_source') }}'>Source</a>
|
||||
<a href="{{ path('doc_version') }}" class='hover-effect {{ active('doc_version') }}'>Version</a>
|
||||
</div>
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
|
||||
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" name="_remember_me"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-lg btn-primary" type="submit">
|
||||
Sign in
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock body %}
|
||||
{% endblock %}
|
||||
|
|
@ -1,16 +1,39 @@
|
|||
{% extends 'base.html.twig' %}
|
||||
{% extends 'left/left.html.twig' %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/register/register.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block title %}Register{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
{% for flashError in app.flashes('verify_email_error') %}
|
||||
<div class="alert alert-danger" role="alert">{{ flashError }}</div>
|
||||
{% endfor %}
|
||||
{% block left %}
|
||||
<div id='left-panel'>
|
||||
<input type="checkbox" checked id="toggle">
|
||||
<div class="icon-menu">
|
||||
<label for="toggle" id='menu'></label>
|
||||
</div>
|
||||
<div class='navbar'>
|
||||
<div class="left-nav">
|
||||
<a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
|
||||
<a href="{{ path('register') }}" class='hover-effect {{ active('register') }}'>Register</a>
|
||||
<div class='content'>
|
||||
{% for flashError in app.flashes('verify_email_error') %}
|
||||
<div class="alert alert-danger" role="alert">{{ flashError }}</div>
|
||||
{% endfor %}
|
||||
|
||||
<h1>Register</h1>
|
||||
|
||||
<div style="position: relative; top: 10em; left: 20em;">
|
||||
{{ form(registration_form) }}
|
||||
<div class="register-info">
|
||||
{{ form(registration_form) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a href="{{ path('doc_faq') }}" class='hover-effect {{ active('doc_faq') }}'>FAQ</a>
|
||||
<a href="{{ path('doc_tos') }}" class='hover-effect {{ active('doc_tos') }}'>TOS</a>
|
||||
<a href="{{ path('doc_privacy') }}" class='hover-effect {{ active('doc_privacy') }}'>Privacy</a>
|
||||
<a href="{{ path('doc_source') }}" class='hover-effect {{ active('doc_source') }}'>Source</a>
|
||||
<a href="{{ path('doc_version') }}" class='hover-effect {{ active('doc_version') }}'>Version</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue