GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[UI] Cropping avatar as a circle, proper preview done

Browse Source
This commit is contained in:
rainydaysavings 2020-07-28 17:08:08 +01:00 committed by Hugo Sales
parent 574fb38225
commit 774383a3c1
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
10 changed files with 106 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/assets/css/left/left.css
View File

@ -80,10 +80,8 @@
.icon-avatar { .icon-avatar {
order: 1; order: 1;
height: calc(5 * var(--unit-size)); height: calc(5 * var(--unit-size));
weight: auto; calc(5 * var(--unit-size));
width: 25%;
margin-right: var(--small-size); margin-right: var(--small-size);
clip-path: circle(2.5em at center);
} }
.info { .info {

3
public/assets/css/left/left_mid.css
View File

@ -90,9 +90,8 @@
.icon-avatar { .icon-avatar {
order: 1; order: 1;
height: calc(5 * var(--unit-size)); height: calc(5 * var(--unit-size));
width: 25%; width: calc(5 * var(--unit-size));
margin-right: var(--small-size); margin-right: var(--small-size);
clip-path: circle(2.5em at center);
} }
.info { .info {

3
public/assets/css/left/left_small.css
View File

@ -90,9 +90,8 @@
.icon-avatar { .icon-avatar {
order: 1; order: 1;
height: calc(5 * var(--unit-size)); height: calc(5 * var(--unit-size));
width: 5em; width: calc(5 * var(--unit-size));
margin-right: var(--small-size); margin-right: var(--small-size);
clip-path: circle(2.5em at center);
} }
.info { .info {

7
public/assets/css/network/public.css
View File

@ -1,9 +1,14 @@
.content { .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(3 * var(--main-size)); margin-top: calc(5 * var(--main-size));
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: var(--nav-size); margin-left: var(--nav-size);
margin-right: 0; margin-right: 0;
} }
.content div {
width: 100%;
text-align: center;
}

18
public/assets/css/settings/settings.css
View File

@ -226,9 +226,17 @@ select {
max-width: 100%; max-width: 100%;
} }
#img-container { #img-container {
display: flex; margin: var(--main-size) auto;
margin-top: var(--main-size); max-width: 60%;
margin-left: auto; }
margin-right: auto; .cropper-view-box,
max-width: 500px; .cropper-face {
border-radius: 50%;
}
button {
background-color: #f6f6f6;
padding: var(--small-size);
border: none;
border-radius: var(--small-size);
} }

18
public/assets/css/settings/settings_mid.css
View File

@ -224,9 +224,17 @@ select {
max-width: 100%; max-width: 100%;
} }
#img-container { #img-container {
display: flex; margin: var(--main-size) auto;
margin-top: var(--main-size); max-width: 80%;
margin-left: auto; }
margin-right: auto; .cropper-view-box,
max-width: 500px; .cropper-face {
border-radius: 50%;
}
button {
background-color: #f6f6f6;
padding: var(--small-size);
border: none;
border-radius: var(--small-size);
} }

18
public/assets/css/settings/settings_small.css
View File

@ -225,9 +225,17 @@ select {
max-width: 100%; max-width: 100%;
} }
#img-container { #img-container {
display: flex; margin: var(--main-size) auto;
margin-top: var(--main-size); max-width: 80%;
margin-left: auto; }
margin-right: auto; .cropper-view-box,
max-width: 500px; .cropper-face {
border-radius: 50%;
}
button {
background-color: #f6f6f6;
padding: var(--small-size);
border: none;
border-radius: var(--small-size);
} }

2
templates/network/public.html.twig
View File

@ -29,6 +29,6 @@
No notices here. No notices here.
{% endif %} {% endif %}
</div> </div>
{% endblock %} {% endblock body %}
{% block javascripts %}{% endblock %} {% block javascripts %}{% endblock %}

102
templates/security/login.html.twig
View File

@ -1,61 +1,63 @@
{% extends 'left/left.html.twig' %} {% extends 'left/left.html.twig' %}
{% block stylesheets %} {% block stylesheets %}
{{ parent() }} {{ parent() }}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login.css') }}"> <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login.css') }}">
{% endblock %} {% endblock %}
{% block title %}Log in!{% endblock %} {% block title %}Log in!{% endblock %}
{% block left %} {% block left %}
<div id='left-panel'> <div id='left-panel'>
<input type="checkbox" checked id="toggle"> <input type="checkbox" checked id="toggle">
<div class="icon-menu"> <div class="icon-menu">
<label for="toggle" id='menu'></label> <label for="toggle" id='menu'></label>
</div> </div>
<div class='navbar'> <div class='navbar'>
<div class="left-nav"> <div class="left-nav">
<a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a> <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
<div class='content'> <div class='content'>
<form method="post"> <form method="post">
{% if error %} {% if error %}
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div> <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %} {% endif %}
{% if app.user %} {% if app.user %}
<div class="mb-3"> <div class="mb-3">
You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a> You are logged in as {{ app.user.username }}, <a
</div> href="{{ path('app_logout') }}">Logout</a>
{% endif %} </div>
<div class="register-info"> {% endif %}
<label for="inputNickname">Nickname</label> <div class="register-info">
<input type="text" value="{{ last_username }}" name="nickname" id="inputNickname" class="form-control" required autofocus> <label for="inputNickname">Nickname</label>
<label for="inputPassword">Password</label> <input type="text" value="{{ last_username }}" name="nickname" id="inputNickname"
<input type="password" name="password" id="inputPassword" class="form-control" required> class="form-control" required autofocus>
</div> <label for="inputPassword">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" required>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"> </div>
<div class="checkbox mb-3"> <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
<label>
<input type="checkbox" name="_remember_me"> Remember me <div class="checkbox mb-3">
</label> <label>
</div> <input type="checkbox" name="_remember_me"> Remember me
</label>
<button class="btn btn-lg btn-primary" type="submit"> </div>
Sign in
</button> <button class="btn btn-lg btn-primary" type="submit">
</form> 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> </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>
</div>
{% endblock %} {% endblock %}

4
templates/settings/avatar.html.twig
View File

@ -20,3 +20,7 @@
</div> </div>
</div> </div>
{% endblock form %} {% endblock form %}
{% block javascripts %}
<script type="text/javascript" src="{{ asset('assets/javascript/cropping.js') }}"></script>
{% endblock %}