Skip to content

Commit 8143c31

Browse files
jiromaykinjiromaykin
committed
💄 [#2117] Added tag styles for wysiwyg in footer
1 parent 926fcb0 commit 8143c31

File tree

2 files changed

+157
-158
lines changed

2 files changed

+157
-158
lines changed

‎src/open_inwoner/scss/components/Typography/wysiwyg.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@
66
flex-direction: row;
77
align-items: center;
88
font-size: var(--font-size-body);
9+
line-height: var(--font-line-height-body);
910
text-decoration: none;
1011
gap: var(--spacing-small);
1112
color: var(--color-secondary);
12-
line-height: var(--font-line-height-body);
13+
1314
word-wrap: break-word;
1415
}
1516

‎src/open_inwoner/templates/master.html

+155-157
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,144 @@
11
{% load static i18n header_tags card_tags button_tags link_tags notification_tags anchor_menu_tags view_breadcrumbs utils session_tags django_htmx cms_tags menu_tags sekizai_tags %}<!DOCTYPE html>
22
<html lang="nl" class="view openinwoner-theme {% block view_class %}view--{{ request.resolver_match.namespaces|join:'-' }}-{{ request.resolver_match.url_name }}{% endblock %}">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>{% block title %}{% if page_title %}{{ page_title }} - {% endif %}{{ site_name }}{% endblock %}</title>
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
8-
<meta property="og:title" content="{% if page_title %}{{ page_title }} - {% endif %}{{ site_name }}">
9-
<meta name="twitter:title" content="{% if page_title %}{{ page_title }} - {% endif %}{{ site_name }}">
10-
{% if meta_description %}
11-
<meta property="og:description" content="{{ meta_description }}">
12-
<meta name="twitter:description" content="{{ meta_description }}">
13-
<meta name="description" content="{{ meta_description }}"/>
14-
{% endif %}
15-
{% if meta_image_url %}
16-
<meta property="og:image" content="{{ meta_image_url }}">
17-
<meta name="twitter:image" content="{{ meta_image_url }}">
18-
{% endif %}
19-
{% if meta_page_url %}
20-
<meta property="og:url" content="{{ meta_page_url }}">
21-
{% endif %}
22-
<meta property="og:type" content="article">
23-
24-
25-
{% if favicon %}
26-
<link rel="icon" href="{{ favicon }}"/>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>{% block title %}{% if page_title %}{{ page_title }} - {% endif %}{{ site_name }}{% endblock %}</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<meta property="og:title" content="{% if page_title %}{{ page_title }} - {% endif %}{{ site_name }}">
9+
<meta name="twitter:title" content="{% if page_title %}{{ page_title }} - {% endif %}{{ site_name }}">
10+
{% if meta_description %}
11+
<meta property="og:description" content="{{ meta_description }}">
12+
<meta name="twitter:description" content="{{ meta_description }}">
13+
<meta name="description" content="{{ meta_description }}"/>
14+
{% endif %}
15+
{% if meta_image_url %}
16+
<meta property="og:image" content="{{ meta_image_url }}">
17+
<meta name="twitter:image" content="{{ meta_image_url }}">
18+
{% endif %}
19+
{% if meta_page_url %}
20+
<meta property="og:url" content="{{ meta_page_url }}">
21+
{% endif %}
22+
<meta property="og:type" content="article">
23+
24+
25+
{% if favicon %}<link rel="icon" href="{{ favicon }}" />
2726
<link rel="apple-touch-icon" href="{{ favicon }}">{% endif %}
2827

