Mercurial > hg > webaudioevaluationtool

changeset 2808:d5d374b399cb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Some restructuring of the timeline CSS/JS
author Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
date Tue, 25 Apr 2017 10:55:39 +0100
parents 510a64224eec
children 3a2dbff86da9
files interfaces/timeline.css interfaces/timeline.js
diffstat 2 files changed, 18 insertions(+), 18 deletions(-) [+]
line wrap: on
line diff
--- a/interfaces/timeline.css	Tue Apr 25 10:35:24 2017 +0100
+++ b/interfaces/timeline.css	Tue Apr 25 10:55:39 2017 +0100
@@ -3,7 +3,7 @@
     justify-content: center;
 }
 div.timeline-element-content {
-    max-width: 800px;
+    width: 90%;
     min-width: 200px;
     border: 1px solid black;
     margin: 10px 0px;
@@ -13,7 +13,7 @@
     display: flex;
     width: inherit;
     height: 160px;
-    margin-left: 50px;
+    margin: auto;
 }
 canvas.canvas-layer1 {
     position: absolute;
@@ -36,11 +36,7 @@
 canvas.canvas-disabled {
     background-color: gray;
 }
-div.timeline-element-comment-holder {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-}
+div.timeline-element-comment-holder {}
 div.comment-entry {
     border: 1px solid #444444;
     max-width: 600px;
@@ -49,14 +45,22 @@
     padding: 5px;
     height: 80px;
     border-radius: 10px;
-    display: flex;
-    flex-direction: column;
+    display: inline-block;
+    text-align: center;
 }
 div.comment-entry-header {
-    display: flex;
-    justify-content: space-between;
+    display: table;
+    text-align: unset;
+    width: 100%;
+}
+div.comment-entry-header span {
+    float: left;
+}
+div.comment-entry-header button {
+    float: right;
 }
 textarea.comment-entry-text {
     resize: none;
     margin: auto;
+    width: 90%;
 }
--- a/interfaces/timeline.js	Tue Apr 25 10:35:24 2017 +0100
+++ b/interfaces/timeline.js	Tue Apr 25 10:55:39 2017 +0100
@@ -256,7 +256,8 @@
         layer2: document.createElement("canvas"),
         layer3: document.createElement("canvas"),
         layer4: document.createElement("canvas"),
-        resize: function (w) {
+        resize: function () {
+            var w = $(this.layer1.parentElement).width();
             this.layer1.width = w;
             this.layer2.width = w;
             this.layer3.width = w;
@@ -409,12 +410,7 @@
     buttonHolder.appendChild(this.playButton.DOM);
 
     this.resize = function () {
-        var w = window.innerWidth;
-        w = Math.min(w, 800);
-        w = Math.max(w, 200);
-        root.style.width = w + "px";
-        var c_w = w - 100;
-        this.canvas.resize(c_w);
+        this.canvas.resize();
     };
 
     this.enable = function () {