Various admin theme fixes

admin.php

@@ -498,6 +498,7 @@ class AdminPlugin extends Plugin
         $theme_url = '/' . ltrim($this->grav['locator']->findResource('plugin://admin/themes/' . $this->theme,
             false), '/');
         $twig->twig_vars['theme_url'] = $theme_url;
+        $twig->twig_vars['preset_url'] = $twig->twig_vars['preset_url'] ?? $theme_url;
         $twig->twig_vars['base_url'] = $twig->twig_vars['base_url_relative'];
         $twig->twig_vars['base_path'] = GRAV_ROOT;
         $twig->twig_vars['admin'] = $this->admin;

themes/grav/scss/template/_admin.scss

@@ -753,7 +753,6 @@ body.sidebar-quickopen #admin-main {
 
             @include breakpoint(mobile-only) {
                 margin: -1rem 0 1rem 0;
-                width: 100%;
                 padding: 0 1rem;
                 text-align: center;
 
@@ -771,6 +770,15 @@ body.sidebar-quickopen #admin-main {
             float: none;
             display: flex;
 
+            @include breakpoint(mobile-only) {
+                &.stats-bar {
+                    font-size: 90%;
+                    b {
+                        font-size: 1.5rem;
+                    }
+                }
+            }
+
             .button {
                 margin: 0;
 

themes/grav/scss/template/_forms.scss

@@ -21,12 +21,22 @@ form {
         padding: 1.5rem 3rem;
     }
 
+    .nowrap {
+        white-space: nowrap;
+    }
+
     .form-description {
         p {
             padding: 0;
         }
     }
 
+    .button {
+        @include breakpoint(mobile-only) {
+            padding: 0.25rem 0.5rem;
+        }
+    }
+
     .form-field {
         margin-bottom: 1rem;
         padding-left: $padding-default;
@@ -726,12 +736,11 @@ textarea.frontmatter {
         border-radius: 2px;
     }
 
+    .badge {
+        white-space: nowrap;
+    }
+
     tr {
-        & > th {
-            &:last-child {
-                min-width: 220px;
-            }
-        }
 
         &.deleting {
             background: #efefef;
@@ -755,5 +764,9 @@ form .cron-job-list, form .backups-list {
 
     .form-field.grid {
         width: calc(50% - 5px);
+
+        @include breakpoint(mobile-only) {
+            width: 100%;
+        }
     }
 }

themes/grav/scss/template/_tools.scss

@@ -34,7 +34,10 @@
             margin-right: 1rem;
 
             h1 {
-                padding: 0;
+                padding: 0rem;
+                @include breakpoint(mobile-only) {
+                    font-size: 1.1rem;
+                }
             }
         }
     }

themes/grav/scss/template/_typography.scss

@@ -1,6 +1,9 @@
 // Body Base
 body {
 	font-weight: 400;
+    @include breakpoint(mobile-only) {
+        font-size: 0.8rem;
+    }
 }
 
 // Headings

themes/grav/templates/forms/fields/backupshistory/backupshistory.html.twig

@@ -21,10 +21,10 @@
             {% set backup_delete = delete_url|replace({'%BACKUP_FILE': encoded_name}) %}
             <tr>
                 <td>{{ loop.index }}</td>
-                <td style="white-space: nowrap;"> <i class="fa fa-clock-o"></i> {{ backup.date }}</td>
+                <td> <i class="fa fa-clock-o"></i> {{ backup.date|date }}</td>
                 <td>{{ backup.title }}</td>
                 <td class="right pad">{{ backup.size|nicefilesize }}</td>
-                <td class="right pad">
+                <td class="right pad nowrap" >
                     <a class="button button-small hint--bottom" href="{{ grav.backups.getBackupDownloadUrl(backup.path, admin.base) }}" data-hint="Download"><i class="fa fa-download"></i></a>
                     <span class="button button-small danger hint--bottom" data-hint="Delete" data-ajax="{{ backup_delete }}"><i class="fa fa-close"></i></span>
                 </td>

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

@@ -1,6 +1,6 @@
 {% do assets.addCss(theme_url~'/css-compiled/nucleus.css') %}
 {% do assets.addCss(theme_url~'/css-compiled/template.css') %}
-{% do assets.addCss(theme_url~'/css-compiled/preset.css') %}
+{% do assets.addCss(preset_url~'/css-compiled/preset.css') %}
 {% if config.plugins.admin.google_fonts %}
     {% do assets.addCss(theme_url~'/css-compiled/fonts.css') %}
 {% else %}