Add more pages in the WebUI

webui/src/components/dashboard/PanelEntry.vue

@@ -1,9 +1,9 @@
 <template>
-  <q-card flat bordered>
+  <q-card flat bordered v-bind:class="['panel-entry', {'panel-entry-detail':type === 'detail'}, {'panel-entry-focus':focus}, {'panel-entry-ex-size':exSize}]">
     <q-card-section>
       <div class="row items-center no-wrap">
         <div class="col">
-          <div class="text-subtitle2 text-uppercase text-center text-app-grey" style="letter-spacing: 3px;">{{name}}</div>
+          <div class="text-subtitle2">{{name}}</div>
         </div>
       </div>
     </q-card-section>
@@ -16,10 +16,41 @@
 <script>
 export default {
   name: 'PanelEntry',
-  props: ['address', 'name']
+  props: ['address', 'name', 'type', 'focus', 'exSize']
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  @import "../../css/sass/variables";
 
+  .panel-entry {
+    .text-subtitle2 {
+      font-weight: 600;
+      letter-spacing: 3px;
+      color: $app-text-grey;
+      text-transform: uppercase;
+      text-align: center;
+    }
+    &-detail{
+      .text-subtitle2 {
+        font-size: 11px;
+        font-weight: 600;
+        line-height: 11px;
+        text-align: left;
+      }
+      .text-h3 {
+        font-size: 16px;
+        text-align: left;
+        line-height: 16px;
+      }
+    }
+    &-focus {
+      border: solid 2px $accent;
+    }
+    &-ex-size{
+      .text-h3 {
+        font-size: 22px;
+      }
+    }
+  }
 </style>