Andromeda/jank-client-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSS fixes and mobile search improvements

Browse source
This commit is contained in:
MathMan05 2025-04-15 14:17:14 -05:00
parent 8f5420b436
commit dfdff6157b
2 changed files with 50 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/webpage/index.ts
View file

@ -166,9 +166,11 @@ import {I18n} from "./i18n.js";
setTimeout(() => (searchBox.innerHTML = ""), 0); setTimeout(() => (searchBox.innerHTML = ""), 0);
searchX.classList.add("svg-search"); searchX.classList.add("svg-search");
searchX.classList.remove("svg-plainx"); searchX.classList.remove("svg-plainx");
searchBox.parentElement!.classList.remove("searching");
} else { } else {
searchX.classList.remove("svg-search"); searchX.classList.remove("svg-search");
searchX.classList.add("svg-plainx"); searchX.classList.add("svg-plainx");
searchBox.parentElement!.classList.add("searching");
} }
}); });
searchX.onclick = () => { searchX.onclick = () => {
@ -176,8 +178,11 @@ import {I18n} from "./i18n.js";
markdown.txt = []; markdown.txt = [];
searchBox.innerHTML = ""; searchBox.innerHTML = "";
searchX.classList.add("svg-search"); searchX.classList.add("svg-search");
searchBox.parentElement!.classList.remove("searching");
searchX.classList.remove("svg-plainx"); searchX.classList.remove("svg-plainx");
thisUser.mSearch(""); thisUser.mSearch("");
} else {
searchBox.parentElement!.classList.add("searching");
} }
}; };

50
src/webpage/style.css
View file

@ -1266,7 +1266,6 @@ span.instanceStatus {
height: 192px; height: 192px;
} }
.messageimgdiv { .messageimgdiv {
height: 100%;
position: relative; position: relative;
} }
.messageimg { .messageimg {
@ -1870,7 +1869,7 @@ img.bigembedimg {
#sideContainDiv.searchDiv { #sideContainDiv.searchDiv {
padding: 0px; padding: 0px;
display: flex; display: flex;
width: 30vw; width: max(30vw, 400px);
.topMessage { .topMessage {
margin: 0px 10px; margin: 0px 10px;
@ -2620,9 +2619,47 @@ fieldset input[type="radio"] {
.optionElement .fileinputdiv { .optionElement .fileinputdiv {
width: 100%; width: 100%;
} }
.searching {
#searchBox {
width: 2in;
margin-right: 36px;
padding: 7px 10px 13px 10px;
flex-shrink: 0;
}
}
#searchBox {
width: 0px;
padding: 0;
}
#searchX {
position: absolute;
width: 24px;
height: 24px;
margin: 0;
cursor: pointer;
top: 5px;
right: 2px;
transition: height 0.2s;
}
.searchMeta {
transition: width 0.2s;
min-width: 32px;
height: 32px;
}
} }
@media screen and (max-width: 500px) { @media screen and (max-width: 600px) {
.searching {
position: absolute;
width: 100%;
background: var(--primary-bg);
z-index: 1;
#searchBox {
width: 100%;
padding: 7px 10px 13px 10px;
flex-shrink: 1;
}
}
#homePage { #homePage {
max-width: unset; max-width: unset;
width: 94%; width: 94%;
@ -2658,12 +2695,14 @@ fieldset input[type="radio"] {
.channelnamediv { .channelnamediv {
padding: 0; padding: 0;
} }
#maintoggleicon, #maintoggleicon {
#memberlisttoggleicon {
display: block; display: block;
padding: 12px; padding: 12px;
cursor: pointer; cursor: pointer;
} }
#memberlisttoggleicon {
padding: 6px;
}
#maintoggleicon span { #maintoggleicon span {
height: 14px; height: 14px;
width: 14px; width: 14px;
@ -2681,6 +2720,7 @@ fieldset input[type="radio"] {
#page:has(#memberlisttoggle:checked) #sideContainDiv, #page:has(#memberlisttoggle:checked) #sideContainDiv,
#sideContainDiv.searchDiv { #sideContainDiv.searchDiv {
right: 0; right: 0;
overflow: auto;
} }
#page:has(#maintoggle:checked) #maintoggleicon { #page:has(#maintoggle:checked) #maintoggleicon {
rotate: 180deg; rotate: 180deg;