Commit 66c4ed9e authored by alain's avatar alain 🐙
Browse files

improve layer component

parent a402cab0
......@@ -38,13 +38,12 @@ const Layers = ({ location }) => {
<div className="row">
<div className="columns-2">
<div className="column"
style={{ border: "none" }}
onClick={e => { handleClick(e, "0") }}
onKeyDown={e => { handleClick(e, "0") }}
//onKeyDown={e => { handleClick(e, "0") }}
tabIndex="0"
role="button"
aria-label="reset view">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 794.17"><g style={{ transform: "translateY(120px)" }}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 570 794.17"><g style={{ transform: "translateY(120px)" }}>
<g id="foundation-layer-idle"
className={`clickable ${mainLayer === 1 ? 'inactive' : 'idle'} ${mainLayer >= 2 ? "down" : ""}`}
......@@ -52,8 +51,8 @@ const Layers = ({ location }) => {
<polygon className="t-u" points="330.14 347.51 166.01 442.89 0.81 347.51 164.94 252.13 330.14 347.51" />
<polygon className="t-r" points="330.14 347.51 329.98 406.21 165.85 501.59 166.01 442.89 330.14 347.51" />
<polygon className="t-l" points="166.01 442.89 165.85 501.59 0.65 406.21 0.81 347.51 166.01 442.89" />
<path className="stroked" d="M794.75,662.07s-34,12.22-57.54,9.26" transform="translate(-382.24 -298.05)" />
<text transform="translate(423.2 366.17)">Foundation</text>
<path className="stroked" d="M784.22,662.07s-34,12.22-57.54,9.26" transform="translate(-382.24 -297.45)" />
<text transform="translate(413.2 366.77)">Foundation</text>
</g>
<g id="design-layer-idle"
......@@ -62,34 +61,34 @@ const Layers = ({ location }) => {
<polygon className="t-u" points="330.23 241.01 166.1 336.39 0.89 241.01 165.02 145.63 330.23 241.01" />
<polygon className="t-r" points="330.23 241.01 330.06 299.7 165.93 395.09 166.1 336.39 330.23 241.01" />
<polygon className="t-l" points="166.1 336.39 165.93 395.09 0.73 299.71 0.89 241.01 166.1 336.39" />
<path className="stroked" d="M794.75,557.07s-34,12.22-57.54,9.26" transform="translate(-382.24 -298.05)" />
<text transform="translate(423.2 261.42)">Design process</text>
<path className="stroked" d="M784.22,557.07s-34,12.22-57.54,9.26" transform="translate(-382.24 -297.45)" />
<text transform="translate(413.2 262.02)">Design process</text>
</g>
<g id="design-layer-active"
className={`${current === "2" ? 'active' : 'inactive'}`}>
<g>
<polygon className="t-l" points="72.23 367.71 58.14 359.52 57.31 66.06 71.4 74.26 72.23 367.71" />
<polygon className="t-r" points="84.01 8.19 109.71 52.14 96.94 59.51 97.77 352.97 72.23 367.71 71.4 74.26 58.63 81.63 84.01 8.19" />
<polygon className="t-u" points="58.63 81.63 44.54 73.44 69.91 0 84.01 8.19 58.63 81.63" />
<polygon className="t-l" points="72.17 343.87 58.07 335.67 57.38 91.12 71.47 99.31 72.17 343.87" />
<polygon className="t-r" points="84.08 33.25 109.78 77.19 97.01 84.57 97.7 329.12 72.17 343.87 71.47 99.31 58.7 106.68 84.08 33.25" />
<polygon className="t-u" points="58.7 106.68 44.61 98.49 69.98 25.06 84.08 33.25 58.7 106.68" />
</g>
<g>
<polygon className="r-r" points="261.42 74.26 275.52 66.06 274.69 359.52 260.59 367.71 261.42 74.26" />
<polygon className="r-l" points="248.82 8.19 274.19 81.63 261.42 74.26 260.59 367.71 235.05 352.97 235.88 59.51 223.12 52.14 248.82 8.19" />
<polygon className="r-u" points="248.82 8.19 262.92 0 288.29 73.44 274.19 81.63 248.82 8.19" />
<polygon className="r-r" points="261.35 99.31 275.45 91.12 274.76 335.67 260.66 343.87 261.35 99.31" />
<polygon className="r-l" points="248.75 33.25 274.12 106.68 261.35 99.31 260.66 343.87 235.12 329.12 235.82 84.57 223.05 77.19 248.75 33.25" />
<polygon className="r-u" points="248.75 33.25 262.85 25.06 288.22 98.49 274.12 106.68 248.75 33.25" />
</g>
<g>
<polygon className="p-r" points="83.51 177.5 97.61 169.31 96.78 462.77 82.68 470.96 83.51 177.5" />
<polygon className="p-l" points="70.91 111.44 96.28 184.88 83.51 177.5 82.68 470.96 57.14 456.22 57.97 162.76 45.2 155.39 70.91 111.44" />
<polygon className="p-u" points="70.91 111.44 85 103.25 110.38 176.68 96.28 184.88 70.91 111.44" />
<polygon className="p-r" points="83.44 202.56 97.54 194.37 96.84 438.92 82.75 447.11 83.44 202.56" />
<polygon className="p-l" points="70.84 136.5 96.21 209.93 83.44 202.56 82.75 447.11 57.21 432.37 57.9 187.81 45.13 180.44 70.84 136.5" />
<polygon className="p-u" points="70.84 136.5 84.94 128.3 110.31 201.74 96.21 209.93 70.84 136.5" />
</g>
<g>
<polygon className="y-r" points="250.15 470.96 236.05 462.77 235.22 169.31 249.31 177.5 250.15 470.96" />
<polygon className="y-u" points="261.92 111.44 287.62 155.39 274.85 162.76 275.69 456.22 250.15 470.96 249.31 177.5 236.55 184.88 261.92 111.44" />
<polygon className="y-l" points="236.55 184.88 222.45 176.68 247.82 103.25 261.92 111.44 236.55 184.88" />
<polygon className="y-r" points="250.08 447.11 235.98 438.92 235.29 194.37 249.38 202.56 250.08 447.11" />
<polygon className="y-u" points="261.99 136.5 287.69 180.44 274.92 187.81 275.62 432.37 250.08 447.11 249.38 202.56 236.62 209.93 261.99 136.5" />
<polygon className="y-l" points="236.62 209.93 222.52 201.74 247.89 128.3 261.99 136.5 236.62 209.93" />
</g>
<path className="stroked" d="M794.75,557.07s-34,12.22-57.54,9.26" transform="translate(-382.24 -298.05)" />
<text transform="translate(423.2 261.42)">Design process</text>
<text className="strong" transform="translate(423.2 261.42)">Design process</text>
</g>
<g id="tech-layer-idle"
......@@ -98,12 +97,16 @@ const Layers = ({ location }) => {
<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" />
<path className="stroked" d="M794.75,446.07s-34,12.22-57.54,9.26" transform="translate(-382.24 -298.05)" />
<text transform="translate(423.2 151.56)">Tech stack</text>
<path className="stroked" d="M784.22,446.07s-34,12.22-57.54,9.26" transform="translate(-382.24 -297.45)" />
<text transform="translate(413.2 152.16)">Tech stack</text>
</g>
<g id="foundation-layer-active"
className={`${mainLayer >= 1 && mainLayer < 2 ? 'active' : 'inactive'}`}>
<g>
<path className="stroked" d="M783.19,662.07s-34,12.22-57.54,9.26" transform="translate(-382.24 -297.45)" />
<text className="strong" transform="translate(413.2 366.77)">Foundation</text>
</g>
<g className={`${current !== "1.1" ? 'idle' : ''}`}
onClick={e => handleClick(e, "1.1")} role="button" aria-label="Learn more about the Starting Points and assumptions Layer">
<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" />
......@@ -112,7 +115,7 @@ const Layers = ({ location }) => {
<path className="stroked" d="M668.08,563.26s-41.8-24-73.56,5.08" transform="translate(-382.24 -298.05)" />
<text transform="translate(294.77 269.89)">
<tspan x="0" y="0">Starting points</tspan>
<tspan x="0" y="16.8">and assumptions</tspan>
<tspan x="0" y="18">and assumptions</tspan>
</text>
</g>
<g className={`${current !== "1.2" ? 'idle' : ''}`}
......@@ -120,10 +123,10 @@ const Layers = ({ location }) => {
<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" />
<path className="stroked" d="M727,680s30.17,5.27,48.17-21.73" transform="translate(-382.24 -298.05)" />
<text transform="translate(366.77 327.89)">
<path className="stroked" d="M681.36,731.38s6.58,22.8,28.12,28.73" transform="translate(-382.24 -297.45)" />
<text transform="translate(336.77, 465.89)">
<tspan x="0" y="0">Fundamental rights</tspan>
<tspan x="0" y="16.8">and values</tspan>
<tspan x="0" y="18">and values</tspan>
</text>
</g>
<g className={`${current !== "1.4" ? 'idle' : ''}`}
......@@ -134,7 +137,7 @@ const Layers = ({ location }) => {
<path className="stroked" d="M409.54,731.38s-9.81,30.87,11.16,64.35" transform="translate(-382.24 -298.05)" />
<text transform="translate(7.25 514.64)">
<tspan x="0" y="0">Socio-economic</tspan>
<tspan x="0" y="16.8">considerations</tspan>
<tspan x="0" y="18">considerations</tspan>
</text>
</g>
<g className={`${current !== "1.3" ? 'idle' : ''}`}
......@@ -145,21 +148,24 @@ const Layers = ({ location }) => {
<path className="stroked" d="M623.31,805.62S612.06,791,597.43,784.24" transform="translate(-382.24 -298.05)" />
<text transform="translate(201.39 531.52)">
<tspan x="0" y="0">Governance</tspan>
<tspan x="0" y="16.8">and oversight</tspan>
<tspan x="0" y="18">and oversight</tspan>
</text>
</g>
</g>
<g id="tech-layer-active"
className={`${mainLayer < 3 ? 'inactive' : ''}`}>
<g className={`${current === "3" ? '' : 'inactive'}`}>
<text className="strong" transform="translate(413.2 40.43)">Tech stack</text>
</g>
<g id="contexts-layers-idle"
className={`clickable ${current === "3" ? 'idle' : 'inactive'}`}
onClick={e => handleClick(e, "3.1")} role="button" aria-label="Learn more about the Contexts Layers">
<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" />
<path className="stroked" d="M727,460s30.17,5.27,48.17-21.73" transform="translate(-382.24 -298.05)" />
<text transform="translate(366.77 131.89)">Context layers</text>
<path className="stroked" d="M726.68,460s19.28-23.49,57.54-34.49" transform="translate(-382.24 -297.45)" />
<text transform="translate(413.2 132.5)">Context layers</text>
</g>
<g id="tech-layers-idle"
className={`clickable ${current === "3" ? 'idle' : 'inactive'}`}
......@@ -167,8 +173,10 @@ const Layers = ({ location }) => {
<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" />
<polygon className="t-l dotted" points="165.63 192.42 165.61 253.47 56.85 190.68 56.87 129.63 165.63 192.42" />
<path className="stroked" d="M673.08,379.26s-41.8-24-73.56,5.08" transform="translate(-382.24 -298.05)" />
<text transform="translate(299.77 85.89)">Tech layers</text>
<path className="stroked" d="M784.63,376.68s-66.15-23.7-185.11,7.66" transform="translate(-382.24 -297.45)" />
<text transform="translate(413.2 86.5)">
Tech layers
</text>
</g>
</g>
......@@ -181,8 +189,8 @@ const Layers = ({ location }) => {
<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" />
<path className="stroked" d="M778.44,469.66s-34,12.22-57.55,9.26" transform="translate(-382.24 -298.05)" />
<text transform="translate(406.89 173.76)">Data and algorithms</text>
<path className="stroked" d="M784.22,467.05c.69-.25-32,12.47-57.54,9.25" transform="translate(-382.24 -297.45)" />
<text transform="translate(413.2 174.36)">Data and algorithms</text>
</g>
<g className={`${current !== "3.1.3" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.1.3")} role="button" aria-label="Learn more about the Protocols and standards Layer">
......@@ -191,8 +199,8 @@ const Layers = ({ location }) => {
<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" />
<path className="stroked" d="M778.44,454.66s-34,12.22-57.55,9.26" transform="translate(-382.24 -298.05)" />
<text transform="translate(406.89 159)">Protocols and standards</text>
<path className="stroked" d="M784.22,452.05c.69-.25-32,12.47-57.54,9.25" transform="translate(-382.24 -297.45)" />
<text transform="translate(413.2 159.61)">Protocols and standards</text>
</g>
<g className={`${current !== "3.1.2" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.1.2")} role="button" aria-label="Learn more about the Security Layer">
......@@ -201,8 +209,8 @@ const Layers = ({ location }) => {
<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" />
<path className="stroked" d="M778.44,439.66s-34,12.22-57.55,9.26" transform="translate(-382.24 -298.05)" />
<text transform="translate(406.89 145.15)">Security</text>
<path className="stroked" d="M784.22,437.05c.69-.25-32,12.47-57.54,9.25" transform="translate(-382.24 -297.45)" />
<text transform="translate(413.2 145.75)">Security</text>
</g>
<g className={`${current !== "3.1.1" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.1.1")} role="button" aria-label="Learn more about the Service Layer">
......@@ -211,8 +219,14 @@ const Layers = ({ location }) => {
<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" />
<path className="stroked" d="M778.44,424.66s-34,12.22-57.55,9.26" transform="translate(-382.24 -298.05)" />
<text transform="translate(406.89 128.65)">Service</text>
<path className="stroked" d="M784.22,422.05c.69-.25-32,12.47-57.54,9.25" transform="translate(-382.24 -297.45)" />
<text transform="translate(413.2 129.26)">Service</text>
</g>
<g>
<text class="strong" transform="translate(413.2 99.93)">
<tspan x="0" y="0">Tech stack:</tspan>
<tspan x="0" y="18">context layers</tspan>
</text>
</g>
</g>
......@@ -223,16 +237,16 @@ const Layers = ({ location }) => {
<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" />
<path className="stroked" d="M717.56,477.07s-34,12.22-57.54,9.25" transform="translate(-382.24 -298.05)" />
<text transform="translate(346.01 180.92)">Infrastructure</text>
<path className="stroked" d="M717.56,477.07s-34,12.22-57.54,9.25" transform="translate(-382.24 -297.45)" />
<text transform="translate(346.01 181.52)">Infrastructure</text>
</g>
<g className={`${current !== "3.2.4" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.2.4")} role="button" aria-label="Learn more about the Equipment Layer">
<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" />
<path className="stroked" d="M717.56,463.07s-34,12.22-57.54,9.25" transform="translate(-382.24 -298.05)" />
<text transform="translate(346.01 167.17)">Equipment</text>
<path className="stroked" d="M717.56,463.07s-34,12.22-57.54,9.25" transform="translate(-382.24 -297.45)" />
<text transform="translate(346.01 167.77)">Equipment</text>
</g>
<g className={`${current !== "3.2.3" ? 'idle' : ''}`}
onClick={e => handleClick(e, "3.2.3")} role="button" aria-label="Learn more about the Firmware and drivers Layer">
......@@ -301,7 +315,13 @@ const Layers = ({ location }) => {
<polygon className="w-r" points="273.24 128.67 273.21 131.82 255.08 142.36 255.1 139.21 273.24 128.67" />
<polygon className="w-l" points="255.1 139.21 255.08 142.36 236.83 131.82 236.85 128.67 255.1 139.21" />
<path className="stroked" d="M717.56,418.07s-34,12.22-57.54,9.25" transform="translate(-382.24 -298.05)" />
<text transform="translate(346.01 110.81)">Application layer (visible to user)</text>
<text transform="translate(346.01 122.81)">Application layer</text>
</g>
<g>
<text class="strong" transform="translate(346.01 80.03)">
<tspan x="0" y="0">Tech stack:</tspan>
<tspan x="0" y="18">tech layers</tspan>
</text>
</g>
</g>
</g></svg>
......
......@@ -34,6 +34,14 @@
text {
pointer-events: auto;
&.strong {
font-weight: 700;
}
}
[role="button"]:not(.idle)>text {
font-weight: 700;
}
.clickable {
......@@ -118,6 +126,7 @@
> g:nth-child(2) { transform: translateY(20px); }
> g:nth-child(3) { transform: translateY(-20px); }
> g:nth-child(4) { transform: translateY(-60px); }
> g:nth-child(5) { transform: translateY(-90px); }
}
#tech-layers-active.active {
......@@ -126,4 +135,5 @@
> g:nth-child(3) { transform: translateY(0px); }
> g:nth-child(4) { transform: translateY(-30px); }
> g:nth-child(5) { transform: translateY(-60px); }
> g:nth-child(6) { transform: translateY(-80px); }
}
\ No newline at end of file
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