JoshBaneyCS/Heat-Tracker
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update public/styles.css

Browse Source
This commit is contained in:
JoshBaneyCS 2025-04-30 06:54:56 +00:00
parent e7d5a2a56e
commit 9ec45331ab
1 changed files with 37 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
public/styles.css
View File

@ -1,6 +1,4 @@
/* styles.css */ /* ─── GLOBAL RESET & BASE ───────────────────────────────────────────────────── */
/* ─── RESET & BASE ─────────────────────────────────────────────────────────── */
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
@ -11,10 +9,10 @@ body {
background-color: #eeeeee; background-color: #eeeeee;
color: #333; color: #333;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden; /* we'll scroll inner containers */
} }
/* ─── HEADER & NAV ─────────────────────────────────────────────────────────── */ /* ─── HEADER & NAVIGATION ───────────────────────────────────────────────────── */
.main-header { .main-header {
background-color: #232F3E; background-color: #232F3E;
display: flex; display: flex;
@ -48,17 +46,19 @@ body {
background-color: #e48f00; background-color: #e48f00;
} }
/* ─── PAGE WRAPPER ─────────────────────────────────────────────────────────── */ /* ─── PAGE CONTAINER ────────────────────────────────────────────────────────── */
/* shared by all pages, sits below header */
.page-container { .page-container {
position: absolute; position: absolute;
top: 70px; /* height of header */ top: 70px; /* header height */
left: 0; right: 0; bottom: 0; left: 0;
right: 0;
bottom: 0;
overflow: auto; overflow: auto;
padding: 1rem; padding: 1rem;
background: #fff;
} }
/* ─── INPUT/FORM STYLES ────────────────────────────────────────────────────── */ /* ─── INPUT & FORM STYLES ───────────────────────────────────────────────────── */
.form-input, .form-input,
.form-textarea, .form-textarea,
select { select {
@ -95,7 +95,7 @@ legend {
background-color: #218838; background-color: #218838;
} }
/* ─── HEATMAP PAGE ─────────────────────────────────────────────────────────── */ /* ─── HEATMAP PAGE ──────────────────────────────────────────────────────────── */
#heatmap-container { #heatmap-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -104,6 +104,7 @@ legend {
background-color: #f9f9f9; background-color: #f9f9f9;
} }
.map-svg-container { .map-svg-container {
/* width/height large enough for all doors + areas */
min-width: 2000px; min-width: 2000px;
min-height: 400px; min-height: 400px;
transform-origin: 0 0; transform-origin: 0 0;
@ -142,33 +143,40 @@ legend {
} }
/* ─── TRENDS PAGE ───────────────────────────────────────────────────────────── */ /* ─── TRENDS PAGE ───────────────────────────────────────────────────────────── */
/* make this container a flex column filling available space */ /* page-container is already full-screen under header */
.page-container.trends { .page-container.trends {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100% - 0); /* full height under header */
} }
/* Heading & controls take auto height */ /* Controls row */
.page-container.trends > h1, .trends-controls {
.trends-controls, display: flex;
align-items: center;
margin-bottom: 1rem;
}
#timeframe-slider {
flex: 1;
}
#timeframe-label {
margin-left: 1rem;
white-space: nowrap;
}
/* Metric toggles */
.trends-metrics { .trends-metrics {
flex: 0 0 auto; margin-bottom: 1rem;
margin: 0 0 1rem 0;
} }
/* Chart area */
/* Chart: fixed 50% of container */
.chart-container { .chart-container {
flex: 0 0 50%; flex: 2;
position: relative; position: relative;
} }
.chart-container canvas { .chart-container canvas {
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
} }
/* Table wrapper */
/* Table: fixed 45% of container */
.table-wrapper { .table-wrapper {
flex: 0 0 45%; flex: 1;
overflow: auto; overflow: auto;
border: 1px solid #ddd; border: 1px solid #ddd;
} }
@ -192,11 +200,11 @@ legend {
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
/* Zebra striping */ /* Zebra stripes */
.table-wrapper tbody tr:nth-child(even) { .table-wrapper tbody tr:nth-child(even) {
background: #fafafa; background: #fafafa;
} }
/* Sort arrow indicators */ /* Sort arrows */
.sortable::after { .sortable::after {
content: '▲▼'; content: '▲▼';
font-size: 0.6em; font-size: 0.6em;
@ -212,13 +220,7 @@ legend {
/* ─── RESPONSIVE TWEAKS ─────────────────────────────────────────────────────── */ /* ─── RESPONSIVE TWEAKS ─────────────────────────────────────────────────────── */
@media (max-width: 768px) { @media (max-width: 768px) {
.nav-btn { .nav-btn { padding: 0.4rem 0.8rem; font-size: 0.9rem; }
padding: 0.4rem 0.8rem; .form-input, .form-textarea, select { width: 100%; }
font-size: 0.9rem;
}
.form-input,
.form-textarea,
select {
width: 100%;
}
} }