Skip to content

Commit 320a802

Browse files
philli-mphilli-m
committed
assets/tabs-tabnavigation: change element name and implement tab styling copied from berlin.de site fixes #5364 
1 parent 5af10ed commit 320a802

File tree

6 files changed

+169
-107
lines changed

6 files changed

+169
-107
lines changed

‎meinberlin/apps/projects/templates/meinberlin_projects/project_detail.html

+75-66
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
{% block extra_css %}
55
{{ block.super }}
66
<link rel="stylesheet" href="{% static 'dsgvo_video_embed.css' %}" />
7-
{% endblock %}
7+
{% endblock extra_css %}
88

99
{% block extra_js %}
1010
{{ block.super }}
1111
<script type="text/javascript" src="{% static 'dsgvo_video_embed.js' %}"></script>
12-
{% endblock %}
12+
{% endblock extra_js %}
1313

14-
{% block title %}{{project.name}} &mdash; {{ block.super }}{% endblock %}
14+
{% block title %}{{ project.name }} — {{ block.super }}{% endblock title %}
1515

1616
{% block extra_messages %}
1717
{{ block.super }}
@@ -20,24 +20,24 @@
2020
<ul class="messages">
2121
<li class="alert alert--warning" role="alert">
2222
<div class="container">
23-
{% translate 'This project is not published yet.' %}
23+
{% translate "This project is not published yet." %}
2424
</div>
2525
</li>
2626
</ul>
2727
{% endif %}
28-
{% endblock %}
28+
{% endblock extra_messages %}
2929

3030
{% block breadcrumbs %}
3131
<div id="content-header">
32-
<nav class="breadcrumb" aria-label="{% translate 'You are here:' %}">
32+
<nav class="breadcrumb" aria-label='{% translate "You are here:" %}'>
3333
<ol>
3434
<li><a href="/">meinBerlin</a></li>
35-
<li><a href="{% url 'meinberlin_plans:plan-list' %}">{% translate 'Project Overview' %}</a></li>
35+
<li><a href="{% url 'meinberlin_plans:plan-list' %}">{% translate "Project Overview" %}</a></li>
3636
<li class="active" aria-current="page">{{ project.name|truncatechars:50 }}</li>
3737
</ol>
3838
</nav>
3939
</div>
40-
{% endblock %}
40+
{% endblock breadcrumbs %}
4141

