eliseuamaro/gnu-social
1
0
Fork 0
forked from GNUsocial/gnu-social
Code Issues Pull Requests 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 caab08b017
commit d38bf8ff4c
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;
} }

20
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;
max-width: 500px;
} }
.cropper-view-box,
.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 %}