fix

2026-02-23 14:35:47 -05:00
parent 5e9b6e63b2
commit 3474b8705e
10 changed files with 168 additions and 204 deletions
--- a/app/views/asset-manifest.json
+++ b/app/views/asset-manifest.json
@@ -1,16 +1,16 @@
 {
  "files": {
-    "main.css": "/static/css/main.4cb592b3.css",
-    "main.js": "/static/js/main.b01b945f.js",
+    "main.css": "/static/css/main.9e592770.css",
+    "main.js": "/static/js/main.671a9950.js",
    "static/js/787.c4e7f8f9.chunk.js": "/static/js/787.c4e7f8f9.chunk.js",
    "static/media/landing.png": "/static/media/landing.d4c6072db7a67dff6a78.png",
    "index.html": "/index.html",
-    "main.4cb592b3.css.map": "/static/css/main.4cb592b3.css.map",
-    "main.b01b945f.js.map": "/static/js/main.b01b945f.js.map",
+    "main.9e592770.css.map": "/static/css/main.9e592770.css.map",
+    "main.671a9950.js.map": "/static/js/main.671a9950.js.map",
    "787.c4e7f8f9.chunk.js.map": "/static/js/787.c4e7f8f9.chunk.js.map"
  },
  "entrypoints": [
-    "static/css/main.4cb592b3.css",
-    "static/js/main.b01b945f.js"
+    "static/css/main.9e592770.css",
+    "static/js/main.671a9950.js"
  ]
 }
--- a/app/views/index.html
+++ b/app/views/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"><link rel="manifest" href="/manifest.json"/><title>Worldshine Transportation</title><script defer="defer" src="/static/js/main.b01b945f.js"></script><link href="/static/css/main.4cb592b3.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"><link rel="manifest" href="/manifest.json"/><title>Worldshine Transportation</title><script defer="defer" src="/static/js/main.671a9950.js"></script><link href="/static/css/main.9e592770.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
--- a/app/views/static/css/main.4cb592b3.css.map
+++ b/app/views/static/css/main.4cb592b3.css.map
--- a/app/views/static/css/main.9e592770.css
+++ b/app/views/static/css/main.9e592770.css
--- a/app/views/static/css/main.9e592770.css.map
+++ b/app/views/static/css/main.9e592770.css.map
--- a/app/views/static/js/main.671a9950.js
+++ b/app/views/static/js/main.671a9950.js
--- a/app/views/static/js/main.671a9950.js.LICENSE.txt
+++ b/app/views/static/js/main.671a9950.js.LICENSE.txt
--- a/app/views/static/js/main.671a9950.js.map
+++ b/app/views/static/js/main.671a9950.js.map
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -1957,7 +1957,16 @@ input[type="checkbox"] {
  }
 }

