styles: Upgraded Backoffice user-panel and admin-menu sub-nav items

Author: roadiz-ci

src/Resources/app/less/login/login.less

@@ -115,38 +115,27 @@
         width: @login-BarW;
         height: 70px;
         background-color: var(--accent-color);
-        top: 0px; left: 0;
+        top: 0; left: 0;
         text-align: center;
 
         @media (min-width: @screen-sm-min) {
             height: 116px;
         }
 
-        &:before {
-            content: "";
-            display: inline-block;
-            height: 100%;
-            vertical-align: middle;
-
-        }
-
         .uk-icon-rz-roadiz-icon {
             vertical-align: middle;
             display: inline-block;
             font-size: 55px;
         }
 
-        picture,
-        img,
-        svg,
-        object {
-            position: relative;
-            max-width: 80%;
-            height: auto;
-            max-height: 100px;
-            vertical-align: middle;
-            display: inline-block;
-            width: auto;
+        img, svg, object {
+            display: block;
+            height: 100%;
+            width: 100%;
+            object-fit: contain;
+            object-position: center;
+            margin: 0 auto;
+            padding: 10px;
         }
     }
 

src/Resources/app/less/panels/entries_panel/admin_entries.less

@@ -154,25 +154,32 @@
                 &:before, &:after {
                     display: none;
                 }
-                i {
-                    font-size: 20px;
-                }
                 & > a {
-                    padding: 5px 10px 5px 7px;
+                    padding: 0;
+                    display: flex;
+                    gap: 10px;
+                    align-items: center;
+                }
+                i {
+                    font-size: 16px;
+                    width: 16px;
                 }
                 .info {
-                    display: inline-block;
-                     background-color: transparent;
-                     height: 43px;
-                     line-height: 43px;
-                     left: 28px;
-                     font-size: @default-font-size;
-                     color: var(--admin-entries-subnav-text-color);
-                     .box-shadow(0px 0px 0px rgba(0,0,0,0));
+                    display: block;
+                    position: relative;
+                    background-color: transparent;
+                    height: auto;
+                    line-height: 1.2em;
+                    left: 0;
+                    padding: 5px 0;
+                    white-space: normal;
+                    font-size: @default-font-size;
+                    color: var(--admin-entries-subnav-text-color);
+                    .box-shadow(0px 0px 0px rgba(0,0,0,0));
 
-                     &:after {
-                        display: none;
-                     }
+                    &:after {
+                       display: none;
+                    }
                 }
                 &:hover {
                     background-color: #F5F5F5;

src/Resources/app/less/panels/user_panel/user_panel.less

@@ -24,6 +24,10 @@
         transition: font-size ease 1s;
     }
 
