LBRYFoundation/tech.lbry.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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