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

more nice lookingness

Browse source
This commit is contained in:
MathMan05 2024-07-31 23:51:41 -05:00
parent 983b7e3fa2
commit 1e572932d3
4 changed files with 34 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

11
.dist/channel.js
View file

@ -248,8 +248,9 @@ class Channel {
this.sortchildren(); this.sortchildren();
const caps = document.createElement("div"); const caps = document.createElement("div");
const decdiv = document.createElement("div"); const decdiv = document.createElement("div");
const decoration = document.createElement("b"); const decoration = document.createElement("img");
decoration.textContent = "▼"; decoration.src = "/icons/category.svg";
decoration.classList.add("svgtheme", "colaspeicon");
decdiv.appendChild(decoration); decdiv.appendChild(decoration);
const myhtml = document.createElement("p2"); const myhtml = document.createElement("p2");
myhtml.textContent = this.name; myhtml.textContent = this.name;
@ -278,13 +279,13 @@ class Channel {
childrendiv.classList.add("channels"); childrendiv.classList.add("channels");
setTimeout(_ => { childrendiv.style.height = childrendiv.scrollHeight + 'px'; }, 100); setTimeout(_ => { childrendiv.style.height = childrendiv.scrollHeight + 'px'; }, 100);
decdiv.onclick = function () { decdiv.onclick = function () {
if (decoration.textContent === "▼") { // if (childrendiv.style.height !== '0px') {
decoration.textContent = "▲"; decoration.classList.add("hiddencat");
//childrendiv.classList.add("colapsediv"); //childrendiv.classList.add("colapsediv");
childrendiv.style.height = '0px'; childrendiv.style.height = '0px';
} }
else { else {
decoration.textContent = "▼"; decoration.classList.remove("hiddencat");
//childrendiv.classList.remove("colapsediv") //childrendiv.classList.remove("colapsediv")
childrendiv.style.height = childrendiv.scrollHeight + 'px'; childrendiv.style.height = childrendiv.scrollHeight + 'px';
} }

11
webpage/channel.ts
View file

@ -261,8 +261,9 @@ class Channel{
const caps=document.createElement("div"); const caps=document.createElement("div");
const decdiv=document.createElement("div"); const decdiv=document.createElement("div");
const decoration=document.createElement("b"); const decoration=document.createElement("img");
decoration.textContent="▼" decoration.src="/icons/category.svg";
decoration.classList.add("svgtheme","colaspeicon")
decdiv.appendChild(decoration) decdiv.appendChild(decoration)
const myhtml=document.createElement("p2"); const myhtml=document.createElement("p2");
@ -295,12 +296,12 @@ class Channel{
childrendiv.classList.add("channels"); childrendiv.classList.add("channels");
setTimeout(_=>{childrendiv.style.height = childrendiv.scrollHeight + 'px';},100) setTimeout(_=>{childrendiv.style.height = childrendiv.scrollHeight + 'px';},100)
decdiv.onclick=function(){ decdiv.onclick=function(){
if(decoration.textContent==="▼"){// if(childrendiv.style.height!=='0px'){
decoration.textContent="▲"; decoration.classList.add("hiddencat");
//childrendiv.classList.add("colapsediv"); //childrendiv.classList.add("colapsediv");
childrendiv.style.height = '0px'; childrendiv.style.height = '0px';
}else{ }else{
decoration.textContent="▼"; decoration.classList.remove("hiddencat");
//childrendiv.classList.remove("colapsediv") //childrendiv.classList.remove("colapsediv")
childrendiv.style.height = childrendiv.scrollHeight + 'px'; childrendiv.style.height = childrendiv.scrollHeight + 'px';
} }

1
webpage/icons/category.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"><path d="m15 118 75-64 75 64" style="fill:none;stroke:red;stroke-width:29.0323;stroke-linecap:round;stroke-linejoin:round"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 192 B

25
webpage/style.css
View file

@ -328,7 +328,8 @@ p {
font-size: .25in; font-size: .25in;
display: inline-block; display: inline-block;
text-indent: .05in; text-indent: .05in;
width: .15in; width: .175in;
padding-right: .026in;
} }
.spacee { .spacee {
@ -651,7 +652,7 @@ textarea:focus-visible,
transition: height .2s ease-in-out; transition: height .2s ease-in-out;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
padding-left: .15in; padding-left: .05in;
} }
.channel:hover { .channel:hover {
@ -662,7 +663,8 @@ textarea:focus-visible,
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
transition: font-weight .1s; transition: font-weight .1s;
padding: .02in 0; padding: .02in .0in;
border-radius: .05in;
} }
.viewChannel{ .viewChannel{
font-weight:900; font-weight:900;
@ -696,6 +698,9 @@ textarea:focus-visible,
flex-direction: row; flex-direction: row;
align-self: stretch; align-self: stretch;
width: 100%; width: 100%;
display: flex;
align-content: center;
align-items: center;
} }
.channeleffects:hover { .channeleffects:hover {
background-color: var(--channel-hover); background-color: var(--channel-hover);
@ -898,7 +903,7 @@ select{
} }
.channels .space { .channels .space {
text-indent: .15in; /* text-indent: .15in; */
} }
input[type="checkbox"] { input[type="checkbox"] {
@ -1518,3 +1523,15 @@ form div{
color: var(--icon-color); color: var(--icon-color);
filter:hue-rotate(var(--rot)) invert(var(--invert)) brightness(var(--brightness)); filter:hue-rotate(var(--rot)) invert(var(--invert)) brightness(var(--brightness));
} }
.channels .channel{
padding: .05in .1in;
margin-bottom: .03in;
}
.colaspeicon{
width:.15in;
padding-right: .025in;
transition:rotate .1s;
}
.hiddencat{
rotate:90deg;
}