fix: legacy page view

client/components/admin/admin-extensions.vue

@@ -13,7 +13,7 @@
               v-alert.mb-4(outlined, color='error', icon='mdi-alert')
                 span New extensions cannot be installed at the moment. This feature is coming in a future release.
               v-expansion-panels.admin-extensions-exp(hover, popout)
-                v-expansion-panel(v-for='ext of extensions')
+                v-expansion-panel(v-for='ext of extensions', :key='`ext-` + ext.key')
                   v-expansion-panel-header(disable-icon-rotate)
                     span {{ext.title}}
                     template(v-slot:actions)
@@ -49,6 +49,7 @@ export default {
       config: {},
       extensions: [
         {
+          key: 'git',
           title: 'Git',
           description: 'Distributed version control system. Required for the Git storage module.',
           platforms: {
@@ -61,6 +62,7 @@ export default {
           installed: true
         },
         {
+          key: 'pandoc',
           title: 'Pandoc',
           description: 'Convert between markup formats. Required for converting from other formats such as MediaWiki, AsciiDoc, Textile and other wikis.',
           platforms: {
@@ -73,6 +75,7 @@ export default {
           installed: false
         },
         {
+          key: 'puppeteer',
           title: 'Puppeteer',
           description: 'Headless chromium browser for server-side rendering. Required for generating PDF versions of pages and render content elements on the server (e.g. Mermaid diagrams)',
           platforms: {
@@ -85,6 +88,7 @@ export default {
           installed: false
         },
         {
+          key: 'sharp',
           title: 'Sharp',
           description: 'Process and transform images. Required to generate thumbnails of uploaded images and perform transformations.',
           platforms: {

client/scss/legacy.scss

@@ -1,11 +1,39 @@
 @import "global";
 
 @import "./base/icons.scss";
+@import "./fonts/default.scss";
+@import '~katex/dist/katex.min.css';
+@import '~@mdi/font/css/materialdesignicons.css';
+
+.mdi {
+  font-family: 'Material Design Icons', sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-flex;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
 
 html {
   box-sizing: border-box;
   background-color: mc('grey', '50');
-  font-size: 14px;
+  font-size: 15px;
 }
 *, *:before, *:after {
   box-sizing: inherit;
@@ -197,7 +225,7 @@ body {
   display: flex;
   align-items: stretch;
   min-height: calc(100vh - 64px);
-  height: 50vh;
+  height: 100%;
 
   &-container {
     flex-grow: 1;
@@ -205,10 +233,12 @@ body {
 }
 
 .sidebar {
-  width: 300px;
+  width: 256px;
   background-color: mc('blue', '700');
   color: #FFF;
   padding: 8px 0;
+  align-self: stretch;
+  flex-shrink: 0;
 
   .sidebar-link {
     height: 40px;
@@ -226,7 +256,7 @@ body {
     }
   }
 
-  i.material-icons {
+  i.mdi {
     width: 56px;
     padding-left: 8px;
   }
@@ -343,4 +373,5 @@ body {
 
 .contents {
   flex-grow: 1;
+  padding: 24px !important;
 }