From b298f444684c982db20750c90a0601bcb3bcdbb5 Mon Sep 17 00:00:00 2001
From: Luciano Iam <lucianito@gmail.com>
Date: Sun, 16 Aug 2020 19:06:49 +0200
Subject: [PATCH] WS: improve mixer demo layout

---
 .../mixer/ardour-toolkit-theme/css/button.css  |  1 +
 .../mixer/ardour-toolkit-theme/css/dialog.css  | 18 ++++++++++++++++++
 share/web_surfaces/builtin/mixer/js/main.js    |  4 ++++
 share/web_surfaces/builtin/mixer/main.css      | 10 +++++++++-
 4 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/share/web_surfaces/builtin/mixer/ardour-toolkit-theme/css/button.css b/share/web_surfaces/builtin/mixer/ardour-toolkit-theme/css/button.css
index 250a0677ef..1d14fe1b4d 100644
--- a/share/web_surfaces/builtin/mixer/ardour-toolkit-theme/css/button.css
+++ b/share/web_surfaces/builtin/mixer/ardour-toolkit-theme/css/button.css
@@ -34,6 +34,7 @@
     text-decoration: none;
     box-sizing: border-box;
     transition: border 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
+    min-height: 37px;
 }
 /*.toolkit-button:hover {
     border: 1px solid #002f42;
diff --git a/share/web_surfaces/builtin/mixer/ardour-toolkit-theme/css/dialog.css b/share/web_surfaces/builtin/mixer/ardour-toolkit-theme/css/dialog.css
index 0952b46d71..a9ec8fc9b3 100644
--- a/share/web_surfaces/builtin/mixer/ardour-toolkit-theme/css/dialog.css
+++ b/share/web_surfaces/builtin/mixer/ardour-toolkit-theme/css/dialog.css
@@ -8,3 +8,21 @@
     -moz-box-shadow:    0px 2px 9px 0px rgba(0, 0, 0, 0.75);
     box-shadow:         0px 2px 9px 0px rgba(0, 0, 0, 0.75);
 }
+
+/* disable show/hide animations */
+
+.toolkit-dialog {
+    -webkit-animation: none;
+    -moz-animation: none;
+    -ms-animation: none;
+    -o-animation: none;
+    animation: none;
+}
+
+.toolkit-dialog.toolkit-hiding {
+    -webkit-transition: none;
+    -moz-transition: none;
+    -ms-transition: none;
+    -o-transition: none;
+    transition: none;
+}
diff --git a/share/web_surfaces/builtin/mixer/js/main.js b/share/web_surfaces/builtin/mixer/js/main.js
index dcc76a029a..7c7601a19b 100644
--- a/share/web_surfaces/builtin/mixer/js/main.js
+++ b/share/web_surfaces/builtin/mixer/js/main.js
@@ -34,6 +34,10 @@ import { createRootContainer, Container, Dialog, Label, Button, DiscreteKnob,
                 root.removeChild(root.children[0]);
             }
 
+            const top = new Container();
+            top.id = 'top';
+            top.appendTo(root);
+
             const mixer = new Container();
             mixer.id = 'mixer';
             mixer.appendTo(root);
diff --git a/share/web_surfaces/builtin/mixer/main.css b/share/web_surfaces/builtin/mixer/main.css
index 8ef804fe7d..c086060b1c 100644
--- a/share/web_surfaces/builtin/mixer/main.css
+++ b/share/web_surfaces/builtin/mixer/main.css
@@ -20,8 +20,10 @@ div {
 
 #root {
     display: flex;
+    flex-direction: column;
     width: 100%;
     height: 100%;
+    /* keep these for dialogs */
     align-items: center;
     justify-content: center;
 }
@@ -43,12 +45,16 @@ div {
     background-image: url('expand.svg');
 }
 
+#top {
+    height: 10vh;
+}
+
 #mixer {
     display: flex;
     flex-direction: row;
     height: 100%;
-    max-height: 600px;
     width: 100%;
+    padding-bottom: 10vh;
     overflow-x: auto;
     justify-content: space-between;
 }
@@ -58,11 +64,13 @@ div {
     flex-direction: column;
     align-items: center;
     min-width: 200px;
+    max-height: 768px;
 }
 
 .strip-meter-fader {
     display: flex;
     flex: 1;
+    min-height: 300px;
 }
 
 .strip-label {