+    h1, h2, h3, h4, h5, h6 {
+        padding: 0 10px;
+    }
+
     &-container{
         padding-bottom:0;
 
@@ -34,17 +38,12 @@
 
     .uk-icon-button {
         text-shadow: 0 1px 0 rgba(0,0,0,.8);
-        font-size: 16px;
-        line-height: 34px;
+        font-size: 12px;
+        width: 30px;
+        height: 30px;
+        line-height: 29px;
         opacity: 0.3;
 
-        @media (min-width: @screen-sm-min) and (max-width: @screen-md-max) {
-            font-size: 12px;
-            width: 30px;
-            height: 30px;
-            line-height: 29px;
-        }
-
         &:hover {
             opacity: 0.8;
         }
@@ -109,8 +108,6 @@
     }
 
     @media screen and (max-width: @screen-lg-max) {
-        width:90px;
-
         #cms-version {
             a {
                 display: block;
@@ -125,12 +122,12 @@
 }
 
 .user-actions {
-    padding: 15px 0px;
+    padding: 15px 10px;
 
     @media (max-width: @screen-xs-max) {
         display: block;
-        position:fixed;
-        top:50px;
+        position: fixed;
+        top: 50px;
         right:0;
         bottom:0;
         width:80%;
@@ -154,31 +151,24 @@
     .box-sizing();
     padding: 0;
 
-    &:before {
-        content:"";
-        display: inline-block;
-        vertical-align: middle;
-        height: 100%;
-    }
-
     a {
+        position: relative;
         font-size: 55px;
         color: #333333;
-        display: inline-block;
+        display: block;
         text-decoration: none;
-        opacity: 0.95;
-        transition: opacity ease 0.5s;
-        padding-left: 0px;
-        width: 99%; // on Firefox, prevent line-return
-        vertical-align: middle;
+        padding: 0;
+        height: 100%;
+        width: 100%;
 
         img, svg, object {
             display: block;
-            max-width: 95%;
-            height: auto;
-            width: auto;
-            max-height: 110px;
+            height: 100%;
+            width: 100%;
+            object-fit: contain;
+            object-position: center;
             margin: 0 auto;
+            padding: 10px;
         }
 
         &:hover {
@@ -201,14 +191,14 @@
     }
 
     .user-actions {
-        border-top: 1px solid var(--user-panel-border-color);
-
         @media (min-width: @screen-sm-min) {
+            margin: 20px 0 0 0;
+            border-top: 1px solid var(--user-panel-border-color);
             display: flex;
-            flex-wrap: wrap;
+            flex-direction: column;
             align-items: center;
             justify-content: center;
-            gap: 5px;
+            gap: 10px;
         }
     }
 
@@ -244,15 +234,6 @@
     &:hover  {
         border: 3px solid #333;
     }
-    @media (max-width: @screen-lg-max) {
-        width:56px;
-        height:56px;
-
-        img{
-            width:56px;
-            height:56px;
-        }
-    }
 }
 #cms-version {
     position: absolute;

src/Resources/app/less/vars.less

@@ -73,14 +73,15 @@
 
 /* -------- PANEL SIZES -------- */
 
-@user-panel-width: 150px;
+@user-panel-width: 90px;
 @user-panel-sm-width: 90px;
-@user-panel-lg-width: 120px;
-@user-panel-xl-width: 150px;
+@user-panel-lg-width: 90px;
+@user-panel-xl-width: 90px;
 
 @entries-panel-width: 60px;
 @entries-panel-lg-width: 70px;
 @entries-panel-xl-width: 70px;
+
 @trees-panel-width: 270px;
 @trees-panel-lg-width: 270px;
 @trees-panel-xl-width: 350px;
@@ -92,8 +93,8 @@
 @user-panel-color: #4d4d4d;
 @user-panel-text-color: #d8d8d8;
 @user-panel-text-alt-color: #b7b7b7;
-@user-picture-size: 80px;
-@user-picture-size-mini: 70px;
+@user-picture-size: 56px;
+@user-picture-size-mini: 56px;
 @user-panel-border-color: rgba(199,199,204, 0.14);
 
 

src/Resources/views/admin/blocks/adminImage.html.twig

@@ -1,6 +1,6 @@
 <div id="company">
     {% if themeServices.adminImage %}
-        <a class="admin-image" href="{{ path('adminHomePage') }}">{{ themeServices.adminImage|display({width:150}) }}</a>
+        <a class="admin-image" href="{{ path('adminHomePage') }}">{{- themeServices.adminImage|display({ picture: true, width: 180, quality: 70 }) -}}</a>
     {% else %}
         <a class="uk-icon-rz-roadiz-icon" href="{{ path('adminHomePage') }}"></a>
     {% endif %}

src/Resources/views/admin/blocks/loginImage.html.twig

@@ -1,6 +1,6 @@
 <div id="login-logo">
     {% if themeServices.adminImage %}
-        {{ themeServices.adminImage|display({width:150}) }}
+        {{- themeServices.adminImage|display({ picture: true, width: 200, quality: 70 }) -}}
     {% else %}
         <i class="uk-icon-rz-roadiz-icon"></i>
     {% endif %}

src/Resources/views/panels/user_panel.html.twig

@@ -10,26 +10,32 @@
     {% include '@RoadizRozier/admin/blocks/adminImage.html.twig' %}
     <div class="user-actions-menu">
         {% if app.user and app.user.id %}
-            <a id="user-picture" href="{{ path('usersEditPage', {'id':app.user.id }) }}">
+            <a id="user-picture"
+               data-uk-tooltip="{animation:true}"
+               title="{{ app.user.identifier }}"
+               href="{{ path('usersEditPage', {'id':app.user.id }) }}"
+            >
                 <img width="200"
                      height="200"
                      class="uk-thumbnail"
                      src="{{ app.user.pictureUrl }}"
                      alt="{{ app.user.identifier }}" />
             </a>
-            <h3 class="mobile-hidden">{{ "hello.%name%"|trans({'%name%': app.user.identifier}) }}</h3>
         {% elseif app.user %}
             {% set displayName = app.user.nickname|default(app.user.givenName|default(app.user.name)) %}
             {% if app.user.picture %}
-                <span id="user-picture">
+                <span
+                    id="user-picture"
+                    title="{{ displayName }}"
+                    data-uk-tooltip="{animation:true}"
+                >
                     <img width="200"
                          height="200"
                          class="uk-thumbnail"
                          src="{{ app.user.picture }}"
                          alt="{{ displayName }}" />
                 </span>
             {% endif %}
-            <h3 class="mobile-hidden">{{ "hello.%name%"|trans({'%name%': displayName }) }}</h3>
         {% endif %}
         <nav class="user-actions">
             <a class="uk-icon-button uk-icon-rz-earth"

src/Resources/views/partials/js-inject.html.twig

@@ -1,5 +1,5 @@
 
-<script src="{{ asset('js/vendor.e61f574696a873492b95.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/vendor.8ad668c89c46f8e422da.js', 'Rozier') }}" defer type="text/javascript"></script>
 
-<script src="{{ asset('js/app.e61f574696a873492b95.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/app.8ad668c89c46f8e422da.js', 'Rozier') }}" defer type="text/javascript"></script>
 

src/Resources/views/partials/simple-js-inject.html.twig

@@ -1,3 +1,3 @@
 
-<script src="{{ asset('js/simple.e61f574696a873492b95.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/simple.8ad668c89c46f8e422da.js', 'Rozier') }}" defer type="text/javascript"></script>