Merge branch 'dev'

src/App.vue

@@ -16,21 +16,22 @@ import Toast from 'primevue/toast'
       <div id="left-nav">
         <RouterLink to="/"> <Logo class="logo" height="75" width="75"/>
         </RouterLink>
-        <div class="search">
-          <AutoComplete :style="{'width':'100%'}" :input-style="{'width': '100%'}" v-model="selection" :placeholder="ex" :suggestions="suggest" @complete="filterRes" @item-select="goTo"></AutoComplete>
-        </div>
       </div>
 
-        <div id="right-nav">
+      <div id="right-nav">
         <a href="https://forms.gle/Tu5xSSjK1MkZDXK69" target="_blank" rel="noopener noreferrer"><Button class="nav-btn" aria-label="Feedback" >
             <PollIcon height="25" width="25"/>
         </Button></a>
         <a href="https://github.com/Vacansee/app" target="_blank" rel="noopener noreferrer"><Button class="nav-btn" aria-label="GitHub" >
             <GHIcon height="25" width="25"/>
         </Button></a>
       </div>
-  </header>
-
+    </header>
+    <div id="mobile-nav">
+        <Teleport to="#left-nav" :disabled="global.aspectRatio > 1.5">
+          <AutoComplete class="search" :style="{'width':'100%'}" :input-style="{'width': '100%'}" v-model="selection" :placeholder="ex" :suggestions="suggest" @complete="filterRes" @item-select="goTo" @focus.native="searchFocus(true)" @blur.native="searchFocus(false)"></AutoComplete>
+        </Teleport>
+    </div>
 
   <RouterView />
 </template>
@@ -72,6 +73,10 @@ export default {
       const ex = this.exs.shift()
       this.ex = `Try ${ex}`; this.exs.push(ex)
     },
+    searchFocus(is) {
+      this.global.sFocus = is
+      // console.log("sFocus:", is)
+    },
     filterRes(event) { 
       // Case & whitespace insensitive, ignore some characters:
       const query = event.query.toLowerCase().replace(/\s{2,}/g, ' ').replace(/["#]/g, '')
@@ -131,6 +136,7 @@ header {
 .logo {
   margin-right: 1rem; 
   pointer-events: all;
+  filter: drop-shadow(0px 5px 20px white);
 }
 
 .nav-btn {
@@ -141,7 +147,7 @@ header {
   justify-content: center;
   background-color: var(--unusedfill);
   border: 2px solid var(--buildbord);
-  box-shadow: 0px 5px 25px rgba(0, 10, 20, 0.05);
+  box-shadow: 0px 5px 25px rgba(0, 10, 20, 0.08);
   pointer-events: all;
 }
 
@@ -156,9 +162,9 @@ header {
 }
 
 .search {
-  width: 250px;
+  width: 250px !important;
   border: 2px solid var(--walkpath);
-  box-shadow: 0px 5px 25px rgba(0, 10, 20, 0.05);
+  box-shadow: 0px 5px 25px rgba(0, 10, 20, 0.08);
   border-radius: 10px;
   align-self: center;
   pointer-events: all;
@@ -170,4 +176,15 @@ header {
   top: 0;
   right: 0;
 }
+
+#mobile-nav {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+  position: absolute;
+  bottom: 2vh;
+  z-index: 6;
+}
+
 </style>

src/components/home/MapItem.vue

@@ -287,7 +287,6 @@ export default {
     // Check for resizing of window
     window.addEventListener("resize", this.windowResizeTimeout)
     // Allow for the scroll wheel to zoom the map
-    let portraitMode = false;
     window.addEventListener("wheel", this.onMouseScroll);
     // Handles changes to the window
     this.windowEventHandler()
@@ -300,7 +299,7 @@ export default {
   },
   methods: {
     onMouseScroll({deltaX,deltaY}) {
-      if (!this.global.bldg){
+      if (!this.global.sFocus && !this.global.bldg){
         let dirwheel = 0;
         if (deltaY>0) {
           dirwheel = -1;

src/components/home/PopUpItem.vue

@@ -21,7 +21,7 @@ import InfoIcon from '@/assets/icons/info.svg?component'
                     <img :src="imgPath" id="photo">
                     <span>{{ getBldg().meta.name }}</span>
                 </div>
-                <p id="heat" v-if="interpretHeat()"><b style="color:var(--heatColor);">{{ interpretHeat() }}</b> (~{{ getBldg().meta.heat*100 }}%)</p>
+                <p id="heat" v-if="interpretHeat()"><b style="color:var(--heatColor);">{{ interpretHeat() }}</b> (~{{ getBldg().meta.heat.toFixed(2)*100 }}%)</p>
                 <p id="heat" v-else><b>N/A</b></p>
                 <p id="flow" v-if="interpretFlow()">+ {{ interpretFlow() }} (~{{ getBldg().meta.flow.toFixed(2)*100 }}%)&emsp;</p>
                 <p id="time" ref="mySpan">{{ getRealTime(global.time) }}</p>

src/main.js

@@ -11,7 +11,6 @@ import App from './App.vue'
 import Router from './router'
 // Imports ability to check time
 import Moment from 'moment-timezone'
-// useFetch is used to fetch data (fitting name)
 // Basic CSS
 import './assets/main.css'
 
@@ -21,7 +20,7 @@ import ToastService from 'primevue/toastservice';
 import './assets/themes/theme.css';
 
 const global = reactive({ // The global reactive object!
-	// Any changes to its members will trigger reactivity in components that reference it: 
+	// Any changes to its members will trigger reactivity in components that 
 	data: null,
 	searchData: null,
 	bldg: '',
@@ -32,6 +31,7 @@ const global = reactive({ // The global reactive object!
 	time: Moment.tz('America/New_York').format('e:HHmm'),
 	// time: Moment.tz('2023-11-29 11:55', 'America/New_York').format('e:HHmm'), // Test time
 	firstCalc: false,
+	sFocus: false
 })
 
 // On page load, fetch building/room and search data from Vacansee/data:
@@ -150,8 +150,8 @@ setInterval(() => { // Update current time every second
 	// let seconds = Number(Moment.tz('2023-11-28 11:55', 'America/New_York').format('ss')) // Test time
 	// Every 5 minutes, check data for buildings (update heat and room availability)
 	if (!(global.time.split(':')[1] % 5) && !seconds) { // update states every 5m (on the dot)
-		// checkActive()
-		// console.log(`Updating states @ ${global.time}:${seconds}`)
+		checkActive()
+		console.log(`Updating states @ ${global.time}:${seconds}`)
 	}
 	// else console.log(`${global.time}:${seconds}`)
 }, 1000)

vite.config.js

@@ -8,7 +8,6 @@ import svgLoader from 'vite-svg-loader'
 // https://vitejs.dev/config/
 export default defineConfig({
   base: '/app/',
-  assetsInclude: ['**/*.jpg'],
   plugins: [
     vue(),
     svgLoader({