Make color mode and dictation icons appear only when JS is enabled
Committed d2df1c
--- a/canopy/static/enliven.js
+++ b/canopy/static/enliven.js
const navDiv = document.querySelector("body > nav div")
navDiv.innerHTML = `<button id=join>Join Room</button>` + navDiv.innerHTML
+ search.innerHTML =
+ `<svg id=colormode title="switch dark/light color mode" viewBox="-0.5 0 25 25"
+ fill=none xmlns=http://www.w3.org/2000/svg>
+ <path d="
+ M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2
+ 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z
+ M12,20.5 L12,3.5 C16.6944204,3.5 20.5,7.30557963 20.5,12
+ C20.5,16.6944204 16.6944204,20.5 12,20.5 Z"></path>
+ </svg>
+ <svg id=listen title=dictation viewBox="-0.5 0 25 25"
+ fill=none xmlns=http://www.w3.org/2000/svg></svg>`
+ + search.innerHTML
+
microphoneStatus('off')
colormode.onmouseup = toggleColorMode
listen.onmouseup = initDictation
--- a/canopy/templates/template.html
+++ b/canopy/templates/template.html
</div>
<div class=search>
<form id=search action=/search>
- <svg id=colormode title="switch dark/light color mode" viewBox="-0.5 0 25 25"
- fill=none xmlns=http://www.w3.org/2000/svg>
- <path d="
- M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2
- 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z
- M12,20.5 L12,3.5 C16.6944204,3.5 20.5,7.30557963 20.5,12
- C20.5,16.6944204 16.6944204,20.5 12,20.5 Z"></path>
- </svg>
- <svg id=listen title=dictation viewBox="-0.5 0 25 25"
- fill=none xmlns=http://www.w3.org/2000/svg></svg>
$ query = resource.query if "query" in resource else ""
<input name=q type=text value="$query"><br>
<small class=partial></small> <a href=/guide>Guide</a>