feat: Icon bubbles als Flowblocks hinzugefügt.

This commit is contained in:
muli 2023-06-24 18:36:13 +02:00
parent aa2619564d
commit 07b32b39af
6 changed files with 148 additions and 61 deletions

View File

@ -36,6 +36,67 @@ card_image: images/icon_connected_servers.svg
card_text: After the project, we do not leave you out in the cold with the result, but offer you services for the operation of the completed project and the administration of the infrastructure beyond the project.
----
image_credits: servers by IYIKON from <a href="https://thenounproject.com/browse/icons/term/servers/" target="_blank" title="servers Icons">Noun Project</a>
----
#### flow_icon_bubbles ####
icon_path: /images/logos/Python_logo_and_wordmark.svg
----
icon_alt: Logo of the Python programming language
#### flow_icon_bubbles ####
icon_path: /images/logos/ISO_C++_Logo.svg
----
icon_alt: Logo of the C++ programming language
#### flow_icon_bubbles ####
icon_path: /images/logos/Tux.svg
----
icon_alt: Tux the penguin mascott of Linux
#### flow_icon_bubbles ####
icon_path: /images/logos/Unofficial_JavaScript_logo_2.svg
----
icon_alt: Logo of the JavaScript programming language
#### flow_icon_bubbles ####
icon_path: /images/logos/PHP-logo.svg
----
icon_alt: Logo of the PHP programming language
#### flow_icon_bubbles ####
icon_path: /images/logos/C_Programming_Language.svg
----
icon_alt: Logo of the C programming language
#### flow_icon_bubbles ####
icon_path: /images/logos/Ansible_logo.svg
----
icon_alt: Logo of the Ansible project
#### flow_icon_bubbles ####
icon_path: /images/logos/Postgresql_elephant.svg
----
icon_alt: Logo of the Postgres database
#### flow_icon_bubbles ####
icon_path: /images/logos/Java-Logo.svg
----
icon_alt: Logo of the Java programming language
#### flow_icon_bubbles ####
icon_path: /images/logos/Rust_programming_language_black_logo.svg
----
icon_alt: Logo of the Rust programming language
#### flow_icon_bubbles ####
icon_path: /images/logos/CSS3_logo_and_wordmark.svg
----
icon_alt: Logo of CSS3
#### flow_icon_bubbles ####
icon_path: /images/logos/Debian-OpenLogo.svg
----
icon_alt: Logo of the Debian operating system
#### flow_icon_bubbles ####
icon_path: /images/logos/MySQL_textlogo.svg
----
icon_alt: Logo of the MySQL database
#### flow_icon_bubbles ####
icon_path: /images/logos/Vue.js_Logo_2.svg
----
icon_alt: Logo of the Vue.js framework
#### flow_icon_bubbles ####
icon_path: /images/logos/LaTeX_logo.svg
----
icon_alt: Logo of the LaTeX typesetting language
---
kompetenzen_body:

View File

@ -36,6 +36,67 @@ card_image: images/icon_connected_servers.svg
card_text: Nach dem Projekt lassen wir Sie nicht mit dem Ergebnis im Regen stehen, sondern bieten Ihnen auch über das Projekt hinaus Services für den Betrieb des abgeschlossenen Projekts und die Administration der Infrastruktur.
----
image_credits: servers by IYIKON from <a href="https://thenounproject.com/browse/icons/term/servers/" target="_blank" title="servers Icons">Noun Project</a>
----
#### flow_icon_bubbles ####
icon_path: /images/logos/Python_logo_and_wordmark.svg
----
icon_alt: Logo of the Python programming language
#### flow_icon_bubbles ####
icon_path: /images/logos/ISO_C++_Logo.svg
----
icon_alt: Logo of the C++ programming language
#### flow_icon_bubbles ####
icon_path: /images/logos/Tux.svg
----
icon_alt: Tux the penguin mascott of Linux
#### flow_icon_bubbles ####
icon_path: /images/logos/Unofficial_JavaScript_logo_2.svg
----
icon_alt: Logo of the JavaScript programming language
#### flow_icon_bubbles ####
icon_path: /images/logos/PHP-logo.svg
----
icon_alt: Logo of the PHP programming language
#### flow_icon_bubbles ####
icon_path: /images/logos/C_Programming_Language.svg
----
icon_alt: Logo of the C programming language
#### flow_icon_bubbles ####
icon_path: /images/logos/Ansible_logo.svg
----
icon_alt: Logo of the Ansible project
#### flow_icon_bubbles ####
icon_path: /images/logos/Postgresql_elephant.svg
----
icon_alt: Logo of the Postgres database
#### flow_icon_bubbles ####
icon_path: /images/logos/Java-Logo.svg
----
icon_alt: Logo of the Java programming language
#### flow_icon_bubbles ####
icon_path: /images/logos/Rust_programming_language_black_logo.svg
----
icon_alt: Logo of the Rust programming language
#### flow_icon_bubbles ####
icon_path: /images/logos/CSS3_logo_and_wordmark.svg
----
icon_alt: Logo of CSS3
#### flow_icon_bubbles ####
icon_path: /images/logos/Debian-OpenLogo.svg
----
icon_alt: Logo of the Debian operating system
#### flow_icon_bubbles ####
icon_path: /images/logos/MySQL_textlogo.svg
----
icon_alt: Logo of the MySQL database
#### flow_icon_bubbles ####
icon_path: /images/logos/Vue.js_Logo_2.svg
----
icon_alt: Logo of the Vue.js framework
#### flow_icon_bubbles ####
icon_path: /images/logos/LaTeX_logo.svg
----
icon_alt: Logo of the LaTeX typesetting language
---
kompetenzen_body:

