diff --git a/src/web/App.mjs b/src/web/App.mjs index 159e3ae0..8798c7ff 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -904,9 +904,9 @@ class App { assignAvailableHeight( isMobile ){ const bannerHeight = 40; const controlsHeight = 50; - const operationsHeight = 90; + const operationsHeight = 80; - const remainingSpace = window.innerHeight - (bannerHeight+controlsHeight+operationsHeight-2); + const remainingSpace = window.innerHeight - (bannerHeight+controlsHeight+operationsHeight); // equally divide among recipe, input and output ["recipe", "input", "output"].forEach(( div ) => { diff --git a/src/web/html/index.html b/src/web/html/index.html index 47ba2563..7eab9dbe 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -271,7 +271,7 @@
- + Input
- + Output
diff --git a/src/web/stylesheets/components/_controls.css b/src/web/stylesheets/components/_controls.css index 4e13030c..83408211 100644 --- a/src/web/stylesheets/components/_controls.css +++ b/src/web/stylesheets/components/_controls.css @@ -8,14 +8,18 @@ #controls { width: 100%; - border-top: 1px solid var(--primary-border-colour); background-color: var(--secondary-background-colour); overflow: hidden; } +@media only screen and (min-width: 768px) { + #controls { + border-top: 1px solid var(--primary-border-colour); + } +} + #controls-content { display: flex; - /*align-items: center;*/ padding: 10px 0; height: 100%; } diff --git a/src/web/stylesheets/components/_pane.css b/src/web/stylesheets/components/_pane.css index d48c4675..1337455a 100755 --- a/src/web/stylesheets/components/_pane.css +++ b/src/web/stylesheets/components/_pane.css @@ -6,28 +6,24 @@ * @license Apache-2.0 */ -:root { - --title-height: 48px; - --tab-height: 40px; -} - .title { padding: 8px 12px; - height: var(--title-height); border-bottom: 1px solid var(--primary-border-colour); font-weight: var(--title-weight); font-size: var(--title-size); color: var(--title-colour); background-color: var(--title-background-colour); - line-height: calc(var(--title-height) - 14px); display: flex; justify-content: space-between; + height: var(--title-height); + align-items: center; } .pane-controls { right: 8px; top: 8px; display: inline-flex; + align-items: center; } .pane-controls .btn { @@ -47,4 +43,3 @@ #files .card-header .float-right a:hover { text-decoration: none; } - diff --git a/src/web/stylesheets/components/operations/_operations.css b/src/web/stylesheets/components/operations/_operations.css index 240402b6..c6689068 100644 --- a/src/web/stylesheets/components/operations/_operations.css +++ b/src/web/stylesheets/components/operations/_operations.css @@ -15,7 +15,7 @@ #operations-dropdown { position: absolute; - top: 41px; + top: var(--banner-height); width: 100%; height: auto; overflow: auto; diff --git a/src/web/stylesheets/themes/_structure.css b/src/web/stylesheets/themes/_structure.css index 714774e2..ea2b2f98 100644 --- a/src/web/stylesheets/themes/_structure.css +++ b/src/web/stylesheets/themes/_structure.css @@ -1,11 +1,15 @@ :root { /* Fixed heights */ --banner-height: 40px; - /*initial mobile height*/ - --controls-height: 50px; - --operations-height: 90px; + /* Mobile height */ + --title-height: 40px; + --controls-height: 50px; + --operations-height: 80px; + + /* Desktop specific height */ --desktop-controls-height: 70px; + --tab-height: 40px; } /**