From 7471e11bd2c7e76be206a743ec93b9aa7da67676 Mon Sep 17 00:00:00 2001 From: Michael Housh Date: Thu, 15 Jan 2026 09:17:27 -0500 Subject: [PATCH] fix: Fixes some layout issues with footer and sidebar, makes size column in duct-sizing views to be a fixed width, so the tables line up properly. --- Public/css/output.css | 108 ++++++------------ .../Views/DuctSizing/RoomsTable.swift | 4 +- .../Views/DuctSizing/TrunksTable.swift | 22 ++-- Sources/ViewController/Views/MainPage.swift | 30 ++--- .../Views/Project/ProjectView.swift | 35 +++--- 5 files changed, 78 insertions(+), 121 deletions(-) diff --git a/Public/css/output.css b/Public/css/output.css index b5427b5..7994648 100644 --- a/Public/css/output.css +++ b/Public/css/output.css @@ -4224,6 +4224,9 @@ .top-2 { top: calc(var(--spacing) * 2); } + .top-\[100vh\] { + top: 100vh; + } .right-2 { right: calc(var(--spacing) * 2); } @@ -4284,6 +4287,12 @@ } } } + .bottom-0 { + bottom: calc(var(--spacing) * 0); + } + .left-0 { + left: calc(var(--spacing) * 0); + } .join { display: inline-flex; align-items: stretch; @@ -5368,12 +5377,6 @@ } } } - .-my-2 { - margin-block: calc(var(--spacing) * -2); - } - .my-1 { - margin-block: calc(var(--spacing) * 1); - } .my-1\.5 { margin-block: calc(var(--spacing) * 1.5); } @@ -5595,9 +5598,6 @@ .me-6 { margin-inline-end: calc(var(--spacing) * 6); } - .me-8 { - margin-inline-end: calc(var(--spacing) * 8); - } .me-\[140px\] { margin-inline-end: 140px; } @@ -5728,12 +5728,18 @@ font-weight: 600; } } + .mb-2 { + margin-bottom: calc(var(--spacing) * 2); + } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } + .mb-auto { + margin-bottom: auto; + } .carousel-item { @layer daisyui.l1.l2.l3 { box-sizing: content-box; @@ -6592,6 +6598,15 @@ width: calc(var(--size-selector, 0.25rem) * 4); } } + .w-\[300px\] { + width: 300px; + } + .w-\[310px\] { + width: 310px; + } + .w-\[330px\] { + width: 330px; + } .w-fit { width: fit-content; } @@ -6601,6 +6616,9 @@ .min-w-\[220px\] { min-width: 220px; } + .min-w-\[300px\] { + min-width: 300px; + } .min-w-full { min-width: 100%; } @@ -6812,9 +6830,6 @@ .flex-wrap { flex-wrap: wrap; } - .items-baseline { - align-items: baseline; - } .items-center { align-items: center; } @@ -6836,6 +6851,9 @@ .justify-start { justify-content: flex-start; } + .justify-items-end { + justify-items: end; + } .gap-1 { gap: calc(var(--spacing) * 1); } @@ -6900,15 +6918,9 @@ .gap-y-4 { row-gap: calc(var(--spacing) * 4); } - .gap-y-6 { - row-gap: calc(var(--spacing) * 6); - } .overflow-auto { overflow: auto; } - .overflow-x-auto { - overflow-x: auto; - } .timeline-box { @layer daisyui.l1.l2.l3 { border: var(--border) solid; @@ -7194,14 +7206,6 @@ border-style: var(--tw-border-style); border-width: 2px; } - .border-y { - border-block-style: var(--tw-border-style); - border-block-width: 1px; - } - .border-t { - border-top-style: var(--tw-border-style); - border-top-width: 1px; - } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; @@ -7319,9 +7323,6 @@ border-color: currentColor; } } - .border-base-100 { - border-color: var(--color-base-100); - } .border-error { border-color: var(--color-error); } @@ -7331,9 +7332,6 @@ .border-primary { border-color: var(--color-primary); } - .border-secondary { - border-color: var(--color-secondary); - } .menu-active { :where(:not(ul, details, .menu-title, .btn))& { @layer daisyui.l1.l2 { @@ -7488,14 +7486,11 @@ .bg-base-100 { background-color: var(--color-base-100); } - .bg-base-200 { - background-color: var(--color-base-200); - } .bg-base-300 { background-color: var(--color-base-300); } - .bg-primary { - background-color: var(--color-primary); + .bg-error { + background-color: var(--color-error); } .bg-red-500 { background-color: var(--color-red-500); @@ -7920,9 +7915,6 @@ .px-4 { padding-inline: calc(var(--spacing) * 4); } - .py-1 { - padding-block: calc(var(--spacing) * 1); - } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } @@ -7952,9 +7944,6 @@ .pt-6 { padding-top: calc(var(--spacing) * 6); } - .pb-4 { - padding-bottom: calc(var(--spacing) * 4); - } .pb-6 { padding-bottom: calc(var(--spacing) * 6); } @@ -8590,12 +8579,6 @@ .text-primary { color: var(--color-primary); } - .text-primary-content { - color: var(--color-primary-content); - } - .text-secondary-content { - color: var(--color-secondary-content); - } .text-slate-900 { color: var(--color-slate-900); } @@ -9482,13 +9465,6 @@ border-color: var(--color-red-500); } } - .hover\:rounded-lg { - &:hover { - @media (hover: hover) { - border-radius: var(--radius-lg); - } - } - } .hover\:bg-neutral { &:hover { @media (hover: hover) { @@ -9510,16 +9486,6 @@ } } } - .hover\:btn-success { - &:hover { - @media (hover: hover) { - @layer daisyui.l1.l2.l3 { - --btn-color: var(--color-success); - --btn-fg: var(--color-success-content); - } - } - } - } .focus\:outline { &:focus { outline-style: var(--tw-outline-style); @@ -9614,16 +9580,6 @@ } } } - .lg\:grid-cols-3 { - @media (width >= 64rem) { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - } - .\32 xl\:table-cell { - @media (width >= 96rem) { - display: table-cell; - } - } .is-drawer-close\:mx-auto { &:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) { margin-inline: auto; diff --git a/Sources/ViewController/Views/DuctSizing/RoomsTable.swift b/Sources/ViewController/Views/DuctSizing/RoomsTable.swift index 55a9212..ff19948 100644 --- a/Sources/ViewController/Views/DuctSizing/RoomsTable.swift +++ b/Sources/ViewController/Views/DuctSizing/RoomsTable.swift @@ -21,7 +21,7 @@ extension DuctSizingView { th { "BTU" } th { "CFM" } th { "Velocity" } - th { "Size" } + th(.class("w-[330px]")) { "Size" } } } tbody { @@ -101,7 +101,7 @@ extension DuctSizingView { td { Number(room.velocity) } td { - div(.class("grid grid-cols-3 gap-2")) { + div(.class("grid grid-cols-3 gap-2 w-[330px]")) { div(.class("label")) { "Calculated" } div(.class("flex justify-center")) { diff --git a/Sources/ViewController/Views/DuctSizing/TrunksTable.swift b/Sources/ViewController/Views/DuctSizing/TrunksTable.swift index a88c6e4..2ecae17 100644 --- a/Sources/ViewController/Views/DuctSizing/TrunksTable.swift +++ b/Sources/ViewController/Views/DuctSizing/TrunksTable.swift @@ -22,7 +22,7 @@ extension DuctSizingView { th { "Associated Supplies" } th { "Dsn CFM" } th { "Velocity" } - th { "Size" } + th(.class("w-[330px]")) { "Size" } } } tbody { @@ -65,7 +65,7 @@ extension DuctSizingView { Number(trunk.velocity) } td { - div(.class("grid grid-cols-3 gap-4")) { + div(.class("grid grid-cols-3 gap-2 w-[330px]")) { div(.class("label")) { "Calculated" } div(.class("flex justify-center")) { Badge(number: trunk.roundSize, digits: 1) @@ -97,15 +97,17 @@ extension DuctSizingView { .attributes(.class("badge-info")) } } - div(.class("flex justify-end")) { + div(.class("flex justify-end items-end")) { div(.class("join")) { - TrashButton() - .attributes(.class("join-item btn-ghost")) - .attributes( - .hx.delete(route: deleteRoute), - .hx.target("closest tr"), - .hx.swap(.outerHTML) - ) + if trunk.width != nil { + TrashButton() + .attributes(.class("join-item btn-ghost")) + .attributes( + .hx.delete(route: deleteRoute), + .hx.target("closest tr"), + .hx.swap(.outerHTML) + ) + } EditButton() .attributes( diff --git a/Sources/ViewController/Views/MainPage.swift b/Sources/ViewController/Views/MainPage.swift index f52c6a0..a808f94 100644 --- a/Sources/ViewController/Views/MainPage.swift +++ b/Sources/ViewController/Views/MainPage.swift @@ -81,23 +81,25 @@ public struct MainPage: SendableHTMLDocument where Inner: Sendable } public var body: some HTML { - div(.class("flex flex-col min-h-screen min-w-full")) { - main(.class("grow")) { + div(.class("flex flex-col min-h-screen min-w-full justify-between")) { + main(.class("flex flex-col min-h-screen min-w-full grow mb-auto")) { inner } - if displayFooter { - footer( - .class( - """ - footer sm:footer-horizontal footer-center - bg-base-300 text-base-content p-4 - """ - ) - ) { - aside { - p { - "Copyright © \(Date().description.prefix(4)) - All rights reserved by Michael Housh" + div(.class("bottom-0 left-0 bg-error")) { + if displayFooter { + footer( + .class( + """ + footer sm:footer-horizontal footer-center + bg-base-300 text-base-content p-4 + """ + ) + ) { + aside { + p { + "Copyright © \(Date().description.prefix(4)) - All rights reserved by Michael Housh" + } } } } diff --git a/Sources/ViewController/Views/Project/ProjectView.swift b/Sources/ViewController/Views/Project/ProjectView.swift index adc7925..38389ac 100644 --- a/Sources/ViewController/Views/Project/ProjectView.swift +++ b/Sources/ViewController/Views/Project/ProjectView.swift @@ -31,25 +31,22 @@ struct ProjectView: HTML, Sendable where Inner: Sendable { } var body: some HTML { - div(.class("h-screen w-full")) { + div(.class("drawer lg:drawer-open h-full")) { + input(.id("my-drawer-1"), .type(.checkbox), .class("drawer-toggle")) - div(.class("drawer lg:drawer-open")) { - input(.id("my-drawer-1"), .type(.checkbox), .class("drawer-toggle")) - - div(.class("drawer-content")) { - Navbar(sidebarToggle: true) - div(.class("p-4")) { - inner - .environment(ProjectViewValue.$projectID, projectID) - } + div(.class("drawer-content overflow-auto")) { + Navbar(sidebarToggle: true) + div(.class("p-4")) { + inner + .environment(ProjectViewValue.$projectID, projectID) } - - Sidebar( - active: activeTab, - projectID: projectID, - completedSteps: completedSteps - ) } + + Sidebar( + active: activeTab, + projectID: projectID, + completedSteps: completedSteps + ) } } @@ -65,7 +62,7 @@ extension ProjectView { var body: some HTML { - div(.class("drawer-side is-drawer-close:overflow-visible")) { + div(.class("drawer-side is-drawer-close:overflow-visible grow")) { label( .for("my-drawer-1"), .init(name: "aria-label", value: "close sidebar"), .class("drawer-overlay") @@ -74,13 +71,13 @@ extension ProjectView { div( .class( """ - flex min-h-full flex-col items-start bg-base-300 text-base-content + flex grow h-full flex-col items-start bg-base-300 text-base-content is-drawer-close:min-w-[80px] is-drawer-open:max-w-[300px] """ ) ) { - ul(.class("w-full")) { + ul(.class("w-full grow")) { li(.class("flex w-full")) { row(