From c8d32406782dc82f4f99cbdee2990b6c8368d13f Mon Sep 17 00:00:00 2001 From: JoshBaneyCS Date: Wed, 30 Apr 2025 06:08:21 +0000 Subject: [PATCH] Update public/styles.css --- public/styles.css | 264 +++++++++++++++------------------------------- 1 file changed, 83 insertions(+), 181 deletions(-) diff --git a/public/styles.css b/public/styles.css index 145e7d9..3f4112f 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,31 +1,13 @@ -/* ================= CSS VARIABLES ================= */ -:root { - --square-size: 60px; - --gap: 8px; - --v-gap: 40px; - --warehouse-height: 200px; - --region-height: 480px; -} +/* styles.css */ -/* ================= GLOBAL & RESET ================= */ -html, body { - height: 100%; - margin: 0; - padding: 0; - font-family: Arial, sans-serif; - background: #f4f4f4; - box-sizing: border-box; -} -*, *::before, *::after { - box-sizing: inherit; -} +/* ─── Global & Layout ───────────────────────────────────────────────────────── */ -/* ================= HEADER & NAV ================= */ +/* Fixed header */ .main-header { background-color: #232F3E; display: flex; align-items: center; - padding: 0.5rem 2rem; + padding: 0.5rem 1rem; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; @@ -54,36 +36,40 @@ html, body { background-color: #e48f00; } -/* ================= PAGE & CONTAINERS ================= */ -.page-container, -.heatmap-container { - display: flex; - flex-direction: column; - margin-top: 70px; /* height of header */ -} +/* Main page container (offset for fixed header) */ .page-container { + margin-top: 70px; /* height of header */ width: 95%; max-width: 1200px; - margin: 0 auto; + margin-left: auto; + margin-right: auto; padding: 1rem; - background: #fff; + background-color: #fff; border-radius: 6px; -} -.heatmap-container { - height: calc(100vh - 70px); + box-shadow: 0 2px 6px rgba(0,0,0,0.1); } -/* ================= FORM STYLES ================= */ -.form-input, .form-textarea { - width: 80%; - max-width: 400px; - margin: 1rem auto; +/* Utility */ +.hidden { + display: none !important; +} + +/* ─── Forms & Buttons ───────────────────────────────────────────────────────── */ + +/* Text inputs and textareas */ +.form-input, +.form-textarea { + width: 90%; + margin: 0.5rem auto; display: block; - padding: 1rem; - font-size: 1rem; + padding: 0.75rem; border: 1px solid #ccc; border-radius: 6px; + font-size: 1rem; + box-sizing: border-box; } + +/* Large submit button */ .big-button { background-color: #28a745; color: white; @@ -98,147 +84,80 @@ html, body { .big-button:hover { background-color: #218838; } -fieldset { - border: 1px solid #ccc; + +/* ─── Heat Map Page ────────────────────────────────────────────────────────── */ + +/* Container for the heat map (scrollable & zoomable) */ +#heatmap-container { + margin-top: 70px; /* offset under header */ + width: 95%; + height: calc(100vh - 70px); + margin-left: auto; + margin-right: auto; + position: relative; + overflow: auto; + background-color: #f9f9f9; border-radius: 6px; - padding: 1rem; - margin-bottom: 1.5rem; -} -legend { - font-weight: bold; + box-shadow: 0 2px 6px rgba(0,0,0,0.1); } -/* ================= FLOOR SELECTOR ================= */ -.floor-selector { - text-align: center; - padding: 0.5rem 0; - background: #fafafa; - border-bottom: 1px solid #ddd; -} -.floor-selector label { - margin: 0 1rem; - font-weight: bold; +/* Dock door squares */ +.dock-door { + width: 30px; + height: 30px; + background-color: #ccc; + border: 1px solid #999; + box-sizing: border-box; + position: absolute; cursor: pointer; } -.floor-selector input { - margin-right: 0.25rem; +.dock-door:hover { + outline: 2px solid #FF9900; + z-index: 10; } -/* ================= HEATMAP SCROLL & ZOOM ================= */ -.heatmap-scroll { - flex: 1; - overflow: auto; - position: relative; -} - -/* ================= DIAGRAM LAYOUT ================= */ -.diagram-container { - width: calc((var(--square-size) * 83) + (var(--gap) * 82)); - display: flex; - flex-direction: column; - align-items: center; - gap: var(--v-gap); - padding: var(--v-gap); +/* Additional area rectangles */ +.area-rect { + position: absolute; + background-color: rgba(200,200,200,0.3); + border: 1px solid #999; box-sizing: border-box; } - -/* Dock-door row */ -.dock-row { - display: flex; - gap: var(--gap); - flex-wrap: nowrap; -} -.dock-square { - width: var(--square-size); - height: var(--square-size); - background: #ddd; - border-radius: 4px; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.75rem; - color: #333; - user-select: none; -} - -/* ================= REGIONS ================= */ -.regions-container { - display: flex; - width: 100%; - gap: var(--gap); -} -.region { - position: relative; - flex: 1; - height: var(--region-height); - border: 2px solid #666; - border-radius: 4px; - overflow: hidden; -} -.region-amod { background: #eef; } -.region-preslam { background: #efe; } -.region-bmod { background: #fee; } - -/* AFE override: line up station squares horizontally */ -#region-preslam { - display: flex !important; - align-items: center; - overflow-x: auto; - overflow-y: hidden; - flex-wrap: nowrap; - padding: var(--gap) 0; -} -#region-preslam .station-square { - position: static; - flex: 0 0 auto; - margin: calc(var(--gap)/2); -} - -/* ================= CENTER LABEL ================= */ -.region .ar-center { +.area-rect label { position: absolute; - top: 50%; left: 50%; - transform: translate(-50%,-50%); - white-space: pre-line; - text-align: center; - font-size: 1.2rem; + top: 4px; left: 4px; + font-size: 0.85rem; font-weight: bold; - color: rgba(0,0,0,0.6); - pointer-events: none; } -/* ================= STATION SQUARES ================= */ -.region .station-square { +/* Floor selector radios */ +.floor-selector { position: absolute; - width: var(--square-size); - height: var(--square-size); - line-height: var(--square-size); - text-align: center; - font-size: 0.75rem; - color: #111; - background: #ddd; - border: 1px solid #aaa; - border-radius: 4px; - box-shadow: 1px 1px 3px rgba(0,0,0,0.2); - cursor: pointer; - user-select: none; - transition: background 0.3s; + top: 10px; right: 10px; + background: rgba(255,255,255,0.9); + padding: 0.5rem; + border-radius: 6px; + box-shadow: 0 1px 4px rgba(0,0,0,0.2); } -/* ================= WAREHOUSE RECTANGLE ================= */ -.warehouse { - width: calc((var(--square-size) * 83) + (var(--gap) * 82)); - height: var(--warehouse-height); - background: #ccc; - border-radius: 6px; +/* ─── Trends Page ──────────────────────────────────────────────────────────── */ + +/* Chart container */ +#chart-container { + height: 50vh; + width: 100%; + margin-bottom: 2rem; } -/* Spreadsheet-style Trends table */ + +/* Spreadsheet-style table wrapper */ #trends-table-container { - max-height: 50vh; /* adjust as needed */ + max-height: 50vh; overflow: auto; border: 1px solid #ddd; margin-bottom: 1rem; } + +/* Table styling */ #trends-table { width: 100%; border-collapse: collapse; @@ -249,6 +168,7 @@ legend { padding: 8px; text-align: center; border-bottom: 1px solid #ddd; + font-size: 0.95rem; } #trends-table thead th { position: sticky; @@ -258,11 +178,12 @@ legend { cursor: pointer; user-select: none; } -/* zebra striping */ +/* Zebra striping */ #trends-table tbody tr:nth-child(even) { background: #fafafa; } -/* sort arrow indicators */ + +/* Sort arrow indicators */ .sortable::after { content: '▲▼'; font-size: 0.6em; @@ -275,22 +196,3 @@ legend { .sortable.desc::after { content: '▼'; } - -/* ================= TOOLTIP ================= */ -.tooltip { - position: absolute; - pointer-events: none; - background: rgba(0,0,0,0.75); - color: #fff; - padding: 8px; - border-radius: 4px; - font-size: 0.9rem; - line-height: 1.2; - display: none; - z-index: 2000; -} - -/* ================= UTILITY ================= */ -.hidden { - display: none !important; -}