WIP: petitscours: UI improvements #843

Draft
llanteri wants to merge 6 commits from petitscours into master
4 changed files with 137 additions and 6 deletions
Showing only changes of commit b0c8d81670 - Show all commits

View file

@ -122,4 +122,4 @@ td {
color:#FFF; color:#FFF;
background-color:rgb(222, 130, 107); background-color:rgb(222, 130, 107);
} }

View file

@ -0,0 +1,77 @@
/** Honteusement copié-collé de bda.css **/
/** JQuery-Confirm box **/
.jconfirm .jconfirm-bg {
background-color: rgb(0,0,0,0.6) !important;
}
.jconfirm .jconfirm-box {
padding:0;
border-radius:0 !important;
font-family:Roboto;
}
.jconfirm .jconfirm-box .content-pane {
border-bottom:1px solid #ddd;
margin: 0px !important;
}
.jconfirm .jconfirm-box .content {
padding: 5px;
}
.jconfirm .jconfirm-box .content-pane {
border-bottom:1px solid #ddd;
margin: 0px !important;
}
.jconfirm .jconfirm-box .content {
padding: 10px;
}
.jconfirm .jconfirm-box .content a,
.jconfirm .jconfirm-box .content a:hover {
color: #D81138;
font-weight: bold;
}
.jconfirm .jconfirm-box .buttons {
margin-top:-6px; /* j'arrive pas à voir pk y'a un espace au dessus sinon... */
padding:0;
height:40px;
}
.jconfirm .jconfirm-box .buttons button {
min-width:40px;
height:100%;
margin:0;
margin:0 !important;
border-radius: 0 !important;
}
.jconfirm .jconfirm-box .buttons button:first-child:focus,
.jconfirm .jconfirm-box .buttons button:first-child:hover {
color:#FFF !important;
background:forestgreen !important;
}
.jconfirm .jconfirm-box .buttons button:nth-child(2):focus,
.jconfirm .jconfirm-box .buttons button:nth-child(2):hover {
color:#FFF !important;
background:#D93A32 !important;
}
.jconfirm .jconfirm-box div.title-c .title {
display: block;
padding:0 15px;
height:40px;
line-height:40px;
font-family:Dosis;
font-size:20px;
font-weight:bold;
color:#FFF;
background-color:rgb(222, 130, 107);
}

View file

@ -1,4 +1,11 @@
{% extends "petitscours/base_title.html" %} {% extends "petitscours/base_title.html" %}
{% load static %}
{% block extra_head %}
<script type="text/javascript" src="{% static 'kfet/vendor/jquery/jquery-confirm.min.js' %}"></script>
<link type="text/css" rel="stylesheet" href="{% static 'vendor/jquery/jquery-confirm.css' %}" />
<link type="text/css" rel="stylesheet" href="{% static 'petitscours/css/confirmation.css' %}" />
{% endblock %}
{% block realcontent %} {% block realcontent %}
<h2> <h2>
@ -27,7 +34,7 @@
{% endif %} {% endif %}
<form method="post"> <form method="post" id="traitement-form">
{% csrf_token %} {% csrf_token %}
{% if redo %}<input type="hidden" name="redo" value="1" />{% endif %} {% if redo %}<input type="hidden" name="redo" value="1" />{% endif %}
{% if proposals %} {% if proposals %}
@ -52,12 +59,32 @@
{% endwith %} {% endwith %}
<input type="hidden" name="attribdata" value="{{ attribdata }}" /> <input type="hidden" name="attribdata" value="{{ attribdata }}" />
<input class="btn btn-primary pull-right" type="submit" value="Valider le {% if redo %}re{% endif %}traitement de la demande" /> <input class="btn btn-primary pull-right" type="submit" value="Valider le {% if redo %}re{% endif %}traitement de la demande" />
</form>
{% else %} {% else %}
<h3>Impossible de trouver des propositions pour cette demande</h3> <h3>Impossible de trouver des propositions pour cette demande</h3>
<div class="error" style="font-size: 1.6em; margin-top: 10px;">Traitement manuel obligatoire !</div> <div class="error" style="font-size: 1.6em; margin-top: 10px;">Traitement manuel obligatoire !</div>
<input type="hidden" name="manual" value="1" /> <input type="hidden" name="manual" value="1" />
<input class="btn btn-primary pull-right" type="submit" value="Marquer comme traitée" /> <input class="btn btn-primary pull-right" type="button" onclick="confirmation()" value="Marquer comme traitée" />
<script type="text/javascript">
function confirmation() {
$.confirm({
title: 'Marquer comme traitée',
columnClass: 'col-md-6 col-md-offset-3',
content: "Voulez-vous vraiment marquer la demande comme traitée ? \
Aucun traitement automatique n'aura lieu.",
backgroundDismiss: true,
opacity: 1,
animation:'top',
closeAnimation:'bottom',
keyboardEnabled: true,
confirmButton: '<span class="glyphicon glyphicon-ok"></span>',
cancelButton: '<span class="glyphicon glyphicon-remove"></span>',
confirm: function() {
charte_ok = true ;
$("#traitement-form").submit();
},
});
}
</script>
{% endif %} {% endif %}
</form> </form>

