tag-browser: Draw main ui over the sidebar on narrow screens

This commit is contained in:
MrOtherGuy 2023-02-25 12:09:19 +02:00
parent e129aa349c
commit fea39ad68a
3 changed files with 26 additions and 7 deletions

View file

@ -165,16 +165,29 @@ pre > div{
display: none; display: none;
} }
.categoryList{ .categoryList{
opacity: 0.6;
}
#ui.no-content > #categories{
opacity: 1; opacity: 1;
} }
#site{
background-color: rgb(60,50,70);
min-height: 100vh;
border-inline-start: 1px solid gold;
box-shadow: 0 0 26px 0 black;
}
#ui > #site{
margin-left: 7ch;
position: relative;
z-index: 2;
}
#ui.no-content > #site{
z-index: -1;
}
.banner{ .banner{
display: none; display: none;
} }
#site{ #ui.no-content > #site > .banner{
background-color: rgb(60,50,70); display: block;
}
#ui > #site{ margin-left: 22ch }
#targets{
position: relative;
} }
} }

View file

@ -115,6 +115,12 @@ function getSecondaryCategories(list){
} }
function showMatchingTargets(fileNames,setSelected = false){ function showMatchingTargets(fileNames,setSelected = false){
{
let ui = document.getElementById("ui");
if(ui.classList.contains("no-content")){
ui.classList.remove("no-content")
}
}
let bonus = 0; let bonus = 0;
for(let c of Array.from(document.querySelectorAll(".target"))){ for(let c of Array.from(document.querySelectorAll(".target"))){
if(fileNames.includes(c.dataset.filename)){ if(fileNames.includes(c.dataset.filename)){

View file

@ -13,7 +13,7 @@
<div id="placeholder"> <div id="placeholder">
<div class="placeholder-text">FAILURE, resources could not be loaded properly</div> <div class="placeholder-text">FAILURE, resources could not be loaded properly</div>
</div> </div>
<div id="ui" class="hidden"> <div id="ui" class="hidden no-content">
<div id="categories" class="categoryList"> <div id="categories" class="categoryList">
</div> </div>
<div id="secondaryCategories" class="categoryList"> <div id="secondaryCategories" class="categoryList">