Merge remote-tracking branch 'upstream/dev' into dev

# Conflicts: # src/components/nav/SideNav.vue # src/components/nav/TopNav.vue # src/views/Login.vue
aclc-iriga · May 21, 2023 · bd1766a · bd1766a
2 parents da8fff8 + 9c95993
commit bd1766a
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 108 deletions.
diff --git a/assets/bg-img-2.jpg b/assets/bg-img-2.jpg
diff --git a/assets/js/screensaver.js b/assets/js/screensaver.js
@@ -0,0 +1,45 @@
+// initialize screensaver variables
+let idleTime = null;
+let forced = false;
+
+// initialize screensaver
+const screensaver = document.getElementById("screensaver");
+screensaver.style.display = "none";
+
+// set idle time for 2 and a half minutes
+const startIdleTime = () => {
+    idleTime = setTimeout(() => {
+        // show styles for screen saver
+        screensaver.style.display = "block";
+    }, 150000);
+}
+
+// clear idle time
+const clearIdleTime = () => {
+    clearTimeout(idleTime);
+    screensaver.style.display = "none";
+    // starts idle time again after idle time is cleared
+    startIdleTime();
+}
+
+// force screensaver
+const forceScreensaver = () => {
+    screensaver.style.display = "block";
+    forced = true;
+    setTimeout(() => {
+        forced = false;
+    }, 2400);
+}
+
+// starts idle time for screensaver
+startIdleTime();
+
+// event handlers for screensaver
+window.addEventListener('mousemove', function() {
+    if(!forced)
+        clearIdleTime();
+});
+window.addEventListener('keypress', function() {
+    if(!forced)
+        clearIdleTime();
+});
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
     <!-- Screensaver -->
-    <div id="screenSaver" class="swap">
+    <div id="screensaver" class="swap" style="display: none">
         <div class="img-container">
             <img class="fade-in" src="/aclc-iriga.png" alt="ACLC College of Iriga">
         </div>
@@ -21,6 +21,6 @@
     <script type="module" src="/src/main.js"></script>
 
     <!-- Screensaver JS -->
-    <script type="module" src="/src/screenSaver.js"></script>
+    <script src="/js/screensaver.js"></script>
 </body>
 </html>
diff --git a/src/components/nav/SideNav.vue b/src/components/nav/SideNav.vue
@@ -24,10 +24,15 @@
             </template>
         </v-list>
 		<template v-slot:append>
-			<v-col class="text-center mt-4" cols="12">
-                <v-btn class="mb-3" variant="tonal" @click="refresh" block :loading="refreshing">REFRESH</v-btn>
-				&copy; <strong class="text-uppercase">ACLC Iriga 2023</strong>
-			</v-col>
+			<v-row class="text-center mt-2 mb-1 mx-1">
+				<v-col cols="12">
+					<v-btn class="mb-2" variant="tonal" @click="cover" block>COVER</v-btn>
+					<v-btn class="mb-2" variant="tonal" @click="refresh" block :loading="refreshing">REFRESH</v-btn>
+					<div class="pt-2 text-disabled text-uppercase">
+						&copy; {{ $store.state.app.org }}
+					</div>
+				</v-col>
+			</v-row>
 		</template>
 	</v-navigation-drawer>
 </template>
@@ -56,10 +61,12 @@
                 if (this.$vuetify.display.mdAndDown)
                     this.$store.state.app.sideNav = false;
             },
-
             refresh() {
                 this.refreshing = true;
                 window.location.reload();
+            },
+            cover() {
+                forceScreensaver();
             }
         },
         created() {
@@ -87,7 +94,7 @@
                     alert(`ERROR ${error.status}: ${error.statusText}`);
                 },
             });
-        },
+        }
     }
 </script>
 

diff --git a/src/screenSaver.js b/src/screenSaver.js
diff --git a/src/store/index.js b/src/store/index.js
@@ -14,7 +14,9 @@ export default createStore({
         app: {
             title: 'Face of Beauty International',
             backendDir: 'app',
-            sideNav: false
+            sideNav: false,
+            title: 'Sportsfest-LitMusDa 2023',
+            org: 'ACLC College Iriga'
         },
         window: {
             height: 0

diff --git a/src/styles.css b/src/styles.css
@@ -68,7 +68,7 @@ body {
 /******************* Base Styles for Screensaver *******************/
 
 /* Screensaver */
-div#screenSaver {
+div#screensaver {
     display: flex;
     align-items: center;
     text-align: center;
@@ -78,12 +78,13 @@ div#screenSaver {
 }
 
 /* Screensaver Image */
-div#screenSaver img {
+div#screensaver img {
     margin: 0;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+    transition: 3s;
 }
 
 /* Disable scrollbar for Chrome */
@@ -92,7 +93,7 @@ html::-webkit-scrollbar {
 }
 
 /* Disable scrollbar for Firefox and Edge */
-#screenSaver {
+#screensaver {
     -ms-overflow-style: none;
     scrollbar-width: none;
 }
@@ -136,39 +137,39 @@ html::-webkit-scrollbar {
 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
     /* Image height set for extra-small devices */
-    div#screenSaver img {
+    div#screensaver img {
         height: 10rem;
     }
 }
 
 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
     /* Image height set for small devices */
-    div#screenSaver img {
+    div#screensaver img {
         height: 15rem;
     }
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {
     /* Image height set for medium devices */
-    div#screenSaver img {
+    div#screensaver img {
         height: 20rem;
     }
 }
 
 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {
     /* Image height set for large devices */
-    div#screenSaver img {
+    div#screensaver img {
         height: 25rem;
     }
 }
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {
     /* Image height set for extra-large devices */
-    div#screenSaver img {
+    div#screensaver img {
         height: 30rem;
     }
 }