refactor: make debug component look a bit better

src/client/app/components/Debug.vue

@@ -1,55 +1,93 @@
 <template>
-  <div class="debug" :class="{ open }" @click="open = !open">
+  <div class="debug" :class="{ open }" ref="el" @click="open = !open">
-    <pre>debug</pre>
+    <p class="title">Debug</p>
-    <pre>$page {{ $page }}</pre>
+
-    <pre>$siteByRoute {{ $siteByRoute }}</pre>
+    <pre class="block">$page {{ $page }}</pre>
-    <pre>$site {{ $site }}</pre>
+    <pre class="block">$siteByRoute {{ $siteByRoute }}</pre>
+    <pre class="block">$site {{ $site }}</pre>
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { ref } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 
-export default {
+export default defineComponent({
   setup() {
+    const el = ref<HTMLElement | null>(null)
     const open = ref(false)
+
+    watch(open, (value) => {
+      if (value === false) {
+        el.value!.scrollTop = 0
+      }
+    })
+
     return {
+      el,
       open
     }
   }
-}
+})
 </script>
 
-<style>
+<style scoped>
 .debug {
   box-sizing: border-box;
   position: fixed;
-  z-index: 999;
+  right: 8px;
-  cursor: pointer;
+  bottom: 8px;
-  bottom: 0;
+  z-index: 9999;
-  right: 0;
+  border-radius: 4px;
-  width: 80px;
+  width: 74px;
-  height: 30px;
+  height: 32px;
-  padding: 5px;
-  overflow: hidden;
   color: #eeeeee;
+  overflow: hidden;
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, .85);
   transition: all .15s ease;
-  background-color: rgba(0,0,0,0.85);
+}
+
+.debug:hover {
+  background-color: rgba(0, 0, 0, .75);
 }
 
 .debug.open {
-  width: 500px;
+  right: 0;
+  bottom: 0;
+  width: 100%;
   height: 100%;
   margin-top: 0;
+  border-radius: 0;
   padding: 0 0;
   overflow: scroll;
 }
 
-.debug pre {
+@media (min-width: 512px) {
+  .debug.open {
+    width: 512px;
+  }
+}
+
+.debug.open:hover {
+  background-color: rgba(0, 0, 0, .85);
+}
+
+.title {
+  margin: 0;
+  padding: 6px 16px 6px;
+  line-height: 20px;
+  font-size: 13px;
+}
+
+.block {
+  margin: 2px 0 0;
+  border-top: 1px solid rgba(255, 255, 255, .16);
+  padding: 8px 16px;
   font-family: Hack, monospace;
   font-size: 13px;
-  margin: 0;
+}
-  padding: 5px 10px;
+
-  border-bottom: 1px solid #eee;
+.block +.block {
+  margin-top: 8px;
 }
 </style>