Skip to content

Commit 41a7bbe

Browse files
LevFlavienLevFlavien
authored
Merge pull request #675 from akeneo/API-1893-php-create-guided-tutorial-retrieve-the-pim-structure
API-1893: Add guided tutorial "How to retrieve PIM structure"
2 parents a75904a + ff23566 commit 41a7bbe

File tree

9 files changed

+742
-0
lines changed

9 files changed

+742
-0
lines changed

‎components/components.css

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
2+
/** Default pim-api-doc CSS **/
3+
body {
4+
width: 740px;
5+
6+
color: #677688;
7+
font-family: 'Lato';
8+
font-style: normal;
9+
font-weight: 300;
10+
font-size: 16px;
11+
}
12+
a {
13+
color: #4CA8E0;
14+
text-decoration: none;
15+
}
16+
a:hover, a:focus {
17+
color: #1d74a9;
18+
text-decoration: underline;
19+
}
20+
button {
21+
font-family: Lato;
22+
}
23+
24+
/** Custom CSS **/
25+
.endpoint-container {
26+
display: flex;
27+
align-items: flex-end;
28+
}
29+
.endpoint-text {
30+
font-weight: 500;
31+
font-size: 15px;
32+
line-height: 18px;
33+
margin-right: 10px;
34+
}
35+
.endpoint-link {
36+
margin-left: 10px;
37+
38+
color: white;
39+
background-color: #4C7D7D;
40+
padding: 3px 8px;
41+
border-radius: 3px;
42+
43+
font-family: 'Courier New';
44+
font-style: normal;
45+
font-weight: 700;
46+
font-size: 12px;
47+
line-height: 14px;
48+
}
49+
.endpoint-link:hover {
50+
color: white;
51+
background-color: #71AEAE;
52+
text-decoration: none;
53+
}
54+
55+
.block-requirements {
56+
background-color: #F1F4F9;
57+
padding: 23px;
58+
margin-top: 40px;
59+
display: flex;
60+
flex-direction: column;
61+
align-items: center;
62+
63+
font-size: 18px;
64+
line-height: 24px;
65+
66+
color: #677688;
67+
}
68+
.block-requirements-headline {
69+
font-weight: 500;
70+
margin-bottom: 13px;
71+
}
72+
.block-requirements ul {
73+
margin: 0;
74+
list-style-type: none;
75+
padding-left: 60px;
76+
}
77+
.block-requirements-row {
78+
display: flex;
79+
justify-content: space-between;
80+
}
81+
.block-requirements-steps {
82+
display: flex;
83+
align-items: center;
84+
font-weight: 500;
85+
}
86+
.block-requirements-steps a {
87+
font-weight: 400;
88+
margin-left: 9px;
89+
}
90+
91+
.block-next-steps {
92+
background-color: #F1F4F9;
93+
padding: 20px 50px;
94+
display: flex;
95+
align-items: center;
96+
97+
font-size: 16px;
98+
line-height: 24px;
99+
100+
color: #677688;
101+
}
102+
.block-next-steps img {
103+
margin-right: 50px;
104+
}
105+
.block-next-steps-column {
106+
display: flex;
107+
flex-direction: column;
108+
}
109+
.block-next-steps-title {
110+
color: #414D97;
111+
text-transform: uppercase;
112+
font-weight: 700;
113+
font-size: 34px;
114+
line-height: 41px;
115+
margin-bottom: 20px;
116+
}
117+
.block-next-steps-text {
118+
margin-bottom: 11px;
119+
}
120+
.block-next-steps ul {
121+
margin: 0;
122+
padding: 0;
123+
list-style-type: none;
124+
}
125+
126+
.back-button button {
127+
box-sizing: border-box;
128+
129+
padding: 4px 12px;
130+
131+
/*width: 224px;*/
132+
/*height: 32px;*/
133+
134+
background: #FFFFFF;
135+
136+
border: 1px solid #414D97;
137+
border-radius: 19px;
138+
139+
line-height: 19px;
140+
display: flex;
141+
align-items: center;
142+
text-transform: uppercase;
143+
144+
color: #414D97;
145+
}
146+
147+
.back-button button:hover {
148+
background-color: #F1F4F9;
149+
}
150+
151+
.tag-container {
152+
margin-top: 27px;
153+
}
154+
.tag-container td {
155+
padding-bottom: 13px;
156+
}
157+
.tag-container td:first-child {
158+
width: 113px;
159+
font-size: 15px;
160+
font-weight: 500;
161+
}
162+
163+
.tag-selectable {
164+
box-sizing: border-box;
165+
166+
display: flex;
167+
flex-direction: row;
168+
justify-content: left;
169+
align-items: center;
170+
padding: 0px 8px 0px 0px;
171+
gap: 8px;
172+
173+
background: #FFFFFF;
174+
175+
border: 0.5px solid #8C9AAF;
176+
border-radius: 3px;
177+
}
178+
179+
.tag-color {
180+
width: 6px;
181+
height: 20px;
182+
183+
border-width: 0.5px 0px 0.5px 0.5px;
184+
border-style: solid;
185+
border-radius: 3px 0px 0px 3px;
186+
}
187+
.tag-color-light-blue {
188+
background-color: #4CA8E0;
189+
border-color: #4CA8E0;
190+
}
191+
.tag-color-red {
192+
background-color: #F74B64;
193+
border-color: #F74B64;
194+
}
195+
196+
.tag-label {
197+
font-size: 12px;
198+
line-height: 14px;
199+
display: flex;
200+
align-items: center;
201+
text-align: center;
202+
203+
color: #677688;
204+
}
205+
206+
.tag-selectable:hover {
207+
background-color: #E6E6E7;
208+
}
209+
210+
.tag-selected {
211+
background-color: #E6E6E7;
212+
}
213+
214+
/** Lato font import **/
215+
@font-face {
216+
font-family: Lato;
217+
font-weight: 300;
218+
font-style: normal;
219+
text-rendering: optimizeLegibility;
220+
src:
221+
url("../dist/fonts/lato-light.woff2") format("woff2"),
222+
url("../dist/fonts/lato-light.woff") format("woff");
223+
}
224+
/* Lato (light, italic) */
225+
@font-face {
226+
font-family: Lato;
227+
font-weight: 300;
228+
font-style: italic;
229+
text-rendering: optimizeLegibility;
230+
src:
231+
url("../dist/fonts/lato-light-italic.woff2") format("woff2"),
232+
url("../dist/fonts/lato-light-italic.woff") format("woff");
233+
}
234+
/* Lato (normal, regular) */
235+
@font-face {
236+
font-family: Lato;
237+
font-weight: 400;
238+
font-style: normal;
239+
text-rendering: optimizeLegibility;
240+
src:
241+
url("../dist/fonts/lato-normal.woff2") format("woff2"),
242+
url("../dist/fonts/lato-normal.woff") format("woff");
243+
}
244+
/* Lato (normal, italic) */
245+
@font-face {
246+
font-family: Lato;
247+
font-weight: 400;
248+
font-style: italic;
249+
text-rendering: optimizeLegibility;
250+
src:
251+
url("../dist/fonts/lato-normal-italic.woff2") format("woff2"),
252+
url("../dist/fonts/lato-normal-italic.woff") format("woff");
253+
}
254+
/* Lato (semibold, regular) */
255+
@font-face {
256+
font-family: Lato;
257+
font-weight: 500;
258+
font-style: normal;
259+
text-rendering: optimizeLegibility;
260+
src:
261+
url("../dist/fonts/lato-semibold.woff2") format("woff2"),
262+
url("../dist/fonts/lato-semibold.woff") format("woff");
263+
}
264+
/* Lato (semibold, italic) */
265+
@font-face {
266+
font-family: Lato;
267+
font-weight: 500;
268+
font-style: italic;
269+
text-rendering: optimizeLegibility;
270+
src:
271+
url("../dist/fonts/lato-semibold-italic.woff2") format("woff2"),
272+
url("../dist/fonts/lato-semibold-italic.woff") format("woff");
273+
}
274+
/* Lato (bold, regular) */
275+
@font-face {
276+
font-family: Lato;
277+
font-weight: 600;
278+
font-style: normal;
279+
text-rendering: optimizeLegibility;
280+
src:
281+
url("../dist/fonts/lato-bold.woff2") format("woff2"),
282+
url("../dist/fonts/lato-bold.woff") format("woff");
283+
}
284+
/* Lato (bold, italic) */
285+
@font-face {
286+
font-family: Lato;
287+
font-weight: 600;
288+
font-style: italic;
289+
text-rendering: optimizeLegibility;
290+
src:
291+
url("../dist/fonts/lato-bold-italic.woff2") format("woff2"),
292+
url("../dist/fonts/lato-bold-italic.woff") format("woff");
293+
}

