Html enhancements

* adds some bootstrap enhancements for responsiveness
This commit is contained in:
mipel 2021-07-21 13:27:35 +02:00
parent 5b49222b74
commit 4ef6c32ea2
4 changed files with 44 additions and 32 deletions

View File

@ -11,11 +11,13 @@
{% trans 'Intervention' %} {% trans 'Intervention' %}
</h4> </h4>
<div class="row"> <div class="row">
<div class="col-sm-5"> <a href="{% url 'intervention:index' %}">
<div class="qs-box d-flex justify-content-center align-items-center"> <div class="col-sm-5">
{% fa5_icon 'pencil-ruler' %} <div class="qs-box d-flex justify-content-center align-items-center">
{% fa5_icon 'pencil-ruler' %}
</div>
</div> </div>
</div> </a>
<div class="col-sm"> <div class="col-sm">
<div class="col-md mb-2"> <div class="col-md mb-2">
<div>{% trans 'Total' %}</div> <div>{% trans 'Total' %}</div>
@ -47,11 +49,13 @@
{% trans 'Compensation' %} {% trans 'Compensation' %}
</h4> </h4>
<div class="row"> <div class="row">
<div class="col-sm-5"> <a href="{% url 'compensation:index' %}">
<div class="qs-box d-flex justify-content-center align-items-center"> <div class="col-sm-5">
{% fa5_icon 'leaf' %} <div class="qs-box d-flex justify-content-center align-items-center">
{% fa5_icon 'leaf' %}
</div>
</div> </div>
</div> </a>
<div class="col-sm"> <div class="col-sm">
<div class="col-md mb-2"> <div class="col-md mb-2">
<div>{% trans 'Total' %}</div> <div>{% trans 'Total' %}</div>
@ -84,11 +88,13 @@
{% trans 'Eco-account' %} {% trans 'Eco-account' %}
</h4> </h4>
<div class="row"> <div class="row">
<div class="col-sm-5"> <a href="{% url 'home' %}">
<div class="qs-box d-flex justify-content-center align-items-center"> <div class="col-sm-5">
{% fa5_icon 'tree' %} <div class="qs-box d-flex justify-content-center align-items-center">
{% fa5_icon 'tree' %}
</div>
</div> </div>
</div> </a>
<div class="col-sm"> <div class="col-sm">
<div class="col-md mb-2"> <div class="col-md mb-2">
<div>{% trans 'Total' %}</div> <div>{% trans 'Total' %}</div>
@ -101,7 +107,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm-12 col-lg">
<div class="col-sm"> <div class="col-sm">
<div class="row my-1"> <div class="row my-1">
<a href="{% url 'home' %}"> <a href="{% url 'home' %}">
@ -117,7 +123,7 @@
</div> </div>
</div> </div>
<div class="col-sm"> <div class="col-sm-12 col-lg">
<div class="col-sm"> <div class="col-sm">
<div class="row my-1"> <div class="row my-1">
<a href="{% url 'home' %}"> <a href="{% url 'home' %}">

View File

@ -1,24 +1,28 @@
{% load i18n ksp_filters %} {% load i18n ksp_filters %}
<div id="server-messages" class="col-md px-3"> <div id="server-messages" class="px-3">
<div class="row px-3"> <div class="row px-3">
{% for msg in msgs %} {% for msg in msgs %}
<div class="card col-md {{msg.importance|bootstrap_cls}}"> <div class="col-sm-12 col-md-12 col-lg">
<div class="card-body"> <div class="card {{msg.importance|bootstrap_cls}} h-100">
<h6 class="card-title"> <div class="card-body">
{{msg.subject}} <h6 class="card-title">
</h6> {{msg.subject}}
<small>{% trans 'Published on' %} {{msg.publish_on}}</small> </h6>
<article class="card-text">{{msg.body|safe}}</article> <small>{% trans 'Published on' %} {{msg.publish_on}}</small>
<article class="card-text">{{msg.body|safe}}</article>
</div>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
<div class="card col-md {{msg.importance|bootstrap_cls}}"> <div class="col-sm-12 col-md-12 col-lg">
<a class="w-100 h-100" href="{% url 'news:index' %}"> <div class="card {{msg.importance|bootstrap_cls}} h-100">
<div class="card-body d-flex align-items-center justify-content-center h-100"> <a class="w-100 h-100" href="{% url 'news:index' %}">
<h5 class="card-title">{% trans 'Older ...' %}</h5> <div class="card-body d-flex align-items-center justify-content-center h-100">
</div> <h5 class="card-title">{% trans 'Older ...' %}</h5>
</a> </div>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,8 +1,10 @@
{% load i18n fontawesome_5 %} {% load i18n fontawesome_5 %}
<nav class="navbar navbar-expand-lg navbar-dark"> <nav class="navbar navbar-expand-lg navbar-dark">
<div class="nav-icon mr-5" title="{% trans 'Kompensationsverzeichnis Service Portal' %}"> <a href="{% url 'home' %}">
<strong class="">{% trans 'KSP' %}</strong> <div class="nav-icon badge mr-5" title="{% trans 'Kompensationsverzeichnis Service Portal' %}">
</div> <strong class="">{% trans 'KSP' %}</strong>
</div>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>

View File

@ -3,7 +3,7 @@
{% block body %} {% block body %}
<div class="row"> <div class="row">
<div class="col-md-3 border"> <div class="col-md-6 col-lg-4 border">
<table class="table"> <table class="table">
<tr> <tr>
<th scope="row">{% trans 'Username' %}</th> <th scope="row">{% trans 'Username' %}</th>