4242
{% block content %}
4343
<!-- FIXME according to the marketing verticle the herounit should be before the maincontent however the styling for this here is nested within maincontent
@@ -48,7 +48,7 @@
4848
<div class="mainbar__left">
4949
<div class="image">
5050
<div class="image__image">
51-
<img src="{{ project.image |thumbnail_url:'heroimage' }}" alt="{% if project.image_alt_text %}{{ project.image_alt_text }}{% else %}{% translate 'Here you can find a decorative picture.' %}{% endif %}" />
51+
<img src="{{ project.image | thumbnail_url:"heroimage" }}" alt='{% if project.image_alt_text %}{{ project.image_alt_text }}{% else %}{% translate "Here you can find a decorative picture." %}{% endif %}' width="100%" height="auto" loading="lazy"/>
5252
</div>
5353
</div>
5454
</div>
@@ -61,7 +61,7 @@ <h1 class="title">{{ project.name }}</h1>
6161
{% if project.image_copyright %}
6262
{{ project.image_copyright }}
6363
{% else %}
64-
{% translate 'copyright missing' %}
64+
{% translate "copyright missing" %}
6565
{% endif %}
6666
</p>
6767
</div>
@@ -73,50 +73,60 @@ <h1 class="title">{{ project.name }}</h1>
7373
</div>
7474
</div>
7575
</section>
76-
<div class="js-tabs">
76+
<div class="tabnavigation js-tabs">
7777
<div class="row row--reverse-palm">
7878
{% has_perm 'a4projects.change_project' request.user view.project as user_may_change %}
79-
{% if user_may_change %}
80-
<div class="span4 align--right">
81-
<a class="link--edit" href="{% url 'a4dashboard:project-edit' project_slug=project.slug %}">
82-
{% translate 'Edit' %}
83-
</a>
84-
</div>
85-
{% endif %}
86-
<div class="span8">
87-
<div role="tablist"
88-
aria-label="{% translate 'Project Details Navigation' %}">
89-
<button id="tab-project-{{ project.pk }}-information"
90-
class="tab__button"
91-
type="button"
92-
role="tab"
93-
aria-selected="false"
94-
aria-controls="tabpanel-project-{{ project.pk }}-information"
95-
tabindex="-1">
96-
{% translate 'Information' %}
97-
</button>
98-
<button
99-
id="tab-project-{{ project.pk }}-participation"
100-
class="tab__button"
101-
type="button"
102-
role="tab"
103-
aria-selected="true"
104-
aria-controls="tabpanel-project-{{ project.pk }}-participation">
105-
{% translate 'Participation' %}
106-
</button>
107-
<button
108-
id="tab-project-{{ project.pk }}-result"
109-
class="tab__button"
110-
type="button"
111-
role="tab"
112-
aria-selected="false"
113-
aria-controls="tabpanel-project-{{ project.pk }}-result"
114-
tabindex="-1">
115-
{% translate 'Results' %}
116-
</button>
79+
<div>
80+
{% if user_may_change %}
81+
<div class="tabnavigation--right">
82+
<a class="tabnavigation__link" href="{% url 'a4dashboard:project-edit' project_slug=project.slug %}">
83+
{% translate "Edit" %}
84+
</a>
11785
</div>
86+
{% endif %}
87+
<ul
88+
class="tabnavigation--left"
89+
role="tablist"
90+
aria-label='{% translate "Project Details Navigation" %}'
91+
>
92+
<li>
93+
<button
94+
id="tab-project-{{ project.pk }}-information"
95+
class="tabnavigation__button"
96+
type="button"
97+
role="tab"
98+
aria-selected="false"
99+
aria-controls="tabpanel-project-{{ project.pk }}-information"
100+
tabindex="-1">
101+
{% translate "Information" %}
102+
</button>
103+
</li>
104+
105+
<li>
106+
<button
107+
id="tab-project-{{ project.pk }}-participation"
108+
class="tabnavigation__button"
109+
type="button"
110+
role="tab"
111+
aria-selected="true"
112+
aria-controls="tabpanel-project-{{ project.pk }}-participation">
113+
{% translate "Participation" %}
114+
</button>
115+
</li>
116+
<li>
117+
<button
118+
id="tab-project-{{ project.pk }}-result"
119+
class="tabnavigation__button"
120+
type="button"
121+
role="tab"
122+
aria-selected="false"
123+
aria-controls="tabpanel-project-{{ project.pk }}-result"
124+
tabindex="-1">
125+
{% translate "Results" %}
126+
</button>
127+
</li>
128+
</ul>
118129
</div>
119-
<hr class="no-space"/>
120130
</div>
121131
<section
122132
id="tabpanel-project-{{ project.pk }}-information"
@@ -125,14 +135,14 @@ <h1 class="title">{{ project.name }}</h1>
125135
aria-expanded="false"
126136
aria-hidden="true"
127137
aria-labelledby="tab-project-{{ project.pk }}-information">
128-
<h2>{% translate 'Information' %}</h2>
138+
<h2 class="mt-0">{% translate "Information" %}</h2>
129139
<div class="ck-content">
130140
{{ project.information | transform_collapsibles | disable_iframes | richtext }}
131141
</div>
132142
{% if project.contact_name or project.contact_address_text or project.contact_email or project.contact_phone or project.contact_url or project.organisation.address or project.organisation.url %}
133143
{% if project.contact_name or project.contact_address_text or project.contact_email or project.contact_phone or project.contact_url %}
134144
<div>
135-
<h3>{% translate 'Contact for questions' %}</h3>
145+
<h3>{% translate "Contact for questions" %}</h3>
136146
<address>
137147
{% if project.contact_name %}
138148
<p>{{ project.contact_name }}</p>
@@ -141,16 +151,16 @@ <h3>{% translate 'Contact for questions' %}</h3>
141151
<p>{{ project.contact_address_text|linebreaks }}</p>
142152
{% endif %}
143153
{% if project.contact_phone %}
144-
<p><strong>{% translate 'Telephone' %}: </strong>{{ project.contact_phone }}</p>
154+
<p><strong>{% translate "Telephone" %}: </strong>{{ project.contact_phone }}</p>
145155
{% endif %}
146156
{% if project.contact_email %}
147157
<a class="btn btn--secondary" href="mailto:{{ project.contact_email }}">
148-
{% translate 'Email' %}
158+
{% translate "Email" %}
149159
</a>
150160
{% endif %}
151161
{% if project.contact_url %}
152162
<a class="btn btn--secondary" target="_blank" href="{{ project.contact_url }}">
153-
{% translate 'Website' %}
163+
{% translate "Website" %}
154164
</a>
155165
{% endif %}
156166
</address>
@@ -159,15 +169,15 @@ <h3>{% translate 'Contact for questions' %}</h3>
159169

