Skip to content

Commit ae30873

Browse files
julitafalconduszajulitafalcondusza
committed
Front page redesigned
1 parent 9e531ac commit ae30873

File tree

7 files changed

+202
-40
lines changed

7 files changed

+202
-40
lines changed

‎docs/css/front-page.css‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,3 +143,113 @@ h5.tile-title {
143143
.announcement .btn-announcement:focus {
144144
background: #FFFFFF;
145145
}
146+
147+
.info-tile {
148+
height: 20vw;
149+
width: 30vw;
150+
max-width: 300px;
151+
max-height: 270px;
152+
border-radius: 5px;
153+
padding-left: 1vw;
154+
padding-right: 1vw;
155+
background: #af1164;
156+
display: inline-block;
157+
text-overflow: ellipsis;
158+
overflow: hidden;
159+
word-wrap: break-word;
160+
font-family: "Noto Sans"
161+
line-height: 65px;
162+
color: white;
163+
font-weight: bold;
164+
position: relative;
165+
margin:0.5%
166+
text-align: center;
167+
168+
}
169+
170+
.info-tile:hover {
171+
opacity:0.5;
172+
}
173+
174+
.info-tile-img {
175+
position: absolute;
176+
left: 52%;
177+
top: 15%;
178+
opacity: .4;
179+
height: 10vw;
180+
font-size:10vw;
181+
}
182+
183+
.info-tile-body ul {
184+
padding-left: 0;
185+
text-align: left;
186+
}
187+
188+
.info-tile-body ul li {
189+
list-style-type: none;
190+
background: url(../images/page.svg) no-repeat left top;
191+
background-size: 15px 18px;
192+
padding-left: 1rem;
193+
margin-left: 3rem;
194+
margin-top: 0.25rem;
195+
text-align: left;
196+
}
197+
198+
.info-tile-title {
199+
color: #ffffff;
200+
font-family: "Noto Sans";
201+
font-size: 18px;
202+
font-weight: bold;
203+
line-height: 50px;
204+
padding-left: 0;
205+
text-align: center;
206+
}
207+
208+
h5.info-tile-title {
209+
color: #ffffff;
210+
font-family: "Noto Sans";
211+
font-size: 18px;
212+
font-weight: bold;
213+
line-height: 50px;
214+
padding-left: 0;
215+
text-align: center;
216+
}
217+
218+
.info-tile-icon {
219+
margin-right: 0.6rem;
220+
}
221+
222+
.instruction {
223+
height: 80px;
224+
border-radius: 5px;
225+
background: #af1164;
226+
display: inline-block;
227+
text-overflow: ellipsis;
228+
overflow: hidden;
229+
word-wrap: break-word;
230+
font-family: "Noto Sans"
231+
line-height: 65px;
232+
color: white;
233+
font-weight: bold;
234+
font-size: 12px;
235+
position: relative;
236+
margin:0.5%
237+
text-align: center;
238+
box-sizing: border-box;
239+
border: 1px solid #D4D4D4;
240+
border-radius: 5px;
241+
background-color: #af1164;
242+
padding: 0.5rem 1.5rem 1rem 1rem;
243+
244+
}
245+
246+
.instruction-title {
247+
color: #ffffff;
248+
font-family: "Noto Sans";
249+
font-size: 18px;
250+
font-weight: bold;
251+
line-height: 50px;
252+
padding-left: 0;
253+
text-align: center;
254+
255+
}

‎docs/images/content.png‎

7.71 KB
Loading

‎docs/images/customer.png‎

13.6 KB
Loading

‎docs/images/number_one.png‎

9.27 KB
Loading

‎docs/images/product.png‎

8.43 KB
Loading

‎docs/images/user.png‎

13.6 KB
Loading

‎docs/index.md‎

Lines changed: 92 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,19 @@
22
<div class="row">
33
<h1>Ibexa developer documentation</h1>
44
</div>
5+
<div class="row mt-5">
6+
<div class="col-lg-12 mb-5 latest-release">
7+
<h5>
8+
The latest release
9+
<span class="pill">v4.5</span>
10+
</h5>
11+
<div class="row mt-3">
12+
<div class="col-lg-12">
13+
The <a href="release_notes/ibexa_dxp_v4.5/">latest version of Ibexa DXP is v4.5</a>. Check out what is new!
14+
</div>
15+
</div>
16+
</div>
17+
</div>
518
<div class="row mt-5 pb-4">
619
<div class="col-12">
720
<div class="announcement" role="alert">
@@ -10,7 +23,7 @@
1023
<svg class="tile-icon" width="32" height="32" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg">
1124
<g transform="scale(4) translate(1)"><path d="M22.293 19.35c-0.735-0.001-1.331-0.598-1.331-1.333 0-0.367 0.148-0.699 0.388-0.94l-0 0c1.367-1.384 2.211-3.287 2.211-5.387s-0.844-4.003-2.212-5.387l0.001 0.001c-0.254-0.243-0.412-0.585-0.412-0.964 0-0.736 0.597-1.333 1.333-1.333 0.381 0 0.725 0.16 0.968 0.417l0.001 0.001c1.846 1.866 2.987 4.433 2.987 7.267s-1.141 5.401-2.988 7.268l0.001-0.001c-0.242 0.243-0.576 0.393-0.946 0.393-0 0-0.001 0-0.001 0h0zM10.683 19c0.242-0.241 0.391-0.575 0.391-0.943s-0.149-0.702-0.391-0.943v0c-1.391-1.385-2.252-3.302-2.252-5.42 0-2.088 0.836-3.981 2.193-5.361l-0.001 0.001c0.236-0.241 0.382-0.571 0.382-0.935 0-0.737-0.597-1.334-1.334-1.334-0.373 0-0.709 0.153-0.951 0.399l-0 0c-1.823 1.862-2.949 4.413-2.949 7.228 0 2.854 1.157 5.439 3.028 7.309l0 0c0.241 0.241 0.574 0.389 0.942 0.389s0.7-0.149 0.942-0.389l-0 0zM27.237 23.060c2.94-2.896 4.762-6.92 4.762-11.37 0-4.413-1.792-8.408-4.689-11.297l-0-0c-0.243-0.255-0.586-0.414-0.966-0.414-0.736 0-1.333 0.597-1.333 1.333 0 0.381 0.159 0.724 0.415 0.967l0.001 0.001c2.413 2.406 3.907 5.734 3.907 9.41 0 3.708-1.519 7.061-3.968 9.471l-0.002 0.002c-0.242 0.241-0.391 0.575-0.391 0.943s0.149 0.702 0.391 0.943v0c0.241 0.242 0.575 0.391 0.943 0.391s0.702-0.149 0.943-0.391v0zM6.667 23.047c0.237-0.24 0.383-0.571 0.383-0.935 0-0.373-0.153-0.71-0.399-0.951l-0-0c-2.449-2.412-3.967-5.765-3.967-9.471 0-3.677 1.493-7.005 3.907-9.412l0-0c0.228-0.239 0.368-0.563 0.368-0.919 0-0.736-0.597-1.333-1.333-1.333-0.356 0-0.679 0.139-0.918 0.366l0.001-0.001c-2.897 2.889-4.689 6.883-4.689 11.297 0 4.45 1.822 8.474 4.76 11.368l0.002 0.002c0.241 0.242 0.575 0.391 0.943 0.391s0.702-0.149 0.943-0.391v0zM20 11.687c0-0.001 0-0.003 0-0.005 0-2.209-1.791-4-4-4s-4 1.791-4 4c0 1.731 1.1 3.206 2.639 3.762l0.028 0.009v15.213c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v0-15.213c1.565-0.565 2.665-2.037 2.667-3.766v-0z" fill="var(--ibexa-jazzberry)"></path></g>
1225
</svg>
13-
Ibexa DXP v4.4 is now out!
26+
Ibexa DXP v4.5 is now out!
1427
</span>
1528
<span class="d-flex flex-column flex-xs-row flex-sm-row flex-md-row justify-content-between align-items-center ml-md-4">
1629
<a href="release_notes/ibexa_dxp_v4.4" class="btn btn-sm btn-announcement-outline mr-4 ml-4 ml-md-0 mb-3 mb-sm-0">
@@ -33,11 +46,11 @@
3346
Installation
3447
</h5>
3548
<div class="tile-body">
36-
<ol>
49+
<ul>
3750
<li><a href="getting_started/requirements/">Requirements</a></li>
3851
<li><a href="getting_started/install_ibexa_dxp/">Install Ibexa DXP</a></li>
3952
<li><a href="getting_started/first_steps/">First steps</a></li>
40-
</ol>
53+
</ul>
4154
</div>
4255
</div>
4356
</div>
@@ -51,13 +64,14 @@
5164
<svg class="tile-icon align-middle" width="32" height="32">
5265
<use fill="var(--ibexa-jazzberry)" xlink:href="images/ez-icons.svg#about"></use>
5366
</svg>
54-
Tutorials
67+
Guide to Ibexa DXP
5568
</h5>
5669
<div class="tile-body">
5770
<ul>
58-
<li><a href="tutorials/beginner_tutorial/beginner_tutorial/">Beginner tutorial</a></li>
59-
<li><a href="tutorials/page_and_form_tutorial/page_and_form_tutorial/">Page and form tutorial</a></li>
60-
<li><a href="tutorials/generic_field_type/creating_a_point2d_field_type/">Generic Field Type</a></li>
71+
<li><a href="templating/render_content/render_content/">Content rendering</a></li>
72+
<li><a href="search/search/">Search</a></li>
73+
<li><a href="release_notes/ibexa_dxp_v4.4/">Releases</a></li>
74+
<li><a href="api/php_api/php_api/">API</a></li>
6175
</ul>
6276
</div>
6377
</div>
@@ -72,50 +86,88 @@
7286
<svg class="tile-icon align-middle" width="32" height="32">
7387
<use fill="var(--ibexa-jazzberry)" xlink:href="images/ez-icons.svg#settings-config"></use>
7488
</svg>
75-
Guide to Ibexa DXP
89+
Administration
7690
</h5>
7791
<div class="tile-body">
7892
<ul>
79-
<li><a href="templating/render_content/render_content/">Content rendering</a></li>
80-
<li><a href="search/search/">Search</a></li>
81-
<li><a href="release_notes/ibexa_dxp_v4.4/">Releases</a></li>
82-
<li><a href="api/php_api/php_api/">API</a></li>
93+
<li><a href="/administration/admin_panel/">Admin panel</a></li>
94+
<li><a href="/administration/configuration/configuration/">Configuration</a></li>
95+
<li><a href="/administration/back_office/back_office/">Back office</a></li>
8396
</ul>
8497
</div>
8598
</div>
8699
</div>
87100
</div>
88101
</div>
89-
</div>
90-
<div class="row mt-5">
91-
<div class="col-lg-4 mb-5 most-popular">
92-
<h5>
93-
Most popular topics
94-
<svg class="tile-icon" width="15" height="15">
95-
<use fill="var(--ibexa-jazzberry)" xlink:href="images/ez-icons.svg#bookmark-active"></use>
96-
</svg>
97-
</h5>
98-
<ul>
99-
<li><a href="content_management/images/images/">Images</a></li>
100-
<li><a href="templating/twig_function_reference/twig_function_reference/">Twig functions</a></li>
101-
<li><a href="search/criteria_reference/search_criteria_reference">Search criteria reference</a></li>
102-
<li><a href="search/solr_search_engine/">Solr search engine</a></li>
103-
</ul>
104-
</div>
105-
<div class="col-lg-8 mb-5 latest-release">
102+
</div>
103+
<div class="row mt-5">
104+
<div class="col-lg-12 mb-5 latest-release">
106105
<h5>
107-
The latest release
108-
<span class="pill">v4.4</span>
106+
Management
109107
</h5>
110108
<div class="row mt-3">
111-
<div class="col-lg-5">The <a href="release_notes/ibexa_dxp_v4.4/">latest version of Ibexa DXP is v4.4</a>. It is a Fast Track release, and it was released on February 2, 2023. You can now <a href="update_and_migration/from_4.3/update_from_4.3/">update your application to the latest version</a>.
109+
<div class="col-lg-12">
110+
Check out selected pages which can help you to manage the product:</a>
112111
</div>
113-
<div class="col-sm-7 features">
114-
<ul>
115-
<li><a href="release_notes/ibexa_dxp_v4.4/#all-new-ibexa-commerce-packages">All-new Ibexa Commerce packages</a></li>
116-
<li><a href="release_notes/ibexa_dxp_v4.4/#fastly-image-optimizer-fastly-io">Fastly Image Optimizer (Fastly IO)</a></li>
117-
<li><a href="release_notes/ibexa_dxp_v4.4/#new-welcome-page">New welcome page</a></li>
118-
<li><a href="release_notes/ibexa_dxp_v4.4/#personalization-improvements">Personalization improvements</a></li>
119-
<li><a href="release_notes/ibexa_dxp_v4.4/#ibexa-connect">Ibexa Connect</a></li>
120-
<li><a href="release_notes/ibexa_dxp_v4.4/#new-page-blocks">New page blocks</a></li>
112+
</div>
113+
</div>
114+
</div>
115+
</div>
116+
<div>
117+
<div class="row">
118+
<div class="col-lg px-2 px-lg-4">
119+
<div class="info-tile" id="tile2" style = "background: #af1164;">
120+
<svg class="tile-icon align-middle" width="10" height="10">
121+
<img src="images/content.png" />
122+
</svg>
123+
<div class = "info-tile-title">Content management</div>
124+
<div class="info-tile-body">
125+
<ul>
126+
<li><a href="content_management/content_model/" style="color: black;">Content model</a></li>
127+
<li><a href="content_management/file_management/file_management/" style="color: black;">File management</a></li>
128+
<li><a href="content_management/pages/pages/" style="color: black;">Pages</a></li>
129+
</ul>
130+
</div>
131+
</div>
132+
<div class="info-tile" id="tile2" style = "background: #af1164;">
133+
<svg class="tile-icon align-middle" width="10" height="10">
134+
<img src="images/product.png" />
135+
</svg>
136+
<div class = "info-tile-title">Product management</div>
137+
<div class="info-tile-body">
138+
<ul>
139+
<li><a href="pim/pim_configuration/" style="color: black;">PIM configuration</a></li>
140+
<li><a href="pim/catalogs/" style="color: black;">Catalogs</a></li>
141+
<li><a href="pim/prices/" style="color: black;">Prices</a></li>
142+
</ul>
143+
</div>
144+
</div>
145+
<div class="info-tile" id="tile2" style = "background: #af1164;">
146+
<svg class="tile-icon align-middle" width="10" height="10">
147+
<img src="images/customer.png" />
148+
</svg>
149+
<div class = "info-tile-title">Customer management</div>
150+
<div class="info-tile-body">
151+
<ul>
152+
<li><a href="customer_management/customer_portal/" style="color: black;">Customer portal</a></li>
153+
<li><a href="customer_management/cp_configuration/" style="color: black;">Configuration</a></li>
154+
<li><a href="customer_management/create_user_registration_form/" style="color: black;">Registration form</a></li>
155+
</ul>
156+
</div>
157+
</div>
158+
<div class="info-tile" id="tile2" style = "background: #af1164;">
159+
<svg class="tile-icon align-middle" width="10" height="10">
160+
<img src="images/user.png" />
161+
</svg>
162+
<div class = "info-tile-title">User management</div>
163+
<div class="info-tile-body">
164+
<ul>
165+
<li><a href="users/users/" style="color: black;">Users</a></li>
166+
<li><a href="users/user_management/" style="color: black;">Users management</a></li>
167+
<li><a href="users/login_and_registration/" style="color: black;">Registration</a></li>
168+
</ul>
169+
</div>
170+
</div>
171+
</div>
172+
</div>
121173
</div>

0 commit comments

Comments
 (0)