Commit dd8c4e5f authored by alain's avatar alain 🐙
Browse files

the layers component...

parent 176809a1
......@@ -33,8 +33,8 @@ const Layers = () => {
return (
<section id="layers">
<h1>Layers</h1>
<div className="row columns-2">
<div className="column" onClick={e => { handleClick(e, "0") }}>
<div className="row columns-3">
<div className="column" onClick={e => { handleClick(e, "0") }} style={{ width: "33%" }}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330.35 501.94">
<g id="foundation-layer-idle"
className={`clickable ${mainLayer === 1 ? 'inactive' : 'idle'} ${mainLayer >= 2 ? "down" : ""}`}
......@@ -47,22 +47,26 @@ const Layers = () => {
</g>
<g id="foundation-layer-active"
className={`${mainLayer >= 1 && mainLayer < 2 ? 'active' : 'inactive'}`}>
<g onClick={e => handleClick(e, "1.1")}>
<g className={`${active !== "1.1" ? 'idle' : ''}`}
onClick={e => handleClick(e, "1.1")}>
<polygon className="r-u" points="239.62 295.21 165.76 338.13 91.42 295.21 165.28 252.29 239.62 295.21" />
<polygon className="r-r" points="239.62 295.21 239.45 353.9 165.59 396.82 165.76 338.13 239.62 295.21" />
<polygon className="r-l" points="165.76 338.13 165.59 396.82 91.25 353.9 91.42 295.21 165.76 338.13" />
</g>
<g onClick={e => handleClick(e, "1.2")}>
<g className={`${active !== "1.2" ? 'idle' : ''}`}
onClick={e => handleClick(e, "1.2")}>
<polygon className="t-u" points="149.61 347.21 75.76 390.13 1.42 347.21 75.28 304.29 149.61 347.21" />
<polygon className="t-r" points="149.61 347.21 149.45 405.9 75.59 448.82 75.76 390.13 149.61 347.21" />
<polygon className="t-l" points="75.76 390.13 75.59 448.82 1.26 405.9 1.42 347.21 75.76 390.13" />
</g>
<g onClick={e => handleClick(e, "1.3")}>
<g className={`${active !== "1.3" ? 'idle' : ''}`}
onClick={e => handleClick(e, "1.3")}>
<polygon className="y-u" points="329.61 347.21 255.76 390.13 181.42 347.21 255.28 304.29 329.61 347.21" />
<polygon className="y-r" points="329.61 347.21 329.45 405.9 255.59 448.82 255.76 390.13 329.61 347.21" />
<polygon className="y-l" points="255.76 390.13 255.59 448.82 181.26 405.9 181.42 347.21 255.76 390.13" />
</g>
<g onClick={e => handleClick(e, "1.4")}>
<g className={`${active !== "1.4" ? 'idle' : ''}`}
onClick={e => handleClick(e, "1.4")}>
<polygon className="p-u" points="239.61 400.21 165.76 443.13 91.42 400.21 165.28 357.29 239.61 400.21" />
<polygon className="p-r" points="239.61 400.21 239.45 458.9 165.59 501.82 165.76 443.13 239.61 400.21" />
<polygon className="p-l" points="165.76 443.13 165.59 501.82 91.26 458.9 91.42 400.21 165.76 443.13" />
......@@ -85,14 +89,14 @@ const Layers = () => {
<g id="tech-layer-idle"
className={`${mainLayer < 3 ? 'inactive' : ''} ${active === "3" ? 'idle' : ''}`}>
<g id="contexts-layers-idle"
className={`clickable ${active === "3.2" ? 'idle' : ''} ${active === "3.1" ? 'inactive' : ''}`}
className={`clickable ${active.includes("3.2") ? 'idle' : ''} ${active.includes("3.1") ? 'inactive' : ''}`}
onClick={e => handleClick(e, "3.1")}>
<polygon className="t-u" points="330.14 130.51 166.01 225.9 0.81 130.51 164.94 35.13 330.14 130.51" />
<polygon className="t-r" points="330.14 130.51 329.98 189.21 165.85 284.59 166.01 225.9 330.14 130.51" />
<polygon className="t-l" points="166.01 225.9 165.85 284.59 0.65 189.21 0.81 130.51 166.01 225.9" />
</g>
<g id="tech-layers-idle"
className={`clickable ${active === "3.1" ? 'idle' : ''} ${active === "3.2" ? 'inactive' : ''}`}
className={`clickable ${active.includes("3.1") ? 'idle' : ''} ${active.includes("3.2") ? 'inactive' : ''}`}
onClick={e => handleClick(e, "3.2")}>
<polygon className="t-u dotted" points="273.68 129.63 165.63 192.42 56.87 129.63 164.92 66.83 273.68 129.63" />
<polygon className="t-r dotted" points="273.68 129.63 273.66 190.68 165.61 253.47 165.63 192.42 273.68 129.63" />
......@@ -124,57 +128,68 @@ const Layers = () => {
</g>
<g id="context-layers-active"
className={`${active === "3.1" ? 'active' : 'inactive'}`}>
<g>
className={`${active.includes("3.1") ? 'active' : 'inactive'}`}>
<g className={`${active !== "3.1.4" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.1.4")}>
<polygon className="r-l" points="278.13 174.6 278.09 189.27 164.61 123.76 164.66 109.08 278.13 174.6" />
<polygon className="r-r" points="164.66 109.08 164.61 123.76 51.88 189.27 51.92 174.6 164.66 109.08" />
<path className="r-u" d="M546.72,377.16,712.1,472.65,547.79,568.14,382.4,472.65Zm.91,161,112.73-65.52L546.89,407.14,434.15,472.65l113.48,65.52" transform="translate(-382.24 -298.05)" />
<polygon className="r-r" points="329.87 174.6 329.83 189.27 165.51 284.76 165.56 270.09 329.87 174.6" />
<polygon className="r-l" points="165.56 270.09 165.51 284.76 0.13 189.27 0.17 174.6 165.56 270.09" />
</g>
<g>
<g className={`${active !== "3.1.3" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.1.3")}>
<polygon className="p-l" points="278.13 159.59 278.09 174.27 164.61 108.75 164.66 94.08 278.13 159.59" />
<polygon className="p-r" points="164.66 94.08 164.61 108.75 51.87 174.27 51.91 159.6 164.66 94.08" />
<path className="p-u" d="M546.72,362.16,712.1,457.65,547.79,553.14,382.4,457.65Zm.9,161,112.74-65.52L546.89,392.13,434.15,457.65l113.47,65.52" transform="translate(-382.24 -298.05)" />
<polygon className="p-r" points="329.87 159.59 329.83 174.27 165.51 269.76 165.56 255.08 329.87 159.59" />
<polygon className="p-l" points="165.56 255.08 165.51 269.76 0.13 174.27 0.17 159.6 165.56 255.08" />
</g>
<g>
<g className={`${active !== "3.1.2" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.1.2")}>
<polygon className="t-l" points="278.13 144.59 278.09 159.26 164.61 93.75 164.66 79.08 278.13 144.59" />
<polygon className="t-r" points="164.66 79.08 164.61 93.75 51.87 159.27 51.91 144.6 164.66 79.08" />
<path className="t-u" d="M546.72,347.16,712.1,442.64,547.79,538.13,382.4,442.65Zm.9,161,112.74-65.52L546.89,377.13,434.15,442.65l113.47,65.51" transform="translate(-382.24 -298.05)" />
<polygon className="t-r" points="329.87 144.59 329.83 159.26 165.51 254.75 165.56 240.08 329.87 144.59" />
<polygon className="t-l" points="165.56 240.08 165.51 254.75 0.13 159.27 0.17 144.59 165.56 240.08" />
</g>
<polygon className="y-u" points="278.13 129.6 278.09 144.27 164.61 78.76 164.66 64.08 278.13 129.6" />
<polygon className="y-u" points="164.66 64.08 164.61 78.76 51.88 144.27 51.92 129.6 164.66 64.08" />
<path className="y-u" d="M546.72,332.16,712.1,427.65,547.79,523.14,382.4,427.65Zm.91,161,112.73-65.52L546.89,362.14,434.15,427.65l113.48,65.52" transform="translate(-382.24 -298.05)" />
<polygon className="y-r" points="329.87 129.6 329.83 144.27 165.51 239.76 165.56 225.09 329.87 129.6" />
<polygon className="y-l" points="165.56 225.09 165.51 239.76 0.13 144.27 0.17 129.6 165.56 225.09" />
<g className={`${active !== "3.1.1" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.1.1")}>
<polygon className="y-u" points="278.13 129.6 278.09 144.27 164.61 78.76 164.66 64.08 278.13 129.6" />
<polygon className="y-u" points="164.66 64.08 164.61 78.76 51.88 144.27 51.92 129.6 164.66 64.08" />
<path className="y-u" d="M546.72,332.16,712.1,427.65,547.79,523.14,382.4,427.65Zm.91,161,112.73-65.52L546.89,362.14,434.15,427.65l113.48,65.52" transform="translate(-382.24 -298.05)" />
<polygon className="y-r" points="329.87 129.6 329.83 144.27 165.51 239.76 165.56 225.09 329.87 129.6" />
<polygon className="y-l" points="165.56 225.09 165.51 239.76 0.13 144.27 0.17 129.6 165.56 225.09" />
</g>
</g>
<g id="tech-layers-active"
className={`${active === "3.2" ? 'active' : 'inactive'}`}>
<g>
className={`${active.includes("3.2") ? 'active' : 'inactive'}`}>
<g className={`${active !== "3.2.5" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.2.5")}>
<polygon className="r-u" points="273.24 184.44 165.18 247.24 56.42 184.44 164.47 121.65 273.24 184.44" />
<polygon className="r-r" points="273.24 184.44 273.21 192.49 165.16 255.29 165.18 247.24 273.24 184.44" />
<polygon className="r-l" points="165.18 247.24 165.16 255.29 56.4 192.49 56.42 184.44 165.18 247.24" />
</g>
<g>
<g className={`${active !== "3.2.4" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.2.4")}>
<polygon className="p-u" points="273.24 169.69 165.18 232.49 56.42 169.69 164.47 106.9 273.24 169.69" />
<polygon className="p-r" points="273.24 169.69 273.21 177.74 165.16 240.54 165.18 232.49 273.24 169.69" />
<polygon className="p-l" points="165.18 232.49 165.16 240.54 56.4 177.75 56.42 169.69 165.18 232.49" />
</g>
<g>
<g className={`${active !== "3.2.3" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.2.3")}>
<polygon className="t-u" points="273.24 154.94 165.18 217.74 56.42 154.95 164.47 92.15 273.24 154.94" />
<polygon className="t-r" points="273.24 154.94 273.21 163 165.16 225.79 165.18 217.74 273.24 154.94" />
<polygon className="t-l" points="165.18 217.74 165.16 225.79 56.4 163 56.42 154.95 165.18 217.74" />
</g>
<g>
<g className={`${active !== "3.2.2" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.2.2")}>
<polygon className="y-u" points="273.24 140.19 165.18 202.98 56.42 140.19 164.47 77.4 273.24 140.19" />
<polygon className="y-r" points="273.24 140.19 273.21 148.24 165.16 211.03 165.18 202.98 273.24 140.19" />
<polygon className="y-l" points="165.18 202.98 165.16 211.03 56.4 148.24 56.42 140.19 165.18 202.98" />
</g>
<g onClick={e => handleClick(e, "3.2.1")}>
<g className={`${active !== "3.2.1" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.2.1")}>
<polygon className="w-u" points="92.83 128.67 74.69 139.21 56.45 128.67 74.58 118.13 92.83 128.67" />
<polygon className="w-r" points="92.83 128.67 92.81 131.82 74.67 142.36 74.69 139.21 92.83 128.67" />
<polygon className="w-l" points="74.69 139.21 74.67 142.36 56.42 131.82 56.45 128.67 74.69 139.21" />
......@@ -227,7 +242,15 @@ const Layers = () => {
</g>
</svg>
</div>
<div className="column">
<div className="column" style={{ width: "50%" }}>
{ data.allStrapiLayer.nodes.filter(layer => layer.order === active).map(layer => (
<div key={layer.id}>
<h3>{layer.title}</h3>
<div dangerouslySetInnerHTML={{ __html: layer.description }} />
</div>
)) }
</div>
<div className="column" style={{ width: "20%" }}>
<ul id="layer-list">
{ data.allStrapiLayer.nodes.map(layer =>
<li key={layer.id} className={`depth-${layer.order.length} ${layer.order === active ? "current" : null}`} onClick={e => handleClick(e, layer.order)}>
......@@ -235,13 +258,6 @@ const Layers = () => {
</li>
)}
</ul>
{ data.allStrapiLayer.nodes.filter(layer => layer.order === active).map(layer => (
<div key={layer.id}>
<h3>{layer.title}</h3>
<div dangerouslySetInnerHTML={{ __html: layer.description }} />
</div>
)) }
</div>
</div>
</section>
......
......@@ -43,6 +43,14 @@
}
}
.active .idle {
opacity: 0.6;
&:hover {
opacity: 0.9;
}
}
#layer-list {
list-style: none;
margin: 0 -5rem 0 1rem;
......@@ -64,10 +72,10 @@
}
g.down {
transform: translateY(76px);
transform: translateY(120px);
}
g.up {
transform: translateY(-76px);
transform: translateY(-120px);
}
}
......
......@@ -69,6 +69,14 @@ section {
width: 50%;
}
// &.columns-3 .column {
// width: 40%;
// &:last-child {
// width: 20%
// }
// }
.column {
padding: 0 1rem;
max-width: 94vw;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment