From 00b9933cc809eeebd96d778ad691b84a4b73d6a4 Mon Sep 17 00:00:00 2001
From: Campii <dominik.chrzanowski183@gmail.com>
Date: Wed, 8 Jun 2022 12:36:13 +0200
Subject: [PATCH] refactor: code refactor [CustomerReviewsSlider]
quiqqer/package-bricks#134
---
.../Slider/CustomerReviewsSlider.default.css | 35 +++++++++++++++----
.../Slider/CustomerReviewsSlider.default.html | 20 ++++++-----
2 files changed, 40 insertions(+), 15 deletions(-)
diff --git a/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.css b/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.css
index 56f8419..a5d3791 100644
--- a/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.css
+++ b/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.css
@@ -9,14 +9,23 @@
}
.customerReviewsSlider-arrows .customerReviewsSlider-arrow {
- min-width: 40px;
+ width: 40px;
height: 40px;
- padding: 0;
border-radius: 50%;
+ border: 2px solid #aaa;
+ color: #aaa;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: all .2s ease-in-out;
+}
+
+.customerReviewsSlider-arrows .customerReviewsSlider-arrow:hover {
+ border-color: #333;
+ color: #333;
}
.customerReviewsSlider-review {
- font-weight: 700;
font-size: 1.125rem;
}
@@ -32,7 +41,9 @@
}
.customerReviewsSlider-client-img img {
- width: 100%;
+ aspect-ratio: 1 / 1;
+ height: auto;
+ object-fit: cover;
border-radius: 50%;
}
@@ -47,18 +58,30 @@
font-size: 0.975rem;
}
+.customerReviewsSlider-client-name {
+ font-weight: 700;
+}
+
.customerReviewsSlider-dots {
position: absolute;
left: 50%;
bottom: 0;
+ display: flex;
}
.customerReviewsSlider-dot {
- min-width: 10px;
+ width: 10px;
height: 10px;
- padding: 0;
+ border: 2px solid rgba(0,0,0,0);
border-radius: 50%;
margin: 0 5px;
+ display: block;
+ background-color: #aaa;
+ transition: all .2s ease-in-out;
+}
+
+.customerReviewsSlider-dot.glide__bullet--active {
+ border-color: #aaa;
}
.customerReviewsSlider-dot:hover {
diff --git a/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.html b/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.html
index 716d915..d8bb4d8 100644
--- a/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.html
+++ b/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.html
@@ -15,8 +15,9 @@
<div class="glide customerReviewsSlider-slider-wrapper">
<div class="customerReviewsSlider-arrows" data-glide-el="controls">
- <button class="customerReviewsSlider-arrow customerReviewsSlider-arrow-left button" data-glide-dir="<">
- <span class="arrow fa fa-arrow-left"></span></button>
+ <span class="customerReviewsSlider-arrow customerReviewsSlider-arrow-left" data-glide-dir="<">
+ <span class="arrow fa fa-arrow-left"></span>
+ </span>
</div>
<div data-glide-el="track" class="glide__track customerReviewsSlider-track">
<ul class="glide__slides customerReviewsSlider-slider">
@@ -41,18 +42,18 @@
<div class="customerReviewsSlider-client-content">
{if $entry['customerName']}
- <p class="customerReviewsSlider-client-name">{$entry['customerName']}</p>
+ <span class="customerReviewsSlider-client-name">{$entry['customerName']}</span>
{/if}
{if $entry['addition']}
- <p class="customerReviewsSlider-client-addition">{$entry['addition']}</p>
+ <span class="customerReviewsSlider-client-addition">{$entry['addition']}</span>
{/if}
{if $entry['url']}
<a href="{$entry['url']}" class="customerReviewsSlider-url">
{if $entry['urlTitle']}
- {$entry['urlTitle']}
+ {$entry['urlTitle']}
{else}
- {$entry['url']}
+ {$entry['url']}
{/if}
</a>
{/if}
@@ -68,14 +69,15 @@
</div>
<div class="customerReviewsSlider-arrows" data-glide-el="controls">
- <button class="customerReviewsSlider-arrow customerReviewsSlider-arrow-right button" data-glide-dir=">">
- <span class="arrow fa fa-arrow-right"></span></button>
+ <span class="customerReviewsSlider-arrow customerReviewsSlider-arrow-right" data-glide-dir=">">
+ <span class="arrow fa fa-arrow-right"></span>
+ </span>
</div>
<div class="customerReviewsSlider-dots" data-glide-el="controls[nav]">
{assign var=counter value=0}
{foreach from=$entries item=entry}
- <button class="customerReviewsSlider-dot" data-glide-dir="={$counter}"></button>
+ <span class="customerReviewsSlider-dot" data-glide-dir="={$counter}"></span>
{assign var=counter value=$counter+1}
{/foreach}
</div>
--
GitLab