Widget de choix des lieux plus clair + modification possible

This commit is contained in:
Evarin 2017-05-16 00:22:59 +02:00
parent e373a98818
commit 1619d17129
10 changed files with 578 additions and 314 deletions

View file

@ -93,10 +93,11 @@ class AvisLieuForm(HTMLTrimmerForm):
# Création d'un nouveau lieu
class LieuForm(forms.ModelForm):
coord = LatLonField()
id = forms.IntegerField(widget=forms.widgets.HiddenInput(), required=False)
class Meta:
model = Lieu
fields = ['nom', 'type_lieu', 'ville', 'pays', 'coord']
fields = ['id', 'nom', 'type_lieu', 'ville', 'pays', 'coord']
# Widget de feedback
class FeedbackForm(forms.Form):

View file

@ -57,6 +57,22 @@ a {
transform: translate(-1em, 1em) rotate(-15deg);
}
// Feedback
#feedback-button {
position:fixed;
left:0;
top:30%;
color:#fff;
z-index:4;
background: #000;
padding: 14px;
transform: rotateZ(90deg);
transform-origin: bottom left;
}
// Cartes
.leaflet-container {
z-index: 1;
}
@ -680,25 +696,61 @@ div.as-results {
//
// Widget choix et ajout de lieux
#map_addlieu {
height: 500px;
}
.lieu-ui {
.map {
height: 400px;
width: 100%;
#lieu_widget {
.lieu-ui {
position: relative;
.map {
height: 400px;
width: 100%;
}
&.hidden {
display: none;
}
.masked {
visibility: hidden;
}
}
.hidden {
.lieu-choixmodif {
display: none;
}
.masked {
visibility: hidden;
}
}
#avis_lieu_vide {
display:none;
&.modif {
.lieu-choixmodif {
display: unset;
}
}
&.modif, &.attente {
.lieu-ui {
display: none;
}
}
&.edit {
.lieu-ui {
.lieu-acinput {
display:none;
}
.map {
height: 200px;
}
}
}
#avis_lieu_vide {
display:none;
}
.message {
background: lighten($compl, 30);
padding: 5px;
font-style: italic;
font-size: 0.9em;
&.hidden {
display: none;
}
}
}
a.lieu-change {
@ -725,18 +777,6 @@ a.lieu-change {
max-height: 90vh;
}
#feedback-button {
position:fixed;
left:0;
top:30%;
color:#fff;
z-index:4;
background: #000;
padding: 14px;
transform: rotateZ(90deg);
transform-origin: bottom left;
}
#id_stage-thematiques {
display: none;

View file

