Skip to content

GitLab

Commit 2e70198a authored by alain's avatar alain 🐙
Browse files

the layers component

parent e83eea23
Hide whitespace changes
Inline Side-by-side
Showing with 306 additions and 6 deletions
backend/api/layer/models/layer.settings.json
View file @ 2e70198a
......@@ -12,9 +12,6 @@
"title": {
"type": "string"
},
"body": {
"type": "richtext"
},
"parent": {
"model": "layer",
"via": "children"
......@@ -22,6 +19,13 @@
"children": {
"collection": "layer",
"via": "parent"
},
"description": {
"type": "richtext"
},
"order": {
"type": "string",
"regex": "^[0-9-_.~]*$"
}
}
}
frontend/src/components/layers.js 0 → 100644
View file @ 2e70198a
import React, { useState } from "react"
import { StaticQuery, graphql } from "gatsby"
const Layers = () => {
const [active, setActive] = useState("0")
const handleClick = (e, layer) => {
e.stopPropagation();
console.log(layer)
setActive(layer)
}
return (
<StaticQuery
query={graphql`
query {
allStrapiLayer(sort: {fields: order}) {
nodes {
id
title
order
description
}
}
}
`}
render={data => (
<section>
<h1>Layers</h1>
<div className="row columns-2">
<div className="column" onClick={e => { handleClick(e, "0") }}>
<svg id="layers" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330.35 501.94">
<g id="foundation-layer-idle" className={`${active === "1" ? 'inactive' : 'idle'}`} onClick={e => handleClick(e, "1")}>
<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" />
</g>
<g id="foundation-layer-active" className={`${active === "1" ? 'active' : 'inactive'}`}>
<g>
<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>
<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>
<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>
<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" />
</g>
</g>
<g id="design-layer-idle" className={`${active === "2" ? 'inactive' : 'idle'}`} onClick={e => handleClick(e, "2")}>
<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" />
</g>
{/* <g id="tech-layer-idle" className={`${active === "3" ? 'inactive' : 'idle'}`} onClick={e => handleClick(e, "3")}>
<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-layer-idle" className={`${active === "3" ? 'active1' : 'idle1'}`}>
<g id="contexts-layers-idle" className={`${active === "3.2" ? 'inactive' : 'idle '}`} 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={`${active === "3.1" ? 'inactive' : 'idle'}`} 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" />
<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" />
</g>
</g>
<g id="design-layer-active" className={`${active === "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" />
</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" />
</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" />
</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" />
</g>
</g>
<g id="context-layers-active" className={`${active === "3.1" ? 'active' : 'inactive'}`}>
<g>
<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>
<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>
<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>
<g id="tech-layers-active" className={`${active === "3.2" ? 'active' : 'inactive'}`}>
<g>
<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>
<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>
<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>
<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>
<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" />
<polygon className="w-u" points="124.27 110.61 106.13 121.14 87.88 110.61 106.02 100.07 124.27 110.61" />
<polygon className="w-r" points="124.27 110.61 124.24 113.76 106.11 124.3 106.13 121.14 124.27 110.61" />
<polygon className="w-l" points="106.13 121.14 106.11 124.3 87.86 113.76 87.88 110.61 106.13 121.14" />
<polygon className="w-u" points="153.51 93.54 135.38 104.08 117.13 93.55 135.27 83.01 153.51 93.54" />
<polygon className="w-r" points="153.51 93.54 153.49 96.69 135.36 107.23 135.38 104.08 153.51 93.54" />
<polygon className="w-l" points="135.38 104.08 135.36 107.23 117.11 96.7 117.13 93.55 135.38 104.08" />
<polygon className="w-u" points="182.26 76.44 164.13 86.98 145.88 76.44 164.02 65.9 182.26 76.44" />
<polygon className="w-r" points="182.26 76.44 182.24 79.59 164.11 90.13 164.13 86.98 182.26 76.44" />
<polygon className="w-l" points="164.13 86.98 164.11 90.13 145.86 79.59 145.88 76.44 164.13 86.98" />
<polygon className="w-u" points="122.27 145.77 104.13 156.31 85.88 145.78 104.02 135.24 122.27 145.77" />
<polygon className="w-r" points="122.27 145.77 122.24 148.93 104.11 159.46 104.13 156.31 122.27 145.77" />
<polygon className="w-l" points="104.13 156.31 104.11 159.46 85.86 148.93 85.88 145.78 104.13 156.31" />
<polygon className="w-u" points="153.7 127.71 135.57 138.25 117.32 127.72 135.46 117.18 153.7 127.71" />
<polygon className="w-r" points="153.7 127.71 153.68 130.86 135.54 141.4 135.57 138.25 153.7 127.71" />
<polygon className="w-l" points="135.57 138.25 135.54 141.4 117.3 130.87 117.32 127.72 135.57 138.25" />
<polygon className="r-u" points="182.95 110.65 164.82 121.19 146.57 110.65 164.71 100.11 182.95 110.65" />
<polygon className="r-r" points="182.95 110.65 182.93 113.8 164.79 124.34 164.82 121.19 182.95 110.65" />
<polygon className="r-l" points="164.82 121.19 164.79 124.34 146.55 113.8 146.57 110.65 164.82 121.19" />
<polygon className="w-u" points="211.7 93.54 193.57 104.08 175.32 93.55 193.46 83.01 211.7 93.54" />
<polygon className="w-r" points="211.7 93.54 211.68 96.69 193.54 107.23 193.57 104.08 211.7 93.54" />
<polygon className="w-l" points="193.57 104.08 193.54 107.23 175.3 96.7 175.32 93.55 193.57 104.08" />
<polygon className="w-u" points="152.2 162.88 134.07 173.42 115.82 162.88 133.96 152.34 152.2 162.88" />
<polygon className="w-r" points="152.2 162.88 152.18 166.03 134.04 176.57 134.07 173.42 152.2 162.88" />
<polygon className="w-l" points="134.07 173.42 134.04 176.57 115.8 166.03 115.82 162.88 134.07 173.42" />
<polygon className="w-u" points="183.64 144.82 165.5 155.36 147.26 144.82 165.39 134.28 183.64 144.82" />
<polygon className="w-r" points="183.64 144.82 183.62 147.97 165.48 158.51 165.5 155.36 183.64 144.82" />
<polygon className="w-l" points="165.5 155.36 165.48 158.51 147.24 147.97 147.26 144.82 165.5 155.36" />
<polygon className="w-u" points="212.89 127.75 194.75 138.29 176.51 127.76 194.64 117.22 212.89 127.75" />
<polygon className="w-r" points="212.89 127.75 212.87 130.91 194.73 141.44 194.75 138.29 212.89 127.75" />
<polygon className="w-l" points="194.75 138.29 194.73 141.44 176.49 130.91 176.51 127.76 194.75 138.29" />
<polygon className="w-u" points="241.64 110.65 223.5 121.19 205.26 110.65 223.39 100.11 241.64 110.65" />
<polygon className="w-r" points="241.64 110.65 241.62 113.8 223.48 124.34 223.5 121.19 241.64 110.65" />
<polygon className="w-l" points="223.5 121.19 223.48 124.34 205.24 113.8 205.26 110.65 223.5 121.19" />
<polygon className="w-u" points="183.8 180.9 165.66 191.44 147.41 180.9 165.55 170.36 183.8 180.9" />
<polygon className="w-r" points="183.8 180.9 183.77 184.05 165.64 194.59 165.66 191.44 183.8 180.9" />
<polygon className="w-l" points="165.66 191.44 165.64 194.59 147.39 184.06 147.41 180.9 165.66 191.44" />
<polygon className="w-u" points="215.24 162.84 197.1 173.38 178.85 162.84 196.99 152.3 215.24 162.84" />
<polygon className="w-r" points="215.24 162.84 215.21 165.99 197.08 176.53 197.1 173.38 215.24 162.84" />
<polygon className="w-l" points="197.1 173.38 197.08 176.53 178.83 165.99 178.85 162.84 197.1 173.38" />
<polygon className="w-u" points="244.49 145.78 226.35 156.31 208.1 145.78 226.24 135.24 244.49 145.78" />
<polygon className="w-r" points="244.49 145.78 244.46 148.93 226.33 159.47 226.35 156.31 244.49 145.78" />
<polygon className="w-l" points="226.35 156.31 226.33 159.47 208.08 148.93 208.1 145.78 226.35 156.31" />
<polygon className="w-u" points="273.24 128.67 255.1 139.21 236.85 128.67 254.99 118.13 273.24 128.67" />
<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" />
</g>
</g>
</svg>
</div>
<div className="column">
{ 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>
)}
/>
)
}
export default Layers
\ No newline at end of file
frontend/src/images/inline/layers.svg 0 → 100644
View file @ 2e70198a
<svg id="layers" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330.35 501.94"><defs><style>.cls-1{opacity:0.3;}.cls-2{fill:#24a7a6;stroke:#24a7a6;}.cls-2,.cls-3,.cls-31,.cls-4{stroke-linecap:round;}.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-2,.cls-3,.cls-31,.cls-4,.cls-6,.cls-7,.cls-8,.cls-9{stroke-linejoin:round;stroke-width:0.25px;}.cls-3{fill:#209a9a;stroke:#1d9a9a;}.cls-4{fill:#0b7776;stroke:#0b7776;}.cls-5{isolation:isolate;}.cls-6{fill:#d6262c;stroke:#d6272b;}.cls-22,.cls-7{fill:#cc2429;}.cls-7{stroke:#cd2229;}.cls-23,.cls-8{fill:#b11d21;}.cls-8{stroke:#b12024;}.cls-9{fill:#27afae;stroke:#27afad;}.cls-10,.cls-20{fill:#25a8a7;}.cls-10{stroke:#25a8a7;}.cls-11,.cls-19{fill:#1d9392;}.cls-11{stroke:#1a9392;}.cls-12{fill:#e6982d;stroke:#e7992a;}.cls-13{fill:#db912a;stroke:#db912a;}.cls-14{fill:#bd7e23;stroke:#bc7e2b;}.cls-15{fill:#49378d;stroke:#49378d;}.cls-16,.cls-25{fill:#463387;}.cls-16{stroke:#463487;}.cls-17,.cls-26{fill:#3d2976;}.cls-17{stroke:#3d2c77;}.cls-18{opacity:0.7;}.cls-21{fill:#219d9d;}.cls-24{fill:#df282e;}.cls-27{fill:#4c3a92;}.cls-28{fill:#aa701d;}.cls-29{fill:#d28b28;}.cls-30{fill:#be7e23;}.cls-31{fill:none;stroke:#000;stroke-dasharray:12;}.cls-32{fill:#b5b5b5;}.cls-33{fill:#e3e3e3;}.cls-34{fill:#828282;}</style></defs><g id="foundation-layer-idle" class="cls-1"><polygon class="cls-2" points="330.14 347.51 166.01 442.89 0.81 347.51 164.94 252.13 330.14 347.51"/><polygon class="cls-3" points="330.14 347.51 329.98 406.21 165.85 501.59 166.01 442.89 330.14 347.51"/><polygon class="cls-4" points="166.01 442.89 165.85 501.59 0.65 406.21 0.81 347.51 166.01 442.89"/></g><g id="design-layer-idle" class="cls-1"><polygon class="cls-2" points="330.23 241.01 166.1 336.39 0.89 241.01 165.02 145.63 330.23 241.01"/><polygon class="cls-3" points="330.23 241.01 330.06 299.7 165.93 395.09 166.1 336.39 330.23 241.01"/><polygon class="cls-4" points="166.1 336.39 165.93 395.09 0.73 299.71 0.89 241.01 166.1 336.39"/></g><g id="tech-layer-idle" class="cls-1"><polygon class="cls-2" points="330.14 130.51 166.01 225.9 0.81 130.51 164.94 35.13 330.14 130.51"/><polygon class="cls-3" points="330.14 130.51 329.98 189.21 165.85 284.59 166.01 225.9 330.14 130.51"/><polygon class="cls-4" points="166.01 225.9 165.85 284.59 0.65 189.21 0.81 130.51 166.01 225.9"/></g><g id="foundation-layer-active"><g class="cls-5"><polygon class="cls-6" points="239.62 295.21 165.76 338.13 91.42 295.21 165.28 252.29 239.62 295.21"/><polygon class="cls-7" points="239.62 295.21 239.45 353.9 165.59 396.82 165.76 338.13 239.62 295.21"/><polygon class="cls-8" points="165.76 338.13 165.59 396.82 91.25 353.9 91.42 295.21 165.76 338.13"/></g><g class="cls-5"><polygon class="cls-9" points="149.61 347.21 75.76 390.13 1.42 347.21 75.28 304.29 149.61 347.21"/><polygon class="cls-10" points="149.61 347.21 149.45 405.9 75.59 448.82 75.76 390.13 149.61 347.21"/><polygon class="cls-11" points="75.76 390.13 75.59 448.82 1.26 405.9 1.42 347.21 75.76 390.13"/></g><g class="cls-5"><polygon class="cls-12" points="329.61 347.21 255.76 390.13 181.42 347.21 255.28 304.29 329.61 347.21"/><polygon class="cls-13" points="329.61 347.21 329.45 405.9 255.59 448.82 255.76 390.13 329.61 347.21"/><polygon class="cls-14" points="255.76 390.13 255.59 448.82 181.26 405.9 181.42 347.21 255.76 390.13"/></g><g class="cls-5"><polygon class="cls-15" points="239.61 400.21 165.76 443.13 91.42 400.21 165.28 357.29 239.61 400.21"/><polygon class="cls-16" points="239.61 400.21 239.45 458.9 165.59 501.82 165.76 443.13 239.61 400.21"/><polygon class="cls-17" points="165.76 443.13 165.59 501.82 91.26 458.9 91.42 400.21 165.76 443.13"/></g></g><g id="design-layer-active" class="cls-18"><g class="cls-5"><polygon class="cls-19" points="72.23 367.71 58.14 359.52 57.31 66.06 71.4 74.26 72.23 367.71"/><polygon class="cls-20" 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 class="cls-21" points="58.63 81.63 44.54 73.44 69.91 0 84.01 8.19 58.63 81.63"/></g><g class="cls-5"><polygon class="cls-22" points="261.42 74.26 275.52 66.06 274.69 359.52 260.59 367.71 261.42 74.26"/><polygon class="cls-23" 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 class="cls-24" points="248.82 8.19 262.92 0 288.29 73.44 274.19 81.63 248.82 8.19"/></g><g class="cls-5"><polygon class="cls-25" points="83.51 177.5 97.61 169.31 96.78 462.77 82.68 470.96 83.51 177.5"/><polygon class="cls-26" 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 class="cls-27" points="70.91 111.44 85 103.25 110.38 176.68 96.28 184.88 70.91 111.44"/></g><g class="cls-5"><polygon class="cls-28" points="250.15 470.96 236.05 462.77 235.22 169.31 249.31 177.5 250.15 470.96"/><polygon class="cls-29" 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 class="cls-30" points="236.55 184.88 222.45 176.68 247.82 103.25 261.92 111.44 236.55 184.88"/></g></g><g id="tech-layer-active" class="cls-1"><g id="contexts-layers-idle"><polygon class="cls-2" points="330.14 130.51 166.01 225.9 0.81 130.51 164.94 35.13 330.14 130.51"/><polygon class="cls-3" points="330.14 130.51 329.98 189.21 165.85 284.59 166.01 225.9 330.14 130.51"/><polygon class="cls-4" 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"><polygon class="cls-31" points="273.68 129.63 165.63 192.42 56.87 129.63 164.92 66.83 273.68 129.63"/><polygon class="cls-31" points="273.68 129.63 273.66 190.68 165.61 253.47 165.63 192.42 273.68 129.63"/><polygon class="cls-31" points="165.63 192.42 165.61 253.47 56.85 190.68 56.87 129.63 165.63 192.42"/></g></g><g id="context-layers-active"><g class="cls-5"><polygon class="cls-23" points="278.13 174.6 278.09 189.27 164.61 123.76 164.66 109.08 278.13 174.6"/><polygon class="cls-22" points="164.66 109.08 164.61 123.76 51.88 189.27 51.92 174.6 164.66 109.08"/><path class="cls-6" 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 class="cls-7" points="329.87 174.6 329.83 189.27 165.51 284.76 165.56 270.09 329.87 174.6"/><polygon class="cls-8" points="165.56 270.09 165.51 284.76 0.13 189.27 0.17 174.6 165.56 270.09"/></g><g class="cls-5"><polygon class="cls-26" points="278.13 159.59 278.09 174.27 164.61 108.75 164.66 94.08 278.13 159.59"/><polygon class="cls-25" points="164.66 94.08 164.61 108.75 51.87 174.27 51.91 159.6 164.66 94.08"/><path class="cls-15" 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 class="cls-16" points="329.87 159.59 329.83 174.27 165.51 269.76 165.56 255.08 329.87 159.59"/><polygon class="cls-17" points="165.56 255.08 165.51 269.76 0.13 174.27 0.17 159.6 165.56 255.08"/></g><g class="cls-5"><polygon class="cls-19" points="278.13 144.59 278.09 159.26 164.61 93.75 164.66 79.08 278.13 144.59"/><polygon class="cls-20" points="164.66 79.08 164.61 93.75 51.87 159.27 51.91 144.6 164.66 79.08"/><path class="cls-9" 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 class="cls-10" points="329.87 144.59 329.83 159.26 165.51 254.75 165.56 240.08 329.87 144.59"/><polygon class="cls-11" points="165.56 240.08 165.51 254.75 0.13 159.27 0.17 144.59 165.56 240.08"/></g><polygon class="cls-12" points="278.13 129.6 278.09 144.27 164.61 78.76 164.66 64.08 278.13 129.6"/><polygon class="cls-12" points="164.66 64.08 164.61 78.76 51.88 144.27 51.92 129.6 164.66 64.08"/><path class="cls-12" 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 class="cls-13" points="329.87 129.6 329.83 144.27 165.51 239.76 165.56 225.09 329.87 129.6"/><polygon class="cls-14" points="165.56 225.09 165.51 239.76 0.13 144.27 0.17 129.6 165.56 225.09"/></g><g id="tech-layers-active"><g class="cls-5"><polygon class="cls-6" points="273.24 184.44 165.18 247.24 56.42 184.44 164.47 121.65 273.24 184.44"/><polygon class="cls-7" points="273.24 184.44 273.21 192.49 165.16 255.29 165.18 247.24 273.24 184.44"/><polygon class="cls-8" points="165.18 247.24 165.16 255.29 56.4 192.49 56.42 184.44 165.18 247.24"/></g><g class="cls-5"><polygon class="cls-15" points="273.24 169.69 165.18 232.49 56.42 169.69 164.47 106.9 273.24 169.69"/><polygon class="cls-16" points="273.24 169.69 273.21 177.74 165.16 240.54 165.18 232.49 273.24 169.69"/><polygon class="cls-17" points="165.18 232.49 165.16 240.54 56.4 177.75 56.42 169.69 165.18 232.49"/></g><g class="cls-5"><polygon class="cls-9" points="273.24 154.94 165.18 217.74 56.42 154.95 164.47 92.15 273.24 154.94"/><polygon class="cls-10" points="273.24 154.94 273.21 163 165.16 225.79 165.18 217.74 273.24 154.94"/><polygon class="cls-11" points="165.18 217.74 165.16 225.79 56.4 163 56.42 154.95 165.18 217.74"/></g><g class="cls-5"><polygon class="cls-12" points="273.24 140.19 165.18 202.98 56.42 140.19 164.47 77.4 273.24 140.19"/><polygon class="cls-13" points="273.24 140.19 273.21 148.24 165.16 211.03 165.18 202.98 273.24 140.19"/><polygon class="cls-14" points="165.18 202.98 165.16 211.03 56.4 148.24 56.42 140.19 165.18 202.98"/></g><polygon class="cls-32" points="92.83 128.67 74.69 139.21 56.45 128.67 74.58 118.13 92.83 128.67"/><polygon class="cls-33" points="92.83 128.67 92.81 131.82 74.67 142.36 74.69 139.21 92.83 128.67"/><polygon class="cls-34" points="74.69 139.21 74.67 142.36 56.42 131.82 56.45 128.67 74.69 139.21"/><polygon class="cls-32" points="124.27 110.61 106.13 121.14 87.88 110.61 106.02 100.07 124.27 110.61"/><polygon class="cls-33" points="124.27 110.61 124.24 113.76 106.11 124.3 106.13 121.14 124.27 110.61"/><polygon class="cls-34" points="106.13 121.14 106.11 124.3 87.86 113.76 87.88 110.61 106.13 121.14"/><polygon class="cls-32" points="153.51 93.54 135.38 104.08 117.13 93.55 135.27 83.01 153.51 93.54"/><polygon class="cls-33" points="153.51 93.54 153.49 96.69 135.36 107.23 135.38 104.08 153.51 93.54"/><polygon class="cls-34" points="135.38 104.08 135.36 107.23 117.11 96.7 117.13 93.55 135.38 104.08"/><polygon class="cls-32" points="182.26 76.44 164.13 86.98 145.88 76.44 164.02 65.9 182.26 76.44"/><polygon class="cls-33" points="182.26 76.44 182.24 79.59 164.11 90.13 164.13 86.98 182.26 76.44"/><polygon class="cls-34" points="164.13 86.98 164.11 90.13 145.86 79.59 145.88 76.44 164.13 86.98"/><polygon class="cls-32" points="122.27 145.77 104.13 156.31 85.88 145.78 104.02 135.24 122.27 145.77"/><polygon class="cls-33" points="122.27 145.77 122.24 148.93 104.11 159.46 104.13 156.31 122.27 145.77"/><polygon class="cls-34" points="104.13 156.31 104.11 159.46 85.86 148.93 85.88 145.78 104.13 156.31"/><polygon class="cls-32" points="153.7 127.71 135.57 138.25 117.32 127.72 135.46 117.18 153.7 127.71"/><polygon class="cls-33" points="153.7 127.71 153.68 130.86 135.54 141.4 135.57 138.25 153.7 127.71"/><polygon class="cls-34" points="135.57 138.25 135.54 141.4 117.3 130.87 117.32 127.72 135.57 138.25"/><polygon class="cls-6" points="182.95 110.65 164.82 121.19 146.57 110.65 164.71 100.11 182.95 110.65"/><polygon class="cls-7" points="182.95 110.65 182.93 113.8 164.79 124.34 164.82 121.19 182.95 110.65"/><polygon class="cls-8" points="164.82 121.19 164.79 124.34 146.55 113.8 146.57 110.65 164.82 121.19"/><polygon class="cls-32" points="211.7 93.54 193.57 104.08 175.32 93.55 193.46 83.01 211.7 93.54"/><polygon class="cls-33" points="211.7 93.54 211.68 96.69 193.54 107.23 193.57 104.08 211.7 93.54"/><polygon class="cls-34" points="193.57 104.08 193.54 107.23 175.3 96.7 175.32 93.55 193.57 104.08"/><polygon class="cls-32" points="152.2 162.88 134.07 173.42 115.82 162.88 133.96 152.34 152.2 162.88"/><polygon class="cls-33" points="152.2 162.88 152.18 166.03 134.04 176.57 134.07 173.42 152.2 162.88"/><polygon class="cls-34" points="134.07 173.42 134.04 176.57 115.8 166.03 115.82 162.88 134.07 173.42"/><polygon class="cls-32" points="183.64 144.82 165.5 155.36 147.26 144.82 165.39 134.28 183.64 144.82"/><polygon class="cls-33" points="183.64 144.82 183.62 147.97 165.48 158.51 165.5 155.36 183.64 144.82"/><polygon class="cls-34" points="165.5 155.36 165.48 158.51 147.24 147.97 147.26 144.82 165.5 155.36"/><polygon class="cls-32" points="212.89 127.75 194.75 138.29 176.51 127.76 194.64 117.22 212.89 127.75"/><polygon class="cls-33" points="212.89 127.75 212.87 130.91 194.73 141.44 194.75 138.29 212.89 127.75"/><polygon class="cls-34" points="194.75 138.29 194.73 141.44 176.49 130.91 176.51 127.76 194.75 138.29"/><polygon class="cls-32" points="241.64 110.65 223.5 121.19 205.26 110.65 223.39 100.11 241.64 110.65"/><polygon class="cls-33" points="241.64 110.65 241.62 113.8 223.48 124.34 223.5 121.19 241.64 110.65"/><polygon class="cls-34" points="223.5 121.19 223.48 124.34 205.24 113.8 205.26 110.65 223.5 121.19"/><polygon class="cls-32" points="183.8 180.9 165.66 191.44 147.41 180.9 165.55 170.36 183.8 180.9"/><polygon class="cls-33" points="183.8 180.9 183.77 184.05 165.64 194.59 165.66 191.44 183.8 180.9"/><polygon class="cls-34" points="165.66 191.44 165.64 194.59 147.39 184.06 147.41 180.9 165.66 191.44"/><polygon class="cls-32" points="215.24 162.84 197.1 173.38 178.85 162.84 196.99 152.3 215.24 162.84"/><polygon class="cls-33" points="215.24 162.84 215.21 165.99 197.08 176.53 197.1 173.38 215.24 162.84"/><polygon class="cls-34" points="197.1 173.38 197.08 176.53 178.83 165.99 178.85 162.84 197.1 173.38"/><polygon class="cls-32" points="244.49 145.78 226.35 156.31 208.1 145.78 226.24 135.24 244.49 145.78"/><polygon class="cls-33" points="244.49 145.78 244.46 148.93 226.33 159.47 226.35 156.31 244.49 145.78"/><polygon class="cls-34" points="226.35 156.31 226.33 159.47 208.08 148.93 208.1 145.78 226.35 156.31"/><polygon class="cls-32" points="273.24 128.67 255.1 139.21 236.85 128.67 254.99 118.13 273.24 128.67"/><polygon class="cls-33" points="273.24 128.67 273.21 131.82 255.08 142.36 255.1 139.21 273.24 128.67"/><polygon class="cls-34" points="255.1 139.21 255.08 142.36 236.83 131.82 236.85 128.67 255.1 139.21"/></g></svg>
\ No newline at end of file
frontend/src/pages/index.js
View file @ 2e70198a
......@@ -15,7 +15,9 @@ import PhoneS1 from "../images/inline/phone-s-1.svg"
import PhoneS2 from "../images/inline/phone-s-2.svg"
import PhoneS3 from "../images/inline/phone-s-3.svg"
import Stack from "../images/inline/stack.svg"
//import Layers from "../images/inline/layers.svg"
import Layers from "../components/layers.js"
gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);
......@@ -163,9 +165,7 @@ const IndexPage = ({ data }) => {
</div>
</section>
<section style={{ textAlign: "center" }}>
<Link to="/">Explore the layer of the stack &raquo;</Link>
</section>
<Layers id="stack" />
</Layout>
)
}
......
frontend/src/pages/layers.js 0 → 100644
View file @ 2e70198a
import React from "react"
import Layout from "../components/layout"
import SEO from "../components/seo"
import Layers from "../components/layers.js"
const LayersPage = () => {
return (
<Layout id="front-page">
<SEO title="Home" />
<Layers id="stack" />
</Layout>
)
}
export default LayersPage
\ No newline at end of file
frontend/src/styles/_layers.scss 0 → 100644
View file @ 2e70198a
#layers {
width: 100%;
max-width: 320px;
//pointer-events: none;
g {
pointer-events: none;
}
path, polygon {
pointer-events: auto;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 0.75px;
&.dotted { stroke: #000; stroke-dasharray: 12; }
}
.inactive {
opacity: 0;
path, polygon {
pointer-events: none;
}
}
.idle {
opacity: 0.3;
}
}
.w-u { fill: #b5b5b5; stroke: #b5b5b5; }
.w-r { fill: #e3e3e3; stroke: #e3e3e3; }
.w-l { fill: #828282; stroke: #828282; }
.y-u { fill: #e6982d; stroke: #e6982d; }
.y-r { fill: #db912a; stroke: #db912a; }
.y-l { fill: #bd7e23; stroke: #bd7e23; }
.t-u { fill: #27afae; stroke: #27afae; }
.t-r { fill: #25a8a7; stroke: #25a8a7; }
.t-l { fill: #1a9392; stroke: #1a9392; }
.p-u { fill: #49378d; stroke: #49378d; }
.p-r { fill: #463387; stroke: #463387; }
.p-l { fill: #3d2976; stroke: #3d2976; }
.r-u { fill: #d6262c; stroke: #d6272b; }
.r-r { fill: #cc2429; stroke: #cc2429; }
.r-l { fill: #b11d21; stroke: #b11d21; }
frontend/src/styles/styles.scss
View file @ 2e70198a
......@@ -5,4 +5,7 @@
@import "footer";
@import "page-index";
@import "layers";
@import "page-alternatives";
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