Skip to content
Snippets Groups Projects
Commit 08f4f1c6 authored by Tuukka Turu's avatar Tuukka Turu
Browse files

Merge branch 'NXSTAGE-616-large-process-flow-fixes' into 'development' 

fix mobile&tablet layout

See merge request julkiset-sivut/design-system-lib!66
parents e87c245f 37fbea7d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss
+ 14
− 9
View file @ 08f4f1c6
......@@ -12,17 +12,17 @@
//tablet
padding-left: calc(100% / 8 + var(--gutter-narrow)); // 1 column padding
}
@include breakpoint($medium) {
@include breakpoint($medium + 1) {
//small desktop
padding-left: calc(100% / 8 + var(--gutter-medium)); // 1 column padding
padding-left: calc(100% / 12 + var(--gutter-medium)); // 1 column padding
}
@include breakpoint($wide) {
//mid desktop
padding-left: calc(100% / 8 + var(--gutter-wide)); // 1 column padding
padding-left: calc(100% / 12 + var(--gutter-wide)); // 1 column padding
}
@include breakpoint($extrawide) {
//large desktop
padding-left: calc(100% / 8 + var(--gutter-extrawide)); // 1 column padding
padding-left: calc(100% / 12 + var(--gutter-extrawide)); // 1 column padding
}
&__phase {
......@@ -105,14 +105,15 @@
&__content {
background-color: var(--grayscale-background-box);
margin: 0;
margin: 0 -56px;
padding: 48px 0 24px 0;
position: relative;
top: -24px;
@include breakpoint($narrow) {
margin-bottom: -8px;
margin-left: 32px;
//margin-bottom: -8px;
//margin-left: 32px;
margin: 0 0 -8px 32px;
padding: 32px 0;
top: -32px;
}
......@@ -125,7 +126,8 @@
@include font-weight(600);
letter-spacing: -0.5px;
margin-bottom: 24px;
padding: 0 16px;
//padding: 0 16px;
padding: 0 56px;
@include breakpoint($narrow) {
@include font-size(26px, 30px);
......@@ -142,7 +144,8 @@
@include font-size(16px, 24px);
letter-spacing: 0;
margin-bottom: 24px;
padding: 0 16px;
//padding: 0 16px;
padding: 0 56px;
@include breakpoint($narrow) {
padding: 0 44px;
......@@ -154,9 +157,11 @@
display: flex;
flex-direction: column;
margin-right: 0;
padding: 0 56px;
@include breakpoint($narrow) {
margin-right: -6px;
padding: 0;
}
.phase-link {
......
src/components/hy-large-process-flow/hy-large-process-flow.scss
+ 3
− 3
View file @ 08f4f1c6
......@@ -7,11 +7,11 @@
width: 100%;
@include breakpoint($narrow) {
//tablet
//tablet up till 768 (including 768px)
max-width: calc(100% / 8 * 7 + var(--gutter-narrow)); // 7 columns out of 8
}
@include breakpoint($medium) {
//small desktop
@include breakpoint($medium + 1) {
//small desktop; > 768
max-width: calc(100% / 12 * 8 + var(--gutter-medium)); // 8 columns out of 12
}
@include breakpoint($wide) {
......
src/index.html
+ 77
− 32
View file @ 08f4f1c6
......@@ -13,39 +13,84 @@
<body class="full-width" style="padding: 0; margin: 0;">
<hy-main has-sidebar="false">
<div class="layout-content">
<hy-heading heading="h2" section="contentsection">
A process illustrated with steps
</hy-heading>
<hy-large-process-flow
data-items='[
{"phaseTitle":"First phase title",
"boxes": [
{"heading": "Hanc ego cum teneam sententiam",
"description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
"links":[{"label":"Link to another page", "url": "https://helsinki.fi"}]},
{"heading": "Hanc ego cum teneam sententiam",
"description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
"links":[{"label":"Link to another page", "url": "https://helsinki.fi"},
{"label":"Link to another page", "url": "https://helsinki.fi"}]},
{"heading": "Hanc ego cum teneam sententiam",
"description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in."},
{"heading": "Hanc ego cum teneam sententiam",
"description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
"links":[{"label":"Link to another page", "url": "https://helsinki.fi"},
{"label":"Link to another page", "url": "https://helsinki.fi"}]}
]
},
{"phaseTitle":"Second phase title",
"boxes": [
{"heading": "Hanc ego cum teneam sententiam",
"description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
"links":[{"label":"Link to another page", "url": "https://helsinki.fi"},
{"label":"Link to another page", "url": "https://helsinki.fi"}]}
]
}
]'
<hy-introduction
reversed
text-title="This is an introduction"
text-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque pretium leo quis efficitur. Praesent lorem sapien, pharetra ac suscipit non, bibendum sed nisi. Suspendisse semper felis quam, ut congue dui interdum at. Phasellus et porta libero, nec lobortis odio. Mauris ut elementum risus. Ut sed consectetur tellus. Duis pellentesque, ante in tempus pellentesque, elit nisi volutpat erat, in semper leo metus nec purus. Mauris eu finibus diam. Vestibulum eget ex et magna euismod porttitor. Pellentesque non tellus ornare, volutpat metus sit amet, ornare est. Morbi et ornare ipsum. Pellentesque condimentum magna est, vel luctus velit iaculis quis. Ut eu mi non augue dictum porta. Aliquam erat volutpat. Praesent volutpat, turpis nec mattis condimentum, mi lectus varius tellus, mattis tempus lorem justo et neque."
url="https://www.google.com"
url-title="Check this link"
sc-label="label for link"
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
></hy-introduction>
<hy-banner
text-title="Check upcoming conferences"
text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."
url="#this-is-an-accordion-item-2--title"
url-title="Show list of conferences"
sc-label="List of conferences"
>
</hy-large-process-flow>
</hy-banner>
<section>
<a href="#this-is-an-accordion-item-2--title">Click here to go to Accordion Item 2</a>
</section>
<hy-banner
text-title="Check upcoming conferences"
text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."
url="#this-is-an-accordion-item-2--title"
url-title="Show list of conferences"
sc-label="List of conferences"
>
</hy-banner>
<hy-accordion-container accordionId="example-accordion">
<hy-accordion-item accordiontitle="This is an accordion item 1">
<hy-paragraph-text>Accordion content</hy-paragraph-text>
</hy-accordion-item>
<hy-accordion-item accordiontitle="This is an accordion item 2">
<hy-paragraph-text>Accordion content</hy-paragraph-text>
</hy-accordion-item>
<hy-accordion-item accordiontitle="This is an accordion item 3">
<hy-paragraph-text>Accordion content</hy-paragraph-text>
</hy-accordion-item>
</hy-accordion-container>
<hy-main-content-wrapper>
<hy-heading heading="h2" section="contentsection">
A process illustrated with steps
</hy-heading>
<hy-large-process-flow
data-items='[
{"phaseTitle":"First phase title",
"boxes": [
{"heading": "Hanc ego cum teneam sententiam",
"description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
"links":[{"label":"Link to another page", "url": "https://helsinki.fi"}]},
{"heading": "Hanc ego cum teneam sententiam",
"description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
"links":[{"label":"Link to another page", "url": "https://helsinki.fi"},
{"label":"Link to another page", "url": "https://helsinki.fi"}]},
{"heading": "Hanc ego cum teneam sententiam",
"description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in."},
{"heading": "Hanc ego cum teneam sententiam",
"description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
"links":[{"label":"Link to another page", "url": "https://helsinki.fi"},
{"label":"Link to another page", "url": "https://helsinki.fi"}]}
]
},
{"phaseTitle":"Second phase title",
"boxes": [
{"heading": "Hanc ego cum teneam sententiam",
"description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
"links":[{"label":"Link to another page", "url": "https://helsinki.fi"},
{"label":"Link to another page", "url": "https://helsinki.fi"}]}
]
}
]'
>
</hy-large-process-flow>
</hy-main-content-wrapper>
</div>
</hy-main>
......
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