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:51:48 +00:00
parent cbca21b52b
commit 02c5b5d7c1
1 changed files with 35 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
public/styles.css
View File

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