General layout fixes

src/components/FooterBar.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { containerMaxW } from "@/config.js";
-import { mdiCash } from "@mdi/js";
+import { mdiCash, mdiGithub } from "@mdi/js";
 import BaseLevel from "@/components/BaseLevel.vue";
 import BaseButton from "@/components/BaseButton.vue";
 </script>
@@ -14,11 +14,12 @@ import BaseButton from "@/components/BaseButton.vue";
           <a
             class="text-blue-400 hover:text-blue-600"
             href="https://github.com/justboil/admin-one-vue-tailwind"
+            target="_blank"
             >Admin One</a
           >.
         </p>
       </div>
-      <div class="md:py-2">
+      <div class="md:py-2 space-x-2">
         <BaseButton
           color="warning"
           href="https://paypal.me/trmazi"
@@ -26,6 +27,14 @@ import BaseButton from "@/components/BaseButton.vue";
           :icon="mdiCash"
           icon-size="24"
         />
+        <BaseButton
+          color="info"
+          href="https://github.com/PhaseII-eAmusement-Network/PhaseWeb3-Vue"
+          target="_blank"
+          label="View on GitHub"
+          :icon="mdiGithub"
+          icon-size="24"
+        />
       </div>
     </BaseLevel>
   </footer>

src/css/main.css

@@ -44,8 +44,21 @@ img {
   pointer-events: none;
 }
 
-#particles-js {
-  min-width: 100vw;
-  min-height: 100vh;
-  position: absolute;
-}
+@media screen and (min-width: 768px) {
+  #particles-js {
+    min-width: 100vw;
+    min-height: 100vh;
+    position: absolute;
+    z-index: -0.9;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #particles-js {
+    min-width: 100vw;
+    min-height: 100vh;
+    position: absolute;
+    z-index: 0;
+  }
+}
+

src/layouts/LayoutGuest.vue

@@ -105,4 +105,13 @@ watch(
     -webkit-animation-name: none !important;
   }
 }
+
+@media screen and (max-width: 768px) {
+  #particles-js {
+    min-width: 100vw;
+    min-height: 100vh;
+    position: absolute;
+    z-index: -1;
+  }
+}
 </style>

src/stores/main.js

@@ -29,6 +29,10 @@ export const useMainStore = defineStore("main", {
 
     /* User Loaded state */
     userLoaded: false,
+
+    /* Save news state */
+    loadedNews: null,
+    loadedArticles: {},
   }),
   actions: {
     setUser(payload) {
@@ -143,22 +147,32 @@ export const useMainStore = defineStore("main", {
     },
 
     async fetchAllNews() {
-      try {
-        const data = await this.callApi("/news");
-        return data.slice(0, 2);
-      } catch (error) {
-        console.log("Error fetching news:", error);
-        throw error;
+      if (!this.loadedNews) {
+        try {
+          const data = await this.callApi("/news");
+          this.loadedNews = data.slice(0, 2);
+          return this.loadedNews;
+        } catch (error) {
+          console.log("Error fetching news:", error);
+          throw error;
+        }
+      } else {
+        return this.loadedNews;
       }
     },
 
     async fetchNews(newsID) {
-      try {
-        const data = await this.callApi(`/news/${newsID}`);
-        return data;
-      } catch (error) {
-        console.log("Error fetching news:", error);
-        throw error;
+      if (!this.loadedArticles[newsID]) {
+        try {
+          const data = await this.callApi(`/news/${newsID}`);
+          this.loadedArticles[newsID] = data;
+          return data;
+        } catch (error) {
+          console.log("Error fetching news:", error);
+          throw error;
+        }
+      } else {
+        return this.loadedArticles[newsID];
       }
     },
 

src/views/Arcade/ArcadeView.vue

@@ -173,7 +173,7 @@ async function exportVPN() {
           </div>
         </CardBox>
 
-        <CardBox class="w-1/2 mb-6">
+        <CardBox class="w-full md:w-1/2 mb-6">
           <h1 class="text-lg md:text-xl">OpenVPN Configuration</h1>
           <p class="pb-1 dark:text-white/50">
             Use this to download your VPN config.