From 401403334e13084ef5c2997fc50ef37148a234f2 Mon Sep 17 00:00:00 2001
From: Campii <dominik.chrzanowski183@gmail.com>
Date: Thu, 29 Sep 2022 15:14:00 +0200
Subject: [PATCH] refactor: Code refactor [IconBox]
quiqqer/presentation-bricks#6
---
.../PresentationBricks/Controls/IconBox.css | 19 +++++++++++++------
.../Controls/IconBox.default.html | 3 ++-
2 files changed, 15 insertions(+), 7 deletions(-)
diff --git a/src/QUI/PresentationBricks/Controls/IconBox.css b/src/QUI/PresentationBricks/Controls/IconBox.css
index b5e6863..9003d99 100644
--- a/src/QUI/PresentationBricks/Controls/IconBox.css
+++ b/src/QUI/PresentationBricks/Controls/IconBox.css
@@ -36,14 +36,13 @@
}
.iconBox-entries {
- display: flex;
- flex-wrap: wrap;
- flex-basis: calc(100% - var(--qui-iconBox-contentWidth));
+ display: grid;
+ grid-template-columns: repeat(var(--qui-iconBox-entryPerLine), auto);
+ gap: 2rem
}
.iconBox-entry {
flex-basis: var(--qui-iconBox-entryWidth);
- padding: 2rem;
}
.iconBox-entry-title {
@@ -91,12 +90,20 @@
flex-direction: column;
}
- .iconBox-contentPosition__left > .iconBox-content,
- .iconBox-contentPosition__right > .iconBox-content-wrapper{
+ .iconBox-contentPosition__left > .iconBox-content-wrapper {
padding-right: 0;
+
+ }
+ .iconBox-contentPosition__right > .iconBox-content-wrapper {
+ padding-left: 0;
}
.iconBox-entry {
flex-basis: 100%;
}
+
+ .iconBox-entries {
+ grid-template-columns: auto;
+ }
+
}
\ No newline at end of file
diff --git a/src/QUI/PresentationBricks/Controls/IconBox.default.html b/src/QUI/PresentationBricks/Controls/IconBox.default.html
index df73b2a..db06393 100644
--- a/src/QUI/PresentationBricks/Controls/IconBox.default.html
+++ b/src/QUI/PresentationBricks/Controls/IconBox.default.html
@@ -1,6 +1,7 @@
-<div class="iconBox-wrapper {if $contentPosition} iconBox-contentPosition__{$contentPosition} {/if}"
+<div class="iconBox-wrapper {if $contentPosition} iconBox-contentPosition__{$contentPosition}{/if}"
style="
--qui-iconBox-entryWidth: calc(100% / {$entriesPerLine});
+ --qui-iconBox-entryPerLine: {$entriesPerLine};
--qui-iconBox-imgIconSize: {$imgIconSize}px;
--qui-iconBox-contentWidth: {$contentWidth}%;
">
--
GitLab