New brick: Icon Box

Create a new brick / control: Icon Box. Please consider QUI\Bricks\Controls\BoxContentAdvanced. This control is a good starting point. This has almost the same functionality, but is a bit crowded. The new one is to limit and specialize in icons. This means that images should also be selected (e.g. SVG icons). So it is not only about FontAwesome icons.

This control should provide following settings:

• Center content
• Template (select) - for now only one template should be available
• Entries per line (2, 3, 4, 5, 6). More ist not necessary.
• Icon size. I'm not really sure, how to treat this option. We have both icons and images. Maybe separate setting for this two?
  • FontAwesome icon size: (select) small / medium / large
  • Image icon size: (input type number). This will set width and height html attribute.
• NEW! Content position --> select box, possible options:
  • default (above content, works like any other brick)
  • left: image example
  • right: example here: https://www.ecoyn.de/Partner

Entry settings:

• Icon / Image
• Title
• entryContent (do not name it content).

Ideas:

Source: https://cdn.dribbble.com/users/1535380/screenshots/4740639/attachments/1068193/mappy_app_full_landing_by_uiturtle.png

---

Source: https://paymentforstripe.com/

---

Source: https://andreasschrade.com/

---

Source: https://www.coveo.com/en/integrations#t=integrations-search&sort=%40sortorder%20ascending&numberOfResults=15

assigned to @Campii

mentioned in commit ce9df5ff

mentioned in commit b90956e6

changed the description

I have updated the text in the first post. It's about a new option (Content position), but I'm not sure yet if that makes sense

mentioned in commit d02fae94

mentioned in commit 87e8a621

mentioned in commit f4dba334

mentioned in commit 945a1922

marked the checklist item Image icon size: (input type number). This will set width and height html attribute. as completed

marked the checklist item FontAwesome icon size: (select) small / medium / large as completed

marked the checklist item Icon size. I'm not really sure, how to treat this option. We have both icons and images. Maybe separate setting for this two? as completed

marked the checklist item Entries per line (2, 3, 4, 5, 6). More ist not necessary. as completed

marked the checklist item Template (select) - for now only one template should be available as completed

marked the checklist item Center content as completed

marked the checklist item entryContent (do not name it content). as completed

marked the checklist item Title as completed

marked the checklist item Icon / Image as completed

mentioned in commit 6b5a72a0

mentioned in commit 40d1966b

marked the checklist item NEW! Content position --> select box, possible options: as completed

Ich bin mit Brick fertig, sehen Sie es sich in Ruhe an

assigned to @michael.daniel and unassigned @Campii

mentioned in commit 0540b746

Ich habe getestet und folgendes ist mit aufgefallen:

• Tippfehler ;) Es heißt "entries" Screenshot. Bitte direkt in JavaScript korrigieren!
• Text-Inhalt Position. Klar, diese Option hat nur dann Auswirkung, wenn die Option "links" oder "rechts" eingeschaltet ist. So ist das im Moment, ich will aber z.B. den Text schnell per Einstellung zentrieren: so könnte das funktionieren

assigned to @dominik and unassigned @michael.daniel

mentioned in commit 76954683

mentioned in commit f300341a

Ich habe die "entries" korrigiert und die Option textPosition hinzugefügt

assigned to @michael.daniel and unassigned @dominik

Getestet und die Übersetzungen verbessert. Wir haben noch ein Problem: es geht um Abstand (padding):

Die Boxen sind nicht linksbündig. Sie "kleben" nicht an der blauen Linie:

Klar, wenn man das genauer betrachtet, dann die Boxen kleben doch:

Aber wenn man einfach die Seite anschaut, dann weißt man das nicht und man denkt "irgendwie ist hier falsch". De Grund dafür ist, dass die Boxen 2rem Padding haben (rot markiert):

Das ist an sich in Ordnung, ich verstehe auch warum du das so gemacht hast. Aber irgendwie ist das nicht die beste Lösung. Wir müssen uns was anderes einfallen lassen. Eine Möglichkeit ist auf den Parent (was display: flex hat) zusätzlich gap: 2rem einzufügen. Aber Browser-Support ist leider noch nicht optimal. Daher würde ich lieber darauf verzichten und anders "tricksen". Bei Gelegenheit google mal nach passender Lösung. Vielleicht findest du coole Idee, was in allen Browsern problemlos funktioniert.

Ps. Mobile passt das dann gar nicht mehr ;)

assigned to @dominik and unassigned @michael.daniel

mentioned in commit 76974369

mentioned in commit 40140333

Ich habe den Code korrigiert, so dass es dieses Problem nicht mehr geben sollte Sieh dir das in Ruhe an

assigned to @michael.daniel and unassigned @dominik

mentioned in commit ecbfdcea

Schau bitte das nochmal an, was per Chat besprochen wurde

assigned to @dominik and unassigned @michael.daniel

mentioned in commit 2422ada1

mentioned in commit b5219c6f

mentioned in commit dbb13630

assigned to @michael.daniel and unassigned @dominik

Prüfen Sie das bitte später