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.
This commit is contained in:
MrOtherGuy 2023-02-05 10:26:53 +02:00
parent 8c41908dd8
commit c50e5df3e3
4 changed files with 86 additions and 9 deletions

View file

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

View file

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

View file

@ -1,6 +1,12 @@
body{background-color: rgb(60,50,70); color: silver; margin: 0px } body{background-color: rgb(60,50,70); color: silver; margin: 0px }
#ui{ display: flex; } #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{ .categoryList{
padding-block: 1em; padding-block: 1em;
@ -71,12 +77,50 @@ pre:empty{ display: none }
.target:hover{ background-color: rgb(80,80,90) } .target:hover{ background-color: rgb(80,80,90) }
.target.selected{ background-color: rgb(80,80,120) } .target.selected{ background-color: rgb(80,80,120) }
.target > a:hover{ filter: drop-shadow(0 0 3px fuchsia) } .target > a:hover{ filter: drop-shadow(0 0 3px fuchsia) }
/*#targets{ display: grid; grid-template-columns: 1fr 1fr 1fr }*/
#targets{ #targets{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
max-height: calc(var(--grid-rows) * 2.4rem); 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{ pre{
@ -88,7 +132,7 @@ pre{
} }
pre > div{ pre > div{
background-color: rgb(40,37,43);; background-color: rgb(40,37,43);
padding: 1em 0.5em; padding: 1em 0.5em;
border-inline-start: 1px solid rgb(90,90,90) border-inline-start: 1px solid rgb(90,90,90)
} }
@ -108,4 +152,25 @@ pre > div{
background-position: left; background-position: left;
animation: loadingBar 1500ms linear animation: loadingBar 1500ms linear
} }
.placeholder-text{ animation: showDelayed 2s steps(1) } .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;
}
}

View file

@ -18,13 +18,17 @@
</div> </div>
<div id="secondaryCategories" class="categoryList"> <div id="secondaryCategories" class="categoryList">
</div> </div>
<div id="site"> <main id="site">
<div id="targets"> <div id="targets">
</div> </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> <div>
<code-block data-highlight="css" data-matchlinks="[\w-\.]+\.css -> ./chrome/%s" id="previewBox" class="copy-able"></code-block> <code-block data-highlight="css" data-matchlinks="[\w-\.]+\.css -> ./chrome/%s" id="previewBox" class="copy-able"></code-block>
</div> </div>
</div> </main>
</div> </div>
</body> </body>
</html> </html>