View File

@ -0,0 +1,14 @@
[block]
name = Icon Bubbles
button_label = Add Icon Bubble
label = {{ this.card_title }}
[fields.icon_path]
label = Icon Pfad
description = Iconpfad z. B. /images/logos/Ansible_logo.svg
type = string
[fields.icon_alt]
label = Icon-Alt-Text
description = Icon Alt Text z. B. Logo of the Ansible project
type = string

View File

@ -21,7 +21,7 @@ type = string
[fields.section]
label = Sections
type = flow
flow_blocks = flow_services_cards
flow_blocks = flow_services_cards, flow_icon_bubbles
[fields.kompetenzen_heading]
label = Kompetenzen Überschrift

View File

@ -23,7 +23,9 @@
<h1>{{ this.title }}</h1>
<div class="services_card_box">
{% for card in this.section.blocks %}
{{ render_services_card(card, loop.index) }}
{% if card._flowblock == "flow_services_cards" %}
{{ render_services_card(card, loop.index) }}
{% endif %}
{% endfor %}
</div>
</div>
@ -38,66 +40,12 @@
<section class="content">
<div class="content__box">
<div class="bubble_grid">
{% for icon_bubble in this.section.blocks %}
{% if icon_bubble._flowblock == "flow_icon_bubbles" %}
{{ icon_bubble }}
{% endif %}
<div class="bubble_grid__bubble">
<img src="/images/logos/Python_logo_and_wordmark.svg" alt="Logo of the Python programming language">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/ISO_C++_Logo.svg'|asseturl }}" alt="Logo of the C++ programming language">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/Tux.svg'|asseturl }}" alt="Tux the penguin mascott of Linux">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/Unofficial_JavaScript_logo_2.svg'|asseturl }}" alt="Logo of the JavaScript programming language">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/PHP-logo.svg'|asseturl }}" alt="Logo of the PHP programming language">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/C_Programming_Language.svg'|asseturl }}" alt="Logo of the C programming language">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/Ansible_logo.svg'|asseturl }}" alt="Logo of the Ansible project">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/Postgresql_elephant.svg'|asseturl }}" alt="Logo of the Postgres database">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/Java-Logo.svg'|asseturl }}" alt="Logo of the Java programming language">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/Rust_programming_language_black_logo.svg'|asseturl }}" alt="Logo of the Rust programming language">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/CSS3_logo_and_wordmark.svg'|asseturl }}" alt="Logo of CSS3">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/Debian-OpenLogo.svg'|asseturl }}" alt="Logo of the Debian operating system">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/MySQL_textlogo.svg'|asseturl }}" alt="Logo of the MySQL database">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/Vue.js_Logo_2.svg'|asseturl }}" alt="Logo of the Vue.js framework">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/LaTeX_logo.svg'|asseturl }}" alt="Logo of the LaTeX typesetting language">
</div>
{% endfor %}
<div class="bubble_grid__card">
{{ this.kompetenzen_body }}

View File

@ -0,0 +1,3 @@
<div class="bubble_grid__bubble">
<img src="{{ this.icon_path }}" alt="{{ this.icon_alt }}">
</div>