From 2ba8dab95e10596ac88539a74e47024836138019 Mon Sep 17 00:00:00 2001
From: Luciano Iam <lucianito@gmail.com>
Date: Tue, 14 Apr 2020 09:53:25 +0200
Subject: WebSockets: update JS client and demo

avoid hardcoded node name strings in mixer-demo
improve mixer-demo design
split ardour.js client into control and metadata mixins
rename JS client class Ardour to ArdourClient
JS client improve mixin implementation
JS client improve manifest parser
NO-OP whitespace and comments
NO-OP update websurface manifest versions
add Ardour icon in mixer-demo
improve mixer-demo scrolling on touch screens
---
 share/web_surfaces/builtin/mixer-demo/css/main.css | 50 ++++++++++++++++------
 1 file changed, 37 insertions(+), 13 deletions(-)

(limited to 'share/web_surfaces/builtin/mixer-demo/css/main.css')

diff --git a/share/web_surfaces/builtin/mixer-demo/css/main.css b/share/web_surfaces/builtin/mixer-demo/css/main.css
index 5477f9840e..0fd812c39b 100644
--- a/share/web_surfaces/builtin/mixer-demo/css/main.css
+++ b/share/web_surfaces/builtin/mixer-demo/css/main.css
@@ -7,6 +7,8 @@ body {
     color: rgb(248,248,242);
     font-family: Helvetica, Arial, sans-serif;
     height: 100%;
+    width: 100%;
+    position: fixed;
     margin: 0;
 }
 
@@ -20,26 +22,46 @@ div {
     height: 100%;
 }
 
-#strips {
+#surface {
     flex: 1;
-    overflow: scroll;
-    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
     box-shadow: 0px 0px 10px #000;
 }
 
-#manifest {
+#top {
+    display: flex;
+    align-items: center;
     padding: 0.25em 0.5em;
-    opacity: 0.5;
-    background: rgba(0,0,0,0.4);
+    box-shadow: 0px 0px 10px #000;
+}
+
+#top > img {
+    height: 24px;
+}
+
+#top > span {
+    opacity: 0.75;
+    margin-left: 12px;
 }
 
 #log {
-    height: 6em;
+    height: 7em;
     overflow: scroll;
     overflow-x: hidden;
     background: rgba(0,0,0,0.4);
 }
 
+#strips {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: scroll;
+    overflow-x: hidden;
+    background: rgba(0,0,0,0.2);
+}
+
 #log pre {
     margin: 0;
     font-family: Menlo, monospace;
@@ -64,10 +86,12 @@ div {
 }
 
 .strip {
-    margin: 5%;
-    padding: 2.5% 5%;
+    margin: 20px;
+    padding: 20px 40px;
     background: rgba(0,0,0,0.1);
     border-radius: 5px;
+    width: 100%;
+    max-width: 768px;
 }
 
 .slider-meter {
@@ -75,12 +99,12 @@ div {
 }
 
 .strip-slider {
-    margin-top: 2.5%;
+    margin-top: 20px;
 }
 
 .plugin {
-    margin: 5%;
-    padding: 2.5% 5%;
+    margin: 40px 0;
+    padding: 20px 40px;
     background: rgba(0,0,0,0.05);
     border-radius: 5px;
 }
@@ -90,7 +114,7 @@ div {
 }
 
 .plugin-param {
-    margin: 5%;
+    margin: 40px;
 }
 
 .plugin-param.boolean {
-- 
cgit v1.2.3