From bce224db3ab109d8a3a7374d8ad07edd35cd08d2 Mon Sep 17 00:00:00 2001 From: Anna Shamray Date: Fri, 24 Nov 2023 12:37:18 +0100 Subject: [PATCH] :recycle: refactor html templates to use custom css instead of bootstrap --- .../static/vng_api_common/css/screen.css | 259 ++++++++++++++++++ .../vng_api_common/includes/kanalen_card.html | 16 +- .../templates/vng_api_common/index.html | 38 +-- .../templates/vng_api_common/master.html | 104 ++++--- .../vng_api_common/ref/error_detail.html | 6 +- .../templates/vng_api_common/ref/scopes.html | 6 +- .../templates/vng_api_common/view_config.html | 47 ++-- 7 files changed, 356 insertions(+), 120 deletions(-) create mode 100644 vng_api_common/static/vng_api_common/css/screen.css diff --git a/vng_api_common/static/vng_api_common/css/screen.css b/vng_api_common/static/vng_api_common/css/screen.css new file mode 100644 index 00000000..f9e5a6c7 --- /dev/null +++ b/vng_api_common/static/vng_api_common/css/screen.css @@ -0,0 +1,259 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: var(--color-text); +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +.button { + display: inline-block; + text-align: center; + vertical-align: middle; + border: 1px solid transparent; + border-radius: 0.25rem; + padding: 0.375rem 0.75rem; + text-decoration: none; +} +.button--primary { + color: var(--color-lightest); + background-color: var(--color-primary); + border-color: var(--color-primary); +} +.button--primary:hover { + background-color: var(--color-primary-dark); + border-color: var(--color-primary-dark); +} +.button--secondary { + color: var(--color-lightest); + background-color: var(--color-secondary); + border-color: var(--color-secondary); +} +.button--secondary:hover { + background-color: var(--color-secondary-dark); + border-color: var(--color-secondary-dark); +} +.button--alert { + color: var(--color-lightest); + background-color: var(--color-alert); + border-color: var(--color-alert); +} +.button--alert:hover { + background-color: var(--color-alert-dark); + border-color: var(--color-alert-dark); +} + +.card { + border: 1px solid var(--color-border); + border-radius: 0.25rem; + padding: 1.25rem; +} +.card__title { + margin-bottom: 0.75rem; +} + +.cardlist { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-left: -15px; + margin-right: -15px; + margin-bottom: 1rem; +} +.cardlist__item { + position: relative; + width: 100%; + padding-left: 15px; + padding-right: 15px; +} +@media (min-width: 576px) { + .cardlist__item { + flex: 0 0 33.333333%; + max-width: 33.333333%; + } +} + +.container { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} +.container--center { + text-align: center; +} +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} +@media (min-width: 1400px) { + .container { + max-width: 1320px; + } +} + +.footer { + padding-top: 1.5rem; + border-top: 1px solid var(--color-border); + color: var(--color-muted); +} +.footer__row { + display: flex; + margin-left: -15px; + margin-right: -15px; +} +.footer__item { + position: relative; + width: 100%; + padding-right: 15px; + padding-left: 15px; +} +.footer__item--right { + text-align: right; +} +.footer__logo { + margin-bottom: 0.5rem; +} +.footer__logo img { + display: block; + vertical-align: middle; +} + +.header { + text-align: center; + padding: 1rem; + margin-right: auto; + margin-left: auto; +} +.header__title { + font-size: 3.5rem; + font-weight: 300; + line-height: 1.2; +} +.header__description { + font-size: 1.25rem; + font-weight: 300; +} + +a { + color: var(--color-link); +} + +.link { + color: var(--color-link); + text-decoration: none; +} +.link:hover { + color: var(--color-link-hover); + text-decoration: underline; +} +.link--muted { + color: var(--color-muted); +} +.link--muted:hover { + color: var(--color-secondary-dark); +} + +.list { + padding-left: 0; + list-style: None; + margin-top: 0; + margin-bottom: 1rem; +} + +.table { + width: 100%; + margin-bottom: 1rem; + border-collapse: collapse; + text-align: left; +} +.table thead th { + padding: 0.75rem; + border-bottom: 2px solid var(--color-border); + border-top: 1px solid var(--color-border); +} +.table tbody td { + padding: 0.75rem; + border-top: 1px solid var(--color-border); +} +.table tbody tr:nth-of-type(2n+1) { + background-color: rgba(0, 0, 0, 0.05); +} + +h1, +h2, +h3, +h4, +h5 { + margin-top: 0; + margin-bottom: 0.5rem; + line-height: 1.2; + font-weight: 500; +} + +h1 { + font-size: 2.5rem; +} + +h2 { + font-size: 2rem; +} + +h5 { + font-size: 1.25rem; +} + +p { + margin-top: 0; + margin-bottom: 1rem; +} + +code { + font-size: 87.5%; + color: var(--color-code); + word-break: break-word; + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + +:root { + --color-darkest: #000; + --color-dark: #212529; + --color-light: #dee2e6; + --color-lightest: #fff; + --color-primary: #007bff; + --color-primary-dark: #0056b3; + --color-secondary: #6c757d; + --color-secondary-dark: #5a6268; + --color-alert: #dc3545; + --color-alert-dark: #c82333; + --color-link: var(--color-primary); + --color-link-hover: var(--color-primary-dark); + --color-text: var(--color-dark); + --color-muted: var(--color-secondary); + --color-border: var(--color-light); + --color-code: #e83e8c; + --color-background: var(--color-lightest); +} diff --git a/vng_api_common/templates/vng_api_common/includes/kanalen_card.html b/vng_api_common/templates/vng_api_common/includes/kanalen_card.html index 5d5a08d4..8101799d 100644 --- a/vng_api_common/templates/vng_api_common/includes/kanalen_card.html +++ b/vng_api_common/templates/vng_api_common/includes/kanalen_card.html @@ -1,12 +1,6 @@ -
- -
-
-
Notificaties
-

Gebeurtenissen waarover dit component notificaties verstuurt.

- Notificaties -
-
- -
+
+
Notificaties
+

Gebeurtenissen waarover dit component notificaties verstuurt.

+ Notificaties +
diff --git a/vng_api_common/templates/vng_api_common/index.html b/vng_api_common/templates/vng_api_common/index.html index 18152ff6..49e4e137 100644 --- a/vng_api_common/templates/vng_api_common/index.html +++ b/vng_api_common/templates/vng_api_common/index.html @@ -2,60 +2,50 @@ {% block content %} -
-

{{ settings.PROJECT_NAME }} startpunt

-

{{ settings.SITE_TITLE }}

+
+

{{ settings.PROJECT_NAME }} startpunt

+

{{ settings.SITE_TITLE }}

-
+
{% block docs %}

Documentatie

-
+
{% block docs_oas %} -
- +
-
-
API specificatie
-

Technische API documentatie in de vorm van een Open API Specificatie (OAS).

- API specificaties -
+
API specificatie
+

Technische API documentatie in de vorm van een Open API Specificatie (OAS).

+ API specificaties
-
{% endblock %} {% block docs_scopes %} -
- +
-
-
API scopes
-

Alle scopes binnen deze API voor gebruik in JWT's t.b.v. autorisaties.

- API scopes -
+
API scopes
+

Alle scopes binnen deze API voor gebruik in JWT's t.b.v. autorisaties.

+ API scopes
-
{% endblock %} {% block extra_docs %}{% endblock %}
-

{% endblock %} {% block extra_content %}{% endblock %} {% block admin_link %} -

- Beheer + Beheer

{% endblock %} diff --git a/vng_api_common/templates/vng_api_common/master.html b/vng_api_common/templates/vng_api_common/master.html index de931b75..8b86f4cb 100644 --- a/vng_api_common/templates/vng_api_common/master.html +++ b/vng_api_common/templates/vng_api_common/master.html @@ -4,7 +4,7 @@ - + @@ -17,10 +17,8 @@ {% if not settings.SITE_TITLE or not settings.PROJECT_NAME %}
-
- Please add the variables SITE_TITLE and PROJECT_NAME to your settings.py and make - sure they are available via context processors. -
+ Please add the variables SITE_TITLE and PROJECT_NAME to your settings.py and make + sure they are available via context processors.
{% endif %} @@ -29,59 +27,53 @@ to get some actual content. {% endblock %} -
- -
- - - - - + {% if request.user.is_authenticated %} +
+
+ {{ settings.API_VERSION }} +
+
+ {{ settings.GIT_SHA|default:"" }} +
+
+ {% endif %} + +
+ {% endblock footer %} {% block extra_scripts %}{% endblock %} diff --git a/vng_api_common/templates/vng_api_common/ref/error_detail.html b/vng_api_common/templates/vng_api_common/ref/error_detail.html index e6cbfdb5..a858f4b3 100644 --- a/vng_api_common/templates/vng_api_common/ref/error_detail.html +++ b/vng_api_common/templates/vng_api_common/ref/error_detail.html @@ -3,9 +3,9 @@ {% block content %} -
-

{{ settings.PROJECT_NAME }} foutomschrijving

-

{{ settings.SITE_TITLE }}

+
+

{{ settings.PROJECT_NAME }} foutomschrijving

+

{{ settings.SITE_TITLE }}

diff --git a/vng_api_common/templates/vng_api_common/ref/scopes.html b/vng_api_common/templates/vng_api_common/ref/scopes.html index 239aceaf..b4734d21 100644 --- a/vng_api_common/templates/vng_api_common/ref/scopes.html +++ b/vng_api_common/templates/vng_api_common/ref/scopes.html @@ -3,9 +3,9 @@ {% block content %} -
-

{{ settings.PROJECT_NAME }} scopes

-

{{ settings.SITE_TITLE }}

+
+

{{ settings.PROJECT_NAME }} scopes

+

{{ settings.SITE_TITLE }}

diff --git a/vng_api_common/templates/vng_api_common/view_config.html b/vng_api_common/templates/vng_api_common/view_config.html index 177eccc6..8e96893d 100644 --- a/vng_api_common/templates/vng_api_common/view_config.html +++ b/vng_api_common/templates/vng_api_common/view_config.html @@ -1,31 +1,32 @@ {% extends "vng_api_common/master.html" %} {% block content %} -
-

{{ settings.PROJECT_NAME }} configuratie

-

{{ settings.SITE_TITLE }}

-
-
- +
+

{{ settings.PROJECT_NAME }} configuratie

+

{{ settings.SITE_TITLE }}

+
+ +
+
- - - - - + + + + + - {% for param, value, ok in config %} - - - - - - {% endfor %} + {% for param, value, ok in config %} + + + + + + {% endfor %} -
ParameterWaardeOk?
ParameterWaardeOk?
{{ param }}{{ value|urlize }} - -
{{ param }}{{ value|urlize }} +
-
-{% endblock %} + +
+ +{% endblock content%}