fixes dashboard forms layout

This commit is contained in:
artus
2018-10-12 11:46:23 +02:00
parent 2f282f18e5
commit b09aa6b692
5 changed files with 51 additions and 64 deletions

View File

@@ -10,8 +10,8 @@
{% block page_content %} {% block page_content %}
{% load tables %} {% load tables %}
<div class="col-lg-6 col-md-12"> <div class="col-lg-6 col-md-12">
<div class="card border-dark"> <div class="card rounded-bottom">
<div class="card-header">Planning</div> <div class="card-header rounded-0 py-2 bg-dark text-white">Planning</div>
<div class="card-body"> <div class="card-body">
<h6 class="card-title">Prochaine maraude</h6> <h6 class="card-title">Prochaine maraude</h6>
<p class="card-text"> <p class="card-text">
@@ -26,7 +26,7 @@
Aucune maraude prévue. Aucune maraude prévue.
{% endif %} {% endif %}
</p> </p>
<a href="{% url 'maraudes:planning' %}" class="card-link">Voir le planning</a> <a href="{% url 'maraudes:planning' %}" class="card-link text-primary">Voir le planning</a>
</div> </div>
{% if derniers_sujets_rencontres %} {% if derniers_sujets_rencontres %}
{% table derniers_sujets_rencontres cols=3 cell_template="maraudes/table_cell_derniers_sujets.html" header="Ces derniers temps..." %} {% table derniers_sujets_rencontres cols=3 cell_template="maraudes/table_cell_derniers_sujets.html" header="Ces derniers temps..." %}
@@ -37,8 +37,8 @@
</div> </div>
{% if user.is_superuser and missing_cr %} {% if user.is_superuser and missing_cr %}
<div class="card border-warning my-3"> <div class="card border-warning rounded-bottom my-3">
<div class="card-header"> <div class="card-header py-2 bg-dark text-warning rounded-0">
Compte-rendus en retard Compte-rendus en retard
</div> </div>
{% table missing_cr cols=2 cell_template="maraudes/table_cell_missing_cr.html" %} {% table missing_cr cols=2 cell_template="maraudes/table_cell_missing_cr.html" %}
@@ -46,21 +46,22 @@
{% endif %} {% endif %}
</div> </div>
<div class="col-md-12 col-lg-6"> <div class="col-md-12 col-lg-6">
<div class="card"> <div class="card rounded-bottom">
<div class="card-header"> <div class="card-header rounded-0 bg-dark text-white">
<ul class="nav nav-tabs card-header-tabs"> <ul class="nav nav-tabs card-header-tabs" id="addNote" role="tablist">
<li class="nav-item"><strong class="nav-text pr-2">Ajouter </strong></li> <li class="nav-item"><strong class="nav-text pr-2">Ajouter </strong></li>
<li class="nav-item"><a class="nav-link active " role="button" data-toggle="collapse" href="#noteNote" aria-expanded="false" aria-controls="noteNote">Note</a></li> <li class="nav-item">
<li class="nav-item"><a class="nav-link" role="button" data-toggle="collapse" href="#noteAppel" aria-expanded="false" aria-controls="noteAppel">Appel</a></li> <a class="nav-link" role="tab" data-toggle="tab" href="#noteNote" aria-expanded="false" aria-controls="noteNote">Note</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="collapse" href="#noteSignalement" aria-expanded="false" aria-controls="noteSignalement">Signalement</a></li> <li class="nav-item"><a class="nav-link active" role="tab" data-toggle="tab" href="#noteAppel" aria-expanded="false" aria-controls="noteAppel">Appel</a></li>
<li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#noteSignalement" aria-expanded="false" aria-controls="noteSignalement">Signalement</a></li>
</ul> </ul>
</div> </div>
<div class="card-body"> <div class="card-body tab-content">
<div class="collapse show" id="noteNote"><div class="card card-body">Note</div></div> <div class="tab-pane fade" id="noteNote"><div class="card card-body">Note</div></div>
<div class="collapse" id="noteAppel"> <div class="tab-pane fade show active" id="noteAppel" role="tabpanel">
{% include "notes/form_appel_inner.html" with form=appel_form %} {% include "notes/form_appel_inner.html" with form=appel_form %}
</div> </div>
<div class="collapse" id="noteSignalement"> <div class="tab-pane fade" id="noteSignalement">
{% include "notes/form_signalement_inner.html" with form=signalement_form %} {% include "notes/form_signalement_inner.html" with form=signalement_form %}
</div> </div>
</div> </div>

View File