View file

@ -1,6 +1,12 @@
{% extends "petitscours/base_title.html" %} {% extends "petitscours/base_title.html" %}
{% load static %} {% load static %}
{% block extra_head %}
<script type="text/javascript" src="{% static 'kfet/vendor/jquery/jquery-confirm.min.js' %}"></script>
<link type="text/css" rel="stylesheet" href="{% static 'vendor/jquery/jquery-confirm.css' %}" />
<link type="text/css" rel="stylesheet" href="{% static 'petitscours/css/confirmation.css' %}" />
{% endblock %}
{% block realcontent %} {% block realcontent %}
<h2> <h2>
Traitement de la demande de petits cours {{ demande.id }} Traitement de la demande de petits cours {{ demande.id }}
@ -22,7 +28,7 @@
</div> </div>
{% endif %} {% endif %}
<form method="post"> <form method="post" id="traitement-form">
{% csrf_token %} {% csrf_token %}
{% if redo %}<input type="hidden" name="redo" value="1" />{% endif %} {% if redo %}<input type="hidden" name="redo" value="1" />{% endif %}
{% if proposals %} {% if proposals %}
@ -60,7 +66,28 @@
<h3>Impossible de trouver des propositions pour cette demande</h3> <h3>Impossible de trouver des propositions pour cette demande</h3>
<div class="error" style="font-size: 1.6em; margin-top: 10px;">Traitement manuel obligatoire !</div> <div class="error" style="font-size: 1.6em; margin-top: 10px;">Traitement manuel obligatoire !</div>
<input type="hidden" name="manual" value="1" /> <input type="hidden" name="manual" value="1" />
<input class="btn btn-primary pull-right" type="submit" value="Marquer comme traitée" /> <input class="btn btn-primary pull-right" type="button" onclick="confirmation()" value="Marquer comme traitée" />
<script type="text/javascript">
function confirmation() {
$.confirm({
title: 'Marquer comme traitée',
columnClass: 'col-md-6 col-md-offset-3',
content: "Voulez-vous vraiment marquer la demande comme traitée ? \
Aucun traitement automatique n'aura lieu.",
backgroundDismiss: true,
opacity: 1,
animation:'top',
closeAnimation:'bottom',
keyboardEnabled: true,
confirmButton: '<span class="glyphicon glyphicon-ok"></span>',
cancelButton: '<span class="glyphicon glyphicon-remove"></span>',
confirm: function() {
charte_ok = true ;
$("#traitement-form").submit();
},
});
}
</script>
{% endif %} {% endif %}
</form> </form>