[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;
+.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_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

@@ -24,12 +24,14 @@
 
                         {% if app.user %}
                             <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
+                                        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>
+                            <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>

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 %}