‎components/components.html

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
4+
<link rel="stylesheet" href="components.css">
5+
</head>
6+
<body>
7+
<div>
8+
<!-- WIP component -->
9+
<a href="https://google.com" class="back-button">
10+
<button>
11+
<img src="../content/img/icons/icon--arrow-back.svg" style="margin-right: 10px;">
12+
All guided tutorials
13+
</button>
14+
</a>
15+
</div>
16+
17+
<hr>
18+
19+
<table class="tag-container">
20+
<tr>
21+
<td>Use case:</td>
22+
<td>
23+
<button aria-pressed="false" class="tag-selectable">
24+
<div class="tag-color tag-color-light-blue"></div>
25+
<div class="tag-label">App Workflow</div>
26+
</button>
27+
</td>
28+
</tr>
29+
<tr>
30+
<td>PIM Features:</td>
31+
<td>
32+
<button aria-pressed="false" class="tag-selectable">
33+
<div class="tag-color tag-color-red"></div>
34+
<div class="tag-label">Channel</div>
35+
</button>
36+
</td>
37+
</tr>
38+
</table>
39+
40+
<hr>
41+
42+
<div class="endpoint-container">
43+
<div class="endpoint-text">REST API endpoint(s):</div>
44+
<a href="urllink" class="endpoint-link">channel</a>
45+
</div>
46+
47+
<hr>
48+
49+
<button aria-pressed="false" class="tag-selectable tag-selected">
50+
<div class="tag-color tag-color-light-blue"></div>
51+
<div class="tag-label">Label</div>
52+
<img aria-hidden="true" src="../content/img/icons/icon--unselect-tag.svg">
53+
</button>
54+
55+
<hr>
56+
57+
<div class="block-requirements">
58+
<div class="block-requirements-headline">
59+
If you're starting building your App, make sure you previously followed:
60+
</div>
61+
<div class="block-requirements-row">
62+
<img src="../content/img/illustrations/illus--Attributegroup.svg" width="110px">
63+
<div class="block-requirements-steps">
64+
<ul>
65+
<li>Step 1. <a href="urllink">Get your App token tutorial</a></li>
66+
<li>Step 2. <a href="urllink">Retrieve PIM structure tutorial</a></li>
67+
</ul>
68+
</div>
69+
</div>
70+
</div>
71+
72+
<hr>
73+
74+
<div class="block-next-steps">
75+
<img src="../content/img/illustrations/illus--Attribute.svg" width="140px">
76+
<div class="block-next-steps-column">
77+
<div class="block-next-steps-title">Next Step</div>
78+
<div class="block-next-steps-text">Now that you collected your categories, we advise you to follow</div>
79+
<div>
80+
<ul>
81+
<li><a href="urllink">How to parse product values tutorial</a></li>
82+
<li><a href="urllink">How to saucisse</a></li>
83+
</ul>
84+
</div>
85+
</div>
86+
</div>
87+
88+
</body>
89+
</html>

0 commit comments

Comments
 (0)