Change: tags in sidebar
This commit is contained in:
parent
fd408f549c
commit
c908bf16af
2 changed files with 27 additions and 13 deletions
|
@ -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';
|
||||
|
|
|
@ -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;
|
||||
}
|
Loading…
Reference in a new issue