feat: admin dashboard UI

ux/public/_assets/icons/fluent-female-working-with-a-laptop.svg

+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><radialGradient id="Yp1l7K9iBwNMskNzQGNbda" cx="23.764" cy="100.187" r="13.162" gradientTransform="matrix(.9728 0 0 -.9728 .653 115.634)" gradientUnits="userSpaceOnUse"><stop offset=".376" stop-color="#261103"/><stop offset=".68" stop-color="#431d06"/><stop offset="1" stop-color="#662c09"/></radialGradient><path fill="url(#Yp1l7K9iBwNMskNzQGNbda)" d="M24,6.587c-9.615,0-12,15.526-12,15.526c0,2.764,1.284,5.186,3.972,5.827	C18.274,28.49,21.172,29,24,29s5.726-0.51,8.028-1.059C34.716,27.299,36,24.877,36,22.114C36,22.113,33.615,6.587,24,6.587z"/><linearGradient id="Yp1l7K9iBwNMskNzQGNbdb" x1="24" x2="24" y1="96.599" y2="108.435" gradientTransform="matrix(1 0 0 -1 0 118)" gradientUnits="userSpaceOnUse"><stop offset=".125" stop-color="#ffdb80"/><stop offset=".141" stop-color="#fed97c"/><stop offset=".449" stop-color="#f4bf3b"/><stop offset=".594" stop-color="#f0b421"/></linearGradient><path fill="url(#Yp1l7K9iBwNMskNzQGNbdb)" d="M24,4.866c-3.455,0-7,2.525-7,9.991c0,0.598,0,4.571,0,5.21C17,22.733,21.2,26,24,26	s7-3.266,7-5.933c0-0.639,0-4.612,0-5.21C31,7.391,27.455,4.866,24,4.866z"/><radialGradient id="Yp1l7K9iBwNMskNzQGNbdc" cx="17.431" cy="114.563" r="29.854" gradientTransform="matrix(1 0 0 -1 0 118)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c26715"/><stop offset=".508" stop-color="#b85515"/><stop offset="1" stop-color="#ad3f16"/></radialGradient><path fill="url(#Yp1l7K9iBwNMskNzQGNbdc)" d="M24,3c-4.789,0-5.538,2.769-5.538,2.769C16.515,6.056,12,6.692,12,21.903	c0,3.509,2.357,4.797,3,5.172C12.6,13.816,20,18,19,8c3.735,10.904,14.39-0.335,14,18.754c1.113-0.846,3-2.545,3-4.852	C36,9.159,30.83,3,24,3z"/><linearGradient id="Yp1l7K9iBwNMskNzQGNbdd" x1="23.451" x2="26.26" y1="96.713" y2="73.8" gradientTransform="matrix(1 0 0 -1 0 118)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8795a1"/><stop offset="1" stop-color="#6d7882"/></linearGradient><path fill="url(#Yp1l7K9iBwNMskNzQGNbdd)" d="M40,21H8c-1.173,0-2.094,1.005-1.992,2.173l1.652,19C7.75,43.207,8.615,44,9.652,44h28.695	c1.037,0,1.903-0.793,1.992-1.827l1.652-19C42.094,22.005,41.173,21,40,21z"/><path fill="#a3b3c2" d="M26.476,36h-4.953c-0.129,0-0.236-0.099-0.246-0.227l-0.282-3.506C20.984,32.123,21.098,32,21.242,32	h5.516c0.144,0,0.258,0.123,0.246,0.267l-0.282,3.506C26.712,35.901,26.605,36,26.476,36z"/></svg>
\ No newline at end of file

ux/src/components/HeaderNav.vue

@@ -55,10 +55,10 @@ q-header.bg-header.text-white.site-header(
       )
       q-space
       transition(name='syncing')
