Version 0.2.1

components/blocks/Options.vue

@@ -11,10 +11,12 @@ const mailTemplate = `I've just found a bug on ${config.url} and would like to r
 }%0D%0ABuild date: ${
   config.build.date
 }%0D%0ATimestamp: ${new Date().toISOString()}%0D%0A%0D%0A%0D%0ASteps to reproduce:%0D%0A{ Explain in detail what happened here, or attach a video/screenshot }%0D%0A%0D%0AAdditional information:%0D%0A{ Helpful information, such as developer console output / Leave empty if none }%0D%0A%0D%0A%0D%0A// Keep in mind that it's just a template, you can change it as you wish! :)`
+
+const pages = storeToRefs(usePageStore())
 </script>
 
 <template>
-  <VDialog>
+  <VDialog width="auto">
     <template #activator="{ props }">
       <div v-bind="props" class="options clickable">
         <img
@@ -27,48 +29,69 @@ const mailTemplate = `I've just found a bug on ${config.url} and would like to r
     </template>
     <template #default="{ isActive }">
       <VCard>
+        <img
+          draggable="false"
+          :src="pearlIcon"
+          alt="Pearl"
+          class="icon-badge user-select-none"
+        />
+
         <template #title>
           <h3 class="alex text-align-center">Site options</h3>
         </template>
+
         <div class="overlay background"></div>
-        <VCardText class="overlay content">
-          <img
-            draggable="false"
-            :src="pearlIcon"
-            alt="Pearl"
-            class="icon-badge user-select-none"
-          />
+        <template #text>
+          <p class="center mb-3">
+            This tab is experimental and isn't ready for production.
+            <em>I was too lazy to exclude it from the build.</em><br />
+            <strong>Features provided here may or may not work.</strong>
+          </p>
+
           <div>
-            <div class="row">
-              <div class="col-12 col-sm-6">
+            <VRow>
+              <VCol>
+                <strong>Theme</strong>
+                <p>Available in all flavors, vanilla and chocolate.</p>
+                <VBtn variant="flat" color="secondary" @click="theme.toggle()">
+                  Toggle theme
+                </VBtn>
+              </VCol>
+              <VCol>
+                <strong>Animation</strong>
                 <p>
-                  <strong>Theme</strong><br />
-                  Available in all flavors, vanilla and chocolate.
-                </p>
-              </div>
-              <div class="col-12 col-sm-6">
-                <p>
-                  <strong>Animation</strong><br />
                   Some computers may have issues rendering that gorgeous
-                  background animation. Enabling it substantially increases
-                  power consumption.
+                  background animation. Disabling it substantially decreases
+                  power consumption, but also makes the website less cool.
                 </p>
-              </div>
-            </div>
+                <VBtn
+                  variant="flat"
+                  color="primary"
+                  @click="pages.animate.value = !pages.animate.value"
+                >
+                  Stop animation
+                </VBtn>
+              </VCol>
+            </VRow>
           </div>
-          <EMail
-            class="link-hi"
-            :address="`contact@${fqdn}`"
-            :cc="`admin@${fqdn}`"
-            :subject="`Bug report: ${fqdn}`"
-            :body="mailTemplate"
-          >
-            <strong>Report a bug</strong>
-          </EMail>
-        </VCardText>
-        <VCardActions>
-          <VSpacer></VSpacer>
-          <VBtn color="danger" @click="theme.toggle()" />
+          <span class="mt-3">
+            Since you're so curious and thus here, why not report a bug from the
+            production environment behind this tab?<br />
+            It will greatly help me improve the website!
+            <EMail
+              class="link-hi"
+              :address="`contact@${fqdn}`"
+              :cc="`admin@${fqdn}`"
+              :subject="`Bug report: ${fqdn}`"
+              :body="mailTemplate"
+            >
+              <strong>Report a bug</strong>
+            </EMail>
+          </span>
+        </template>
+
+        <template #actions>
+          <VSpacer />
           <VBtn
             variant="outlined"
             prepend-icon="close"
@@ -76,7 +99,7 @@ const mailTemplate = `I've just found a bug on ${config.url} and would like to r
           >
             Close
           </VBtn>
-        </VCardActions>
+        </template>
       </VCard>
     </template>
   </VDialog>
@@ -96,10 +119,10 @@ const mailTemplate = `I've just found a bug on ${config.url} and would like to r
 .icon-badge {
   position: fixed;
 
-  top: -16px;
-  left: -16px;
+  top: -48px;
+  left: -32px;
 
-  transform: rotate(-30deg);
+  transform: rotate(-15deg);
 }
 
 .logo {