[UI] Cropping avatar as a circle, proper preview done
This commit is contained in:
rainydaysavings
parent
574fb38225
commit
774383a3c1
GPG Key ID:
7D0C7EAFC9D835A0
@ -80,10 +80,8 @@
|
||||
.icon-avatar {
|
||||
order: 1;
|
||||
height: calc(5 * var(--unit-size));
|
||||
weight: auto;
|
||||
width: 25%;
|
||||
calc(5 * var(--unit-size));
|
||||
margin-right: var(--small-size);
|
||||
clip-path: circle(2.5em at center);
|
||||
}
|
||||
|
||||
.info {
|
||||
|
||||
@ -90,9 +90,8 @@
|
||||
.icon-avatar {
|
||||
order: 1;
|
||||
height: calc(5 * var(--unit-size));
|
||||
width: 25%;
|
||||
width: calc(5 * var(--unit-size));
|
||||
margin-right: var(--small-size);
|
||||
clip-path: circle(2.5em at center);
|
||||
}
|
||||
|
||||
.info {
|
||||
|
||||
@ -90,9 +90,8 @@
|
||||
.icon-avatar {
|
||||
order: 1;
|
||||
height: calc(5 * var(--unit-size));
|
||||
width: 5em;
|
||||
width: calc(5 * var(--unit-size));
|
||||
margin-right: var(--small-size);
|
||||
clip-path: circle(2.5em at center);
|
||||
}
|
||||
|
||||
.info {
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
margin-top: calc(5 * var(--main-size));
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: var(--nav-size);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.content div {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
@ -226,9 +226,17 @@ select {
|
||||
max-width: 100%;
|
||||
}
|
||||
#img-container {
|
||||
display: flex;
|
||||
margin-top: var(--main-size);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 500px;
|
||||
}
|
||||
margin: var(--main-size) auto;
|
||||
max-width: 60%;
|
||||
}
|
||||
.cropper-view-box,
|
||||
.cropper-face {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #f6f6f6;
|
||||
padding: var(--small-size);
|
||||
border: none;
|
||||
border-radius: var(--small-size);
|
||||
}
|
||||
|
||||
@ -224,9 +224,17 @@ select {
|
||||
max-width: 100%;
|
||||
}
|
||||
#img-container {
|
||||
display: flex;
|
||||
margin-top: var(--main-size);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 500px;
|
||||
margin: var(--main-size) auto;
|
||||
max-width: 80%;
|
||||
}
|
||||
.cropper-view-box,
|
||||
.cropper-face {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #f6f6f6;
|
||||
padding: var(--small-size);
|
||||
border: none;
|
||||
border-radius: var(--small-size);
|
||||
}
|
||||
@ -225,9 +225,17 @@ select {
|
||||
max-width: 100%;
|
||||
}
|
||||
#img-container {
|
||||
display: flex;
|
||||
margin-top: var(--main-size);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 500px;
|
||||
margin: var(--main-size) auto;
|
||||
max-width: 80%;
|
||||
}
|
||||
.cropper-view-box,
|
||||
.cropper-face {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #f6f6f6;
|
||||
padding: var(--small-size);
|
||||
border: none;
|
||||
border-radius: var(--small-size);
|
||||
}
|
||||
@ -29,6 +29,6 @@
|
||||
No notices here.
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock body %}
|
||||
|
||||
{% block javascripts %}{% endblock %}
|
||||
|
||||
@ -1,61 +1,63 @@
|
||||
{% extends 'left/left.html.twig' %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login.css') }}">
|
||||
{{ parent() }}
|
||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block title %}Log in!{% endblock %}
|
||||
|
||||
{% 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>
|
||||
</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 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>
|
||||
</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>
|
||||
<a href="{{ path('register') }}" class='hover-effect {{ active('register') }}'>Register</a>
|
||||
</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>
|
||||
<a href="{{ path('register') }}" class='hover-effect {{ active('register') }}'>Register</a>
|
||||
</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 %}
|
||||
@ -20,3 +20,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endblock form %}
|
||||
|
||||
{% block javascripts %}
|
||||
<script type="text/javascript" src="{{ asset('assets/javascript/cropping.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user