Migrate to BS5 CSS classes

This commit is contained in:
Stefan Wehrmeyer 2022-08-09 17:18:14 +01:00
parent 1ae085c39c
commit f6b2b49045
8 changed files with 31 additions and 33 deletions

View file

@ -41,20 +41,20 @@
<div class="d-md-flex my-4 align-items-center"> <div class="d-md-flex my-4 align-items-center">
<ul class="list-unstyled d-flex m-0"> <ul class="list-unstyled d-flex m-0">
<li> <li>
<span class="badge badge-{{ object.get_status_css }} mr-2"> <span class="badge text-bg-{{ object.get_status_css }} me-2">
{{ object.get_status_display }} {{ object.get_status_display }}
</span> </span>
</li> </li>
{% for cat in object.categories.all %} {% for cat in object.categories.all %}
<li> <li>
<a href="{{ section.get_absolute_url }}" class="badge badge-light mr-2"> <a href="{{ section.get_absolute_url }}" class="badge text-bg-light me-2">
{{ cat.name }} {{ cat.name }}
</a> </a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
<div class="ml-auto mt-2 mt-md-0"> <div class="ms-auto mt-2 mt-md-0">
{% show_follow "govplan" object %} {% show_follow "govplan" object %}
</div> </div>
</div> </div>
@ -79,7 +79,7 @@
{% endif %} {% endif %}
</span> </span>
{% for ref in refs %} {% for ref in refs %}
<a href="{{ ref }}" class="badge badge-light mr-2" target="_blank"> <a href="{{ ref }}" class="badge text-bg-light me-2" target="_blank">
{{ forloop.counter }} {{ forloop.counter }}
</a> </a>
{% endfor %} {% endfor %}
@ -175,7 +175,7 @@
<div class="p-3 p-md-4"> <div class="p-3 p-md-4">
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<p>Gibt es Neuigkeiten zu diesem Vorhaben, die wir noch nicht erfasst haben?</p> <p>Gibt es Neuigkeiten zu diesem Vorhaben, die wir noch nicht erfasst haben?</p>
<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#govplanupdate-proposal"> <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#govplanupdate-proposal">
Entwicklung melden Entwicklung melden
</button> </button>
<div class="modal" data-teleport="body" tabindex="-1" role="dialog" id="govplanupdate-proposal"> <div class="modal" data-teleport="body" tabindex="-1" role="dialog" id="govplanupdate-proposal">
@ -185,8 +185,7 @@
<h5 class="modal-title"> <h5 class="modal-title">
Neue Entwicklung melden Neue Entwicklung melden
</h5> </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}">
<span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">

View file

