Skip to content

Commit

Permalink
Merge pull request #175 from open4good/page_table-vertical
Browse files Browse the repository at this point in the history 
integration pages vertical home, table et tpl
  • Loading branch information
@GoulvenF
GoulvenF authored Nov 24, 2023
2 parents 42f00f0 + bed584f commit f719c3a
Show file tree
Hide file tree
Showing 5 changed files with 177 additions and 196 deletions.
33 changes: 31 additions & 2 deletions ui/src/main/resources/static/css/custom.css
View file
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
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
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
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

0 comments on commit f719c3a

Please sign in to comment.