Skip to content

Commit f1cf897

Browse files
LevFlavienLevFlavien
authored
Merge pull request #719 from akeneo/API-1977-correct-pre-requisite-block-ui-for-mobile-device
API-1977: Make Requirement and Welcome block layouts responsive
2 parents b2bc3de + 9771dff commit f1cf897

10 files changed

+33
-57
lines changed

‎components/block-welcome.css

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@
1212
}
1313

1414
.block-welcome img {
15-
position: absolute;
16-
width: 110px;
17-
right: 73px;
18-
top: 24px;
15+
margin-top: -31px;
16+
margin-right: 27px;
17+
margin-bottom: -11px;
1918
}
2019

2120
.block-welcome-row {
2221
display: flex;
2322
align-items: center;
23+
gap: 73px;
2424
}
2525

2626
.block-welcome-title {
@@ -45,7 +45,3 @@
4545

4646
color: #677688;
4747
}
48-
49-
.block-welcome-row .block-welcome-text {
50-
width: 68.5%;
51-
}

‎components/block-welcome.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
This pre-requisite section will follow you all along the tutorials
66
marked with the use case <b>"App workflow"</b>.
77
</div>
8-
<img src="../content/img/illustrations/illus--Attributegroup.svg" width="140px">
8+
<img src="../content/img/illustrations/illus--Attributegroup.svg" width="110px" class="hidden-xs">
99
</div>
1010
<div class="block-welcome-text">
1111
The workflow starts with this tutorial that will guide you through the creation of a draft App.