-/* Full Screen Mode Styles */
+/* ===========================================
+   Full Screen Mode Styles (Info Screen)
+   All rounded corners: 12px, all column bottoms aligned
+   
+   IMPORTANT: base styles from .multi-columns-container,
+   .column-container, and .column-card add padding, margin,
+   and border that must be explicitly overridden here.
+   =========================================== */
+
+/* Level 0: fixed viewport shell */
 .fullscreen-mode {
  position: fixed;
  top: 0;
@@ -1965,77 +1974,66 @@ input[type="checkbox"] {
  width: 100vw;
  height: 100vh;
  z-index: 9998;
-  overflow: hidden;
  display: flex;
  flex-direction: column;
+  overflow: hidden;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box;
 }

+/* Level 1: padded inner wrapper */
 .fullscreen-mode .app-main-content-list-func-container {
-  width: 100%;
-  height: 100%;
+  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 30px;
+  min-height: 0;
+  overflow: hidden;
  box-sizing: border-box;
 }

+/* Level 2: 3-column row — explicit height, override base padding */
 .fullscreen-mode .multi-columns-container {
-  width: 100%;
-  height: calc(100vh - 60px);
-  max-height: calc(100vh - 60px);
-  display: flex;
-  gap: 20px;
-  flex: 1;
-  min-height: 0;
-  align-items: stretch;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.fullscreen-mode .column-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
  height: calc(100vh - 60px) !important;
-  max-height: calc(100vh - 60px) !important;
-  gap: 16px;
+  display: flex !important;
+  flex-direction: row !important;
+  gap: 20px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border-radius: 0 !important;
  overflow: hidden;
+  box-sizing: border-box;
 }

-/* Ensure middle column gallery fills remaining space */
-.fullscreen-mode .column-container:nth-child(2) {
-  justify-content: flex-start;
-}
-
-/* Column 1 (appointments) - single card fills full height */
-.fullscreen-mode .column-container:nth-child(1) .column-card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Column 3 (activities + menu) - menu fills remaining space */
-.fullscreen-mode .column-container:nth-child(3) .column-card:last-child {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
+/* Level 3: each column — override base padding, fill container height */
+.fullscreen-mode .column-container {
+  flex: 1 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 16px !important;
+  height: 100% !important;
+  min-height: 0 !important;
+  min-width: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  box-sizing: border-box;
 }

+/* --- Shared card styles — override base margin-bottom, border --- */
 .fullscreen-mode .column-card {
  background-color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(8px);
-  border-radius: 12px;
-  padding: clamp(10px, 1.5vw, 24px);
-  flex: 1;
+  border-radius: 12px !important;
+  border: none !important;
+  padding: 20px !important;
+  margin: 0 !important;
+  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
+  flex: 1 !important;
  overflow: hidden;
 }

@@ -2044,43 +2042,106 @@ input[type="checkbox"] {
  backdrop-filter: blur(8px);
  border-radius: 12px !important;
  border: none !important;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
+  min-height: 0;
 }

 .fullscreen-mode .card-body {
-  flex: 1;
  display: flex;
  flex-direction: column;
+  min-height: 0;
+}
+
+/* --- Column 2: Clock/Weather + Attendance Note + Gallery --- */
+.fullscreen-mode .time-weather-row {
+  flex: 0 0 auto !important;
+  display: flex;
+  gap: 16px;
+}
+
+.fullscreen-mode .time-weather-row .col-md-6 {
+  flex: 1;
+  max-width: none;
+  width: auto;
+}
+
+.fullscreen-mode .time-weather-row .card-body {
  justify-content: center;
 }

-/* Dynamic font sizing for fullscreen mode */
-.fullscreen-mode h4 {
-  font-size: clamp(16px, 2vw, 28px);
+.fullscreen-mode .attendance-note-wrapper {
+  flex: 0 0 auto !important;
 }

-.fullscreen-mode h5 {
-  font-size: clamp(14px, 1.8vw, 24px);
+/* Gallery: fills remaining space in col 2 */
+.fullscreen-mode .gallery-wrapper {
+  flex: 1 !important;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }

+.fullscreen-mode .gallery-wrapper > .card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: 12px !important;
+}
+
+.fullscreen-mode .gallery-wrapper > .card > .card-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.fullscreen-mode .gallery-wrapper .fullscreen-carousel {
+  flex: 1;
+  min-height: 0;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.fullscreen-mode .gallery-wrapper .carousel-inner,
+.fullscreen-mode .gallery-wrapper .carousel-item {
+  height: 100% !important;
+}
+
+.fullscreen-mode .gallery-wrapper .fullscreen-carousel-img {
+  height: 100% !important;
+  object-fit: cover;
+  border-radius: 12px;
+}
+
+.fullscreen-mode .gallery-wrapper .fullscreen-placeholder {
+  flex: 1;
+  height: auto !important;
+  border-radius: 12px;
+}
+
+/* --- Typography scaling --- */
+.fullscreen-mode h4 { font-size: clamp(16px, 2vw, 28px); }
+.fullscreen-mode h5 { font-size: clamp(14px, 1.8vw, 24px); }
 .fullscreen-mode h6 {
  font-size: clamp(12px, 1.4vw, 20px);
-  margin-bottom: clamp(8px, 1vw, 16px) !important;
+  margin-bottom: 12px !important;
 }
-
 .fullscreen-mode p,
 .fullscreen-mode span,
 .fullscreen-mode div {
  font-size: clamp(10px, 1.1vw, 16px);
 }
-
 .fullscreen-mode .text-primary {
  font-size: clamp(16px, 2vw, 32px) !important;
 }
+.fullscreen-mode .fullscreen-title {
+  font-weight: 600;
+  margin-bottom: 12px;
+}

-/* Tables in fullscreen - fill available space */
+/* --- Tables --- */
 .fullscreen-mode .info-screen-appointments-table {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
@@ -2121,38 +2182,24 @@ input[type="checkbox"] {
  flex-direction: column;
 }

-/* Clock and weather cards - equal sizing */
-.fullscreen-mode .row.mb-4 {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 0 !important;
-}
-
-.fullscreen-mode .col-md-6 {
-  flex: 1;
-  max-width: none;
-  width: auto;
-}
-
-/* Clock scaling - 2/3 of original */
+/* --- Clock (2/3 size) --- */
 .fullscreen-mode .clock-container {
-  transform: scale(clamp(0.4, 0.053vw + 0.33, 0.8));
+  transform: scale(0.67);
  transform-origin: center;
 }

 .fullscreen-mode .clock {
-  width: clamp(40px, 5.3vw, 80px);
-  height: clamp(40px, 5.3vw, 80px);
+  width: 80px;
+  height: 80px;
 }

-/* Weather icon scaling - 2/3 of original */
+/* --- Weather icon (2/3 size) --- */
 .fullscreen-mode .weather-icon i {
-  font-size: clamp(21px, 2.7vw, 43px) !important;
+  font-size: 32px !important;
 }

-/* Gallery/Carousel scaling - let flex handle height */
+/* --- Carousel (generic, non-gallery) --- */
 .fullscreen-mode .carousel {
-  flex: 1;
  min-height: 0;
 }

@@ -2161,16 +2208,11 @@ input[type="checkbox"] {
  object-fit: cover;
 }

-/* Attendance note card adjustments */
-.fullscreen-mode .mb-4:has(.card) {
-  flex: 0 0 auto;
-}
-
+/* --- Misc element styles --- */
 .fullscreen-mode .img-fluid {
  max-height: clamp(80px, 10vh, 150px) !important;
 }

-/* Logo scaling */
 .fullscreen-mode .info-logo,
 .fullscreen-mode img[alt="Worldshine Logo"] {
  height: clamp(20px, 2.5vw, 40px) !important;
@@ -2213,7 +2255,7 @@ input[type="checkbox"] {
  background-attachment: fixed;
 }

-/* Prevent wrapping in fullscreen table cells */
+/* Scrollable tables in fullscreen */
 .fullscreen-mode .personnel-info-table {
  width: 100%;
 }
@@ -2233,112 +2275,12 @@ input[type="checkbox"] {
 }

 .fullscreen-mode .personnel-info-table thead {
-  width: calc(100% - 8px); /* Account for scrollbar */
-}
-
-/* Responsive adjustments for smaller screens in fullscreen */
-@media (max-width: 1400px) {
-  .fullscreen-mode .multi-columns-container {
-    gap: clamp(8px, 1vw, 15px);
-  }
-}
-
-@media (max-width: 1200px) {
-  .fullscreen-mode .column-container:nth-child(2) .row.mb-4 {
-    flex-direction: column;
-  }
-  
-  .fullscreen-mode .carousel {
-    height: clamp(100px, 12vh, 180px) !important;
-  }
-  
-  .fullscreen-mode .carousel-item img {
-    height: clamp(100px, 12vh, 180px) !important;
-  }
-}
-
-@media (max-height: 700px) {
-  .fullscreen-mode .carousel {
-    height: clamp(80px, 10vh, 140px) !important;
-  }
-  
-  .fullscreen-mode .carousel-item img {
-    height: clamp(80px, 10vh, 140px) !important;
-  }
-  
-  .fullscreen-mode h6 {
-    margin-bottom: clamp(4px, 0.5vw, 10px) !important;
-  }
-}
-
-/* Additional fullscreen utility classes */
-.fullscreen-mode .fullscreen-title {
-  font-weight: 600;
-  margin-bottom: clamp(8px, 1vw, 16px);
-}
-
-.fullscreen-mode .time-weather-row {
-  flex: 0 0 auto;
-  min-height: 0;
-}
-
-.fullscreen-mode .attendance-note-wrapper {
-  flex: 0 0 auto;
-  margin-bottom: 0;
-}
-
-.fullscreen-mode .gallery-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-  min-height: 0;
-  overflow: hidden;
-  border-radius: 12px;
-}
-
-.fullscreen-mode .gallery-wrapper .card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.fullscreen-mode .gallery-wrapper .card-body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.fullscreen-mode .gallery-wrapper .fullscreen-carousel {
-  flex: 1;
-  min-height: 0;
-}
-
-.fullscreen-mode .gallery-wrapper .fullscreen-carousel,
-.fullscreen-mode .gallery-wrapper .carousel-inner,
-.fullscreen-mode .gallery-wrapper .carousel-item {
-  height: 100% !important;
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.fullscreen-mode .gallery-wrapper .fullscreen-carousel-img {
-  height: 100% !important;
-  object-fit: cover;
-}
-
-.fullscreen-mode .gallery-wrapper .fullscreen-placeholder {
-  flex: 1;
-  height: auto !important;
+  width: calc(100% - 8px);
 }

+/* Fullscreen utility classes */
 .fullscreen-mode .fullscreen-date-display {
-  margin-bottom: clamp(4px, 0.5vw, 12px);
+  margin-bottom: 8px;
 }

 .fullscreen-mode .fullscreen-time {
@@ -2347,7 +2289,7 @@ input[type="checkbox"] {

 .fullscreen-mode .fullscreen-logo {
  height: clamp(20px, 2.5vw, 35px);
-  margin-right: clamp(6px, 0.8vw, 12px);
+  margin-right: 8px;
 }

 .fullscreen-mode .fullscreen-intro {
@@ -2381,6 +2323,28 @@ input[type="checkbox"] {
  border-radius: 12px;
 }

+/* Responsive adjustments for smaller screens in fullscreen */
+@media (max-width: 1400px) {
+  .fullscreen-mode .multi-columns-container {
+    gap: 12px;
+  }
+  .fullscreen-mode .column-container {
+    gap: 12px;
+  }
+}
+
+@media (max-width: 1200px) {
+  .fullscreen-mode .time-weather-row {
+    flex-direction: column;
+  }
+}
+
+@media (max-height: 700px) {
+  .fullscreen-mode h6 {
+    margin-bottom: 6px !important;
+  }
+}
+
 /* InfoScreen custom classes for moving inline styles to CSS */

 .info-title {
--- a/client/src/components/info-screen/InfoScreen.js
+++ b/client/src/components/info-screen/InfoScreen.js
@@ -957,7 +957,7 @@ const InfoScreen = () => {
              {/* Column 2 - Time, Weather, Attendance Note, Gallery */}
              <div className="column-container">
                {/* Time and Weather Cards Row */}
-                <div className="row mb-4 time-weather-row">
+                <div className="time-weather-row">
                  {/* Time Card */}
                  <div className="col-md-6">
                    <div className="card h-100">