@@ -1,17 +1,18 @@
{% load bootstrap4 %} {% load bootstrap4 %}
<form action="" method="POST">{% csrf_token %} <form action="" method="POST">{% csrf_token %}
{% with "inline" as layout %} <div class="form-row py-1">
<div class="form-{{layout}} well well-sm text-center"> {% with layout="inline" grp_cls="col" sz="small" %}
{% bootstrap_field form.created_date layout=layout %} {% bootstrap_field form.created_date size=sz form_group_class=grp_cls layout=layout %}
{% bootstrap_field form.created_time layout=layout %} {% bootstrap_field form.created_time size=sz form_group_class=grp_cls layout=layout %}
{% bootstrap_field form.entrant layout=layout %} {% endwith %}
</div> {% endwith %} </div>
{% with "horizontal" as layout %} {% bootstrap_field form.entrant size=sz%}
<div class="form-{{layout}}"> <hr />
{% bootstrap_field form.sujet layout=layout %} {% bootstrap_field form.sujet show_label=False %}
{% bootstrap_field form.text layout=layout %} {% bootstrap_field form.text show_label=False %}
</div> {% endwith %} <div class="ml-auto">
<div class="pull-right">{% bootstrap_button "Enregistrer l'appel" button_type="submit" %}</div> {% bootstrap_button "Enregistrer l'appel" button_type="submit" button_class="btn-primary btn-sm btn-block" %}
</div>
</form> </form>
{{ form.media.js }}{{ form.media.css }} {{ form.media.js }}{{ form.media.css }}

View File

@@ -1,27 +1,22 @@
{% load bootstrap4 %} {% load bootstrap4 %}
<form action="" method="POST">{% csrf_token %} <form action="" method="POST">{% csrf_token %}
{% bootstrap_form_errors form %} {% bootstrap_form_errors form %}
{% with "inline" as layout %} {% with layout="inline" grp_cls="col" sz="small" %}
<div class="form-group form-{{layout}} well"> <div class="form-row p-0 py-1">
<label class="control-label col-md-2" for="id_source"> {% bootstrap_field form.created_date size=sz form_group_class=grp_cls layout=layout %}
Source {% bootstrap_field form.created_time size=sz form_group_class=grp_cls layout=layout %}
</label>
{% bootstrap_field form.source layout=layout %}
{% bootstrap_field form.created_date layout=layout %}
{% bootstrap_field form.created_time layout=layout %}
</div> {% endwith %}
<div class="well">
{% with "horizontal" as layout %}
<div class="form-group form-{{layout}}">
{% bootstrap_field form.nom layout=layout %}
{% bootstrap_field form.prenom layout=layout %}
{% bootstrap_field form.genre layout=layout %}
{% bootstrap_field form.age layout=layout %}
</div> {% endwith %}
</div> </div>
{% with "horizontal" as layout %} {% bootstrap_field form.source size=sz layout="horizontal" %}
<div class="form-group form-{{layout}}"> <hr />
{% bootstrap_field form.text layout=layout %} <div class="form-row p-0 py-1">
</div> {% endwith %} {% bootstrap_field form.nom size=sz form_group_class=grp_cls layout=layout %}
<div class="pull-right">{% bootstrap_button "Enregistrer le signalement" button_type="submit" %}</div> {% bootstrap_field form.prenom size=sz form_group_class=grp_cls layout=layout %}
</div>
<div class="form-row p-0 pb-3">
{% bootstrap_field form.genre size=sz form_group_class=grp_cls layout=layout %}
{% bootstrap_field form.age size=sz form_group_class=grp_cls layout=layout %}
</div>
{% endwith %}
{% bootstrap_field form.text show_label=False placeholder="Informations du signalement..." %}
{% bootstrap_button "Enregistrer le signalement" button_type="submit" button_class="btn-primary btn-sm btn-block" %}
</form> </form>

View File

@@ -74,18 +74,6 @@ NOSE_ARGS = [
"--cover-package=website,maraudes,notes,utilisateurs", "--cover-package=website,maraudes,notes,utilisateurs",
] ]
# bootstrap3
BOOTSTRAP3 = {
# The URL to the jQuery JavaScript file
'base_url': os.path.join(STATIC_URL, 'css', 'bootstrap/'),
'jquery_url': os.path.join(STATIC_URL, 'scripts', 'jquery.min.js'),
'include_jquery': True,
# Label class to use in horizontal forms
'horizontal_label_class': 'col-md-2',
# Field class to use in horizontal forms
'horizontal_field_class': 'col-md-10',
}
# django-select2 # django-select2
SELECT2_JS = 'scripts/select2.min.js' SELECT2_JS = 'scripts/select2.min.js'
SELECT2_CSS = 'css/select2.min.css' SELECT2_CSS = 'css/select2.min.css'

View File

@@ -3,8 +3,8 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<title>{% block title %}La maraude{% endblock %}</title> <title>{% block title %}La maraude{% endblock %}</title>
{% bootstrap_javascript %}
{% bootstrap_css %} {% bootstrap_css %}
{% bootstrap_javascript jquery="full" %}
<link rel="stylesheet" type="text/css" href="/static/css/base.css" /> <link rel="stylesheet" type="text/css" href="/static/css/base.css" />
<link rel="stylesheet" type="text/css" href="/static/css/dashboard.css" /> <link rel="stylesheet" type="text/css" href="/static/css/dashboard.css" />
{% block extrastyle %}{% endblock %} {% block extrastyle %}{% endblock %}
@@ -66,8 +66,10 @@
</nav> </nav>
<main role="main" class="col-md-10 ml-sm-auto px-4"> <main role="main" class="col-md-10 ml-sm-auto px-4">
<div class="container"> <div class="container">
<div class="row pt-4"> <div class="row pt-4 d-flex justify-content-center">
{% bootstrap_messages %} {% bootstrap_messages %}
</div>
<div class="row">
{% block page_content %}{% endblock %} {% block page_content %}{% endblock %}
</div> </div>
</div> </div>