Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

integration pages vertical home, table et tpl #175

Merged
merged 1 commit into from
Nov 24, 2023
+177 −196
Merged

integration pages vertical home, table et tpl #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 31 additions & 2 deletions ui/src/main/resources/static/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
* {
/** {
font-family: 'League Spartan', sans-serif!important;
}
.fa, .far, .fas {
Expand All @@ -7,7 +7,7 @@
.fab {
font-family: "Font Awesome 5 Brands"!important;
}

*/

/***********************************************
CUSTOM
Expand Down Expand Up @@ -177,4 +177,33 @@ Xwiki css

.expandright:focus {
padding: 0 0 0 16px;
}


.bg-gray-200 {
background-color: #f1efe7!important;
}

.btn-primary {
background-color: #1e851a!important;
border-color: #1e851a!important;
}

.text-gray .h4 {
color: #1e851a!important
}
/* bandeau séparateur */
.bg-primary .text-white-50 {
color: #1e851a!important
}
/* bandeau séparateur */

/* les titre avec la font spartan */
h1[class^="h"],
h2[class^="h"],
h3[class^="h"],
h4[class^="h"],
h5[class^="h"],
h6[class^="h"] {
font-family: 'League Spartan', sans-serif!important;
}
74 changes: 32 additions & 42 deletions ui/src/main/resources/static/tpl_table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,37 @@
<div style="display:none">
<div id="template-product-search">

<div class="card shadow p-4">
<div class="row align-items-center">
<aside class="col-md-3">
<a href="{{productUrl}}">
<img src="{{imageUrl}}" alt="{{name}}">
</a>
</aside> <!-- col.// -->
<div class="col-md-6">
<div class="info-main">
<a href="{{productUrl}}" class="h5 title">{{data.attributes.referentielAttributes.BRAND}} - {{name}}</a>
<div class="d-flex my-3">
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning"></span>
<span class="badge badge-pill badge-gray ms-2">4.7</span>
<span class="small text-success ms-3"><span class="fas fa-shopping-cart me-1"></span>{{data.offersCount}} offre(s)</span>
</div>
<p>Monitor your health. Track your workouts. Get the motivation you need to achieve your fitness goals. And stay connected to the people and information you care about.</p>
</div>
</div>
<div class="col-12 col-md-3">
<div class="d-flex align-items-center">
<span class="h5 mb-0 text-danger me-2">
{{data.price.minPrice.price}} {{data.price.minPrice.currency}}
</span>
</div> <!-- info-price-detail // -->
<div class="row">
<article class="col-12 col-md-3">
<div class="card shadow">
<div class="card-header bg-gray-200 border-0 text-center">
<img src="{{imageUrl}}" alt="{{name}}">
</div>
<div class="card-body border-top border-gray-300">
<a href="{{productUrl}}" class="h5">{{data.attributes.referentielAttributes.BRAND}} - {{name}}</a>
<p class="h6 fw-light text-gray mt-2">
Monitor your health. Track your workouts. Get the motivation you need to achieve your fitness goals. And stay connected to the people and information you care about.
</p>
<div class="d-flex mt-3">
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning"></span>
<span class="badge badge-pill badge-gray ms-2">4.7</span>
<span class="small text-success ms-3">{{data.offersCount}} offre(s)</span>
</div>
</div>
<div class="card-footer bg-gray-200 border-top border-gray-300 p-4">
<div class="mb-3">
<p class="h5 my-0 text-gray me-2">
{{data.price.minPrice.price}} {{data.price.minPrice.currency}}
</p>
<span class="text-success small"><span class="fas fa-shopping-cart me-1"></span>Compensation : {{data.price.minPrice.compensation}} {{data.price.minPrice.currency}}</span>
<div class="d-grid gap-2 mt-4">
<a class="btn btn-tertiary btn-sm" href="{{productUrl}}">
Details
</a>
<a href="#" class="btn btn-tertiary btn-sm"><span class="fa fa-heart me-1"></span>
Acheter
</a>
</div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>

57 changes: 30 additions & 27 deletions ui/src/main/resources/templates/inc/vertical-table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,45 @@

<table id="tableProducts" class="table compact">
<div class="table-responsive-sm">
<table id="tableProducts" class="table">
<thead>
<tr>
<th>Nom</th>
<th>Marque</th>
<th>Eco-score</th>
<th>Prix</th>
<th>Offres</th>
<th><small>Nom</small></th>
<th><small>Marque</small></th>
<th><small>Eco-score</small></th>
<th><small>Prix</small></th>
<th><small>Offres</small></th>

<th:block th:each="filter : ${products.customFilters}">
<th th:text="${filter.key.name.get(siteLanguage)}"></th>
</th:block>


</tr>
</thead>
<tbody>
<tr th:each="p : ${products.data}" >


<td th:if="${p.model()}"><a th:text="${p.model()}" th:href="'/'+${verticalPath}+ '/'+${p.names.name}"></a></td>
<td th:unless="${p.model()}"><a th:text="${p.bestName()}" th:href="'/'+${verticalPath}+ '/'+${p.names.name}"></a></td>



<td th:text="${p.brand()}"></td>
<td></td>
<td th:text="${p.bestPrice.price}"></td>
<td th:text="${p.offersCount}"></td>
<th:block th:each="filter : ${products.customFilters}">
<td th:if="${p.attributes.aggregatedAttributes.get(filter.key.key)}" th:text="${p.attributes.aggregatedAttributes.get(filter.key.key).value }"></td>
<td th:unless="${p.attributes.aggregatedAttributes.get(filter.key.key)}"></td>

</th:block>
<tr>
<td>
<div th:each="p : ${products.data}" >
<p th:if="${p.model()}"><a th:text="${p.model()}" th:href="'/'+${verticalPath}+ '/'+${p.names.name}"></a></p>
<p th:unless="${p.model()}"><a th:text="${p.bestName()}" th:href="'/'+${verticalPath}+ '/'+${p.names.name}"></a></p>
<p th:text="${p.brand()}"></p>
<p></p>
<p th:text="${p.bestPrice.price}"></p>
<p th:text="${p.offersCount}"></p>
<th:block th:each="filter : ${products.customFilters}">
<p th:if="${p.attributes.aggregatedAttributes.get(filter.key.key)}" th:text="${p.attributes.aggregatedAttributes.get(filter.key.key).value }"></p>
<p th:unless="${p.attributes.aggregatedAttributes.get(filter.key.key)}"></p>
</th:block>


</div>
</td>
</tr>

</tbody>

</table>
</table>
</div>
24 changes: 12 additions & 12 deletions ui/src/main/resources/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,9 @@
</div>
</section>

<section class="bg-primary mt-4 text-center py-4">
<h1 class="mb-3 text-white-50">Consommons peu, consommons bien</h1>
<p class="lead text-white mb-0">Un coup de main éthique et ouvert pour amoindrir l'impact de votre shopping en ligne.</p>
<section class="bg-white mt-4 text-center py-4">
<h1 class="mb-3">Consommons peu, consommons bien</h1>
<p class="lead mb-0">Un coup de main éthique et ouvert pour amoindrir l'impact de votre shopping en ligne.</p>
</section>


Expand Down Expand Up @@ -155,9 +155,9 @@ <h2 class="h4 m-0">Data responsable</h2>

</div>

<section class="bg-black text-center py-4">
<h1 class="mb-3 text-white-50">Les chiffres clés</h1>
<p class="lead text-white mb-0">Avec animation, c'est plus funky</p>
<section class="bg-white mt-4 text-center py-4">
<h1 class="mb-3">Les chiffres clés</h1>
<p class="lead mb-0">Avec animation, c'est plus funky</p>
</section>

<section class="container text-center py-4">
Expand Down Expand Up @@ -212,9 +212,9 @@ <h1 class="mb-3 text-white-50">Les chiffres clés</h1>
</div>
</section>

<section class="bg-black text-center py-4">
<h1 class="mb-3 text-white-50">Nos catégories évaluées</h1>
<p class="lead text-white mb-0">L'assurance de bien choisir</p>
<section class="bg-white mt-4 text-center py-4">
<h1 class="mb-3">Nos catégories évaluées</h1>
<p class="lead mb-0">L'assurance de bien choisir</p>
</section>

<section class="container">
Expand Down Expand Up @@ -243,9 +243,9 @@ <h2 class="h5">
</section>


<section class="bg-black mt-4 text-center py-4">
<h1 class="mb-3 text-white-50">Notre philosophie : le bien commun</h1>
<p class="lead text-white mb-0">Découvrez nos valeurs et nos atouts</p>
<section class="bg-white mt-4 text-center py-4">
<h1 class="mb-3">Notre philosophie : le bien commun</h1>
<p class="lead mb-0">Découvrez nos valeurs et nos atouts</p>
</section>


Expand Down
Loading
Loading