Skip to content

Commit b46b9ee

Browse files
samokissLevFlavienSamuel Gomis
authored
feat(API-1912):Implement the UI template for App homepage (#700)
* fix(API-1944): Design review * feat(API-1912):Implement the UI template for App homepage * feat(API-1912): fix apps homepage url * feat(API-1912): fix Co-authored-by: LevFlavien <[email protected]> Co-authored-by: Samuel Gomis <[email protected]>
1 parent 7bd65ec commit b46b9ee

21 files changed

+2656
-26
lines changed

‎components/block-about-app.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
.block-about-app {
2+
position: relative;
3+
background-color: #F1F4F9;
4+
padding: 45px 38px;
5+
margin-top: 81px;
6+
7+
font-size: 16px;
8+
line-height: 24px;
9+
10+
color: #677688;
11+
border-radius: 5px;
12+
}
13+
14+
.block-about-app-img {
15+
position: absolute;
16+
right: 5.92%;
17+
bottom: 50.66%;
18+
height: 183px;
19+
width: 231px;
20+
}
21+
22+
.block-about-app img {
23+
min-width: 100%;
24+
}
25+
26+
27+
.block-about-app-row {
28+
display: flex;
29+
align-items: center;
30+
}
31+
32+
.block-about-app-title {
33+
font-family: 'Lato';
34+
font-style: normal;
35+
font-weight: 700;
36+
font-size: 26px;
37+
line-height: 31px;
38+
display: flex;
39+
align-items: center;
40+
41+
color: #677688;
42+
}
43+
44+
.block-about-app-text {
45+
font-family: 'Lato';
46+
font-style: normal;
47+
font-weight: 400;
48+
font-size: 16px;
49+
line-height: 19px;
50+
margin-top: 45px;
51+
52+
color: #677688;
53+
}
54+
55+
.block-about-app-row .block-about-app-text {
56+
width: 87%;
57+
}
58+
59+
.block-link{
60+
color: #4CA8E0;
61+
}

‎components/block-about-app.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="block-about-app">
2+
<div class="block-about-app-title">Need to learn more about Apps?</div>
3+
<div class="block-about-app-row">
4+
<div class="block-about-app-text">
5+
<div>Let's first take a look <span class="block-link">&nbsp;<a href="">how apps are discovered.</a></span></div>
6+
<div>Then, <span class="block-link">&nbsp;<a href="">get acquainted with our APIs.</a></span></div>
7+
<div>Finally, understand <span class="block-link">&nbsp;<a href="">what's an Akeneo app and how it fits into Akeneo PXM Studio.</a></span></div>
8+
</div>
9+
<div class="block-about-app-img">
10+
<img src="../content/img/illustrations/illus--Coding.svg" width="140px">
11+
</div>
12+
</div>
13+
</div>

‎components/block-create-app.css

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
.block-create-app {
2+
margin-top: 60px;
3+
position: relative;
4+
background: #FFFFFF;
5+
border: 1px solid #4CA8E0;
6+
border-radius: 10px;
7+
}
8+
9+
.block-create-app-views {
10+
position: absolute;
11+
width: 95px;
12+
height: 95px;
13+
left: 23px;
14+
top: -13%;
15+
}
16+
17+
.block-create-app-title {
18+
margin-top: 60px;
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
22+
font-family: 'Lato';
23+
font-style: normal;
24+
font-weight: 700;
25+
font-size: 26px;
26+
line-height: 31px;
27+
28+
color: #414D97;
29+
}
30+
31+
32+
.block-create-app-row {
33+
display: flex;
34+
justify-content: center;
35+
align-items: center;
36+
}
37+
38+
.block-create-app-row .next-steps-button {
39+
margin-top: 40px;
40+
}
41+
42+
.arrow-back img{
43+
margin-top: 45px;
44+
margin-left:33px;
45+
margin-right:33px;
46+
align-items: center;
47+
width: 12px;
48+
transform: rotate(180deg);
49+
}
50+
51+
.block-create-app-text {
52+
font-family: 'Lato';
53+
font-style: normal;
54+
font-weight: 600;
55+
font-size: 20px;
56+
line-height: 24px;
57+
margin: 44px 0 38px 0;
58+
}
59+
60+
.block-link{
61+
color: #4CA8E0;
62+
}
63+
64+
.block-create-app-github {
65+
width: 36px;
66+
margin-right: 17px;
67+
}

‎components/block-create-app.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div class="block-create-app">
2+
<img class="block-create-app-views" src="../content/img/illustrations/illus--Views.svg">
3+
<div class="block-create-app-title">Follow the steps below to create your App easily!</div>
4+
<div class="block-create-app-row">
5+
<button class="next-steps-button">
6+
<div class="next-steps-button-number">1</div>
7+
<div class="next-steps-button-text">
8+
Get your<br>
9+
App token
10+
</div>
11+
</button>
12+
<div class="arrow-back">
13+
<img src="../content/img/icons/icon--arrow-back.svg">
14+
</div>
15+
<button class="next-steps-button">
16+
<div class="next-steps-button-number">2</div>
17+
<div class="next-steps-button-text">
18+
Develop<br>
19+
your App
20+
</div>
21+
</button>
22+
</div>
23+
<div class="block-create-app-row block-create-app-text">
24+
<img class="block-create-app-github" src="../content/img/icons/icon--github.png" />
25+
Interested by the big picture? Check a <span class="block-link">&nbsp;<a href="">PHP App example.</a></span>
26+
</div>
27+
</div>

‎components/block-welcome.css

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
.block-welcome {
22
position: relative;
33
background-color: #F1F4F9;
4-
padding: 30px 50px;
4+
padding: 30px 46px;
5+
margin-top: 27px;
56

67
font-size: 16px;
78
line-height: 24px;
89

910
color: #677688;
11+
border-radius: 5px;
1012
}
1113

1214
.block-welcome img {
@@ -47,7 +49,3 @@
4749
.block-welcome-row .block-welcome-text {
4850
width: 68.5%;
4951
}
50-
51-
.bold {
52-
font-weight: bold;
53-
}

‎components/block-welcome.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
<div class="block-welcome-row">
44
<div class="block-welcome-text">
55
This pre-requisite section will follow you all along the tutorials
6-
marked with the use case <span class="bold">"App workflow"</span>.
6+
marked with the use case <b>"App workflow"</b>.
77
</div>
88
<img src="../content/img/illustrations/illus--Attributegroup.svg" width="140px">
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.
12-
At the end of this tutorial, your draft App will receive an <span class="bold">access token and will be able to call
13-
the REST API.</span>
12+
At the end of this tutorial, your draft App will receive an <b>access token and will be able to call
13+
the REST API.</b>
1414
</div>
1515
<div class="block-welcome-text">
1616
Let's start!

‎components/button-publish-your-app.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div>
2+
<a href="" class="back-button">
3+
<button>
4+
Publish your app
5+
<img src="../content/img/icons/icon--outside.svg" style="margin-left: 10px;">
6+
</button>
7+
</a>
8+
</div>

‎components/components.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -363,6 +363,10 @@ button {
363363
padding-top: 2px; /* Fix inability to align-item baseline */
364364
font-size: 63px;
365365
}
366+
.next-steps-button-smaller .next-steps-button-number {
367+
padding-top: 4px; /* Fix inability to align-item baseline */
368+
}
369+
366370
.next-steps-button-text {
367371
text-align: left;
368372
}

‎components/components.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<link rel="stylesheet" href="components.css">
55
<link rel="stylesheet" href="tile.css">
66
<link rel="stylesheet" href="block-welcome.css">
7+
<link rel="stylesheet" href="block-about-app.css">
8+
<link rel="stylesheet" href="block-create-app.css">
79
</head>
810
<body>
911
<div>
@@ -121,4 +123,16 @@
121123

122124
<iframe src="./block-welcome.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
123125

126+
<hr>
127+
128+
<iframe src="./block-about-app.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
129+
130+
<hr>
131+
132+
<iframe src="./block-create-app.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
133+
134+
<hr>
135+
136+
<iframe src="./button-publish-your-app.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
137+
124138
</html>

‎content/apps/apps.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<h1 class="tutorial-title">Start building your App</h1>
2+
3+
<div class="block-about-app">
4+
<div class="block-about-app-title">Need to learn more about Apps?</div>
5+
<div class="block-about-app-row">
6+
<div class="block-about-app-text">
7+
<div>Let's first take a look&nbsp;<span class="block-link"><a href="https://apps.akeneo.com/">how apps are discovered.</a></span></div>
8+
<div>Then,&nbsp;<span class="block-link"><a href="/api-reference-index.html">get acquainted with our APIs.</a></span></div>
9+
<div>Finally, understand&nbsp;<span class="block-link"><a href="/apps/overview.html#whats-an-akeneo-app">what's an Akeneo app</a></span> and&nbsp;<span class="block-link"><a href="/apps/overview.html#how-apps-fit-into-akeneo-pxm-studio">how it fits into Akeneo PXM Studio.</a></span></div>
10+
</div>
11+
<div class="block-about-app-img">
12+
<img src="/img/illustrations/illus--Coding.svg" width="140px">
13+
</div>
14+
</div>
15+
</div>
16+
17+
<div class="block-create-app">
18+
<img class="block-create-app-views" src="/img/illustrations/illus--Views.svg">
19+
<div class="block-create-app-title">Follow the steps below to create your App easily!</div>
20+
<div class="block-create-app-row">
21+
<a href="/tutorials/how-to-get-your-app-token.html" class="next-steps-button">
22+
<div class="next-steps-button-number">1</div>
23+
<div class="next-steps-button-text">
24+
Get your<br>
25+
App token
26+
</div>
27+
</a>
28+
<div class="arrow-back">
29+
<img src="/img/icons/icon--arrow-back.svg">
30+
</div>
31+
<a href="/tutorials/homepage.html#tags=App Workflow" class="next-steps-button">
32+
<div class="next-steps-button-number">2</div>
33+
<div class="next-steps-button-text">
34+
Develop<br>
35+
your App
36+
</div>
37+
</a>
38+
</div>
39+
<div class="block-create-app-row block-create-app-text">
40+
<img class="block-create-app-github" src="/img/icons/icon--github.png" />
41+
Interested by the big picture? Check a&nbsp;<span class="block-link"><a href="https://github.com/akeneo/demo-app">PHP App example.</a></span>
42+
</div>
43+
</div>

0 commit comments

Comments
 (0)