29-
<link nonce="{{ request.csp_nonce }}" href="{% static 'bundles/open_inwoner-css.css' %}" media="all" rel="stylesheet"/>
30-
31-
<style nonce="{{ request.csp_nonce }}">
32-
:root {
33-
--color-primary-h: {{theming.primary.0}};
34-
--color-primary-s: {{theming.primary.1}}%;
35-
--color-primary-l: {{theming.primary.2}}%;
36-
--color-secondary-h: {{theming.secondary.0}};
37-
--color-secondary-s: {{theming.secondary.1}}%;
38-
--color-secondary-l: {{theming.secondary.2}}%;
39-
--color-accent-h: {{theming.accent.0}};
40-
--color-accent-s: {{theming.accent.1}}%;
41-
--color-accent-l: {{theming.accent.2}}%;
42-
--color-font-primary: {{theming.primary_font_color}};
43-
--color-font-secondary: {{theming.secondary_font_color}};
44-
--color-font-accent: {{theming.accent_font_color}};
45-
}
46-
</style>
47-
{% render_block "css" %}
48-
{% if theme_stylesheet %}
49-
<link id="theme-css" nonce="{{ request.csp_nonce }}" media="all" rel="stylesheet" href="{{ theme_stylesheet }}"/>
50-
{% endif %}
51-
{% block extra_css %}{% endblock %}
52-
{% block extra_head %}{% endblock %}
53-
{% if extra_css %}
54-
<style id="extra-css" nonce="{{ request.csp_nonce }}">
55-
{{ extra_css }}
28+
<link nonce="{{ request.csp_nonce }}" href="{% static 'bundles/open_inwoner-css.css' %}" media="all" rel="stylesheet" />
29+
30+
<style nonce="{{ request.csp_nonce }}">
31+
:root {
32+
--color-primary-h: {{theming.primary.0}};
33+
--color-primary-s: {{theming.primary.1}}%;
34+
--color-primary-l: {{theming.primary.2}}%;
35+
--color-secondary-h: {{theming.secondary.0}};
36+
--color-secondary-s: {{theming.secondary.1}}%;
37+
--color-secondary-l: {{theming.secondary.2}}%;
38+
--color-accent-h: {{theming.accent.0}};
39+
--color-accent-s: {{theming.accent.1}}%;
40+
--color-accent-l: {{theming.accent.2}}%;
41+
--color-font-primary: {{theming.primary_font_color}};
42+
--color-font-secondary: {{theming.secondary_font_color}};
43+
--color-font-accent: {{theming.accent_font_color}};
44+
}
5645
</style>
57-
{% endif %}
58-
{% if request|cookies_accepted %}
59-
{% include "analytics/google.html" %}
60-
{% include "analytics/matomo.html" %}
61-
{% include "analytics/siteimprove.html" %}
62-
{% endif %}
63-
</head>
64-
65-
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
66-
67-
{% if cookiebanner_enabled %}
68-
{# render cookiebanner first #}
69-
<div class="cookie-banner" id="cookie-banner" aria-labelledby="cookie-banner__title" aria-describedby="cookie-banner__text">
70-
<div class="cookie-banner__container">
71-
<div class="cookie-banner__text" id="cookie-banner__text">
72-
{{ cookie_info_text }} <span class="cookie-banner__link" id="cookie-banner__link">{% link href=cookie_link_url text=cookie_link_text secondary=True extra_classes="link--cookie" %}</span></div>
73-
<div class="cookie-banner__actions" id="cookie-banner__actions">
74-
{% button_row %}
75-
{% button text=_("Alles weigeren") name="cookie_reject" secondary=True bordered=True id="reject-button" extra_classes="cookie-banner__reject reject-button" %}
76-
{% button text=_("Alles toestaan") name="cookie_approve" primary=True id="accept-button" extra_classes="cookie-banner__confirm accept-button" %}
77-
{% endbutton_row %}
46+
{% render_block "css" %}
47+
{% if theme_stylesheet %}
48+
<link id="theme-css" nonce="{{ request.csp_nonce }}" media="all" rel="stylesheet" href="{{ theme_stylesheet }}" />
49+
{% endif %}
50+
{% block extra_css %}{% endblock %}
51+
{% block extra_head %}{% endblock %}
52+
{% if extra_css %}
53+
<style id="extra-css" nonce="{{ request.csp_nonce }}">
54+
{{ extra_css }}
55+
</style>
56+
{% endif %}
57+
{% if request|cookies_accepted %}
58+
{% include "analytics/google.html" %}
59+
{% include "analytics/matomo.html" %}
60+
{% include "analytics/siteimprove.html" %}
61+
{% endif %}
62+
</head>
63+
64+
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
65+
66+
{% if cookiebanner_enabled %}
67+
{# render cookiebanner first #}
68+
<div class="cookie-banner" id="cookie-banner" aria-labelledby="cookie-banner__title" aria-describedby="cookie-banner__text">
69+
<div class="cookie-banner__container">
70+
<div class="cookie-banner__text" id="cookie-banner__text">
71+
{{cookie_info_text}} <span class="cookie-banner__link" id="cookie-banner__link">{% link href=cookie_link_url text=cookie_link_text secondary=True extra_classes="link--cookie" %}</span></div>
72+
<div class="cookie-banner__actions" id="cookie-banner__actions">
73+
{% button_row %}
74+
{% button text=_("Alles weigeren") name="cookie_reject" secondary=True bordered=True id="reject-button" extra_classes="cookie-banner__reject reject-button" %}
75+
{% button text=_("Alles toestaan") name="cookie_approve" primary=True id="accept-button" extra_classes="cookie-banner__confirm accept-button" %}
76+
{% endbutton_row %}
77+
</div>
7878
</div>
7979
</div>
80-
</div>
81-
{% endif %}
82-
83-
{% if warning_banner_enabled %}
84-
{% include "components/Header/WarningHeader.html" %}
85-
{% endif %}
86-
87-
{% cms_toolbar %}
88-
89-
{# render the cms menu and save for display in both mobile and desktop #}
90-
{% capture as rendered_cms_menu__home %}
91-
{% show_menu_below_id "home" 0 100 100 100 "cms/menu/primary.html" %}
92-
{% endcapture %}
93-
{% include "components/Header/Header.html" %}
94-
95-
{# javascript and the form-attribute are used to connect various forms and controls to this invisible form #}
96-
<form id="search-form" class="form--hidden" method="GET" action="{% url 'search:search' %}" novalidate="">
97-
<input name="query" type="hidden" value="{% firstof search_form.query.value "" %}">
98-
</form>
99-
100-
{% if anchors and not custom_anchors %}
101-
{% anchor_menu anchors=anchors desktop=False %}
102-
{% block extra_mobile_anchor %}{% endblock extra_mobile_anchor %}
103-
{% endanchor_menu %}
104-
{% elif custom_anchors %}
105-
{% block mobile_anchors %}
106-
{% endblock mobile_anchors %}
107-
{% endif %}
108-
109-
<div class="anchor__scroll" id="scroll-anchor">
110-
<div class="anchor__scroll-link">
111-
{% button href="#top" text=_("Terug naar boven") icon="arrow_upward" pill=True %}
112-
</div>
113-
</div>
114-
{% render_breadcrumbs "components/Header/Breadcrumbs.html" %}
115-
116-
{% block header_image %}{% endblock header_image %}
117-
118-
{% block notifications %}
119-
<div class="container container--no-margin">
120-
{% notifications messages closable=True %}
121-
</div>
122-
{% endblock %}
123-
124-
{% block main_outer %}
125-
<main id="content" class="container">
126-
{% block main_inner %}
127-
<div class="grid{% block grid_class %}{% endblock %}">
128-
{% spaceless %}
129-
<div class="grid__sidebar">{% block sidebar_content %}{% endblock sidebar_content %}</div>{% endspaceless %}
130-
131-
<div class="grid__main">
132-
{% block content %}Please provide the content{% endblock content %}
133-
</div>
80+
{% endif %}
81+
82+
{% if warning_banner_enabled %}
83+
{% include "components/Header/WarningHeader.html" %}
84+
{% endif %}
85+
86+
{% cms_toolbar %}
87+
88+
{# render the cms menu and save for display in both mobile and desktop #}
89+
{% capture as rendered_cms_menu__home %}
90+
{% show_menu_below_id "home" 0 100 100 100 "cms/menu/primary.html" %}
91+
{% endcapture %}
92+
{% include "components/Header/Header.html" %}
93+
94+
{# javascript and the form-attribute are used to connect various forms and controls to this invisible form #}
95+
<form id="search-form" class="form--hidden" method="GET" action="{% url 'search:search' %}" novalidate="">
96+
<input name="query" type="hidden" value="{% firstof search_form.query.value "" %}">
97+
</form>
98+
99+
{% if anchors and not custom_anchors %}
100+
{% anchor_menu anchors=anchors desktop=False %}
101+
{% block extra_mobile_anchor %}{% endblock extra_mobile_anchor %}
102+
{% endanchor_menu%}
103+
{% elif custom_anchors%}
104+
{% block mobile_anchors %}
105+
{% endblock mobile_anchors %}
106+
{% endif %}
134107

135-
{% block extra_grid %}{% endblock extra_grid %}
108+
<div class="anchor__scroll" id="scroll-anchor">
109+
<div class="anchor__scroll-link">
110+
{% button href="#top" text=_("Terug naar boven") icon="arrow_upward" pill=True %}
136111
</div>
137-
{% endblock main_inner %}
138-
</main>
139-
{% endblock main_outer %}
112+
</div>
113+
{% render_breadcrumbs "components/Header/Breadcrumbs.html" %}
114+
115+
{% block header_image %}{% endblock header_image %}
116+
117+
{% block notifications %}
118+
<div class="container container--no-margin">
119+
{% notifications messages closable=True %}
120+
</div>
121+
{% endblock %}
122+
123+
{% block main_outer %}
124+
<main id="content" class="container">
125+
{% block main_inner %}
126+
<div class="grid{% block grid_class %}{% endblock %}">
127+
{% spaceless %}<div class="grid__sidebar">{% block sidebar_content %}{% endblock sidebar_content %}</div>{% endspaceless %}
128+
129+
<div class="grid__main">
130+
{% block content %}Please provide the content{% endblock content %}
131+
</div>
140132

141-
{% if footer %}
142-
<footer class="footer">
143-
{% if footer.logo_title or footer.logo %}
133+
{% block extra_grid %}{% endblock extra_grid %}
134+
</div>
135+
{% endblock main_inner %}
136+
</main>
137+
{% endblock main_outer %}
138+
139+
{% if footer %}
140+
<footer class="footer">
141+
{% if footer.logo_title or footer.logo %}
144142
<div class="footer__header">
145143
{% if footer.logo_title %}
146144
<div class="footer__logo-text">
@@ -153,30 +151,30 @@
153151
</div>
154152
{% endif %}
155153
</div>
154+
{% endif %}
155+
<div class="footer__left wysiwyg">{% static_placeholder "footer_left" %}</div>
156+
<div class="footer__center wysiwyg">{% static_placeholder "footer_center" %}</div>
157+
<div class="footer__right wysiwyg">{% static_placeholder "footer_right" %}</div>
158+
</footer>
156159
{% endif %}
157-
<div class="footer__left wysiwyg">{% static_placeholder "footer_left" %}</div>
158-
<div class="footer__center wysiwyg">{% static_placeholder "footer_center" %}</div>
159-
<div class="footer__right wysiwyg">{% static_placeholder "footer_right" %}</div>
160-
</footer>
161-
{% endif %}
162-
163-
{% session_timeout %}
164-
165-
<dialog class="modal" id="modal" aria-labelledby="modal__title" aria-describedby="modal__text">
166-
<div class="modal__container">
167-
<h2 class="modal__title" id="modal__title"></h2>
168-
<div class="modal__text" id="modal__text"></div>
169-
<div class="modal__actions" id="modal__actions">
170-
{% spaceless %}
171-
{% button text="" extra_classes="modal__button modal__close" %}
172-
{% button text="" extra_classes="modal__button modal__confirm" %}
173-
{% endspaceless %}
174-
</div>
175-
</div>
176-
</dialog>
177160

178-
{% render_block "js" %}
179-
{% block extra_js %}{% endblock %}
180-
<script nonce="{{ request.csp_nonce }}" src="{% static 'bundles/open_inwoner-js.js' %}" type="text/javascript"></script>
181-
</body>
161+
{% session_timeout %}
162+
163+
<dialog class="modal" id="modal" aria-labelledby="modal__title" aria-describedby="modal__text">
164+
<div class="modal__container">
165+
<h2 class="modal__title" id="modal__title"></h2>
166+
<div class="modal__text" id="modal__text"></div>
167+
<div class="modal__actions" id="modal__actions">
168+
{% spaceless %}
169+
{% button text="" extra_classes="modal__button modal__close" %}
170+
{% button text="" extra_classes="modal__button modal__confirm" %}
171+
{% endspaceless %}
172+
</div>
173+
</div>
174+
</dialog>
175+
176+
{% render_block "js" %}
177+
{% block extra_js %}{% endblock %}
178+
<script nonce="{{ request.csp_nonce }}" src="{% static 'bundles/open_inwoner-js.js' %}" type="text/javascript"></script>
179+
</body>
182180
</html>

0 commit comments

Comments
 (0)