From f6b23ecca5f56e3acaeb58b27814c7fe9d9164ff Mon Sep 17 00:00:00 2001 From: Robin Scholtes Date: Wed, 19 Apr 2023 23:16:43 +1200 Subject: [PATCH] [#181] mobile layout: set heights of all components to make up 100vh --- src/web/App.mjs | 2 +- src/web/TODO.md | 3 +- src/web/html/index.html | 7 ++-- src/web/stylesheets/components/_operation.css | 15 -------- src/web/stylesheets/components/_recipe.css | 2 +- .../components/operations/_operations.css | 14 ++++++++ .../components/operations/_search.css | 4 +++ src/web/stylesheets/index.css | 13 +++---- src/web/stylesheets/layout/_structure.css | 34 +++++++++++-------- src/web/stylesheets/themes/_classic.css | 2 -- 10 files changed, 50 insertions(+), 46 deletions(-) create mode 100644 src/web/stylesheets/components/operations/_operations.css diff --git a/src/web/App.mjs b/src/web/App.mjs index c73dc266..7f584027 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -668,7 +668,7 @@ class App { this.manager.recipe.adjustWidth(); this.manager.input.calcMaxTabs(); this.manager.output.calcMaxTabs(); - this.manager.controls.calcControlsHeight(); + this.manager.controls.calcControlsHeight(); //@TODO } diff --git a/src/web/TODO.md b/src/web/TODO.md index 9f896b9e..11122c98 100644 --- a/src/web/TODO.md +++ b/src/web/TODO.md @@ -6,7 +6,7 @@ ### Desktop UI: - restore desktop UI - `search-results` should really be at the top once input, with `categories` below it -- `calcControlsHeight` and `adjustComponentSizes` sometimes cause trouble in `recipe` `rec-list` +- `calcControlsHeight` and `adjustComponentSizes` cause trouble in `recipe` `rec-list` when resizing from desktop to mobile ### Mobile UI: - bootstrap native 'x' in `input[type="search"]` should clear input value and @@ -14,7 +14,6 @@ - on click of `input[type="search]`, `favourites` briefly opens and closes. Initially, it should be opened - on invalid search input ( and no results ), categories should be displayed - test with keyboard popping up because that messes with the viewheights on mobile probably -- make sure panels in `workspace-wrapper` grow and add up to 100% ### General UI: - fix up key / tab events so UI can be navigated comfortably with keys ( inc. visual focus feedback ). Probably a lot diff --git a/src/web/html/index.html b/src/web/html/index.html index fd07c159..29e91ef8 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -193,7 +193,7 @@
- +
-
+
- -
Recipe @@ -269,7 +267,6 @@
-
diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css index 4cbeb528..daead791 100755 --- a/src/web/stylesheets/components/_operation.css +++ b/src/web/stylesheets/components/_operation.css @@ -317,21 +317,6 @@ input.toggle-string { background-color: var(--disabled-border-colour) !important; } -/*@TODO: move below block elsewhere, think of a better name*/ -/* Mobile UI for the dropdown operations search */ -.dropdown-operations { - position: relative; -} - -#reset-operations.hidden, -#search-results.hidden, -#categories.hidden { - z-index: -10; - display: none; -} -/* end mobile UI for the dropdown operations search */ - - diff --git a/src/web/stylesheets/components/_recipe.css b/src/web/stylesheets/components/_recipe.css index 6bc6cf4d..2dd0ab18 100644 --- a/src/web/stylesheets/components/_recipe.css +++ b/src/web/stylesheets/components/_recipe.css @@ -11,7 +11,7 @@ } #rec-list { - overflow-y: scroll; + overflow-y: auto; } #rec-list .operation { diff --git a/src/web/stylesheets/components/operations/_operations.css b/src/web/stylesheets/components/operations/_operations.css new file mode 100644 index 00000000..bfd464c7 --- /dev/null +++ b/src/web/stylesheets/components/operations/_operations.css @@ -0,0 +1,14 @@ +/** + * Operations component styles + */ + +.operations-wrapper { + position: relative; +} + +#reset-operations.hidden, +#search-results.hidden, +#categories.hidden { + z-index: -10; + display: none; +} diff --git a/src/web/stylesheets/components/operations/_search.css b/src/web/stylesheets/components/operations/_search.css index d78758ca..31913e0a 100644 --- a/src/web/stylesheets/components/operations/_search.css +++ b/src/web/stylesheets/components/operations/_search.css @@ -1,3 +1,7 @@ +/** + * Operations - Search component and search-results list + */ + #search { padding-left: 10px; padding-right: 10px; diff --git a/src/web/stylesheets/index.css b/src/web/stylesheets/index.css index 8c2f14a7..c5cf05b3 100755 --- a/src/web/stylesheets/index.css +++ b/src/web/stylesheets/index.css @@ -22,20 +22,21 @@ @import "./preloader.css"; /* Components */ -@import "./components/_banner.css"; @import "./components/_button.css"; @import "./components/_op-list.css"; @import "./components/_operation.css"; @import "./components/_pane.css"; -@import "./components/_modals.css"; -@import "./components/_recipe.css"; @import "./components/_scrollbar.css"; -@import "./components/_controls.css"; @import "./components/_dividers.css"; -/* Components: Operations group */ +@import "./components/_modals.css"; +@import "./components/_banner.css"; +@import "./components/_recipe.css"; +@import "./components/_controls.css"; +/* Components: Operations */ +@import "./components/operations/_operations.css"; @import "./components/operations/_search.css"; @import "./components/operations/_categories.css"; -/* Components: IO group */ +/* Components: IO */ @import "./components/io/_io.css"; @import "./components/io/_search-results.css"; @import "./components/io/_tabs.css"; diff --git a/src/web/stylesheets/layout/_structure.css b/src/web/stylesheets/layout/_structure.css index 1d72866f..fe930554 100755 --- a/src/web/stylesheets/layout/_structure.css +++ b/src/web/stylesheets/layout/_structure.css @@ -6,6 +6,16 @@ * @license Apache-2.0 */ +/* Together, they make up 100vh */ +:root { + --banner-height: 40px; + --controls-height: 70px; + --workspace-height: calc( 100vh - calc( var(--banner-height) + var(--controls-height)));; + --recipe-height: 20vh; + --operations-height: 88px; + --io-height: calc(100vh - var(--banner-height) - var(--controls-height) - var(--recipe-height) - var(--operations-height)); +} + body { overflow: hidden; } @@ -16,28 +26,24 @@ body { width: 100%; } -#workspace-wrapper { - height: calc( 100vh - calc( var(--banner-height) + var(--controls-height)) ); - margin-top: var(--banner-height); -} - -#banner { - top: 0; - margin: 0; - height: var(--banner-height); -} - #content-wrapper { top: 0; bottom: 0; } -#recipe { height: 20vh;} -#IO { height: 50vh; } +#workspace-wrapper { + height: var(--workspace-height); + margin-top: var(--banner-height); +} + +#banner { height: var(--banner-height); } +#operations { height: var(--operations-height); } +#recipe { height: var(--recipe-height); } +#IO { height: var(--io-height); } +#controls { height: var(--controls-height); } #controls { bottom: 0; - height: var(--controls-height); } @media only screen and ( min-width: 768px ) { diff --git a/src/web/stylesheets/themes/_classic.css b/src/web/stylesheets/themes/_classic.css index fe005999..49c374b6 100755 --- a/src/web/stylesheets/themes/_classic.css +++ b/src/web/stylesheets/themes/_classic.css @@ -132,7 +132,5 @@ --code-font-colour: #c7254e; --input-highlight-colour: #1976d2; --input-border-colour: #424242; - --banner-height: 40px; - --controls-height: 70px; }