Sticky popup header, update README

Vacansee · Dec 15, 2023 · 0d519b1 · 0d519b1
1 parent 114d3c4
commit 0d519b1
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,33 @@
 <h1 align="center">
-<img src="https://raw.githubusercontent.com/Vacansee/app/vue/src/assets/logo.png" height="128">
+<img src="https://raw.githubusercontent.com/Vacansee/app/live/src/assets/logo.png" height="128">
+
+
 <br>
-Vacansee
+
+[Vacansee](https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6918e57475a843f59f_icon_clyde_black_RGB.svg)
+
 </h1>
-<p align="center"><strong>It's Free Real Estate</strong></p>
 
-**Vacansee** is a interactive heatmap that shows students what rooms and facilities are/will be available based on data scraped from schedules (SIS), booking services (EMS), and wifi telemetry (`rpi_wpa2`).
+<img src="https://img.shields.io/uptimerobot/ratio/7/m795932889-e68ac3da3cf053a05dedaa82?style=flat-square&logo=alwaysdata&logoColor=gray&labelColor=white" height="24">
+
+<img align="right" src="docs/demo-01.png" width="250px">
+
+### What is it?
+
+
+**Vacansee** is an interactive (heat)map for displaying live stats on rooms/facilities @ RPI.
+
+This includes:
+- Expected building occupancy and foot traffic 
+- Active/upcoming classes & where to find them
+- Printer availability
+- What dining halls are serving, and for how long
+- —and more to come!
+
+We intend to become the de facto one-stop-shop for event discovery, occupancy tracking, and general navigation on campus.	
+</td><td>
+
+
 
 <br>
 

diff --git a/docs/demo-01.png b/docs/demo-01.png
diff --git a/docs/demo-02.png b/docs/demo-02.png
diff --git a/src/assets/base.css b/src/assets/base.css
@@ -36,6 +36,7 @@
   --section-gap: 160px;
 
   --background: #ffffff;
+  --soft-bg: #eaf2f0;
   --title: #1f4045;
 
   --carroad: #d4e5e2;

diff --git a/src/components/home/MapItem.vue b/src/components/home/MapItem.vue
@@ -372,7 +372,7 @@ export default {
         else                    fill = colors[0]
 
         b.style.fill = fill
-        document.documentElement.style.setProperty('--heatColor', tinycolor(fill).darken(50).toString());
+        document.documentElement.style.setProperty('--heatColor', tinycolor(fill).darken(25).toString());
         let border = tinycolor(fill).darken(25).toString()
         b.style.stroke = border
 

diff --git a/src/components/home/PopUpItem.vue b/src/components/home/PopUpItem.vue
@@ -14,6 +14,7 @@ import InfoIcon from '@/assets/icons/info.svg?component'
             <span v-if="global.bldg"> > Floor {{ global.floor }}</span>
             <span v-if="!noneSelected()"> > Room {{ global.room }}</span>
         </div>
+        <div id="fadeout"></div>
         <div v-if="global.bldg && getBldg()" class="body">
             <div class="block">
                 <div id="photoBox">
@@ -245,18 +246,35 @@ export default {
     border: 3px solid var(--softborder);
     border-bottom-style: none;
     box-shadow: 0px -2px 40px rgba(0, 0, 0, 0.20);
+    background-color: var(--soft-bg);
     border-radius: 15px 15px 0 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    scrollbar-color: var(--hardborder) transparent;
-    scroll-snap-stop: always;
 }
 
 #breadcrumbs {
     padding: 10px 0px 0px 20px;
     color: rgb(0, 0, 0);
-    font-weight: 600;
     font-size: x-large;
+    font-weight: 600;
+    height: 50px;
+    border-radius: 12px 12px 0 0;
+    background-color: white;
+}
+
+#fadeout {
+    background-image: linear-gradient(white, transparent);
+    position:relative;
+    z-index: 1;
+    height: 25px;
+}
+
+.body {
+    position: absolute;
+    top: 50px;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-color: var(--hardborder) transparent;
+    scroll-snap-stop: always;
 }
 
 #photo {
@@ -333,6 +351,7 @@ tr:nth-child(even) {
     border-radius: 10px;
     border: 1px solid var(--softborder);
     box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.05);
+    background-color: white;
 }
 
 .info {