inline tag selector (#16 complete)

src/larvatagger.css

@@ -145,3 +145,24 @@ input[type=text]:disabled {
 	height: 192px;
 	border-width: 8px;
 }
+
+.player button {
+	margin-left: 0.25rem;
+}
+
+#tag-selector {
+	width: 1000px;
+	overflow-x: auto;
+}
+#tag-selector select {
+	margin-top: 0.75rem;
+	margin-bottom: 0.5rem;
+}
+#tag-selector option {
+	border-color: #000;
+	border-width: 1px;
+	border-radius: 0.25rem;
+	display: inline-block;
+	float: left;
+	margin-left: 0.25rem;
+}

src/wgl.jl

@@ -350,7 +350,7 @@ function player(animator::TimeController; kwargs...)
            stepbackwardbutton(animator),
            stepforwardbutton(animator),
            with_attributes(kwargs;
-                           class="flex flex-row",
+                           class="flex flex-row player",
                            style="width: 100%; height: 40px"),
           )
 end
@@ -859,7 +859,7 @@ function to_dom(selectedtags, selectable)
                           onmousedown=selectable ? js"LarvaTagger.toggleTagAtPointer(event)" : nothing,
                          ) for (tagname, selected) in selectedtags;
                multiple=true,
-               size=length(selectedtags),
+               size=1,
               )
 end
 
@@ -880,7 +880,7 @@ function JSServe.jsrender(session::Session, ts::TagSelector)
         end
         evaljs(session, js"LarvaTagger.setTagSelector($fromjs)")
     end
-    taglist = r(session, DOM.div(to_dom(ts.selected[], ts.selectable)))
+    taglist = r(session, DOM.div(to_dom(ts.selected[], ts.selectable); id="tag-selector"))
     on(ts.selected) do selected
         js_dom = JSServe.jsrender(session, to_dom(selected, ts.selectable))
         html_dom = replace(string(js_dom), "'" => "\\'")