tag-browser: Some small improvements

This patch makes tag-browser layout somewhat usable on mobile.
Additionally it adds few banner hints to use Ctrl keys and basic hint to
select a category when empty.
This also makes the Copy-button hidden until some content is shown in
code-block.

html_resources/code-block/code-block.css

@@ -26,6 +26,7 @@ caption:empty{
 }
 .outerBox{
   position: relative;
+  overflow: hidden;
 }
 table{
   border: 1px solid;
@@ -60,7 +61,7 @@ tbody{
   color: silver;
   border: 1px solid rgba(230,230,230,0.3);
   position: absolute;
-  margin-top: var(--copy-button-top);
+  margin-top: var(--copy-button-top,0.3em);
   right: .3em;
   cursor: pointer
 }
@@ -105,6 +106,11 @@ a:visited{
   color: orchid
 }
 tbody > div{ display: contents }
+
+.value,
+.function{
+  word-break: break-word;
+}
 /* These should really be moved into separate highlighter css */
 .comment{ color: rgb(50,180,90) }
 .selector{ color: lavenderblush }

html_resources/code-block/code-block.js

@@ -48,9 +48,11 @@ class CodeBlock extends HTMLElement{
       let parts = this.dataset.matchlinks.split(" -> ");
       // this is kinda sketchy
       if(parts.length === 2){
+        const from = parts[0];
+        const to = parts[1];
         try{
-          this.highlighter.linkMatcher = new RegExp(parts[0],"g");
-          this.highlighter.linkGenerator = (a) => (parts[1].replace("%s",a));
+          this.highlighter.linkMatcher = new RegExp(from,"g");
+          this.highlighter.linkGenerator = (a) => (to.replace("%s",a));
         }catch(e){
           console.warn(e);
           this.highlighter.linkMatcher = null;

html_resources/main.css

@@ -1,6 +1,12 @@
 body{background-color: rgb(60,50,70); color: silver; margin: 0px }
 #ui{ display: flex; }
-#site{ height: 100vh; overflow-y: auto; flex: 1 }
+#site{
+  height: 100vh;
+  box-sizing: border-box;
+  overflow-y: auto;
+  flex: 1;
+  border-top: 2.2em solid transparent;
+}
 
 .categoryList{
   padding-block: 1em;
@@ -71,12 +77,50 @@ pre:empty{ display: none }
 .target:hover{ background-color: rgb(80,80,90) }
 .target.selected{ background-color: rgb(80,80,120) }
 .target > a:hover{ filter: drop-shadow(0 0 3px fuchsia) }
-/*#targets{ display: grid; grid-template-columns: 1fr 1fr 1fr }*/
+
 #targets{
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   max-height: calc(var(--grid-rows) * 2.4rem);
+  align-content: space-between;
+  margin-bottom: 0.2em;
+}
+
+.banner{
+  padding: 0.5em 1em;
+  margin-bottom: 0.2em;
+  border-bottom: 1px solid black;
+  border-left: 1px solid black;
+  background: rgb(40,37,43);
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: -1;
+  display: inline-block;
+}
+
+kbd{
+  border-radius: 3px;
+  padding: 2px 3px 1px;
+  border: 1px solid rgb(40,40,40);
+  box-shadow: inset 0 0 2px currentColor;
+}
+
+.banner > .keyinfo,
+#targets[style] + .banner > .placeholder{
+  display: none;
+}
+
+#targets[style] + .banner > .keyinfo{
+  display: block;
+}
+.hint{
+  text-align: end
+}
+.hint::before{
+  content: "Hint: ";
+  font-style: italic;
 }
 
 pre{
@@ -88,7 +132,7 @@ pre{
 }
 
 pre > div{
-  background-color: rgb(40,37,43);;
+  background-color: rgb(40,37,43);
   padding: 1em 0.5em;
   border-inline-start: 1px solid rgb(90,90,90)
 }
@@ -109,3 +153,24 @@ pre > div{
   animation: loadingBar 1500ms linear
 }
 .placeholder-text{ animation: showDelayed 2s steps(1) }
+
+/* Dirty hack for mobile but at least it's something */
+@media screen and (max-width: 700px ){
+  #secondaryCategories{
+    display: none;
+  }
+  .categoryList{
+    opacity: 1;
+    margin-inline-end: -13ch;
+  }
+  .banner{
+    z-index: 1;
+  }
+  #site{
+    background-color: rgb(60,50,70);
+    position: relative;
+  }
+  #targets{
+    position: relative;
+  }
+}

index.html

@@ -18,13 +18,17 @@
   </div>
   <div id="secondaryCategories" class="categoryList">
   </div>
-  <div id="site">
+  <main id="site">
     <div id="targets">
     </div>
+    <div class="banner">
+      <div class="hint keyinfo">Hold <kbd>Ctrl</kbd> or <kbd>Cmd</kbd> to add/remove styles to style set</div>
+      <div class="hint placeholder">Select a style category from the left pane</div>
+    </div>
     <div>
       <code-block data-highlight="css" data-matchlinks="[\w-\.]+\.css -> ./chrome/%s" id="previewBox" class="copy-able"></code-block>
     </div>
-  </div>
+  </main>
 </div>
 </body>
 </html>