@ -127,35 +127,48 @@ a {
transform: translate(-1em, 1em) rotate(-15deg);
}
/* line 60, ../../sass/screen.scss */
/* line 62, ../../sass/screen.scss */
#feedback-button {
position: fixed;
left: 0;
top: 30%;
color: #fff;
z-index: 4;
background: #000;
padding: 14px;
transform: rotateZ(90deg);
transform-origin: bottom left;
}
/* line 76, ../../sass/screen.scss */
.leaflet-container {
z-index: 1;
}
/* line 65, ../../sass/screen.scss */
/* line 81, ../../sass/screen.scss */
header {
background: #72a329;
display: flex;
justify-content: space-between;
align-items: center;
}
/* line 71, ../../sass/screen.scss */
/* line 87, ../../sass/screen.scss */
header #showmenu {
display: none;
}
/* line 75, ../../sass/screen.scss */
/* line 91, ../../sass/screen.scss */
header nav {
display: inline;
}
/* line 77, ../../sass/screen.scss */
/* line 93, ../../sass/screen.scss */
header nav ul {
display: inline-flex;
}
/* line 80, ../../sass/screen.scss */
/* line 96, ../../sass/screen.scss */
header nav ul li {
display: inline-table;
}
/* line 83, ../../sass/screen.scss */
/* line 99, ../../sass/screen.scss */
header nav ul li a {
text-align: center;
display: table-cell;
@ -164,23 +177,23 @@ header nav ul li a {
vertical-align: middle;
color: #e9f5d6;
}
/* line 91, ../../sass/screen.scss */
/* line 107, ../../sass/screen.scss */
header nav ul li a:hover {
background: #446219;
}
/* line 99, ../../sass/screen.scss */
/* line 115, ../../sass/screen.scss */
header a {
color: #fff;
text-decoration: none;
}
/* line 104, ../../sass/screen.scss */
/* line 120, ../../sass/screen.scss */
header h1 {
padding: 15px;
word-wrap: none;
display: inline-block;
}
/* line 113, ../../sass/screen.scss */
/* line 129, ../../sass/screen.scss */
.content {
background: #efefef;
width: 900px;
@ -188,38 +201,38 @@ header h1 {
padding: 30px;
margin: 15px auto;
}
/* line 120, ../../sass/screen.scss */
/* line 136, ../../sass/screen.scss */
.content p {
margin: 0.5em 0;
}
/* line 124, ../../sass/screen.scss */
/* line 140, ../../sass/screen.scss */
.content h1 {
margin-bottom: 0.6em;
}
/* line 132, ../../sass/screen.scss */
/* line 148, ../../sass/screen.scss */
.condensed-stages li {
display: table;
width: 100%;
background: #fff;
margin: 12px;
}
/* line 139, ../../sass/screen.scss */
/* line 155, ../../sass/screen.scss */
.condensed-stages li > *, .condensed-stages li:before {
display: table-cell;
vertical-align: middle;
padding: 15px;
}
/* line 144, ../../sass/screen.scss */
/* line 160, ../../sass/screen.scss */
.condensed-stages li a {
width: auto;
}
/* line 146, ../../sass/screen.scss */
/* line 162, ../../sass/screen.scss */
.condensed-stages li a:hover {
background: #e08206;
color: #fff;
}
/* line 151, ../../sass/screen.scss */
/* line 167, ../../sass/screen.scss */
.condensed-stages li:before {
content: "";
text-align: right;
@ -227,58 +240,58 @@ header h1 {
opacity: 0.8;
color: #000;
}
/* line 158, ../../sass/screen.scss */
/* line 174, ../../sass/screen.scss */
.condensed-stages li.stage-brouillon:before {
content: "Brouillon";
background: #f93a93;
}
/* line 162, ../../sass/screen.scss */
/* line 178, ../../sass/screen.scss */
.condensed-stages li.stage-publie:before {
content: "Publié";
background: #419be9;
}
/* line 166, ../../sass/screen.scss */
/* line 182, ../../sass/screen.scss */
.condensed-stages li.stage-ajout:before {
content: "+";
color: #000;
}
/* line 174, ../../sass/screen.scss */
/* line 190, ../../sass/screen.scss */
.stage-liste li {
display: block;
}
/* line 176, ../../sass/screen.scss */
/* line 192, ../../sass/screen.scss */
.stage-liste li.date-maj {
font-weight: bold;
font-size: 0.9em;
padding: 3px 0;
}
/* line 181, ../../sass/screen.scss */
/* line 197, ../../sass/screen.scss */
.stage-liste li.stage {
padding: 10px;
background: #fff;
margin: 10px;
}
/* line 186, ../../sass/screen.scss */
/* line 202, ../../sass/screen.scss */
.stage-liste li.stage h3 {
font-size: 1.4em;
}
/* line 189, ../../sass/screen.scss */
/* line 205, ../../sass/screen.scss */
.stage-liste li.stage h3 .auteur {
font-family: "Dosis", sans-serif;
font-weight: bold;
font-size: 0.8em;
}
/* line 195, ../../sass/screen.scss */
/* line 211, ../../sass/screen.scss */
.stage-liste li.stage ul.infos {
display: inline;
}
/* line 202, ../../sass/screen.scss */
/* line 218, ../../sass/screen.scss */
ul.infos {
margin: 0 -3px;
}
/* line 205, ../../sass/screen.scss */
/* line 221, ../../sass/screen.scss */
ul.infos li {
display: inline-block;
padding: 5px;
@ -287,27 +300,27 @@ ul.infos li {
font-size: 0.9em;
border-radius: 4px;
}
/* line 213, ../../sass/screen.scss */
/* line 229, ../../sass/screen.scss */
ul.infos li.thematique {
background-color: #1a82dd;
color: #fff;
}
/* line 217, ../../sass/screen.scss */
/* line 233, ../../sass/screen.scss */
ul.infos li.matiere {
color: #fff;
background-color: #8fcc33;
}
/* line 221, ../../sass/screen.scss */
/* line 237, ../../sass/screen.scss */
ul.infos li.lieu {
color: #fff;
background-color: #f99b20;
}
/* line 232, ../../sass/screen.scss */
/* line 248, ../../sass/screen.scss */
article.stage {
font-weight: normal;
}
/* line 235, ../../sass/screen.scss */
/* line 251, ../../sass/screen.scss */
article.stage h2 {
background: #ddda78;
color: #000;
@ -316,7 +329,7 @@ article.stage h2 {
margin-bottom: 25px;
text-shadow: -3px 3px 0 rgba(255, 255, 255, 0.3);
}
/* line 243, ../../sass/screen.scss */
/* line 259, ../../sass/screen.scss */
article.stage h3 {
border-bottom: 2px solid #cb954e;
margin-left: -25px;
@ -326,58 +339,58 @@ article.stage h3 {
color: #000;
text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.1);
}
/* line 254, ../../sass/screen.scss */
/* line 270, ../../sass/screen.scss */
article.stage #stage-map {
height: 300px;
width: 100%;
}
/* line 259, ../../sass/screen.scss */
/* line 275, ../../sass/screen.scss */
article.stage section {
background: #eee;
padding: 14px;
max-width: 600px;
margin: 30px auto;
}
/* line 265, ../../sass/screen.scss */
/* line 281, ../../sass/screen.scss */
article.stage section:first-child {
margin-top: 0;
}
/* line 267, ../../sass/screen.scss */
/* line 283, ../../sass/screen.scss */
article.stage section:first-child h3 {
margin-top: 0;
}
/* line 272, ../../sass/screen.scss */
/* line 288, ../../sass/screen.scss */
article.stage section.misc {
padding-top: 0;
}
/* line 276, ../../sass/screen.scss */
/* line 292, ../../sass/screen.scss */
article.stage section .chapo, article.stage section .avis-texte {
margin-bottom: 15px;
background: #fff;
padding: 20px;
}
/* line 281, ../../sass/screen.scss */
/* line 297, ../../sass/screen.scss */
article.stage section .chapo {
font-size: 1.1em;
font-weight: 500;
font-variant: small-caps;
}
/* line 286, ../../sass/screen.scss */
/* line 302, ../../sass/screen.scss */
article.stage section .avis-texte {
border-left: 1px solid #ccc;
padding-left: 15px;
}
/* line 291, ../../sass/screen.scss */
/* line 307, ../../sass/screen.scss */
article.stage section .plusmoins {
max-width: 600px;
margin: 15px auto;
}
/* line 295, ../../sass/screen.scss */
/* line 311, ../../sass/screen.scss */
article.stage section .plusmoins > div {
display: table;
width: 100%;
}
/* line 299, ../../sass/screen.scss */
/* line 315, ../../sass/screen.scss */
article.stage section .plusmoins > div:before {
content: "&nbsp";
width: 100px;
@ -386,72 +399,72 @@ article.stage section .plusmoins > div:before {
text-align: right;
padding-right: 12px;
}
/* line 308, ../../sass/screen.scss */
/* line 324, ../../sass/screen.scss */
article.stage section .plusmoins > div > *, article.stage section .plusmoins > div:before {
display: table-cell;
}
/* line 312, ../../sass/screen.scss */
/* line 328, ../../sass/screen.scss */
article.stage section .plusmoins > div > div {
padding: 15px;
color: #fff;
}
/* line 315, ../../sass/screen.scss */
/* line 331, ../../sass/screen.scss */
article.stage section .plusmoins > div > div h4 {
font-weight: normal;
margin-left: -5px;
font-size: 0.9em;
opacity: 0.9;
}
/* line 321, ../../sass/screen.scss */
/* line 337, ../../sass/screen.scss */
article.stage section .plusmoins > div > div p {
font-weight: bold;
margin: 2px;
}
/* line 329, ../../sass/screen.scss */
/* line 345, ../../sass/screen.scss */
article.stage section .plusmoins .plus > div {
background: #1775c6;
}
/* line 332, ../../sass/screen.scss */
/* line 348, ../../sass/screen.scss */
article.stage section .plusmoins .plus:before {
content: "Les +";
vertical-align: bottom;
color: #1567af;
}
/* line 339, ../../sass/screen.scss */
/* line 355, ../../sass/screen.scss */
article.stage section .plusmoins .moins > div {
background: #df076c;
}
/* line 342, ../../sass/screen.scss */
/* line 358, ../../sass/screen.scss */
article.stage section .plusmoins .moins:before {
content: "Les -";
vertical-align: top;
color: #c70660;
}
/* line 354, ../../sass/screen.scss */
/* line 370, ../../sass/screen.scss */
.article-wrapper {
display: table;
margin-left: -15px;
}
/* line 358, ../../sass/screen.scss */
/* line 374, ../../sass/screen.scss */
.article-wrapper .toc-wrapper, .article-wrapper article {
display: table-cell;
vertical-align: top;
}
/* line 362, ../../sass/screen.scss */
/* line 378, ../../sass/screen.scss */
.article-wrapper .toc-wrapper {
max-width: 250px;
width: 25%;
background: #f6f6f6;
padding: 5px;
}
/* line 368, ../../sass/screen.scss */
/* line 384, ../../sass/screen.scss */
.article-wrapper .toc {
position: -webkit-sticky;
position: sticky;
top: 12px;
}
/* line 373, ../../sass/screen.scss */
/* line 389, ../../sass/screen.scss */
.article-wrapper .toc a {
display: block;
color: inherit;
@ -460,46 +473,46 @@ article.stage section .plusmoins .moins:before {
padding: 7px;
line-height: 1;
}
/* line 381, ../../sass/screen.scss */
/* line 397, ../../sass/screen.scss */
.article-wrapper .toc a:hover {
background-color: #8fcc33;
}
/* line 385, ../../sass/screen.scss */
/* line 401, ../../sass/screen.scss */
.article-wrapper .toc .toc-h1 a {
font-weight: 900;
}
/* line 388, ../../sass/screen.scss */
/* line 404, ../../sass/screen.scss */
.article-wrapper .toc .toc-h2 {
margin-top: 15px;
}
/* line 391, ../../sass/screen.scss */
/* line 407, ../../sass/screen.scss */
.article-wrapper .toc .toc-h3 a {
font-weight: 300;
}
/* line 394, ../../sass/screen.scss */
/* line 410, ../../sass/screen.scss */
.article-wrapper .toc .toc-active a {
background-color: #d2ebad;
}
/* line 402, ../../sass/screen.scss */
/* line 418, ../../sass/screen.scss */
.edit-box {
background: #eee;
margin: 10px;
padding: 10px 20px;
text-align: center;
}
/* line 408, ../../sass/screen.scss */
/* line 424, ../../sass/screen.scss */
.edit-box.public {
background: #cae3f9;
border: 1px solid #125b9b;
}
/* line 413, ../../sass/screen.scss */
/* line 429, ../../sass/screen.scss */
.edit-box.prive {
background: #fdcfe4;
border: 1px solid #ad0654;
}
/* line 426, ../../sass/screen.scss */
/* line 442, ../../sass/screen.scss */
input, textarea, select, div.tinymce, option, optgroup:before {
background: #fff;
font-size: 1em;
@ -509,13 +522,13 @@ input, textarea, select, div.tinymce, option, optgroup:before {
padding: 5px;
text-align: left;
}
/* line 435, ../../sass/screen.scss */
/* line 451, ../../sass/screen.scss */
input:focus, input.mce-edit-focus, textarea:focus, textarea.mce-edit-focus, select:focus, select.mce-edit-focus, div.tinymce:focus, div.tinymce.mce-edit-focus, option:focus, option.mce-edit-focus, optgroup:before:focus, optgroup:before.mce-edit-focus {
background-color: #e9f5d6;
outline: none;
}
/* line 442, ../../sass/screen.scss */
/* line 458, ../../sass/screen.scss */
input[type='text'], input[type='password'],
input[type='email'], textarea, select {
border: none;
@ -525,7 +538,7 @@ input[type='email'], textarea, select {
transition: border 1s ease-out, background 1s ease-out;
}
/* line 451, ../../sass/screen.scss */
/* line 467, ../../sass/screen.scss */
select {
-moz-appearance: none;
appearance: none;
@ -533,21 +546,21 @@ select {
margin-right: 5px;
cursor: pointer;
}
/* line 458, ../../sass/screen.scss */
/* line 474, ../../sass/screen.scss */
select option {
padding: 3px;
white-space: pre-wrap;
}
/* line 464, ../../sass/screen.scss */
/* line 480, ../../sass/screen.scss */
select optgroup option {
padding-left: 10px;
}
/* line 467, ../../sass/screen.scss */
/* line 483, ../../sass/screen.scss */
select optgroup:before {
font-weight: bold;
}
/* line 473, ../../sass/screen.scss */
/* line 489, ../../sass/screen.scss */
input[type="submit"], .btn {
font: 19px "Dosis", sans-serif;
background-color: #8fcc33;
@ -560,14 +573,14 @@ input[type="submit"], .btn {
margin-right: 0;
}
/* line 485, ../../sass/screen.scss */
/* line 501, ../../sass/screen.scss */
p input[type="submit"],
p .btn,
h1 .btn {
display: inline-block;
}
/* line 491, ../../sass/screen.scss */
/* line 507, ../../sass/screen.scss */
.edit-btn {
border-color: #706c00;
color: #000;
@ -576,14 +589,14 @@ h1 .btn {
background-origin: content-box;
background-size: contain;
}
/* line 499, ../../sass/screen.scss */
/* line 515, ../../sass/screen.scss */
.edit-btn:after {
content: "";
width: 30px;
display: inline-block;
}
/* line 506, ../../sass/screen.scss */
/* line 522, ../../sass/screen.scss */
textarea, div.tinymce {
border: none;
border-left: 1px solid #8fcc33;
@ -592,20 +605,20 @@ textarea, div.tinymce {
transition: border 1s ease-out, background 1s ease-out;
}
/* line 514, ../../sass/screen.scss */
/* line 530, ../../sass/screen.scss */
textarea {
height: 200px;
resize: vertical;
}
/* line 522, ../../sass/screen.scss */
/* line 538, ../../sass/screen.scss */
form .field {
margin: 5px 0;
display: flex;
background: #fff;
padding: 10px;
}
/* line 528, ../../sass/screen.scss */
/* line 544, ../../sass/screen.scss */
form .field label, form .field .label {
display: inline-block;
width: 250px;
@ -614,33 +627,33 @@ form .field label, form .field .label {
padding-top: 5px;
flex-shrink: 0;
}
/* line 536, ../../sass/screen.scss */
/* line 552, ../../sass/screen.scss */
form .field label {
font-family: Podkova, serif;
font-weight: bold;
}
/* line 540, ../../sass/screen.scss */
/* line 556, ../../sass/screen.scss */
form .field .help_text {
font-style: italic;
font-size: 0.9em;
}
/* line 544, ../../sass/screen.scss */
/* line 560, ../../sass/screen.scss */
form .field .input {
display: inline-block;
flex-grow: 1;
margin-right: 10px;
}
/* line 554, ../../sass/screen.scss */
/* line 570, ../../sass/screen.scss */
ul.as-selections {
display: flex;
flex-wrap: wrap;
}
/* line 558, ../../sass/screen.scss */
/* line 574, ../../sass/screen.scss */
ul.as-selections li {
display: inline-block;
}
/* line 562, ../../sass/screen.scss */
/* line 578, ../../sass/screen.scss */
ul.as-selections .as-selection-item {
padding: 0 5px;
background: #f99b20;
@ -649,52 +662,52 @@ ul.as-selections .as-selection-item {
border-radius: 2px;
font-weight: 500;
}
/* line 570, ../../sass/screen.scss */
/* line 586, ../../sass/screen.scss */
ul.as-selections .as-selection-item a.as-close {
color: #fff;
-webkit-cursor: pointer;
cursor: pointer;
margin-right: 5px;
}
/* line 577, ../../sass/screen.scss */
/* line 593, ../../sass/screen.scss */
ul.as-selections .as-selection-item.selected {
background: #8fcc33;
}
/* line 582, ../../sass/screen.scss */
/* line 598, ../../sass/screen.scss */
ul.as-selections .as-original {
flex-grow: 1;
min-width: 200px;
}
/* line 586, ../../sass/screen.scss */
/* line 602, ../../sass/screen.scss */
ul.as-selections .as-original input {
width: 100%;
}
/* line 592, ../../sass/screen.scss */
/* line 608, ../../sass/screen.scss */
div.as-results {
position: relative;
}
/* line 594, ../../sass/screen.scss */
/* line 610, ../../sass/screen.scss */
div.as-results ul {
position: absolute;
width: 100%;
background: #fff;
border: 1px solid #d2ebad;
}
/* line 601, ../../sass/screen.scss */
/* line 617, ../../sass/screen.scss */
div.as-results ul li {
padding: 3px 5px;
}
/* line 607, ../../sass/screen.scss */
/* line 623, ../../sass/screen.scss */
div.as-results ul li.as-result-item.active {
background: #fddeb5;
}
/* line 612, ../../sass/screen.scss */
/* line 628, ../../sass/screen.scss */
div.as-results ul li.as-message {
font-style: italic;
}
/* line 622, ../../sass/screen.scss */
/* line 638, ../../sass/screen.scss */
.window {
display: none;
position: fixed;
@ -705,11 +718,11 @@ div.as-results ul li.as-message {
left: 0;
z-index: 50;
}
/* line 632, ../../sass/screen.scss */
/* line 648, ../../sass/screen.scss */
.window.visible {
display: block;
}
/* line 636, ../../sass/screen.scss */
/* line 652, ../../sass/screen.scss */
.window .window-bg {
background: #000;
opacity: 0.7;
@ -720,7 +733,7 @@ div.as-results ul li.as-message {
top: 0;
z-index: -1;
}
/* line 647, ../../sass/screen.scss */
/* line 663, ../../sass/screen.scss */
.window .window-content {
position: relative;
margin: 0 auto;
@ -734,11 +747,11 @@ div.as-results ul li.as-message {
max-height: 100%;
overflow: auto;
}
/* line 661, ../../sass/screen.scss */
/* line 677, ../../sass/screen.scss */
.window .window-content form label, .window .window-content form .label {
width: 150px;
}
/* line 667, ../../sass/screen.scss */
/* line 683, ../../sass/screen.scss */
.window .window-closer {
position: absolute;
top: 0;
@ -746,36 +759,65 @@ div.as-results ul li.as-message {
padding: 12px;
z-index: 3;
}
/* line 673, ../../sass/screen.scss */
/* line 689, ../../sass/screen.scss */
.window .window-closer:after {
content: "×";
}
/* line 683, ../../sass/screen.scss */
#map_addlieu {
height: 500px;
/* line 700, ../../sass/screen.scss */
#lieu_widget .lieu-ui {
position: relative;
}
/* line 688, ../../sass/screen.scss */
.lieu-ui .map {
/* line 702, ../../sass/screen.scss */
#lieu_widget .lieu-ui .map {
height: 400px;
width: 100%;
}
/* line 692, ../../sass/screen.scss */
.lieu-ui .hidden {
/* line 706, ../../sass/screen.scss */
#lieu_widget .lieu-ui.hidden {
display: none;
}
/* line 695, ../../sass/screen.scss */
.lieu-ui .masked {
/* line 709, ../../sass/screen.scss */
#lieu_widget .lieu-ui .masked {
visibility: hidden;
}
/* line 700, ../../sass/screen.scss */
#avis_lieu_vide {
/* line 714, ../../sass/screen.scss */
#lieu_widget .lieu-choixmodif {
display: none;
}
/* line 719, ../../sass/screen.scss */
#lieu_widget.modif .lieu-choixmodif {
display: unset;
}
/* line 724, ../../sass/screen.scss */
#lieu_widget.modif .lieu-ui, #lieu_widget.attente .lieu-ui {
display: none;
}
/* line 731, ../../sass/screen.scss */
#lieu_widget.edit .lieu-ui .lieu-acinput {
display: none;
}
/* line 734, ../../sass/screen.scss */
#lieu_widget.edit .lieu-ui .map {
height: 200px;
}
/* line 740, ../../sass/screen.scss */
#lieu_widget #avis_lieu_vide {
display: none;
}
/* line 744, ../../sass/screen.scss */
#lieu_widget .message {
background: #fddeb5;
padding: 5px;
font-style: italic;
font-size: 0.9em;
}
/* line 750, ../../sass/screen.scss */
#lieu_widget .message.hidden {
display: none;
}
/* line 704, ../../sass/screen.scss */
/* line 756, ../../sass/screen.scss */
a.lieu-change {
color: #fff;
background: #f99b20;
@ -788,38 +830,25 @@ a.lieu-change {
border-radius: 5px;
margin-right: 7px;
}
/* line 716, ../../sass/screen.scss */
/* line 768, ../../sass/screen.scss */
a.lieu-change.ajout:before {
content: "+";
margin-right: 5px;
}
/* line 722, ../../sass/screen.scss */
/* line 774, ../../sass/screen.scss */
#stages-map {
width: 100%;
height: 600px;
max-height: 90vh;
}
/* line 728, ../../sass/screen.scss */
#feedback-button {
position: fixed;
left: 0;
top: 30%;
color: #fff;
z-index: 4;
background: #000;
padding: 14px;
transform: rotateZ(90deg);
transform-origin: bottom left;
}
/* line 741, ../../sass/screen.scss */
/* line 781, ../../sass/screen.scss */
#id_stage-thematiques {
display: none;
}
/* line 747, ../../sass/screen.scss */
/* line 787, ../../sass/screen.scss */
.homeh1 {
display: flex;
justify-content: space-between;
@ -829,22 +858,22 @@ a.lieu-change.ajout:before {
border-bottom: 3px solid #000;
margin-bottom: 15px;
}
/* line 756, ../../sass/screen.scss */
/* line 796, ../../sass/screen.scss */
.homeh1 > * {
display: inline-block;
}
/* line 759, ../../sass/screen.scss */
/* line 799, ../../sass/screen.scss */
.homeh1 p {
text-align: right;
}
/* line 764, ../../sass/screen.scss */
/* line 804, ../../sass/screen.scss */
.betacadre {
background: #fa6cae;
padding: 10px;
}
/* line 769, ../../sass/screen.scss */
/* line 809, ../../sass/screen.scss */
.entrer {
background: #fff;
max-width: 500px;
@ -853,82 +882,82 @@ a.lieu-change.ajout:before {
margin: 15px auto;
}
/* line 777, ../../sass/screen.scss */
/* line 817, ../../sass/screen.scss */
article.promo {
display: block;
font-size: 1.1em;
}
/* line 781, ../../sass/screen.scss */
/* line 821, ../../sass/screen.scss */
article.promo .explications {
display: table;
}
/* line 784, ../../sass/screen.scss */
/* line 824, ../../sass/screen.scss */
article.promo .explications:first-child {
direction: rtl;
}
/* line 786, ../../sass/screen.scss */
/* line 826, ../../sass/screen.scss */
article.promo .explications:first-child > * {
direction: ltr;
}
/* line 791, ../../sass/screen.scss */
/* line 831, ../../sass/screen.scss */
article.promo .explications > div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
/* line 796, ../../sass/screen.scss */
/* line 836, ../../sass/screen.scss */
article.promo .explications > div p {
margin: 15px 15px;
}
/* line 804, ../../sass/screen.scss */
/* line 844, ../../sass/screen.scss */
.faq-toc {
display: block;
max-width: 700px;
margin: 0 auto;
}
/* line 808, ../../sass/screen.scss */
/* line 848, ../../sass/screen.scss */
.faq-toc ul {
margin: 20px;
}
/* line 812, ../../sass/screen.scss */
/* line 852, ../../sass/screen.scss */
.faq-toc ul li a {
color: #000;
display: block;
padding: 5px;
}
/* line 818, ../../sass/screen.scss */
/* line 858, ../../sass/screen.scss */
.faq-toc ul li.toc-h1 {
display: none;
}
/* line 822, ../../sass/screen.scss */
/* line 862, ../../sass/screen.scss */
.faq-toc ul li.toc-h2 a {
background: #fcc883;
}
/* line 826, ../../sass/screen.scss */
/* line 866, ../../sass/screen.scss */
.faq-toc ul li.toc-h3 a {
padding-left: 10px;
background: #fff;
font-weight: normal;
}
/* line 832, ../../sass/screen.scss */
/* line 872, ../../sass/screen.scss */
.faq-toc ul li a:hover {
color: #fff;
background: #f99b20 !important;
}
/* line 841, ../../sass/screen.scss */
/* line 881, ../../sass/screen.scss */
.faq article {
background: #fff;
padding: 15px;
}
/* line 844, ../../sass/screen.scss */
/* line 884, ../../sass/screen.scss */
.faq article h2 {
background: #fcc883;
margin: -15px;
padding: 15px;
}
/* line 850, ../../sass/screen.scss */
/* line 890, ../../sass/screen.scss */
.faq article h3 {
background: #1a82dd;
color: #fff;
@ -936,15 +965,15 @@ article.promo .explications > div p {
margin-top: 30px;
padding: 10px 15px;
}
/* line 857, ../../sass/screen.scss */
/* line 897, ../../sass/screen.scss */
.faq article h3:nth-child(2) {
margin-top: 0;
}
/* line 862, ../../sass/screen.scss */
/* line 902, ../../sass/screen.scss */
.faq article ul {
padding-left: 20px;
}
/* line 864, ../../sass/screen.scss */
/* line 904, ../../sass/screen.scss */
.faq article ul li {
list-style: initial;
}

View file

@ -1,27 +1,56 @@
function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
//
// INITIALISATION
//
// Éléments d'interface à construire
var map, input, autocomplete, map_el;
// Éléments d'interface déjà présents
var $el = $(target);
var ui_el = $el.find('.lieu-ui');
var form_el = $el.find('form');
var content_el = $el.find('.window-content');
var ui_ready = false;
var lieux_db = {};
var message_el = $el.find(".lieu-message");
var closer = $el.find(".window-closer");
var cmodif_el = $el.find(".lieu-choixmodif");
// Variables globales
var ui_ready = false;
var lieux_db = {};
var ui_mode_creation = true;
var modiflieu_id;
var form_marqueur;
// TODO : icônes mieux gérées
function makeIcon(couleur){
return L.icon({
iconUrl: STATIC_ROOT + 'images/marker-'+couleur+'.png',
iconSize: [36, 46],
iconAnchor: [18, 45],
popupAnchor: [0, -48]
})
}
var greenIcon = makeIcon('green');
var redIcon = makeIcon('red');
var blueIcon = makeIcon('blue');
// Cache le formulaire d'édition
form_el.detach();
form_el.on("submit", nouveauLieu);
form_el.on("submit", sendForm);
// Initialise l'interface
function initUI(){
// Suppression de l'interface déjà existante (au cas où)
$.each(ui_el.children(), function(i, item){$(item).remove();});
closer.on("click", closeWidget).attr("href", "javascript:void(0);");
$el.find(".window-bg").on("click", closeWidget);
// Éléments de recherche
map_el = $("<div>", {class: "map"});
input = $("<input>",
{type:"text",
placeholder:"Chercher un établissement..."});
placeholder:"Chercher un établissement...",
class:"lieu-acinput"});
ui_el.append(input);
ui_el.append(map_el);
@ -34,72 +63,52 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
// Autocomplete
autocomplete = new google.maps.places.Autocomplete(input[0]);
autocomplete.setTypes(["geocode", "establishment"]);
// Évènements
closer.on("click", closeWidget).attr("href", "javascript:void(0);");
$el.find(".window-bg").on("click", closeWidget);
autocomplete.addListener('place_changed', handlePlaceSearch);
cmodif_el.find(".lieu-choixedit").on("click", modifEditLieu);
cmodif_el.find(".lieu-choixautre").on("click", modifChoixLieu);
}
function showMessage(message) {
content_el.find(".message").text(message);
}
function hideMessage() {
showMessage("");
}
function setLieuOrigine (lieu) {
map.panTo(lieu.coord);
lieuSurCarte(lieu, greenIcon);
}
function handleLieuOrigine(data) {
hideMessage();
lieux_db[data.id] = data;
setLieuOrigine(data);
askForSuggestions(data.coord);
}
this.showWidget = function(lieu_id) {
$el.addClass("visible").removeClass("ajout");
if(!ui_ready)
initUI();
hideMessage();
ui_el.removeClass("hidden");
form_el.detach();
if (lieu_id === undefined) {
$el.find("h3").text("Ajouter un lieu");
map_el.addClass("masked");
} else {
lieu_id = lieu_id * 1;
$el.find("h3").text("Modifier le lieu");
if(lieux_db[lieu_id] === undefined) {
$.getJSON(API_LIEU + lieu_id + "/?format=json",
handleLieuOrigine);
showMessage("Chargement...");
ui_el.addClass("hidden");
} else {
handleLieuOrigine(lieux_db[lieu_id]);
}
// Change l'interface selon les besoins
function setUIMode(mode) {
$el.removeClass("ajout edit modif attente");
map.invalidateSize();
switch(mode) {
case "select":
case "change":
$el.addClass("select");
break;
case "ajout":
case "edit":
$el.addClass("edit");
break;
case "modif":
$el.addClass("modif");
break;
case "attente":
$el.addClass("attente");
break;
}
}
function closeWidget () {
$el.removeClass("visible");
// Messages
function showMessage(message) {
content_el.find(".message").text(message);
content_el.find(".message").removeClass("hidden");
}
this.closeWidget = closeWidget;
// Icones
function makeIcon(couleur){
return L.icon({
iconUrl: STATIC_ROOT + 'images/marker-'+couleur+'.png',
iconSize: [36, 46],
iconAnchor: [18, 45],
popupAnchor: [0, -48]
})
function hideMessage() {
content_el.find(".message").addClass("hidden");
}
var greenIcon = makeIcon('green');
var redIcon = makeIcon('red');
var blueIcon = makeIcon('blue');
//
// Carte et autocomplete
//
// Callback de l'autocomplete
function handlePlaceSearch() {
@ -114,7 +123,7 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
lieux_db.suggestion = undefined;
}
// Processing du lieu
// Lecture du lieu
var data = {};
$.each(place.address_components, function(i, obj) {
for (var j=0; j<obj.types.length; j++) {
@ -144,7 +153,9 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
askForSuggestions(location);
}
// Recherche des données en mémoire
function askForSuggestions (location) {
showMessage("Recherche de lieux déjà connus à proximité...");
$.getJSON("/api/v1/lieu/", {"format":"json",
"lat":location.lat,
"lng":location.lng}, showPropositions);
@ -152,6 +163,9 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
// Callback suggestions
function showPropositions(data) {
showMessage("Cliquez sur un des lieux déjà existants (en bleu) pour le choisir, ou sur votre recherche (en rouge) pour créer un nouveau lieu");
// Affichage sur la carte
$.each(data.objects, function(i, item) {
var plieu = lieux_db[item.id];
if(plieu !== undefined)
@ -162,24 +176,28 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
});
}
// Affiche un lieu sur la carte
function lieuSurCarte(data, icone) {
map_el.removeClass("masked");
// data : des données sur un lieu, sérialisé comme par tastypie
if(data.marqueur !== undefined) {
if(map.hasLayer(data.marqueur))
return;
}
// Affiche la carte
map_el.removeClass("masked");
// Si le marqueur est déjà présent : on ne fait rien
if(data.marqueur !== undefined && map.hasLayer(data.marqueur))
return;
var fromSuggestion = false;
// Si c'est un résultat d'autocomplete
if(data.fromSuggestion === true) {
if(data.fromSuggestion === true)
fromSuggestion = true;
}
var marqueur = L.marker(data.coord,
{icon: icone, draggable: fromSuggestion});
data.marqueur = marqueur;
// Création de la description
var desc = $("<div>").append($("<h3>").text(data.nom))
.append($("<p>").text(data.ville+", "+data.pays_nom));
if (data.num_stages !== undefined)
@ -204,12 +222,150 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
marqueur.bindPopup(desc[0]).addTo(map);
}
// Remet le marqueur à sa place originale (s'il a été déplacé)
function resetOrigLieu() {
var data = this._lieustage_data;
data.marqueur.setLatLng(data.orig_coord);
map.panTo(data.orig_coord);
}
//
// EDITION
//
// Affichage du formulaire
function showForm(choix, modification) {
lieux_db.lieufocus = choix;
content_el.append(form_el);
form_el.find("#id_nom").val(choix.nom);
form_el.find("#id_ville").val(choix.ville);
form_el.find("#id_pays").val(choix.pays);
form_el.find("#id_coord_0").val(choix.coord.lat);
form_el.find("#id_coord_1").val(choix.coord.lng);
if (modification == true) {
setUIMode("ajout");
form_el.find("#id_id").val(choix.id);
form_el.find("h3").text("Modifier un lieu");
} else {
setUIMode("edit");
form_el.find("#id_id").val('');
form_el.find("h3").text("Créer un lieu");
}
}
// Envoi du formulaire
function sendForm() {
setUIMode("attente");
var coord = lieux_db.lieufocus.marqueur.getLatLng();
form_el.find("#id_coord_0").val(coord.lat);
form_el.find("#id_coord_1").val(coord.lng);
$.post(form_el.attr("action"),
form_el.serialize(),
onFormSent);
form_el.detach();
showMessage("Envoi en cours...");
return false;
}
function onFormSent(data) {
console.log(data);
if(data.success == false) {
setUIMode("edit");
content_el.find(".message").text("Erreur : "+data.errors);
content_el.append(form_el);
} else {
// Effacement des données (potentiellement) obsolètes
if(lieux_db.lieufocus.id !== undefined) {
lieux_db[lieux_db.lieufocus.id] = undefined;
}
lieux_db.lieufocus.id = data.id;
lieux_db.lieufocus.nom = form_el.find("#id_nom").val();
callback(lieux_db.lieufocus);
}
}
//
// MODIFICATION
//
// Callback : quand le lieu à modifier est chargé
function setLieuModif(data) {
setUIMode("modif")
hideMessage();
cmodif_el.find(".lieu-choixrappel").text(data.nom);
// Préparation de la carte
lieux_db[data.id] = data;
}
// Modifier simplement les infos du lieu
function modifEditLieu() {
setUIMode("edit");
var lieu = lieux_db[modiflieu_id];
lieu.fromSuggestion = true;
map.panTo(lieu.coord);
lieuSurCarte(lieu, greenIcon);
showForm(lieu, true);
}
// Choisir un autre lieu
function modifChoixLieu() {
setUIMode("change");
var lieu = lieux_db[modiflieu_id];
lieu.fromSuggestion = false;
map.panTo(lieu.coord);
lieuSurCarte(lieu, greenIcon);
askForSuggestions(lieu.coord);
}
// Méthodes publiques : affichage de la fenêtre
this.showWidget = function(lieu_id) {
// Mise en place de l'interface
if(!ui_ready)
initUI();
// Nettoyage
hideMessage();
$el.addClass("visible");
setUIMode("default");
form_el.detach();
// Adaptation à la demande
if (lieu_id === undefined) {
// Choix d'un nouveau lieu : pas grand-chose à faire
ui_mode_creation = true;
$el.find("h3").text("Ajouter un lieu");
map_el.addClass("masked");
} else {
// Lieu déjà existant
lieu_id = lieu_id * 1;
ui_mode_creation = false;
modiflieu_id = lieu_id;
$el.find("h3").text("Modifier le lieu");
// Chargement des infos
if(lieux_db[lieu_id] === undefined) {
$.getJSON(API_LIEU + lieu_id + "/?format=json",
setLieuModif);
showMessage("Chargement...");
} else {
setLieuModif(lieux_db[lieu_id]);
}
}
}
// Fermeture du widget
function closeWidget () {
$el.removeClass("visible");
}
this.closeWidget = closeWidget;
// Le lieu est choisi, on appelle le callback
function choixLieuStage() {
var choix = this._lieustage_data;
if(!choix.fromSuggestion)
@ -217,38 +373,4 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
else
showForm(choix);
}
function showForm(choix) {
$el.addClass("ajout");
content_el.append(form_el);
form_el.find("#id_nom").val(choix.nom);
form_el.find("#id_ville").val(choix.ville);
form_el.find("#id_pays").val(choix.pays);
form_el.find("#id_coord_0").val(choix.coord.lat);
form_el.find("#id_coord_1").val(choix.coord.lng);
}
function nouveauLieu() {
var coord = lieux_db.suggestion.marqueur.getLatLng();
form_el.find("#id_coord_0").val(coord.lat);
form_el.find("#id_coord_1").val(coord.lng);
$.post(form_el.attr("action")+"?format=json",
form_el.serialize(),
onLieuCreated);
form_el.detach();
showMessage("Envoi en cours...");
return false;
}
function onLieuCreated(data) {
console.log(data);
if(data.success = false) {
content_el.find(".message").text("Erreur : "+data.errors);
content_el.append(form_el);
} else {
lieux_db.suggestion.id = data.id;
lieux_db.suggestion.nom = form_el.find("#id_nom").val();
callback(lieux_db.suggestion);
}
}
}

View file

@ -12,6 +12,13 @@
<script type="text/javascript" src="{% static "js/select_lieu.js" %}"></script>
<script type="text/javascript">
$(function() {
var has_changes = true;
$(window).on('beforeunload',
function () {
if (has_changes)
return 'Vous n\'avez pas enregistré vos changements !';
else return undefined;
});
// DATE FIELDS
$(".datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
@ -149,6 +156,7 @@
$(sel).val(undefined);
});
});
has_changes = false;
});
});
</script>

View file

@ -3,15 +3,31 @@
<div id="lieu_widget" class="window">
<div class="window-bg"></div>
<div class="window-content">
<a class="window-closer"></a>
<a class="window-closer" href="javascript:void(0);"></a>
<h2>Choisir un lieu</h2>
<p>Restez général dans le lieu : choisissez l'université plutôt que le laboratoire, l'incubateur plutôt que la startup...</p>
<div class="message"></div>
{# UI avec carte et autocomplete #}
<div class="lieu-ui">
</div>
{# En cas de modification #}
<div class="lieu-choixmodif">
<h4>Que voulez-vous faire pour le lieu : <span class="lieu-choixrappel"></span>&nbsp;?</h4>
<ul>
<li><a href="javascript:void(0);" class="lieu-choixedit">Modifier les informations de ce lieu</a></li>
<li><a href="javascript:void(0);" class="lieu-choixautre">Sélectionner un autre lieu</a></li>
</ul>
</div>
{# Formulaire de création/modification #}
<div class="lieu-form">{% load staticfiles %}
<form action="{% url 'avisstage:lieu_ajout' %}" method="post" id="lieu_ajout">
<h1>Ajouter un lieu</h1>
<h2>Ajouter un lieu</h2>
<p class="help_text">Vous pouvez déplacer le curseur pour indiquer précisément la bonne position</p>
{% csrf_token %}
{% for field in form.hidden_fields %}
{{ field }}

View file

@ -17,7 +17,7 @@ urlpatterns = [
url(r'^stage/(?P<pk>\w+)/publication/$', views.publier_stage, name='stage_publication'),
url(r'^stages/majs/$', views.StageListe.as_view(), name='stage_majs'),
url(r'^lieu/ajout/$', views.LieuAjout.as_view(), name='lieu_ajout'),
url(r'^lieu/save/$', views.save_lieu, name='lieu_ajout'),
url(r'^profil/show/(?P<username>\w+)/$', views.ProfilView.as_view(),
name='profil'),
url(r'^profil/edit/$', views.ProfilEdit.as_view(), name='profil_edit'),

View file

@ -15,6 +15,8 @@ from django.db.models import Q
from avisstage.models import Normalien, Stage, Lieu, AvisLieu, AvisStage
from avisstage.forms import StageForm, LieuForm, AvisStageForm, AvisLieuForm, FeedbackForm
import random, math
#
# LECTURE
#
@ -132,6 +134,52 @@ def manage_stage(request, pk=None):
# Ajout d'un lieu de stage
#login_required
# Stage
@login_required
def save_lieu(request):
normalien = request.user.profil
if request.method == "POST":
pk = request.POST.get("id", None)
print request.POST
jitter = False
if pk is None or pk == '':
lieu = Lieu()
else:
# Modification du lieu
lieu = get_object_or_404(Lieu, pk=pk)
# On regarde si les stages associés à ce lieu "appartiennent" tous à l'utilisateur
not_same_user = lieu.stages.exclude(auteur=normalien).count()
# Si d'autres personnes ont un stage à cet endroit, on crée un nouveau lieu, un peu à côté
if not_same_user > 0:
lieu = Lieu()
# Servira à bouger un peu le lieu
jitter = True
# Lecture des données
form = LieuForm(request.POST, instance=lieu)
# Validation et enregistrement
if form.is_valid():
lieu = form.save()
if jitter:
cdx, cdy = lieu.coord.get_coords()
ang = random.random() * 6.29;
rad = (random.random() + 0.5) * 3e-4
cdx += math.cos(ang) * rad;
cdy += math.sin(ang) * rad;
lieu.coord.set_coords((cdx, cdy))
lieu.save()
return JsonResponse({"success": True, "id": lieu.id})
else:
return JsonResponse({"success": False,
"errors": form.errors})
else:
return JsonResponse({"erreur": "Aucune donnée POST"})
class LieuAjout(CreateView, LoginRequiredMixin):
model = Lieu
form_class = LieuForm

View file

@ -45,4 +45,3 @@ class LatLonField(forms.MultiValueField):
point_str = 'POINT(%f %f)'%tuple(reversed(data_list))
return ';'.join([srid_str, point_str])
return None

View file

@ -7,3 +7,4 @@ django-braces
django-taggit-autosuggest
pytz
django-tastypie
lxml