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

50
src/webpage/style.css
View file

@ -1266,7 +1266,6 @@ span.instanceStatus {
height: 192px;
}
.messageimgdiv {
height: 100%;
position: relative;
}
.messageimg {
@ -1870,7 +1869,7 @@ img.bigembedimg {
#sideContainDiv.searchDiv {
padding: 0px;
display: flex;
width: 30vw;
width: max(30vw, 400px);
.topMessage {
margin: 0px 10px;
@ -2620,9 +2619,47 @@ fieldset input[type="radio"] {
.optionElement .fileinputdiv {
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 {
max-width: unset;
width: 94%;
@ -2658,12 +2695,14 @@ fieldset input[type="radio"] {
.channelnamediv {
padding: 0;
}
#maintoggleicon,
#memberlisttoggleicon {
#maintoggleicon {
display: block;
padding: 12px;
cursor: pointer;
}
#memberlisttoggleicon {
padding: 6px;
}
#maintoggleicon span {
height: 14px;
width: 14px;
@ -2681,6 +2720,7 @@ fieldset input[type="radio"] {
#page:has(#memberlisttoggle:checked) #sideContainDiv,
#sideContainDiv.searchDiv {
right: 0;
overflow: auto;
}
#page:has(#maintoggle:checked) #maintoggleicon {
rotate: 180deg;