Progessbar brick

Create progressbar brick please. You can follow Accordion brick from quiqqer/bricks (setting for entries). Here you can find an example:

http://demos.themetrust.com/weston/about-modern/

Settings:

1. ckeditor input for text
2. checkbox: show text on right (if not checked show text on the left)
3. entries (like accordion brick)
4. maxWidth for progressbar (in pixel).
   • If there is no text (1) show no container for content next to the progressbar.
   • If there is no text (1) center progressbar but only when maxWidth is set. Otherwise progessbar container has 100% width.

Edit: Neue Punkte:

• Benutze CSS Variablen
  • Für Balkenfarbe sowas in der Richtung: background-color: var(--qui-color-primary, #333);
  • Für Padding zwischen Zusatztext und Balken: var(--qui-spacing, 1rem). Wenn du größeren Abstand haben möchtest, dann nimm --qui-spacing-xl. In Template Presentation entspricht das dem Wert 2rem.
• Zusattext Position: top, center, bottom Screenshot
• Korrigiere bitte den Tippfehler ;) entries ist korrekt image. Denk bitte daran, nicht nur in locale.xml zu ändern, sondern auch da, wo die Sprachvariable verwendet wird!

Info

CSS Variablen, die im Template unterstützt sind, findest du in der Regel in Template Ordner bin/css/variables.css. Im Moment hat Template Presentation die beste Unterstützung für CSS Variables, aber weitere Templates werden auch angepasst. In Chrome DevTools sind die Variablen auch unten angezeigt:

Beim Mouse Over zeigt Chrome, welcher Wert aktuell genommen wird: