pmOS-tweaks/fenix-fox
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

tag-browser: Some small improvements

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

8
html_resources/code-block/code-block.css
View file

@ -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 }

6
html_resources/code-block/code-block.js
View file

@ -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;