Browse code
Restructure reader template
Benjamin Roth authored on29/02/2024 10:30:58 Showing1 changed files
| ... | ... |
@@ -1,18 +1,35 @@ |
| 1 | 1 |
{% extends '@Contao/frontend_module/_base.html.twig' %}
|
| 2 |
+{% use "@Contao/component/_list.html.twig" %}
|
|
| 3 |
+{% use "@Contao/component/_figure.html.twig" %}
|
|
| 2 | 4 |
|
| 3 | 5 |
{%- macro listEntry(label, value, options = {}) -%}
|
| 4 | 6 |
{%- set class = options.class|default({}) -%}
|
| 5 | 7 |
{%- set prepend = options.prepend|default({}) %}
|
| 6 | 8 |
{% set append = options.append|default({}) -%}
|
| 9 |
+ {% set strong = options.strong is defined and options.strong ? true : false %}
|
|
| 7 | 10 |
{% apply spaceless %}
|
| 8 | 11 |
{% if label and value %}
|
| 9 | 12 |
<li{% if class %} class="{{- class -}}"{% endif %}>
|
| 10 |
- <span class="label">{{- label -}}</span>
|
|
| 13 |
+ <span class="label{{ strong ? ' strong' : '' }}">{{- label -}}</span>
|
|
| 11 | 14 |
<span class="value">{% if prepend %}{{ prepend }}{% endif %}{{- value -}}{% if append %}{{ append }}{% endif %}</span>
|
| 12 | 15 |
</li> |
| 13 | 16 |
{% endif %}
|
| 14 | 17 |
{% endapply %}
|
| 15 | 18 |
{%- endmacro -%}
|
| 19 |
+{%- macro backgroundWrapper_open(classes = '') -%}
|
|
| 20 |
+ <div class="{{ classes ? classes ~ ' ' : '' }}content-background-wrapper">
|
|
| 21 |
+ <div class="content-background-wrapper-bg"> |
|
| 22 |
+ </div> |
|
| 23 |
+ <div class="content-background-wrapper-fg"> |
|
| 24 |
+ <div class="content-grid"> |
|
| 25 |
+ <div class="fragments"> |
|
| 26 |
+{%- endmacro -%}
|
|
| 27 |
+{%- macro backgroundWrapper_close() -%}
|
|
| 28 |
+ </div> |
|
| 29 |
+ </div> |
|
| 30 |
+ </div> |
|
| 31 |
+ </div> |
|
| 32 |
+{%- endmacro -%}
|
|
| 16 | 33 |
|
| 17 | 34 |
|
| 18 | 35 |
{% block content %}
|
| ... | ... |
@@ -20,158 +37,76 @@ |
| 20 | 37 |
|
| 21 | 38 |
<div class="re_asset_expose"> |
| 22 | 39 |
|
| 23 |
- <div class="header clearfix"> |
|
| 24 |
- <p class="assetNo">{{ 'tl_vr_real_estate_assets.assetNo.0'|trans({}, 'contao_default') }}:
|
|
| 25 |
- <span class="value">{{ item.assetNo }}</span><span class="hint">(Bei Bewerbung bitte angeben)</span></p>
|
|
| 26 |
- <h1 class="mb-4">{{- item.title -}}{% if item.city %} in {{- item.city -}}{% endif %}</h1>
|
|
| 27 |
- {% if item.address %}
|
|
| 28 |
- <p class="subhead">{{ item.address }}{% if item.floor %}, {{ item.floor }}{% endif %}</p>
|
|
| 29 |
- {% endif %}
|
|
| 40 |
+ {{ _self.backgroundWrapper_open('-padding-medium') }}
|
|
| 41 |
+ <p class="overviewLink"><a class="btn btn-outline-primary" href="{{ item.listUrl }}">Zurück zur Übersicht</a></p>
|
|
| 42 |
+ <h1>{{ item.title }}{% if item.city %} in {{ item.city }}{% endif %}</h1>
|
|
| 43 |
+ {{ _self.backgroundWrapper_close }}
|
|
| 44 |
+ |
|
| 45 |
+ {{ _self.backgroundWrapper_open('-alt-color-1 -width-small -padding-medium') }}
|
|
| 46 |
+ <h3>Wohnungsinformationen</h3> |
|
| 47 |
+ <div class="expose-facts"> |
|
| 48 |
+ <ul class="expose-facts-costs"> |
|
| 49 |
+ {% if item.coldRent > 0 %}{{ _self.listEntry('tl_vr_real_estate_assets.coldRent.0'|trans({}, 'contao_default'),item.coldRent|number_format(2, ',', ''),{ append: ' €'}) }}{% endif %}
|
|
| 50 |
+ {% if item.advanceOperatingCosts > 0 %}{{ _self.listEntry('tl_vr_real_estate_assets.advanceOperatingCosts.0'|trans({}, 'contao_default'),item.advanceOperatingCosts|number_format(2, ',', ''),{ append: ' €'}) }}{% endif %}
|
|
| 51 |
+ {% if item.rent > 0 %}{{ _self.listEntry('tl_vr_real_estate_assets.rent.0'|trans({}, 'contao_default'),item.rent|number_format(2, ',', ''),{ append: ' €'}) }}{% endif %}
|
|
| 52 |
+ {% set total = item.coldRent + item.rent + item.advanceOperatingCosts %}
|
|
| 53 |
+ {{ _self.listEntry('tl_vr_real_estate_assets.total.0'|trans({}, 'contao_default'),total|number_format(2, ',', ''),{ strong: true, append: ' €'}) }}
|
|
| 54 |
+ </ul> |
|
| 55 |
+ <ul class="expose-facts-features"> |
|
| 56 |
+ {% if item.livingSpace > 0 %}{{ _self.listEntry('tl_vr_real_estate_assets.livingSpace.0'|trans({}, 'contao_default'),item.livingSpace|number_format(2, ',', ''),{ append: ' m²'}) }}{% endif %}
|
|
| 57 |
+ {% if item.numberOfRooms > 0 %}{{ _self.listEntry('tl_vr_real_estate_assets.numberOfRooms.0'|trans({}, 'contao_default'),item.numberOfRooms) }}{% endif %}
|
|
| 58 |
+ {% if item.floor > 0 %}{{ _self.listEntry('tl_vr_real_estate_assets.floor.0'|trans({}, 'contao_default'),item.floor) }}{% endif %}
|
|
| 59 |
+ {% for feature in item.features %}
|
|
| 60 |
+ {% set featureTrans = 'REF.re_features.' ~ feature %}
|
|
| 61 |
+ {{ _self.listEntry(featureTrans|trans({}, 'contao_default'),'Ja') }}
|
|
| 62 |
+ {% endfor %}
|
|
| 63 |
+ </ul> |
|
| 30 | 64 |
</div> |
| 65 |
+ {{ _self.backgroundWrapper_close }}
|
|
| 31 | 66 |
|
| 32 |
- <div class="row mb-5 clearfix"> |
|
| 33 |
- <div class="col-md-6"> |
|
| 34 |
- {% if item.galleryFigures %}
|
|
| 35 |
- <div class="swiper h-100"> |
|
| 36 |
- <!-- Additional required wrapper --> |
|
| 37 |
- <div class="swiper-wrapper"> |
|
| 38 |
- <!-- Slides --> |
|
| 39 |
- {% for image in item.galleryFigures %}
|
|
| 40 |
- <div class="swiper-slide"> |
|
| 41 |
- {{- studio.figure(image, { attr: { class: ('image_container swiper-lazy') }}) -}}
|
|
| 42 |
- </div> |
|
| 43 |
- {% endfor %}
|
|
| 44 |
- </div> |
|
| 45 |
- |
|
| 46 |
- |
|
| 47 |
- {% if item.galleryFigures|length > 1 %}
|
|
| 48 |
- <div class="swiper-pagination"></div> |
|
| 49 |
- <div class="swiper-button-prev"></div> |
|
| 50 |
- <div class="swiper-button-next"></div> |
|
| 51 |
- {% endif %}
|
|
| 52 |
- </div> |
|
| 67 |
+ {{ _self.backgroundWrapper_open('-padding-medium') }}
|
|
| 68 |
+ <div class="expose-description"> |
|
| 69 |
+ <div class="re_asset_card"> |
|
| 70 |
+ {% if item.galleryFigures[0] %}
|
|
| 71 |
+ {{- studio.figure(item.galleryFigures[0], { attr: { class: ('image_container media') }}) -}}
|
|
| 53 | 72 |
{% endif %}
|
| 54 |
- </div> |
|
| 55 |
- <div class="col-md-6"> |
|
| 56 |
- {% if item.floorPlansFigures %}
|
|
| 57 |
- <div class="swiper h-100"> |
|
| 58 |
- <!-- Additional required wrapper --> |
|
| 59 |
- <div class="swiper-wrapper"> |
|
| 60 |
- <!-- Slides --> |
|
| 61 |
- {% for image in item.floorPlansFigures %}
|
|
| 62 |
- <div class="swiper-slide"> |
|
| 63 |
- {{- studio.figure(image, { attr: { class: ('image_container swiper-lazy') }}) -}}
|
|
| 64 |
- </div> |
|
| 65 |
- {% endfor %}
|
|
| 66 |
- </div> |
|
| 67 | 73 |
|
| 68 |
- |
|
| 69 |
- {% if item.floorPlansFigures|length > 1 %}
|
|
| 70 |
- <div class="swiper-pagination"></div> |
|
| 71 |
- <div class="swiper-button-prev"></div> |
|
| 72 |
- <div class="swiper-button-next"></div> |
|
| 73 |
- {% endif %}
|
|
| 74 |
- </div> |
|
| 75 |
- {% endif %}
|
|
| 74 |
+ <div class="details"> |
|
| 75 |
+ <ul> |
|
| 76 |
+ <li> |
|
| 77 |
+ <span class="label">Adresse:</span> |
|
| 78 |
+ {% if item.address is not empty %}{{ item.address }}<br>{% endif %}
|
|
| 79 |
+ {% if item.postal is not empty and item.city is not empty %}{{ item.postal }} {{ item.city }}<br>{% endif %}
|
|
| 80 |
+ </li> |
|
| 81 |
+ </ul> |
|
| 82 |
+ </div> |
|
| 76 | 83 |
</div> |
| 84 |
+ {% if item.description %}
|
|
| 85 |
+ <div class="description">{{ item.description|raw }}</div>
|
|
| 86 |
+ {% endif %}
|
|
| 77 | 87 |
</div> |
| 78 | 88 |
|
| 79 |
- <div class="facts mb-2"> |
|
| 80 |
- |
|
| 81 |
- <div class="row"> |
|
| 82 |
- <div class="col-md-6"> |
|
| 83 |
- <h3 class="mb-3">{{ 'MSC.re_properties'|trans({}, 'contao_default') }}</h3>
|
|
| 84 |
- <div class="p-4 text-primary content--box mb-5"> |
|
| 85 |
- {% apply spaceless %}
|
|
| 86 |
- <ul class="labelList mb-3"> |
|
| 87 |
- {% if item.assetNo %}
|
|
| 88 |
- {{ _self.listEntry('tl_vr_real_estate_assets.assetNo.0'|trans({}, 'contao_default'),item.assetNo) }}
|
|
| 89 |
- {% endif %}
|
|
| 90 |
- {% if item.livingSpace %}
|
|
| 91 |
- {{ _self.listEntry('tl_vr_real_estate_assets.livingSpace.0'|trans({}, 'contao_default'),item.livingSpace|number_format(2, ',', ''),{ append: ' m²'}) }}
|
|
| 92 |
- {% endif %}
|
|
| 93 |
- {{ _self.listEntry('tl_vr_real_estate_assets.numberOfRooms.0'|trans({}, 'contao_default'),item.numberOfRooms) }}
|
|
| 94 |
- {% if item.condition %}
|
|
| 95 |
- {% set condition = 'REF.re_condition.' ~ item.condition %}
|
|
| 96 |
- {{ _self.listEntry('tl_vr_real_estate_assets.condition.0'|trans({}, 'contao_default'),condition|trans({}, 'contao_default')) }}
|
|
| 97 |
- {% endif %}
|
|
| 98 |
- {{ _self.listEntry('tl_vr_real_estate_assets.constructionYear.0'|trans({}, 'contao_default'),item.constructionYear) }}
|
|
| 99 |
- </ul> |
|
| 100 |
- |
|
| 101 |
- <ul class="labelList mb-5"> |
|
| 102 |
- {% if item.heatingType %}
|
|
| 103 |
- {% set heating = 'REF.re_heatingType.' ~ item.heatingType %}
|
|
| 104 |
- {{ _self.listEntry('tl_vr_real_estate_assets.heatingType.0'|trans({}, 'contao_default'),heating|trans({}, 'contao_default')) }}
|
|
| 105 |
- {% endif %}
|
|
| 106 |
- {% if item.energyConsumption and item.energyPassType %}
|
|
| 107 |
- {% set passType = 'REF.re_energyPassType.' ~ item.energyPassType %}
|
|
| 108 |
- {{ _self.listEntry('MSC.re_energyConsumption'|trans({}, 'contao_default') ~ ' ' ~ passType|trans({}, 'contao_default'),item.energyConsumption,{ append: ' kWh/(m²a)'}) }}
|
|
| 109 |
- {% endif %}
|
|
| 110 |
- </ul> |
|
| 111 |
- |
|
| 112 |
- <h5>{{ 'MSC.re_rent'|trans({}, 'contao_default') }}</h5>
|
|
| 113 |
- <ul class="labelList mb-3"> |
|
| 114 |
- {% if item.coldRent > 0 %}
|
|
| 115 |
- {{ _self.listEntry('tl_vr_real_estate_assets.coldRent.0'|trans({}, 'contao_default'),item.coldRent|number_format(2, ',', ''),{ append: ' €'}) }}
|
|
| 116 |
- {% else %}
|
|
| 117 |
- {{ _self.listEntry('tl_vr_real_estate_assets.rent.0'|trans({}, 'contao_default'),item.rent|number_format(2, ',', ''),{ append: ' €'}) }}
|
|
| 118 |
- {% endif %}
|
|
| 119 |
- {% if item.advanceOperatingCosts > 0 %}
|
|
| 120 |
- {{ _self.listEntry('tl_vr_real_estate_assets.advanceOperatingCosts.0'|trans({}, 'contao_default'),item.advanceOperatingCosts|number_format(2, ',', ''),{ append: ' €'}) }}
|
|
| 121 |
- {% endif %}
|
|
| 122 |
- {% if item.heatingCosts > 0 %}
|
|
| 123 |
- {{ _self.listEntry('tl_vr_real_estate_assets.heatingCosts.0'|trans({}, 'contao_default'),item.heatingCosts|number_format(2, ',', ''),{ append: ' €'}) }}
|
|
| 124 |
- {% endif %}
|
|
| 125 |
- </ul> |
|
| 126 |
- |
|
| 127 |
- <ul class="labelList mb-3"> |
|
| 128 |
- {{ _self.listEntry('tl_vr_real_estate_assets.cooperativeShares.0'|trans({}, 'contao_default'),item.cooperativeShares) }}
|
|
| 129 |
- {{ _self.listEntry('tl_vr_real_estate_assets.availability.0'|trans({}, 'contao_default'),item.availableFrom) }}
|
|
| 130 |
- </ul> |
|
| 131 |
- |
|
| 132 |
- <ul class="labelList"> |
|
| 133 |
- {{ _self.listEntry('MSC.re_deadline'|trans({}, 'contao_default'),item.deadline) }}
|
|
| 134 |
- </ul> |
|
| 135 |
- {% endapply %}
|
|
| 136 |
- |
|
| 137 |
- </div> |
|
| 138 |
- </div> |
|
| 89 |
+ <div class="expose-gallery"> |
|
| 90 |
+ {% with {items: item.galleryFigures} %}{{ block('list_component') }}{% endwith %}
|
|
| 91 |
+ </div> |
|
| 92 |
+ {{ _self.backgroundWrapper_close }}
|
|
| 139 | 93 |
|
| 140 |
- <div class="col-md-6"> |
|
| 141 |
- {% if item.description %}
|
|
| 142 |
- <h3 class="mb-3">{{ 'MSC.re_description'|trans({}, 'contao_default') }}</h3>
|
|
| 143 |
- <div class="p-4 text-primary content--box mb-5"> |
|
| 144 |
- <div class="description">{{ item.description|raw }}</div>
|
|
| 145 |
- </div> |
|
| 146 |
- {% endif %}
|
|
| 94 |
+ {{ _self.backgroundWrapper_open('-alt-color-1 -padding-medium') }}
|
|
| 95 |
+ <h3>Grundriß</h3> |
|
| 96 |
+ <div class="expose-floorplans"> |
|
| 97 |
+ {% with {items: item.floorPlansFigures} %}{{ block('list_component') }}{% endwith %}
|
|
| 98 |
+ </div> |
|
| 147 | 99 |
|
| 148 |
- {% if item.features %}
|
|
| 149 |
- <h3 class="mb-3">{{ 'MSC.re_features'|trans({}, 'contao_default') }}</h3>
|
|
| 150 |
- <div class="p-4 text-primary content--box mb-5"> |
|
| 151 |
- <ul class="checkList"> |
|
| 152 |
- {% for feature in item.features %}
|
|
| 153 |
- {% set featureTrans = 'REF.re_features.' ~ feature %}
|
|
| 154 |
- <li>{{ featureTrans|trans({}, 'contao_default') }}</li>
|
|
| 155 |
- {% endfor %}
|
|
| 156 |
- </ul> |
|
| 157 |
- </div> |
|
| 158 |
- {% endif %}
|
|
| 100 |
+ {{ _self.backgroundWrapper_close }}
|
|
| 159 | 101 |
|
| 160 |
- </div> |
|
| 161 |
- </div> |
|
| 102 |
+ {{ _self.backgroundWrapper_open('-padding') }}
|
|
| 103 |
+ <p class="overviewLink"><a class="btn btn-outline-primary" href="{{ item.listUrl }}">Zurück zur Übersicht</a></p>
|
|
| 104 |
+ {{ _self.backgroundWrapper_close }}
|
|
| 162 | 105 |
|
| 163 |
- </div> |
|
| 164 | 106 |
|
| 165 |
- <div class="row actions"> |
|
| 166 |
- <div class="col-md-6 order-last order-md-first"> |
|
| 167 |
- <a class="btn btn-outline-primary" href="{{ item.listUrl }}">Zurück zur Übersicht</a>
|
|
| 168 |
- </div> |
|
| 169 |
- <div class="col-md-6 text-end order-first order-md-last"> |
|
| 170 |
- {% if formURL %}
|
|
| 171 |
- <a class="btn btn-secondary" href="{{ formURL }}" target="_blank">Jetzt bewerben</a>
|
|
| 172 |
- {% endif %}
|
|
| 173 |
- <a class="btn btn-primary" href="{{ item.pdfUrl }}">Exposé downloaden</a>
|
|
| 174 |
- </div> |
|
| 175 |
- </div> |
|
| 176 | 107 |
</div> |
| 177 | 108 |
{% endblock %}
|
| 109 |
+ |
|
| 110 |
+{% block list_item %}
|
|
| 111 |
+ {% with {figure: item} %}{{ block('figure_component') }}{% endwith %}
|
|
| 112 |
+{% endblock %}
|