css: Upgrade to Bootstrap 5 to be able to use offcanvas for filters o…

…n small screens #241

data_registry/templates/base.html

@@ -23,7 +23,7 @@
 {% block content %}{% endblock %}
 </div>
 
-<div class="container-fluid p-4 bg-dark text-light">
+<div class="container-fluid p-4 text-bg-dark">
     <div class="row small">
         <div class="col d-none d-md-block fixed-6">
             <svg xmlns="http://www.w3.org/2000/svg" width="88" height="146" viewBox="0 0 90 149" role="img" focusable="false" fill="none">
@@ -32,30 +32,30 @@
             </svg>
         </div>
         <div class="col d-none d-md-block">
-            <a href="https://www.open-contracting.org/what-is-open-contracting/" class="mr-4 text-white">
+            <a href="https://www.open-contracting.org/what-is-open-contracting/" class="me-4 link-light">
                 {% translate "What is open contracting" %}
             </a>
-            <a href="https://www.open-contracting.org/impact/" class="mr-4 text-white">
+            <a href="https://www.open-contracting.org/impact/" class="me-4 link-light">
                 {% translate "Impact" %}
             </a>
-            <a href="https://www.open-contracting.org/implement-old/" class="mr-4 text-white">
+            <a href="https://www.open-contracting.org/implement-old/" class="me-4 link-light">
                 {% translate "Implement" %}
             </a>
-            <a href="https://www.open-contracting.org/about/" class="mr-4 text-white">
+            <a href="https://www.open-contracting.org/about/" class="me-4 link-light">
                 {% translate "About" %}
             </a>
-            <a href="https://www.open-contracting.org/latest-news/" class="mr-4 text-white">
+            <a href="https://www.open-contracting.org/latest-news/" class="me-4 link-light">
                 {% translate "News & Community"%}
             </a>
         </div>
         <div class="col-auto mb-3 col-md-4 mb-md-0">
-            <div class="card h-auto border-wide border-info rounded-top-left-lg bg-dark">
+            <div class="card h-auto border border-3 border-info rounded-top-start-lg text-bg-dark">
                 <div class="card-body">
                     <h2 class="card-title h5 text-uppercase">
                         {% translate "Contact" %}
                     </h2>
                     <p class="card-text">
-                        <a href="mailto:[email protected]" class="text-info">
+                        <a href="mailto:[email protected]" class="link-info">
                             [email protected]
                         </a>
                     </p>
@@ -138,7 +138,7 @@ <h2 class="h6">
             </p>
             <p>
                 {% translate "Open Contracting Partnership" %} {% now "Y" %}
-                <a href="https://www.open-contracting.org/terms-of-use/" class="text-info">{% translate "Terms" %}</a>
+                <a href="https://www.open-contracting.org/terms-of-use/" class="link-info">{% translate "Terms" %}</a>
             </p>
         </div>
     </div>

data_registry/templates/detail.html

@@ -52,8 +52,8 @@
 {% block content %}
 <div class="row">
     <div class="col">
-        <a href="{% url 'search' %}" class="d-flex align-items-center text-body text-uppercase small">
-            {% include "includes/chevron_icon.html" with direction="left" classes="mr-2" only %}
+        <a href="{% url 'search' %}" class="d-flex align-items-center text-uppercase link-dark small">
+            {% include "includes/chevron_icon.html" with direction="left" classes="me-2" only %}
             {% translate "BACK TO DATASETS SEARCH" %}
         </a>
     </div>
