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

public/assets/css/left/left.css

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

public/assets/css/left/left_mid.css

@@ -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 {

public/assets/css/left/left_small.css

@@ -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 {

public/assets/css/network/public.css

@@ -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;
 }

public/assets/css/settings/settings.css

@@ -226,9 +226,17 @@ select {
       max-width: 100%;
 }
 #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);
+}

public/assets/css/settings/settings_mid.css

@@ -224,9 +224,17 @@ select {
       max-width: 100%;
 }
 #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);
+}

public/assets/css/settings/settings_small.css

@@ -225,9 +225,17 @@ select {
       max-width: 100%;
 }
 #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);
 }

templates/network/public.html.twig

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

templates/security/login.html.twig

@@ -1,61 +1,63 @@
 {% extends 'left/left.html.twig' %}
 
 {% 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 %}
 
 {% block title %}Log in!{% endblock %}
 
 {% 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>
-        <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 %}

templates/settings/avatar.html.twig

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