LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Improved visual relation of side components to main sections in ecosystem overview

Browse source
This commit is contained in:
ポール ウェッブ 2018-06-14 20:11:56 -05:00
parent 2e1efb6c0a
commit 1d646b7ab0
1 changed files with 55 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
content/.vuepress/components/Ecosystem.vue
View file

@ -213,63 +213,58 @@
<script>
export default {
data () {
return {
}
},
methods: {
open (ecosystemComponentClassName) {
document.querySelectorAll(".ecosystem__module").forEach(n => n.classList.remove("active"));
document.querySelectorAll(".ecosystem__submodule").forEach(n => n.classList.remove("active"));
document.getElementsByClassName(ecosystemComponentClassName)[0].classList.add("active");
switch (true) {
case (ecosystemComponentClassName === "lbrycrd"):
document.getElementsByClassName("chainquery")[0].classList.add("active");
document.getElementsByClassName("lighthouse")[0].classList.add("active");
document.getElementsByClassName("wallet")[0].classList.add("active");
resetClasses();
document.getElementsByClassName("chainquery")[0].className += " active red";
document.getElementsByClassName("lighthouse")[0].className += " active red";
document.getElementsByClassName("wallet")[0].className += " active red";
break;
case (ecosystemComponentClassName === "lbry"):
document.getElementsByClassName("reflector")[0].classList.add("active");
document.getElementsByClassName("wallet")[0].classList.add("active");
resetClasses();
document.getElementsByClassName("reflector")[0].className += " active blue";
document.getElementsByClassName("wallet")[0].className += " active blue";
break;
case (ecosystemComponentClassName === "applications"):
document.getElementsByClassName("chainquery")[0].classList.add("active");
document.getElementsByClassName("lighthouse")[0].classList.add("active");
resetClasses();
document.getElementsByClassName("chainquery")[0].className += " active green";
document.getElementsByClassName("lighthouse")[0].className += " active green";
break;
default:
break;
}
},
close () {
resetClasses();
document.querySelectorAll(".ecosystem__module").forEach(n => n.classList.remove("active"));
document.querySelectorAll(".ecosystem__submodule").forEach(n => n.classList.remove("active"));
/*
switch (true) {
case (ecosystemComponentClassName === "lbrycrd"):
document.getElementsByClassName(ecosystemComponentClassName)[0].classList.remove("active");
break;
case (ecosystemComponentClassName === "lbry"):
document.getElementsByClassName(ecosystemComponentClassName)[0].classList.remove("active");
break;
case (ecosystemComponentClassName === "applications"):
document.getElementsByClassName(ecosystemComponentClassName)[0].classList.remove("active");
break;
default:
break;
}
*/
}
}
}
function resetClasses() {
document.querySelectorAll(".ecosystem__submodule").forEach(n => {
n.classList.remove("active");
n.classList.remove("blue");
n.classList.remove("green");
n.classList.remove("red");
});
}
</script>
<style lang="scss">
@ -521,10 +516,11 @@
@include center;
width: 144px; height: 144px;
border: 2px dashed;
border-radius: 50%;
border-width: 2px;
cursor: default;
position: relative;
transition: border 0.2s;
z-index: 2;
&:not(:last-of-type) {
@ -556,6 +552,31 @@
right: -2px;
}
}
&:not(.blue):not(.green):not(.red) {
border-style: dashed;
}
&.blue,
&.green,
&.red {
border-style: solid;
}
&.blue {
background-color: rgba($blue, 0.3);
border-color: $blue;
}
&.green {
background-color: rgba($green, 0.3);
border-color: $green;
}
&.red {
background-color: rgba($red, 0.3);
border-color: $red;
}
}
.ecosystem__submodule__description {