Skip to content

Commit 7bd65ec

Browse files
LevFlavienLevFlavien
authored
Merge pull request #691 from akeneo/API-1944-modify-next-step-block-for-app-workflow-guided-tutorials
API-1944: Modify "next step" blocks for guided tutorials
2 parents 3e80bb5 + 8004ae1 commit 7bd65ec

File tree

5 files changed

+185
-19
lines changed

5 files changed

+185
-19
lines changed

‎components/components.css

Lines changed: 67 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,17 +88,24 @@ button {
8888
}
8989

9090
.block-next-steps {
91-
background-color: #F1F4F9;
9291
padding: 20px 50px;
9392
display: flex;
94-
align-items: center;
9593

9694
font-size: 16px;
9795
line-height: 24px;
9896

97+
background-color: #F1F4F9;
9998
color: #677688;
99+
border-radius: 5px;
100+
}
101+
.block-next-steps.block-next-steps-main {
102+
flex-direction: column;
103+
align-items: center;
104+
padding-bottom: 25px;
105+
}
106+
.block-next-steps.block-next-steps-alt {
107+
align-items: center;
100108
}
101-
102109
.block-next-steps img {
103110
margin-right: 50px;
104111
}
@@ -114,7 +121,11 @@ button {
114121
line-height: 41px;
115122
margin-bottom: 20px;
116123
}
117-
.block-next-steps-text {
124+
.block-next-steps.block-next-steps-main .block-next-steps-text {
125+
margin-bottom: 30px;
126+
font-weight: 400;
127+
}
128+
.block-next-steps.block-next-steps-alt .block-next-steps-text {
118129
margin-bottom: 11px;
119130
}
120131
.block-next-steps ul {
@@ -318,3 +329,55 @@ button {
318329
url("../dist/fonts/lato-bold-italic.woff2") format("woff2"),
319330
url("../dist/fonts/lato-bold-italic.woff") format("woff");
320331
}
332+
333+
.next-steps-button {
334+
width: 261px;
335+
height: 89px;
336+
padding-top: 5px; /* Fix font not centered */
337+
display: flex;
338+
justify-content: center;
339+
align-items: center;
340+
gap: 10px;
341+
342+
font-weight: 500;
343+
font-size: 24px;
344+
line-height: 29px;
345+
text-transform: uppercase;
346+
347+
cursor: pointer;
348+
349+
background-color: #414D97;
350+
color: #F1F4F9;
351+
352+
box-shadow: 0px 0px 6px rgba(37, 38, 52, 0.5);
353+
border: none;
354+
border-radius: 57px;
355+
}
356+
.next-steps-button:hover {
357+
background-color: #2D366D;
358+
text-decoration: none;
359+
color: #F1F4F9;
360+
}
361+
362+
.next-steps-button-number {
363+
padding-top: 2px; /* Fix inability to align-item baseline */
364+
font-size: 63px;
365+
}
366+
.next-steps-button-text {
367+
text-align: left;
368+
}
369+
370+
.next-steps-button-smaller {
371+
width: 177px;
372+
height: 65px;
373+
padding-top: 3px
374+
}
375+
376+
.next-steps-button-smaller .next-steps-button-number {
377+
font-size: 48px;
378+
}
379+
380+
.next-steps-button-smaller .next-steps-button-text {
381+
font-size: 18px;
382+
line-height: 22px;
383+
}

‎components/components.html

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373

7474
<hr>
7575

76-
<div class="block-next-steps">
76+
<div class="block-next-steps block-next-steps-alt">
7777
<img src="../content/img/illustrations/illus--Attribute.svg" width="140px">
7878
<div class="block-next-steps-column">
7979
<div class="block-next-steps-title">Next Step</div>
@@ -89,6 +89,30 @@
8989

9090
<hr>
9191

92+
<div class="block-next-steps block-next-steps-main">
93+
<div class="block-next-steps-title">Next Step</div>
94+
<div class="block-next-steps-text">Now that you’ve gotten your App token, continue the journey with Step 2!</div>
95+
<a href="/" class="next-steps-button next-steps-button-smaller">
96+
<div class="next-steps-button-number">2</div>
97+
<div class="next-steps-button-text">
98+
Develop<br>
99+
your App
100+
</div>
101+
</a>
102+
</div>
103+
104+
<hr>
105+
106+
<a href="/" class="next-steps-button">
107+
<div class="next-steps-button-number">1</div>
108+
<div class="next-steps-button-text">
109+
Get your<br>
110+
App token
111+
</div>
112+
</a>
113+
114+
<hr>
115+
92116
<iframe src="./tile.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
93117

94118
</body>

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

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -181,16 +181,14 @@ At the end of this process, you receive the following response with an `access_t
181181

182182
You can use this token to call the Akeneo PIM REST API.
183183

184-
<div class="block-next-steps">
185-
<img src="../../img/illustrations/illus--Attribute.svg" width="140px">
186-
<div class="block-next-steps-column">
187-
<div class="block-next-steps-title">Next Steps</div>
188-
<div class="block-next-steps-text">Now that you collected your token, we advise you to follow</div>
189-
<div>
190-
<ul>
191-
<li><a href="/apps/overview.html">Learn more about Apps</a></li>
192-
<li><a href="/api-reference-index.html">Explore the REST API reference</a></li>
193-
</ul>
184+
<div class="block-next-steps block-next-steps-main">
185+
<div class="block-next-steps-title">Next Step</div>
186+
<div class="block-next-steps-text">Now that you’ve gotten your App token, continue the journey with Step 2!</div>
187+
<a href="/tutorials/how-to-retrieve-pim-structure.html" class="next-steps-button next-steps-button-smaller">
188+
<div class="next-steps-button-number">2</div>
189+
<div class="next-steps-button-text">
190+
Develop<br>
191+
your App
194192
</div>
195-
</div>
193+
</a>
196194
</div>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,3 +201,16 @@ storeCurrencies(channel.currencies);
201201
storeLocales(channel.locales);
202202
storeCategoryTree(channel.category_tree);
203203
```
204+
205+
<div class="block-next-steps block-next-steps-alt">
206+
<img src="/img/illustrations/illus--Attribute.svg" width="140px">
207+
<div class="block-next-steps-column">
208+
<div class="block-next-steps-title">Next Step</div>
209+
<div class="block-next-steps-text">Well done! Keep digging into the “App workflow” and follow the next tutorial!</div>
210+
<div>
211+
<ul>
212+
<li><a href="/tutorials/how-to-get-families-and-attributes.html">How to get families and attributes</a></li>
213+
</ul>
214+
</div>
215+
</div>
216+
</div>

‎styles/guided-tutorial.less

Lines changed: 71 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,15 +60,23 @@
6060
}
6161

6262
.block-next-steps {
63-
background-color: #F1F4F9;
6463
padding: 20px 50px;
6564
display: flex;
66-
align-items: center;
6765

6866
font-size: 16px;
6967
line-height: 24px;
7068

69+
background-color: #F1F4F9;
7170
color: #677688;
71+
border-radius: 5px;
72+
}
73+
.block-next-steps.block-next-steps-main {
74+
flex-direction: column;
75+
align-items: center;
76+
padding-bottom: 25px;
77+
}
78+
.block-next-steps.block-next-steps-alt {
79+
align-items: center;
7280
}
7381
.block-next-steps img {
7482
margin-right: 50px;
@@ -85,7 +93,11 @@
8593
line-height: 41px;
8694
margin-bottom: 20px;
8795
}
88-
.block-next-steps-text {
96+
.block-next-steps.block-next-steps-main .block-next-steps-text {
97+
margin-bottom: 30px;
98+
font-weight: 400;
99+
}
100+
.block-next-steps.block-next-steps-alt .block-next-steps-text {
89101
margin-bottom: 11px;
90102
}
91103
.block-next-steps ul {
@@ -94,6 +106,62 @@
94106
list-style-type: none;
95107
}
96108

109+
.next-steps-button {
110+
width: 261px;
111+
height: 89px;
112+
padding-top: 5px; /* Fix font not centered */
113+
display: flex;
114+
justify-content: center;
115+
align-items: center;
116+
gap: 10px;
117+
118+
cursor: pointer;
119+
120+
font-weight: 500;
121+
font-size: 24px;
122+
line-height: 29px;
123+
text-transform: uppercase;
124+
125+
background-color: #414D97;
126+
color: #F1F4F9;
127+
128+
box-shadow: 0px 0px 6px rgba(37, 38, 52, 0.5);
129+
border: none;
130+
border-radius: 57px;
131+
}
132+
.next-steps-button:hover {
133+
background-color: #2D366D;
134+
text-decoration: none;
135+
color: #F1F4F9;
136+
}
137+
138+
.next-steps-button-number {
139+
padding-top: 2px; /* Fix inability to align-item baseline */
140+
font-size: 63px;
141+
}
142+
.next-steps-button-text {
143+
text-align: left;
144+
}
145+
146+
.next-steps-button-smaller {
147+
width: 177px;
148+
height: 65px;
149+
padding-top: 3px
150+
}
151+
152+
.next-steps-button-smaller {
153+
padding-top: 3px
154+
}
155+
156+
.next-steps-button-smaller .next-steps-button-number {
157+
font-size: 48px;
158+
}
159+
160+
.next-steps-button-smaller .next-steps-button-text {
161+
font-size: 18px;
162+
line-height: 22px;
163+
}
164+
97165
.back-button button {
98166
box-sizing: border-box;
99167

0 commit comments

Comments
 (0)