Change: tags in sidebar

This commit is contained in:
Ruben van de Ven 2022-05-31 14:03:50 +02:00
parent fd408f549c
commit c908bf16af
2 changed files with 27 additions and 13 deletions

View file

@ -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';

View file

@ -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;
}