@ -35,8 +35,8 @@ body {
<div class="row justify-content-between align-items-center"> <div class="row justify-content-between align-items-center">
{% block bottom_row %} {% block bottom_row %}
<div class="col-4"> <div class="col-4">
<div class="badge badge-{{ object.get_status_css }} p-3 d-inline-flex"> <div class="badge text-bg-{{ object.get_status_css }} p-3 d-inline-flex">
<i class="fa fa-circle mr-3"></i> <i class="fa fa-circle me-3"></i>
<span class="h2 m-0"> <span class="h2 m-0">
{{ object.get_status_display }} {{ object.get_status_display }}
</span> </span>
@ -44,9 +44,11 @@ body {
</div> </div>
<div class="col-4"> <div class="col-4">
{% if object.due_date %} {% if object.due_date %}
<div class="media {% if object.is_overdue %}text-danger{% endif %}"> <div class="d-flex {% if object.is_overdue %}text-danger{% endif %}">
<span class="fa fa-calendar mr-3"></span> <div class="flex-shrink-0">
<div class="media-body"> <span class="fa fa-calendar"></span>
</div>
<div class="flex-grow-1 ms-3">
<h2 class="m-0"> <h2 class="m-0">
{{ object.due_date | date }} {{ object.due_date | date }}
</h2> </h2>
@ -55,7 +57,7 @@ body {
{% endif %} {% endif %}
</div> </div>
{% endblock bottom_row %} {% endblock bottom_row %}
<div class="col-auto ml-auto"> <div class="col-auto ms-auto">
<img height="80" src="https://static.frag-den-staat.de/static/img/header_logo.580ed694906e.svg" alt="FragDenStaat.de"/> <img height="80" src="https://static.frag-den-staat.de/static/img/header_logo.580ed694906e.svg" alt="FragDenStaat.de"/>
</div> </div>
</div> </div>

View file

@ -27,8 +27,8 @@
<span href="{{ object.get_absolute_url }}" class="action-link text-blue-600"> <span href="{{ object.get_absolute_url }}" class="action-link text-blue-600">
→ mehr lesen → mehr lesen
</span> </span>
<div class="ml-auto"> <div class="ms-auto">
<span class="badge badge-{{ object.get_status_css }}"> <span class="badge text-bg-{{ object.get_status_css }}">
{{ object.get_status_display }} {{ object.get_status_display }}
</span> </span>
</div> </div>

View file

@ -4,10 +4,10 @@
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<span class="text-gray-700{% if not instance.extra_classes or "progress-lg" not in instance.extra_classes %} small{% endif %}">{{ progress.count }} Vorhaben</span> <span class="text-gray-700{% if not instance.extra_classes or "progress-lg" not in instance.extra_classes %} small{% endif %}">{{ progress.count }} Vorhaben</span>
<div class="flex-grow-1 ml-2"> <div class="flex-grow-1 ms-2">
<div class="progress" {% if "progress-lg" in instance.extra_classes %}style="height: 1.5rem;"{% endif %}> <div class="progress" {% if "progress-lg" in instance.extra_classes %}style="height: 1.5rem;"{% endif %}>
{% for section in progress.sections %} {% for section in progress.sections %}
<div class="progress-bar bg-{{ section.css_class }}" role="progressbar" style="width: {{ section.css_percentage }}%;" aria-valuenow="{{ section.css_percentage }}" aria-valuemin="0" aria-valuemax="100" aria-label="{{ section.percentage }}% {{ section.label }}" title="{{ section.percentage }}% {{ section.label }}" data-toggle="tooltip" data-placement="top"> <div class="progress-bar bg-{{ section.css_class }}" role="progressbar" style="width: {{ section.css_percentage }}%;" aria-valuenow="{{ section.css_percentage }}" aria-valuemin="0" aria-valuemax="100" aria-label="{{ section.percentage }}% {{ section.label }}" title="{{ section.percentage }}% {{ section.label }}" data-bs-toggle="tooltip" data-placement="top">
</div> </div>
{% endfor %} {% endfor %}
</div> </div>

View file

@ -8,12 +8,10 @@
<option value="{{ status }}">{{ label }}</option> <option value="{{ status }}">{{ label }}</option>
{% endfor %} {% endfor %}
</select> </select>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit"> <button class="btn btn-outline-secondary" type="submit">
{% translate "Search" %} {% translate "Search" %}
</button> </button>
</div> </div>
</div>
{% if instance.government_id %} {% if instance.government_id %}
<input type="hidden" name="government" value="{{ instance.government_id }}"/> <input type="hidden" name="government" value="{{ instance.government_id }}"/>
{% endif %} {% endif %}
@ -24,8 +22,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">{% trans "Search results" %}</h5> <h5 class="modal-title">{% trans "Search results" %}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}">
<span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">

View file

@ -20,7 +20,7 @@
<div class="box-card-header tight-margin d-flex align-items-center has-background p-3 p-md-4 bg-blue-20" id="govsection-{{ section.pk }}"> <div class="box-card-header tight-margin d-flex align-items-center has-background p-3 p-md-4 bg-blue-20" id="govsection-{{ section.pk }}">
<h3 class="h5 m-0">{{ section.title }}</h3> <h3 class="h5 m-0">{{ section.title }}</h3>
{% if section.icon %} {% if section.icon %}
<div class="ml-auto"> <div class="ms-auto">
<div class="box-card-icon position-static bg-white"> <div class="box-card-icon position-static bg-white">
<i class="fa fa-{{ section.icon }}"></i> <i class="fa fa-{{ section.icon }}"></i>
</div> </div>

View file

@ -7,7 +7,7 @@
<div class="box-card-header bg-blue-20 d-flex justify-content-center p-3 p-md-4 tight-margin flex-column"> <div class="box-card-header bg-blue-20 d-flex justify-content-center p-3 p-md-4 tight-margin flex-column">
<div> <div>
{% if show_context %} {% if show_context %}
<span class="badge badge-blue-100 badge-pill float-md-right mb-2 mb-md-0 ml-md-2 mt-md-1"> <span class="badge text-bg-blue-100 rounded-pill float-md-right mb-2 mb-md-0 ms-md-2 mt-md-1">
{{ update.plan.get_section }} {{ update.plan.get_section }}
</span> </span>
{% endif %} {% endif %}
@ -53,7 +53,7 @@
<a href="{{ update.get_absolute_url }}" class="action-link">→ zum Vorhaben</a> <a href="{{ update.get_absolute_url }}" class="action-link">→ zum Vorhaben</a>
{% else %} {% else %}
{% if update.url %} {% if update.url %}
<a href="{{ update.url }}" class="action-link mr-3" target="_blank" rel="noopener">→ mehr auf {{ update.get_url_domain }} lesen…</a> <a href="{{ update.url }}" class="action-link me-3" target="_blank" rel="noopener">→ mehr auf {{ update.get_url_domain }} lesen…</a>
{% endif %} {% endif %}
{% if update.foirequest %} {% if update.foirequest %}

View file

@ -29,7 +29,7 @@
<div class="col col-lg-12"> <div class="col col-lg-12">
<div class="box-card border-yellow md:shadow-yellow bg-white p-3 p-md-4 p-lg-5 tight-margin"> <div class="box-card border-yellow md:shadow-yellow bg-white p-3 p-md-4 p-lg-5 tight-margin">
<div class="row mx-0"> <div class="row mx-0">
<div class="col col-12 col-md-12 pl-0 tight-margin"> <div class="col col-12 col-md-12 ps-0 tight-margin">
<h1 class="mt-0 h2"> <h1 class="mt-0 h2">
{{ object.title }} {{ object.title }}
</h1> </h1>
@ -45,11 +45,11 @@
<div class="mt-5"> <div class="mt-5">
{% include "froide_govplan/plugins/progress.html" with object_list=plans %} {% include "froide_govplan/plugins/progress.html" with object_list=plans %}
<p class="small text-gray-700 mt-3 no-hyphens"> <p class="small text-gray-700 mt-3 no-hyphens">
<span class="text-nowrap mr-1"><i class="fa fa-circle text-light"></i>&nbsp;nicht begonnen</span> <span class="text-nowrap me-1"><i class="fa fa-circle text-light"></i>&nbsp;nicht begonnen</span>
<span class="text-nowrap mr-1"><i class="fa fa-circle text-primary"></i>&nbsp;begonnen</span> <span class="text-nowrap me-1"><i class="fa fa-circle text-primary"></i>&nbsp;begonnen</span>
<span class="text-nowrap mr-1"><i class="fa fa-circle text-warning"></i>&nbsp;teilweise umgesetzt</span> <span class="text-nowrap me-1"><i class="fa fa-circle text-warning"></i>&nbsp;teilweise umgesetzt</span>
<span class="text-nowrap mr-1"><i class="fa fa-circle text-success"></i>&nbsp;umgesetzt</span> <span class="text-nowrap me-1"><i class="fa fa-circle text-success"></i>&nbsp;umgesetzt</span>
<span class="text-nowrap mr-1"><i class="fa fa-circle text-danger"></i>&nbsp;verschoben</span> <span class="text-nowrap me-1"><i class="fa fa-circle text-danger"></i>&nbsp;verschoben</span>
</p> </p>
</div> </div>
</div> </div>