From a9d713dbd0fd932737bfd4072901c6f24922f60a Mon Sep 17 00:00:00 2001 From: Leo Vasanko Date: Sat, 18 Nov 2023 21:55:52 -0800 Subject: [PATCH] More robust and flexible layout. --- frontend/index.html | 3 +- frontend/src/assets/main.css | 38 +++++++++++++++++------ frontend/src/components/BreadCrumb.vue | 1 + frontend/src/components/Gallery.vue | 9 +++--- frontend/src/components/GalleryFigure.vue | 17 +++++----- frontend/src/components/MediaPreview.vue | 25 +++++++-------- frontend/src/views/ExplorerView.vue | 2 +- 7 files changed, 58 insertions(+), 37 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 7459f57..ee2d7f9 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -8,5 +8,4 @@ - -
+ diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index 9a764f1..11d6650 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -89,9 +89,10 @@ --header-background: none; --header-color: black; } - nav, + .headermain, .menu, - .rename-button { + .rename-button, + .suggest-gallery { display: none !important; } .breadcrumb > a { @@ -107,9 +108,12 @@ } .breadcrumb svg { fill: black !important; + margin: 0 .5rem 0 1rem !important; + } + body#app { + height: auto !important; } main { - height: auto !important; padding-bottom: 0 !important; } thead tr { @@ -118,6 +122,17 @@ background: none !important; border-bottom: 1pt solid black !important; } + audio::-webkit-media-controls-timeline, + video::-webkit-media-controls-timeline { + display: none; + } + audio::-webkit-media-controls, + video::-webkit-media-controls { + display: none; + } + tr, figure { + page-break-inside: avoid; + } .selection { min-width: 0 !important; padding: 0 !important; @@ -157,6 +172,7 @@ tbody .modified { font-family: 'Roboto Mono'; } header { + flex: 0 0 auto; background-color: var(--header-background); color: var(--header-color); font-size: var(--header-font-size); @@ -198,21 +214,23 @@ table { border: 0; gap: 0; } -#app { - height: 100%; +body#app { + height: 100vh; display: flex; flex-direction: column; } +main { + flex: 1 1 auto; + padding-bottom: 3em; /* convenience space on the bottom */ + overflow-y: scroll; + text-align: center; +} + header nav.headermain { /* Position so that tooltips can appear on top of other positioned elements */ position: relative; z-index: 100; } -main { - height: calc(100svh - var(--header-height)); - padding-bottom: 3em; /* convenience space on the bottom */ - overflow-y: scroll; -} .spacer { flex-grow: 1 } .smallgap { flex-shrink: 1; width: 2em } diff --git a/frontend/src/components/BreadCrumb.vue b/frontend/src/components/BreadCrumb.vue index a25aad8..ad6288e 100644 --- a/frontend/src/components/BreadCrumb.vue +++ b/frontend/src/components/BreadCrumb.vue @@ -10,6 +10,7 @@ > {