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

more improvements to layers component

parent 66c4ed9e
......@@ -39,11 +39,11 @@ const Layers = ({ location }) => {
<div className="columns-2">
<div className="column"
onClick={e => { handleClick(e, "0") }}
//onKeyDown={e => { handleClick(e, "0") }}
onKeyDown={e => { if(e.keyCode === 27) handleClick(e, "0") }}
tabIndex="0"
role="button"
aria-label="reset view">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 570 794.17"><g style={{ transform: "translateY(120px)" }}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620 794.17"><g style={{ transform: "translateY(120px)" }}>
<g id="foundation-layer-idle"
className={`clickable ${mainLayer === 1 ? 'inactive' : 'idle'} ${mainLayer >= 2 ? "down" : ""}`}
......@@ -223,7 +223,7 @@ const Layers = ({ location }) => {
<text transform="translate(413.2 129.26)">Service</text>
</g>
<g>
<text class="strong" transform="translate(413.2 99.93)">
<text className="strong" transform="translate(413.2 99.93)">
<tspan x="0" y="0">Tech stack:</tspan>
<tspan x="0" y="18">context layers</tspan>
</text>
......@@ -318,7 +318,7 @@ const Layers = ({ location }) => {
<text transform="translate(346.01 122.81)">Application layer</text>
</g>
<g>
<text class="strong" transform="translate(346.01 80.03)">
<text className="strong" transform="translate(346.01 80.03)">
<tspan x="0" y="0">Tech stack:</tspan>
<tspan x="0" y="18">tech layers</tspan>
</text>
......
......@@ -101,61 +101,67 @@ const IndexPage = ({ data, location }) => {
<SEO title="Home" />
<section id="front-introduction">
<div className="row columns-2 s-column-reverse">
<div className="column v-center" dangerouslySetInnerHTML={{__html: data.strapiHome.introduction }} />
<div className="column v-center">
{/* <div ref={el => toaster = el}> */}
<Toaster id="toaster" />
{/* </div> */}
<div className="row">
<div className="columns-2 s-column-reverse">
<div className="column v-center" dangerouslySetInnerHTML={{__html: data.strapiHome.introduction }} />
<div className="column v-center">
{/* <div ref={el => toaster = el}> */}
<Toaster id="toaster" />
{/* </div> */}
</div>
</div>
</div>
</section>
<section id="front-layer-explanation" style={{background: "#F8F8F8"}} ref={el => phoneTrigger = el}>
<div className="row columns-2">
{ !isSmallScreen &&
<div className="column" ref={el => phone = el}>
<Phone id="phone" className="visual-part" />
</div>
}
<div className="column">
<div className="text-part v-center">
{ isSmallScreen && <PhoneS1 /> }
<div dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_1 }} />
</div>
<div className="text-part v-center">
{ isSmallScreen && <PhoneS2 /> }
<div dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_2 }} />
<div className="row">
<div className="columns-2">
{ !isSmallScreen &&
<div className="column" ref={el => phone = el}>
<Phone id="phone" className="visual-part" />
</div>
<div className="text-part v-center">
{ isSmallScreen && <PhoneS3 /> }
<div dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_3 }} />
}
<div className="column">
<div className="text-part v-center">
{ isSmallScreen && <PhoneS1 /> }
<div dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_1 }} />
</div>
<div className="text-part v-center">
{ isSmallScreen && <PhoneS2 /> }
<div dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_2 }} />
</div>
<div className="text-part v-center">
{ isSmallScreen && <PhoneS3 /> }
<div dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_3 }} />
</div>
</div>
</div>
</div>
</section>
<section id="front-stacks" ref={el => stackTrigger = el}>
<div className="row columns-2">
<div className="column">
<div className="text-part v-center">
<div dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_4 }}></div>
</div>
<div className="text-part v-center">
<div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_1 }} />
</div>
<div className="text-part v-center">
<div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_2 }} />
</div>
<div className="text-part v-center">
<div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_3 }} />
<div className="row">
<div className="columns-2">
<div className="column">
<div className="text-part v-center">
<div dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_4 }}></div>
</div>
<div className="text-part v-center">
<div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_1 }} />
</div>
<div className="text-part v-center">
<div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_2 }} />
</div>
<div className="text-part v-center">
<div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_3 }} />
</div>
</div>
{ !isSmallScreen &&
<div className="column" ref={el => stack = el}>
<Stack id="stack" className="visual-part" />
</div>
}
</div>
{ !isSmallScreen &&
<div className="column" ref={el => stack = el}>
<Stack id="stack" className="visual-part" />
</div>
}
</div>
</section>
......
......@@ -33,6 +33,7 @@
}
text {
font-size: 18px;
pointer-events: auto;
&.strong {
......
......@@ -57,7 +57,11 @@ section {
.row {
margin: 0 auto;
max-width: 1320px;
padding: 2rem;
padding: 1rem;
@media (min-width: 680px) {
padding: 2rem;
}
}
.columns-1, .columns-2 {
......@@ -66,7 +70,7 @@ section {
margin: 0 -1rem;
.column {
padding: 0 1rem;
margin: 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