160170
{% if project.organisation.address or project.organisation.url %}
161171
<div>
162-
<h3>{% translate 'Responsible body' %}</h3>
172+
<h3>{% translate "Responsible body" %}</h3>
163173
<address>
164174
{% if project.organisation.address %}
165175
<p>{{ project.organisation.name }}</p>
166176
<p>{{ project.organisation.address|linebreaks }}</p>
167177
{% endif %}
168178
{% if project.organisation.url %}
169179
<a class="btn btn--secondary" target="_blank" href="{{ project.organisation.url }}">
170-
{% translate 'Website' %}
180+
{% translate "Website" %}
171181
</a>
172182
{% endif %}
173183
</address>
@@ -182,7 +192,7 @@ <h3>{% translate 'Responsible body' %}</h3>
182192
aria-expanded="true"
183193
aria-hidden="false"
184194
aria-labelledby="tab-project-{{ project.pk }}-participation">
185-
<h2>{% translate 'Participate' %}</h2>
195+
<h2 class="mt-0">{% translate "Participate" %}</h2>
186196
{% if event %}
187197
<article>
188198
<h2>{{ event.name }}</h2>
@@ -201,22 +211,21 @@ <h2>{{ event.name }}</h2>
201211
</ul>
202212
</div>
203213
</div>
204-
{% else %}
214+
{% else %}
205215
<!-- if just one module and no phase view to dispatch to -->
206216
<div class="modul-servicepanel fullwidth panel--heavy phase-info">
207217
<div class="servicepanel__main">
208218
{% include "a4modules/includes/module_detail_phase.html" %}
209219
</div>
210220
<!-- these blocks are only filled when in phase view -->
211221
<div class="servicepanel__right phase-info__cta">
212-
{% block project_action %}{% endblock %}
222+
{% block project_action %}{% endblock project_action %}
213223
</div>
214224
</div>
215225
{% endif %}
216226

217-
218-
{% block voting_token_field %}{% endblock %}
219-
{% block phase_content %}{% endblock %}
227+
{% block voting_token_field %}{% endblock voting_token_field %}
228+
{% block phase_content %}{% endblock phase_content %}
220229
</section>
221230
<section
222231
id="tabpanel-project-{{ project.pk }}-result"
@@ -225,15 +234,15 @@ <h2>{{ event.name }}</h2>
225234
aria-expanded="false"
226235
aria-hidden="true"
227236
aria-labelledby="tab-project-{{ project.pk }}-result">
228-
<h2>{% translate 'Result' %}</h2>
237+
<h2 class="mt-0">{% translate "Result" %}</h2>
229238
{% if project.result %}
230239
<div class="ck-content">
231240
{{ project.result | transform_collapsibles | richtext }}
232241
</div>
233242
{% else %}
234-
{% translate 'No results yet.' %}
243+
<p>{% translate "No results yet." %}</p>
235244
{% endif %}
236245
</section>
237246
</div>
238247
</div>
239-
{% endblock %}
248+
{% endblock content %}

‎meinberlin/assets/scss/components_user_facing/_link--edit.scss

-13
This file was deleted.

‎meinberlin/assets/scss/components_user_facing/_tab.scss

-21
This file was deleted.

0 commit comments

Comments
 (0)