‎components/components.css

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,18 +68,15 @@ button {
6868
font-weight: 500;
6969
margin-bottom: 13px;
7070
}
71-
.block-requirements ul {
72-
margin: 0;
73-
list-style-type: none;
74-
padding-left: 60px;
75-
}
7671
.block-requirements-row {
7772
display: flex;
7873
justify-content: space-between;
74+
gap: 60px;
7975
}
8076
.block-requirements-steps {
8177
display: flex;
82-
align-items: center;
78+
flex-direction: column;
79+
justify-content: center;
8380
font-weight: 500;
8481
}
8582
.block-requirements-steps a {

‎components/components.html

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,10 @@
6363
If you're starting building your App, make sure you previously followed:
6464
</div>
6565
<div class="block-requirements-row">
66-
<img src="../content/img/illustrations/illus--Attributegroup.svg" width="110px">
66+
<img src="../content/img/illustrations/illus--Attributegroup.svg" width="110px" class="hidden-xs">
6767
<div class="block-requirements-steps">
68-
<ul>
69-
<li>Step 1. <a href="urllink">Get your App token tutorial</a></li>
70-
<li>Step 2. <a href="urllink">Retrieve PIM structure tutorial</a></li>
71-
</ul>
68+
<div>Step 1. <a href="urllink">Get your App token tutorial</a></div>
69+
<div>Step 2. <a href="urllink">Retrieve PIM structure tutorial</a></div>
7270
</div>
7371
</div>
7472
</div>

‎content/tutorials/guides/how-to-collect-product-variations.md

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,12 @@
4444
If you're following our App workflow, make sure you previously read:
4545
</div>
4646
<div class="block-requirements-row">
47-
<img src="../../img/illustrations/illus--Attributegroup.svg" width="110px">
47+
<img src="../../img/illustrations/illus--Attributegroup.svg" width="110px" class="hidden-xs">
4848
<div class="block-requirements-steps">
49-
<ul>
50-
<li>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></li>
51-
<li>Step 2. <a href="how-to-retrieve-pim-structure.html" target="_blank" rel="noopener noreferrer">How to retrieve PIM structure</a></li>
52-
<li>Step 3. <a href="how-to-get-families-and-attributes.html" target="_blank" rel="noopener noreferrer">How to get families, family variants, and attributes</a></li>
53-
<li>Step 4. <a href="how-to-get-pim-product-information.html" target="_blank" rel="noopener noreferrer">How to get PIM product information</a></li>
54-
</ul>
49+
<div>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></div>
50+
<div>Step 2. <a href="how-to-retrieve-pim-structure.html" target="_blank" rel="noopener noreferrer">How to retrieve PIM structure</a></div>
51+
<div>Step 3. <a href="how-to-get-families-and-attributes.html" target="_blank" rel="noopener noreferrer">How to get families, family variants, and attributes</a></div>
52+
<div>Step 4. <a href="how-to-get-pim-product-information.html" target="_blank" rel="noopener noreferrer">How to get PIM product information</a></div>
5553
</div>
5654
</div>
5755
</div>

‎content/tutorials/guides/how-to-get-families-and-attributes.md

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,10 @@
4444
If you're starting to build your App, make sure you previously followed:
4545
</div>
4646
<div class="block-requirements-row">
47-
<img src="../../img/illustrations/illus--Attributegroup.svg" width="110px">
47+
<img src="../../img/illustrations/illus--Attributegroup.svg" width="110px" class="hidden-xs">
4848
<div class="block-requirements-steps">
49-
<ul>
50-
<li>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></li>
51-
<li>Step 2. <a href="how-to-retrieve-pim-structure.html" target="_blank" rel="noopener noreferrer">How to retrieve PIM structure</a></li>
52-
</ul>
49+
<div>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></div>
50+
<div>Step 2. <a href="how-to-retrieve-pim-structure.html" target="_blank" rel="noopener noreferrer">How to retrieve PIM structure</a></div>
5351
</div>
5452
</div>
5553
</div>

‎content/tutorials/guides/how-to-get-pim-product-information.md

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,11 @@
3838
If you're starting to build your App, make sure you previously followed:
3939
</div>
4040
<div class="block-requirements-row">
41-
<img src="/img/illustrations/illus--Attributegroup.svg" width="110px">
41+
<img src="/img/illustrations/illus--Attributegroup.svg" width="110px" class="hidden-xs">
4242
<div class="block-requirements-steps">
43-
<ul>
44-
<li>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></li>
45-
<li>Step 2. <a href="how-to-retrieve-pim-structure.html" target="_blank" rel="noopener noreferrer">How to retrieve PIM structure</a></li>
46-
<li>Step 3. <a href="how-to-get-families-and-attributes.html" target="_blank" rel="noopener noreferrer">How to get families and attributes</a></li>
47-
</ul>
43+
<div>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></div>
44+
<div>Step 2. <a href="how-to-retrieve-pim-structure.html" target="_blank" rel="noopener noreferrer">How to retrieve PIM structure</a></div>
45+
<div>Step 3. <a href="how-to-get-families-and-attributes.html" target="_blank" rel="noopener noreferrer">How to get families and attributes</a></div>
4846
</div>
4947
</div>
5048
</div>

‎content/tutorials/guides/how-to-get-your-app-token.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Implement the required parts of the App activation process and receive an App ac
2828
This pre-requisite section will follow you all along the tutorials
2929
marked with the use case <b>"App workflow"</b>.
3030
</div>
31-
<img src="../../img/illustrations/illus--Attributegroup.svg" width="140px">
31+
<img src="../../img/illustrations/illus--Attributegroup.svg" width="110px" class="hidden-xs">
3232
</div>
3333
<div class="block-welcome-text">
3434
The workflow starts with this tutorial that will guide you through the creation of a draft App.

‎content/tutorials/guides/how-to-retrieve-pim-structure.md

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,9 @@ Retrieve the PIM structure through a channel resource. This is usually the requi
4040
If you're starting building your App, make sure you previously followed:
4141
</div>
4242
<div class="block-requirements-row">
43-
<img src="../../img/illustrations/illus--Attributegroup.svg" width="110px">
43+
<img src="../../img/illustrations/illus--Attributegroup.svg" width="110px" class="hidden-xs">
4444
<div class="block-requirements-steps">
45-
<ul>
46-
<li>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></li>
47-
</ul>
45+
<div>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></div>
4846
</div>
4947
</div>
5048
</div>

‎styles/guided-tutorial.less

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,15 @@
4040
font-weight: 500;
4141
margin-bottom: 13px;
4242
}
43-
.block-requirements ul {
44-
margin: 0;
45-
list-style-type: none;
46-
padding-left: 60px;
47-
}
4843
.block-requirements-row {
4944
display: flex;
5045
justify-content: space-between;
46+
gap: 60px;
5147
}
5248
.block-requirements-steps {
5349
display: flex;
54-
align-items: center;
50+
flex-direction: column;
51+
justify-content: center;
5552
font-weight: 500;
5653
}
5754
.block-requirements-steps a {
@@ -508,15 +505,15 @@
508505
}
509506

510507
.block-welcome img {
511-
position: absolute;
512-
width: 110px;
513-
right: 73px;
514-
top: 24px;
508+
margin-top: -31px;
509+
margin-right: 27px;
510+
margin-bottom: -11px;
515511
}
516512

517513
.block-welcome-row {
518514
display: flex;
519515
align-items: center;
516+
gap: 73px;
520517
}
521518

522519
.block-welcome-title {
@@ -541,7 +538,3 @@
541538

542539
color: #677688;
543540
}
544-
545-
.block-welcome-row .block-welcome-text {
546-
width: 68.5%;
547-
}

0 commit comments

Comments
 (0)