@@ -82,23 +82,23 @@ <h1 class="h2">{{ collection.country }}: {{ collection.title }}</h1>
                     <div class="col-auto mb-3">{# No stretch #}
                         <p class="h5">{% translate "Available formats:" %}</p>
                         <div class="row">
-                            <div class="col text-uppercase text-nowrap text-lg">
+                            <div class="col text-uppercase text-nowrap fs-5">
                                 {% include "includes/check_icon.html" with checked=files.jsonl.years size="24px" only %}
                                 JSON
                             </div>
-                            <div class="col text-uppercase text-nowrap text-lg">
+                            <div class="col text-uppercase text-nowrap fs-5">
                                 {% include "includes/check_icon.html" with checked=files.xlsx.years size="24px" only %}
                                 Excel
                             </div>
-                            <div class="col text-uppercase text-nowrap text-lg">
+                            <div class="col text-uppercase text-nowrap fs-5">
                                 {% include "includes/check_icon.html" with checked=files.csv.years size="24px" only %}
                                 CSV
                             </div>
                         </div>
                     </div>
                     <div class="col-auto mb-3">{# No stretch #}
-                        <a class="d-flex align-items-center px-4 btn btn-info btn-md text-lg text-uppercase" href="#access">
-                            {% include "includes/chevron_icon.html" with direction="right" classes="mr-3 text-xl" only %}
+                        <a class="d-flex align-items-center px-4 btn btn-info btn-md text-uppercase fs-5" href="#access">
+                            {% include "includes/chevron_icon.html" with direction="right" classes="me-3 fs-2" only %}
                             {% translate "ACCESS" %}
                         </a>
                     </div>
@@ -134,7 +134,7 @@ <h2 class="h4 mb-3">{% translate "Overview" %}</h2>
             <dd class="text-break">
 {% if collection.license_custom %}
                 <a href="{{ collection.license_custom.url }}" target="_blank" class="d-block">{{ collection.license_custom.name }}</a>
-                <div class="mt-2 mb-n3 pl-3 border-left small toggleable" id="license">
+                <div class="mt-2 mb-n3 ps-3 border-start small toggleable" id="license">
                     {{ collection.license_custom.description|markdownify }}
                 </div>
 {% else %}
@@ -158,21 +158,21 @@ <h2 class="h4 mb-3">{% translate "Data avaliable" %}</h2s>
         <div class="row">
             <div class="col-md-6 col-lg-4 col-xl-3 mb-3">
                 <h3 class="h6">{% include "includes/check_icon.html" with checked=job.parties_count only %}{% translate "Parties" %}</h3>
-                <dl class="pl-4 list-desc-inline">
+                <dl class="ps-4 list-desc-inline">
                     <dt>{% translate "Count of parties:" %}</dt>
                     <dd>{{ job.parties_count|intcomma }}</dd>
                 </dl>
             </div>
             <div class="col-md-6 col-lg-4 col-xl-3 mb-3">
                 <h3 class="h6">{% include "includes/check_icon.html" with checked=job.plannings_count only %}{% translate "Plannings" %}</h3>
-                <dl class="pl-4 list-desc-inline">
+                <dl class="ps-4 list-desc-inline">
                     <dt>{% translate "Count of planning activities:" %}</dt>
                     <dd>{{ job.plannings_count|intcomma }}</dd>
                 </dl>
             </div>
             <div class="col-md-6 col-lg-4 col-xl-3 mb-3">
                 <h3 class="h6">{% include "includes/check_icon.html" with checked=job.tenders_count only %}{% translate "Tenders" %}</h3>
-                <dl class="pl-4 list-desc-inline">
+                <dl class="ps-4 list-desc-inline">
                     <dt>{% translate "Count of tenders:" %}</dt>
                     <dd>{{ job.tenders_count|intcomma }}
                     </li>
@@ -185,7 +185,7 @@ <h3 class="h6">{% include "includes/check_icon.html" with checked=job.tenders_co
             </div>
             <div class="col-md-6 col-lg-4 col-xl-3 mb-3">
                 <h3 class="h6">{% include "includes/check_icon.html" with checked=job.awards_count only %}{% translate "Awards" %}</h3>
-                <dl class="pl-4 list-desc-inline">
+                <dl class="ps-4 list-desc-inline">
                     <dt>{% translate "Count of awards:" %}</dt>
                     <dd>{{ job.awards_count|intcomma }}
                     </li>
@@ -198,7 +198,7 @@ <h3 class="h6">{% include "includes/check_icon.html" with checked=job.awards_cou
             </div>
             <div class="col-md-6 col-lg-4 col-xl-3 mb-3">
                 <h3 class="h6">{% include "includes/check_icon.html" with checked=job.contracts_count only %}{% translate "Contracts" %}</h3>
-                <dl class="pl-4 list-desc-inline">
+                <dl class="ps-4 list-desc-inline">
                     <dt>{% translate "Count of contracts:" %}</dt>
                     <dd>{{ job.contracts_count|intcomma }}
                     </li>
@@ -211,35 +211,35 @@ <h3 class="h6">{% include "includes/check_icon.html" with checked=job.contracts_
             </div>
             <div class="col-md-6 col-lg-4 col-xl-3 mb-3">
                 <h3 class="h6">{% include "includes/check_icon.html" with checked=job.documents_count only %}{% translate "Documents" %}</h3>
-                <dl class="pl-4 list-desc-inline">
+                <dl class="ps-4 list-desc-inline">
                     <dt>{% translate "Count of documents:" %}</dt>
                     <dd>{{ job.documents_count|intcomma }}</dd>
                 </dl>
             </div>
             <div class="col-md-6 col-lg-4 col-xl-3 mb-3">
                 <h3 class="h6">{% include "includes/check_icon.html" with checked=job.milestones_count only %}{% translate "Milestones" %}</h3>
-                <dl class="pl-4 list-desc-inline">
+                <dl class="ps-4 list-desc-inline">
                     <dt>{% translate "Count of milestones:" %}</dt>
                     <dd>{{ job.milestones_count|intcomma }}</dd>
                 </dl>
             </div>
             <div class="col-md-6 col-lg-4 col-xl-3 mb-3">
                 <h3 class="h6">{% include "includes/check_icon.html" with checked=job.amendments_count only %}{% translate "Amendments" %}</h3>
-                <dl class="pl-4 list-desc-inline">
+                <dl class="ps-4 list-desc-inline">
                     <dt>{% translate "Count of amendments:" %}</dt>
                     <dd>{{ job.amendments_count|intcomma }}</dd>
                 </dl>
             </div>
         </div>
 {% else %}
-        <p class="p-4 rounded-xl bg-light">
+        <p class="p-4 rounded-3 text-bg-light">
             {% translate "This dataset has not yet been retrieved." %}
         </p>
 {% endif %}
 
 {% if collection.additional_data %}
-        <div class="d-flex p-4 rounded-xl bg-primary-20 text-primary">
-            <div class="mt-1 mr-3">
+        <div class="d-flex p-4 rounded-3 bg-primary bg-opacity-10 text-primary">
+            <div class="mt-1 me-3">
                 {# https://icons.getbootstrap.com/icons/gem/ #}
                 <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-gem b-icon" width="1em" height="1em" viewBox="0 0 16 16" role="img" focusable="false" fill="currentColor">
                     <g transform="translate(8 8) scale(1.5 1.5) translate(-8 -8)">
@@ -261,7 +261,7 @@ <h2 class="h4 mb-3">{% translate "Data quality" %}</h2>
     </div>
     <div class="col-sm">
         <h3 class="h5 mb-3">{% translate "Summary" %}</h3>
-        <div class="p-4 rounded-xl bg-light">
+        <div class="p-4 rounded-3 text-bg-light">
 {% if collection.summary %}
             <div class="mb-n3">
                 {{ collection.summary|markdownify }}
@@ -272,7 +272,7 @@ <h3 class="h5 mb-3">{% translate "Summary" %}</h3>
         </div>
 
 {% if collection.last_reviewed %}
-        <p class="mt-3 mb-0 font-italic small">
+        <p class="mt-3 mb-0 fst-italic small">
             {% translate "Last reviewed:" %} {{ collection.last_reviewed|date:"M Y" }}
         </p>
 {% endif %}
@@ -284,7 +284,7 @@ <h3 class="h5">{% translate "Issues found" %}</h3>
 {% for issue in collection.issues %}
             <li class="d-flex mb-n3">
                 {# https://icons.getbootstrap.com/icons/exclamation-circle/ #}
-                <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-circle b-icon mt-1 mr-2" width="1em" height="1em" viewBox="0 0 16 16" role="img" focusable="false" fill="currentColor">
+                <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-circle b-icon mt-1 me-2" width="1em" height="1em" viewBox="0 0 16 16" role="img" focusable="false" fill="currentColor">
                     <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                     <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
                 </svg>
@@ -297,7 +297,7 @@ <h3 class="h5">{% translate "Issues found" %}</h3>
 </div>
 
 <div class="py-5 border-top" id="access">
-    <div class="p-5 rounded-xl rounded-top-left-xl bg-info">
+    <div class="p-5 rounded-3 rounded-top-start-xl text-bg-info">
         <h2>{% translate "Access data" %}</h2>
 
         <p>{% translate "This OCDS dataset is available for download in JSON, Excel or CSV format. You can download the data for contracting processes in a specific year or for all time." %}</p>
@@ -349,11 +349,11 @@ <h3>CSV</h3>
     </div>
 </div>
 
-<div class="mb-4 p-5 rounded-xl rounded-top-left-xl bg-primary text-white">
+<div class="mb-4 p-5 rounded-3 rounded-top-start-xl bg-primary text-white">
     <div class="row">
         <div class="col-md d-flex align-items-center mb-3 mb-md-0">
             {# https://icons.getbootstrap.com/icons/question-circle/ #}
-            <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-question-circle b-icon mr-3" width="1em" height="1em" viewBox="0 0 16 16" role="img" focusable="false" fill="currentColor">
+            <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-question-circle b-icon me-3" width="1em" height="1em" viewBox="0 0 16 16" role="img" focusable="false" fill="currentColor">
                 <g transform="translate(8 8) scale(1.5 1.5) translate(-8 -8)">
                     <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                     <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
@@ -362,8 +362,8 @@ <h3>CSV</h3>
             {% translate "Have questions, feedback on this dataset or content on this page?" %}
         </div>
         <div class="col-md-auto d-flex align-items-center">
-            <a href="mailto:[email protected]?{% feedback_query_string_parameters %}" class="text-white">
-                {% include "includes/chevron_icon.html" with direction="right" classes="mr-2" only %} {% translate "Contact Data Support Team" %}
+            <a href="mailto:[email protected]?{% feedback_query_string_parameters %}" class="link-light">
+                {% include "includes/chevron_icon.html" with direction="right" classes="me-2" only %} {% translate "Contact Data Support Team" %}
             </a>
         </div>
     </div>

data_registry/templates/header.html

@@ -19,19 +19,19 @@
             </svg>
         </div>
 
-        <div class="col-auto ml-auto">
+        <div class="col-auto ms-auto">
 {# https://docs.djangoproject.com/en/4.0/topics/i18n/translation/#the-set-language-redirect-view #}
             <form action="{% url 'set_language' %}" method="post" class="form-inline">
                 <input type="hidden" name="next" value="{% redirect_to %}">
-                <select name="language" aria-label="{% translate 'Select language' %}" onchange="this.form.submit()" class="custom-select custom-select-lg">
+                <select name="language" aria-label="{% translate 'Select language' %}" onchange="this.form.submit()" class="form-select form-select-lg">
 {% for language in languages %}
                     <option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected{% endif %}>
                         {{ language.name_local }}
                     </option>
 {% endfor %}
                 </select>
                 <noscript>
-                    <input type="submit" value="➜" class="btn btn-sm btn-info ml-sm-2 mt-2 mt-sm-0">
+                    <input type="submit" value="➜" class="btn btn-sm btn-info ms-sm-2 mt-2 mt-sm-0">
                 </noscript>
             </form>
         </div>

data_registry/templates/includes/check_icon.html

@@ -1,13 +1,13 @@
 {% spaceless %}
 {% if checked %}
 {# https://icons.getbootstrap.com/icons/check-circle/ #}
-<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-check-circle b-icon mr-2 text-success" width="{{ size|default:'1em' }}" height="{{ size|default:'1em' }}" viewBox="0 0 16 16" role="img" focusable="false" fill="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-check-circle b-icon me-2 text-success" width="{{ size|default:'1em' }}" height="{{ size|default:'1em' }}" viewBox="0 0 16 16" role="img" focusable="false" fill="currentColor">
   <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
   <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
 </svg>
 {% else %}
 {# https://icons.getbootstrap.com/icons/x-circle/ #}
-<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-x-circle b-icon mr-2 text-secondary" width="{{ size|default:'1em' }}" height="{{ size|default:'1em' }}" viewBox="0 0 16 16" role="img" focusable="false" fill="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-x-circle b-icon me-2 text-secondary" width="{{ size|default:'1em' }}" height="{{ size|default:'1em' }}" viewBox="0 0 16 16" role="img" focusable="false" fill="currentColor">
   <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
   <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
 </svg>

data_registry/templates/includes/checkboxes.html

@@ -3,12 +3,12 @@
 <h3 class="h5 mt-4">{{ title }}</h3>
 <div class="filterable" data-key="{{ key }}" data-method="append">
 {% for value, label in items %}
-    <div class="custom-control custom-checkbox">
-        <input type="checkbox" value="{{ value }}" class="custom-control-input" id="f-{{ value }}"{% if value in request.GET|getlist:key %} checked{% endif %}{% if not facet_counts|get_item:value %} disabled{% endif %}>
-        <label class="custom-control-label" for="f-{{ value }}">
+    <div class="form-check">
+        <input type="checkbox" value="{{ value }}" class="form-check-input" id="f-{{ value }}"{% if value in request.GET|getlist:key %} checked{% endif %}{% if not facet_counts|get_item:value %} disabled{% endif %}>
+        <label class="form-check-label" for="f-{{ value }}">
             {{ label }}
     {% if facet_counts|get_item:value %}
-            <span class="badge badge-pill badge-info">{{ facet_counts|get_item:value }}</span>
+            <span class="badge rounded-pill text-bg-info">{{ facet_counts|get_item:value }}</span>
     {% endif %}
         </label>
     </div>