diff --git a/app/www/annotate.js b/app/www/annotate.js index 77c5f4f..2f64321 100644 --- a/app/www/annotate.js +++ b/app/www/annotate.js @@ -148,6 +148,7 @@ class Annotator extends EventTarget { }); this.wrapperEl = wrapperEl; + this.svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this.wrapperEl.appendChild(this.svgEl); this.wrapperEl.classList.add(this.config.is_player ? "svganim_player" : "svganim_annotator"); @@ -274,7 +275,7 @@ class Annotator extends EventTarget { }); this.tagsEl.appendChild(tagEl); - this.controlsEl.appendChild(this.tagsEl); + this.wrapperEl.appendChild(this.tagsEl); this.commentEl = document.createElement('input'); this.commentEl.type = 'text'; diff --git a/app/www/svganim.css b/app/www/svganim.css index 7471116..221817f 100644 --- a/app/www/svganim.css +++ b/app/www/svganim.css @@ -93,9 +93,9 @@ path.before_in { .scrubber {} .tags { - line-height: 40px; - display: flex; - flex-direction: row; + line-height: 1.5; + /* display: flex; + flex-direction: row; */ padding: 0; margin: 0; } @@ -257,13 +257,17 @@ path.before_in { width: 100px; /* as wide as audio controls only */ overflow: hidden; - white-space: nowrap; + /* white-space: nowrap; */ left: -50px; + grid-area: sidebar; } .audioconfig:hover { width: auto; left: 0px; + overflow: visible; + height: 200px; + } .audioconfig select, @@ -279,28 +283,37 @@ audio { .svganim_annotator { - display: flex; + display: grid; flex-direction: column; height: 100%; + grid-template-rows: 40px auto 100px; + grid-template-columns: 200px auto; + gap: 10px; + overflow: hidden; } .svganim_annotator svg { - top: 20px; + top: auto; background: white; - margin-left: 20px; - flex-shrink: 1; - flex-grow: 1; + margin-left: 0; position: static; + height: auto; + width: auto; } +.svganim_annotator .tags { + grid-area: 2/1/2/1; +} .svganim_annotator .audioconfig { - order: -1; - flex-grow: 0; - flex-shrink: 0; position: static; + grid-area: 1/1/1/1; } +.svganim_annotator > svg { + grid-area: 1/2/2/2; +} .svganim_annotator .controls { + grid-area: 3/2/3/2; margin-left: 5%; position: static !important; } \ No newline at end of file