Logo fixes

themes/grav/scss/preset.scss

@@ -310,6 +310,11 @@ tr {
 
     h1 {
         background-color: $logo-bg;
+
+        &.text-logo {
+            color: $logo-link;
+        }
+
         svg {
             path:first-child {
                 fill: darken($logo-bg, 3%);

themes/grav/scss/template/_admin.scss

@@ -20,8 +20,15 @@ $content-padding: 1.5rem;
                     font-size: 2.5rem;
                 }
             }
+        }
 
+        .custom-logo {
+            margin-right: 0;
+            padding-right: 15px;
 
+            img {
+                padding: 0 5px;
+            }
         }
 
         #grav-logo-small {
@@ -175,8 +182,6 @@ $content-padding: 1.5rem;
         border-top-right-radius: 3px;
         border-bottom-right-radius: 3px;
 
-
-
         @include breakpoint(large-desktop-plus) {
             .fa-angle-right:before {
                 content: "\f104";
@@ -212,32 +217,50 @@ $content-padding: 1.5rem;
 
 #admin-logo {
     height: $topbar-height;
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.nav-hover {
+        .admin-logo {
+            margin-right: 0;
+        }
+    }
 
     .admin-logo {
-        a:not(.front-end) {
+        margin-right: -10px;
-            display: inline-block;
-            vertical-align: middle;
-            width: 20%;
-            padding-right: 1rem;
 
-            &:first-child {
+        @include breakpoint(tablet-plus) {
-                width: 70%;
+            margin-right: 0;
-                padding-right: 0;
+            &.custom-logo {
-                @include breakpoint(mobile-only) {
+
-                    width: 100%;
+                padding-right: 15px;
+
+                img {
+                    padding: 0 5px;
                 }
             }
+        }
 
-            .fa {
+        display: flex;
-                display: block;
+        align-items: center;
-                margin-top: -5px;
+        
+        a:not(.front-end) {
+            display: inherit;
+        }
+
+        &.custom-logo {
+            img {
+                max-height: 30px;
             }
         }
     }
 
     .front-end {
 
+        margin-left: 15px;
+        opacity: 0.6;
+
         @include breakpoint(mobile-only) {
             display: none;
         }
@@ -253,10 +276,8 @@ $content-padding: 1.5rem;
     }
 
     #grav-logo-small {
-        max-width: 100%;
         height: 30px;
         display: none;
-        margin: 18px 0;
 
         @include breakpoint(tablet-plus) {
             display: inline-block;
@@ -268,9 +289,7 @@ $content-padding: 1.5rem;
     }
 
     #grav-logo-large {
-        max-width: 100%;
         height: 30px;
-        margin: 18px 0;
 
         @include breakpoint(tablet-plus) {
             display: none;
@@ -282,11 +301,8 @@ $content-padding: 1.5rem;
     }
 
     h3 {
-        margin: 0 15px 0 0;
-        @extend %vertical-align;
-        text-align: center;
         font-size: 1.5rem;
-
+        margin: 0;
 
         @include breakpoint(tablet-plus) {
             font-size: 0;

themes/grav/scss/template/_login.scss

@@ -8,7 +8,10 @@
 
         h1 {
             height: 100px;
-            background-size: 40% !important;
+
+            &.custom-logo img {
+                height: 80px;
+            }
         }
 
         form {
@@ -95,9 +98,24 @@
         margin: 0;
         overflow: hidden;
 
-        svg {
+        display: flex;
-            height: 320px;
+        align-items: center;
-            margin-top: -50px;
+        justify-content: center;
+
+        &.text-logo {
+            font-size: 4rem;
+        }
+
+        &.custom-logo {
+            img {
+                max-height: 160px;
+            }
+        }
+
+        &.default-logo {
+            svg {
+                height: 320px;
+            }
         }
     }
 

themes/grav/templates/partials/login-logo.html.twig

@@ -0,0 +1,14 @@
+{% if config.plugins.admin.logo_text %}
+    <h1 class="text-logo">
+        {{ config.plugins.admin.logo_text }}
+    </h1>
+{% else %}
+    <h1 class="{{ custom_login_logo ? 'custom-logo' : 'default-logo' }}">
+        {{ title }}
+        {% if custom_login_logo %}
+            <img src="{{ url(custom_login_logo) }}" title="Login" />
+        {% else %}
+            {% include('@admin-images/logo.svg') %}
+        {% endif %}
+    </h1>
+{% endif %}

themes/grav/templates/partials/login.html.twig

@@ -6,10 +6,7 @@
 <body id="admin-login-wrapper">
     <section id="admin-login" class="login-box-shadow {{ classes }}">
 
-        <h1>
+        {% include 'partials/login-logo.html.twig' %}
-            {{ title }}
-            {% include('@admin-images/logo.svg') %}
-        </h1>
 
         {% include 'partials/messages.html.twig' %}
 

themes/grav/templates/partials/logo.html.twig

@@ -1,20 +1,20 @@
 {% if config.plugins.admin.logo_text %}
-<h3>
+    <h3>
-	<a href="{{ base_url_relative }}">
+        <a href="{{ base_url_relative }}">
-		{{ config.plugins.admin.logo_text }}
+            {{ config.plugins.admin.logo_text }}
-	</a>
+        </a>
-	<a class="front-end hint--left" data-hint="{{ "PLUGIN_ADMIN.VIEW_SITE_TIP"|tu }}" target="_blank" href="{{ base_url_relative_frontend }}"> <i class="fa fa-bookmark-o"></i></a>
+        <a class="front-end hint--left" data-hint="{{ "PLUGIN_ADMIN.VIEW_SITE_TIP"|tu }}" target="_blank" href="{{ base_url_relative_frontend }}"> <i class="fa fa-external-link"></i></a>
-</h3>
+    </h3>
 {% else %}
-<div class="admin-logo">
+    <div class="admin-logo {{ custom_admin_logo ? 'custom-logo' : 'default-logo' }}">
-	<a href="{{ base_url_relative }}">
+        <a href="{{ base_url_relative }}">
-        {% include('@admin-images/grav-small.svg') %}
+            {% if custom_admin_logo %}
-        {% include('@admin-images/grav-regular.svg') %}
+                <img src="{{ url(custom_admin_logo) }}" title="{{ site.title }}" />
-	</a>
+            {% else %}
-	<a class="front-end hint--left" data-hint="{{ "PLUGIN_ADMIN.VIEW_SITE_TIP"|tu }}" target="_blank" href="{{ base_url_relative_frontend }}"> <i class="fa fa-external-link"></i></a>
+                {% include('@admin-images/grav-small.svg') %}
-</div>
+                {% include('@admin-images/grav-regular.svg') %}
+            {% endif %}
+        </a>
+        <a class="front-end hint--left" data-hint="{{ "PLUGIN_ADMIN.VIEW_SITE_TIP"|tu }}" target="_blank" href="{{ base_url_relative_frontend }}"> <i class="fa fa-external-link"></i></a>
+    </div>
 {% endif %}
-
-
-
-

themes/grav/templates/partials/nav.html.twig

@@ -1,10 +1,11 @@
+{% set nav_hover = config.plugins.admin.sidebar.activate == 'hover' %}
 {% if authorize(['admin.login', 'admin.super']) %}
     <nav id="admin-sidebar" data-quickopen="{{ config.plugins.admin.sidebar.activate == 'hover' ? 'true' : 'false' }}" data-quickopen-delay="{{ config.plugins.admin.sidebar.hover_delay }}">
-        {% if config.plugins.admin.sidebar.activate != 'hover' %}
-            <div id="open-handle" data-sidebar-toggle><i class="fa fa-angle-right"></i></div>
-        {% endif %}
 
-        <div id="admin-logo">
+        <div id="admin-logo" class="{{ nav_hover ? 'nav-hover' }}">
+            {% if not nav_hover %}
+                <div id="open-handle" data-sidebar-toggle><i class="fa fa-angle-right"></i></div>
+            {% endif %}
             {% include 'partials/logo.html.twig' %}
         </div>
 

themes/grav/templates/partials/register.html.twig

@@ -4,9 +4,7 @@
 {% block body %}
 <body id="admin-login-wrapper">
     <section id="admin-login" class="default-glow-shadow {{ classes }}">
-        <h1>
+        {% include 'partials/login-logo.html.twig' %}
-            {{ title }}
-        </h1>
 
         {% include 'partials/messages.html.twig' %}
 
@@ -21,4 +19,4 @@
         </form>
     </section>
 </body>
-{% endblock %}
+{% endblock %}