Skip to content

Commit 36b5b5b

Browse files
author
Samuel Gomis
committed
feat(API-1899): Implement Guided tutorials homepage UI
1 parent 79805c7 commit 36b5b5b

22 files changed

+632
-191
lines changed

‎components/components.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "tile.css";
2+
@import "search-bar.css";
13

24
/** Default pim-api-doc CSS **/
35
body {
@@ -192,6 +194,33 @@ button {
192194
background-color: #F74B64;
193195
border-color: #F74B64;
194196
}
197+
.tag-color-yellow {
198+
background-color: #FCCE76;
199+
border-color: #FCCE76;
200+
}
201+
.tag-color-purple {
202+
background-color: #9452BA;
203+
border-color: #9452BA;
204+
}
205+
.tag-color-light-green{
206+
background-color: #81CCCC;
207+
border-color: #81CCCC;
208+
}
209+
210+
.tag-color-pink{
211+
background-color: #F8A0E5;
212+
border-color: #F8A0E5;
213+
}
214+
215+
.tag-color-orange{
216+
background-color: #FCAC76;
217+
border-color: #FCAC76;
218+
}
219+
220+
.tag-color-coral{
221+
background-color: #F74B64;
222+
border-color: #F74B64;
223+
}
195224

196225
.tag-label {
197226
font-size: 12px;

‎components/components.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,5 +85,9 @@
8585
</div>
8686
</div>
8787

88+
<hr>
89+
90+
<iframe src="./tile.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
91+
8892
</body>
8993
</html>

‎components/tile.css

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.tile {
2+
position: relative;
3+
box-sizing: border-box;
4+
word-wrap: break-word;
5+
6+
display: flex;
7+
flex-direction: row;
8+
align-items: flex-start;
9+
padding: 20px 25px 10px;
10+
gap: 10px;
11+
12+
width: 355px;
13+
height: 130px;
14+
15+
background: #F1F4F9;
16+
17+
border: 1px solid #8C9AAF;
18+
border-radius: 5px;
19+
}
20+
21+
.tile-title {
22+
position: absolute;
23+
font-family: 'Lato';
24+
font-style: normal;
25+
font-weight: 600;
26+
font-size: 24px;
27+
line-height: 29px;
28+
29+
display: flex;
30+
align-items: center;
31+
32+
color: #414D97;
33+
34+
flex: none;
35+
order: 0;
36+
flex-grow: 0;
37+
}
38+
39+
.tile-tag {
40+
display: flex;
41+
flex-direction: row;
42+
width: auto;
43+
position: absolute;
44+
bottom: 10px;
45+
right: 0;
46+
}
47+
48+
.tile-tag .tag-selectable {
49+
margin-right: 10px;
50+
}

‎components/tile.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="tile">
2+
<div class="tile-title">
3+
How to get your App token & other think
4+
</div>
5+
<div class="tile-tag">
6+
<button aria-pressed="false" class="tag-selectable">
7+
<div class="tag-color tag-color-red"></div>
8+
<div class="tag-label">Channel</div>
9+
</button>
10+
<button aria-pressed="false" class="tag-selectable">
11+
<div class="tag-color tag-color-light-blue"></div>
12+
<div class="tag-label">App Workflow</div>
13+
</button>
14+
</div>
15+
</div>

‎content/apps/old/apps-getting-started.md

Lines changed: 0 additions & 154 deletions
This file was deleted.

‎content/apps/overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,6 @@ Your app is good to go?
7777

7878
## Next steps
7979

80-
- Learn more about how to [create an app](/apps/apps-how-to-get-your-app-token.html#how-to-get-app-token)
80+
- Learn more about how to [create an app](/tutorials/how-to-get-your-app-token.html#how-to-get-app-token)
8181
- Read our documentation about [authorization and authentication](/apps/authentication-and-authorization.html)
8282
- Learn how to use [catalogs](/apps/catalogs.html) to retrieve product data

‎content/getting-started/synchronize-pim-products-6x/step-1.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Synchronize PIM structure
22

33
:::warning
4-
This guide is being deprecated and will soon be unpublished. Please go to the newest guide [here](/apps/how-to-retrieve-pim-structure.html).
4+
This guide is being deprecated and will soon be unpublished. Please go to the newest guide [here](/tutorials/how-to-retrieve-pim-structure.html).
55
:::
66

77
## What do we synchronize?

‎content/redirections/to-get-your-app-token.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta http-equiv="refresh" content="0; URL=https://api.akeneo.com/apps/apps-how-to-get-your-app-token.html" />
4+
<meta http-equiv="refresh" content="0; URL=/tutorials/how-to-get-your-app-token.html" />
55
<!-- Hotjar Tracking Code for https://api.akeneo.com/ -->
66
<script>
77
(function(h,o,t,j,a,r){

‎content/tutorials/homepage.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<h1 class="tutorial-title">Guided Tutorials</h1>
2+
3+
<h2>Filter Tutorial</h2>
4+
5+
Select one use case or one feature to filter the tutorials depending on what you need!

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Implement the required parts of the App activation process and receive an App access token for querying your PIM API.
44

5-
<table class="tag-container">
5+
<table class="tag-container-xs">
66
<tr>
77
<td>Use case:</td>
88
<td>
@@ -159,10 +159,10 @@ You can use this token to call the Akeneo PIM REST API.
159159
<img src="../img/illustrations/illus--Attribute.svg" width="140px">
160160
<div class="block-next-steps-column">
161161
<div class="block-next-steps-title">Next Steps</div>
162-
<div class="block-next-steps-text">Now that you collected your categories, we advise you to follow</div>
162+
<div class="block-next-steps-text">Now that you collected your token, we advise you to follow</div>
163163
<div>
164164
<ul>
165-
<li><a href="https://api.akeneo.com/apps/overview.html">Learn more about Apps</a></li>
165+
<li><a href="/apps/overview.html">Learn more about Apps</a></li>
166166
<li><a href="/api-reference-index.html">Explore the REST API reference</a></li>
167167
</ul>
168168
</div>

0 commit comments

Comments
 (0)