-        q-spinner-rings(
+        q-spinner-tail(
           v-show='siteStore.routerLoading'
           color='accent'
-          size='34px'
+          size='24px'
         )
       q-btn.q-ml-md(
         flat

ux/src/layouts/AdminLayout.vue

@@ -17,10 +17,10 @@ q-layout.admin(view='hHh Lpr lff')
       q-toolbar(style='height: 64px;', dark)
         q-space
         transition(name='syncing')
-          q-spinner-rings(
+          q-spinner-tail(
             v-show='siteStore.routerLoading'
             color='accent'
-            size='34px'
+            size='24px'
           )
         q-btn.q-ml-md(flat, dense, icon='las la-times-circle', label='Exit' color='pink', to='/')
         account-menu

ux/src/pages/AdminDashboard.vue

@@ -7,6 +7,82 @@ q-page.admin-dashboard
       .text-h5.text-primary.animated.fadeInLeft {{ t('admin.dashboard.title') }}
       .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.dashboard.subtitle') }}
   .row.q-px-md.q-col-gutter-md
+    .col-3
+      q-card.shadow-1
+        q-card-section.admin-dashboard-card
+          img(src='/_assets/icons/fluent-change-theme.svg')
+          div
+            strong Sites
+            span 4
+        q-separator
+        q-card-actions(align='right')
+          q-btn(
+            flat
+            color='primary'
+            icon='las la-plus'
+            label='New'
+            )
+          q-separator.q-mx-sm(vertical)
+          q-btn(
+            flat
+            color='primary'
+            icon='las la-sitemap'
+            label='Manage'
+            to='/_admin/sites'
+            )
+    .col-3
+      q-card.shadow-1
+        q-card-section.admin-dashboard-card
+          img(src='/_assets/icons/fluent-account.svg')
+          div
+            strong Users
+            span 123
+        q-separator
+        q-card-actions(align='right')
+          q-btn(
+            flat
+            color='primary'
+            icon='las la-plus'
+            label='New'
+            )
+          q-separator.q-mx-sm(vertical)
+          q-btn(
+            flat
+            color='primary'
+            icon='las la-users'
+            label='Manage'
+            to='/_admin/users'
+            )
+    .col-3
+      q-card.shadow-1
+        q-card-section.admin-dashboard-card
+          img(src='/_assets/icons/fluent-female-working-with-a-laptop.svg')
+          div
+            strong Logins
+            small 45 / last 24h
+        q-separator
+        q-card-actions(align='right')
+          q-btn(
+            flat
+            color='primary'
+            icon='las la-chart-area'
+            label='Analytics'
+            )
+    .col-3
+      q-card.shadow-1
+        q-card-section.admin-dashboard-card
+          img(src='/_assets/icons/fluent-ssd-animated.svg')
+          div
+            strong Storage
+            small Operational
+        q-separator
+        q-card-actions(align='right')
+          q-btn(
+            flat
+            color='primary'
+            icon='las la-server'
+            label='Manage'
+            )
     .col-12
       q-banner.bg-positive.text-white(
         inline-actions
@@ -24,6 +100,9 @@ q-page.admin-dashboard
             label='System Info'
             to='/_admin/system'
             )
+    .col-12
+      q-card.shadow-1
+        q-card-section ---
 
 //- v-container(fluid, grid-list-lg)
 //-   v-layout(row, wrap)
@@ -149,48 +228,39 @@ useMeta({
 
 <style lang='scss'>
 
-.dashboard-card {
-  display: flex;
-  width: 100%;
-  border-radius: 7px;
-
-  .v-card__text {
-    overflow: hidden;
-    position: relative;
-  }
-}
-
-.dashboard-contribute {
-  background-color: #FFF;
-  background-image: linear-gradient(to bottom, #FFF 0%, lighten($indigo-1, 3%) 100%);
-  border-radius: 7px;
-
-  @at-root .theme--dark & {
-    background-color: $grey-8;
-    background-image: linear-gradient(to bottom, $grey-8 0%, darken($grey-8, 6%) 100%);
-  }
-
-  .v-card__text {
+.admin-dashboard {
+  &-card {
     display: flex;
     align-items: center;
-    color: $indigo !important;
 
-    @at-root .theme--dark & {
-      color: $grey-4 !important;
+    img {
+      width: 64px;
+      margin-right: 12px;
     }
-  }
-}
 
-.v-icon.dashboard-icon {
-  position: absolute !important;
-  right: 0;
-  top: 12px;
-  font-size: 100px !important;
-  opacity: .25;
+    strong {
+      font-size: 1.1rem;
+      font-weight: 300;
+      display: block;
+      line-height: 1.2rem;
+      padding-left: 2px;
+    }
+
+    span {
+      font-size: 2rem;
+      line-height: 2rem;
+      font-weight: 500;
+      color: $secondary;
+      display: block;
+    }
 
-  @at-root .v-application--is-rtl & {
-    left: 0;
-    right: initial;
+    small {
+      font-size: 1.4rem;
+      line-height: 2rem;
+      font-weight: 400;
+      color: $positive;
+      display: block;
+    }
   }
 }