DGNum/experiENS
6
0
Fork 0
Code Issues 11 Pull requests 1 Projects Releases Packages Wiki Activity Actions

WIP affichage des résultats

Browse source
This commit is contained in:
Evarin 2017-06-17 17:41:52 +02:00
parent 2d8c6515c4
commit 647f106632
7 changed files with 522 additions and 188 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

166
avisstage/sass/_recherche.scss
View file

@ -1,41 +1,145 @@
form.recherche { section.content.recherche {
.generale { form.recherche {
display: block; .generale {
text-align: center; display: inline-block;
text-align: right;
input[type="text"] { position: relative;
max-width: 400px; left: 50%;
transform: translateX(-50%);
width: 500px;
max-width: 100%;
white-space: nowrap;
span {
display:flex;
}
input[type="text"] {
max-width: 500px;
padding: 10px;
border: 1px solid $fond;
margin:0 5px;
}
input {
display: inline;
}
}
.avancee {
background: #fff;
display: none;
padding: 15px;
margin-bottom: 15px;
&.expanded {
display:block;
}
.help_text {
font-style: italic;
font-size: 0.9em;
}
ul {
margin: 0 -5px;
display: flexbox;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
li {
flex-grow: 1;
width: 22%;
min-width: 150px;
margin: 5px 0;
padding: 0 10px;
label {
font-weight: bold;
font-size: 0.9em;
}
input[type="text"], input[type='number'], select {
display: block;
min-width: 150px;
display: inline-block;
width: 100%;
font-size: 0.9em;
background-color: #f8f8f8;
}
&.btnsubmit {
text-align:right;
}
&.field__sujet, &.field__contexte {
width:45%;
min-width: 300px;
}
}
}
} }
} }
.avancee { &.vue-hybride, &.vue-carte {
ul { width: 100%;
display: flexbox; min-width: unset;
display: flex; max-width: unset;
flex-wrap: wrap; min-height: unset;
justify-content: space-between; max-height: unset;
height: 90vh;
height: calc(100vh - 30px);
padding: 0;
margin: 0;
.recherche-carte, .recherche-liste {
height: 100%;
}
.recherche-liste {
overflow-y: auto;
padding: 15px;
}
}
&.vue-liste .recherche-carte,
&.vue-carte .recherche-liste {
display: none;
}
&.vue-carte .recherche-carte,
&.vue-liste .recherche-liste {
display: block;
width: 100%;
}
&.vue-hybride {
display: flex;
.recherche-liste {
width: 40vw;
min-width: 500px;
max-width: 800px;
}
.recherche-carte {
flex-shrink: 1;
width: 100%; width: 100%;
}
}
.vue-options {
text-align: center;
ul {
display: inline-block;
border-radius: 5px;
overflow: hidden;
li { li {
flex-grow: 1; display: inline-block;
width: 40%; background: #fff;
margin: 5px 0; padding: 10px;
padding: 0 10px; a {
label {
font-weight: bold;
font-size: 0.9em;
} }
input {
display: block;
min-width: 150px;
display: inline-block;
width: 100%;
}
&.field__sujet, &.field__contexte {
width:100%;
}
} }
} }
} }

12
avisstage/sass/screen.scss
View file

@ -62,14 +62,14 @@ a {
#feedback-button { #feedback-button {
position:fixed; position:fixed;
left:0; right:0;
top:30%; top:30%;
color:#fff; color:#fff;
z-index:4; z-index:4;
background: #000; background: #000;
padding: 14px; padding: 14px;
transform: rotateZ(90deg); transform: rotateZ(-90deg);
transform-origin: bottom left; transform-origin: bottom right;
} }
// Cartes // Cartes
@ -307,6 +307,12 @@ select {
width: auto; width: auto;
margin-right: 5px; margin-right: 5px;
cursor: pointer; cursor: pointer;
padding: 0;
padding-right: 30px;
background: url($staticurl + "images/choix.svg") no-repeat;
background-position: right center;
background-color: #fff;
background-size: contain;
option { option {
padding: 3px; padding: 3px;

301
avisstage/static/css/screen.css
View file

@ -131,14 +131,14 @@ a {
/* line 63, ../../sass/screen.scss */ /* line 63, ../../sass/screen.scss */
#feedback-button { #feedback-button {
position: fixed; position: fixed;
left: 0; right: 0;
top: 30%; top: 30%;
color: #fff; color: #fff;
z-index: 4; z-index: 4;
background: #000; background: #000;
padding: 14px; padding: 14px;
transform: rotateZ(90deg); transform: rotateZ(-90deg);
transform-origin: bottom left; transform-origin: bottom right;
} }
/* line 77, ../../sass/screen.scss */ /* line 77, ../../sass/screen.scss */
@ -649,22 +649,28 @@ select {
width: auto; width: auto;
margin-right: 5px; margin-right: 5px;
cursor: pointer; cursor: pointer;
padding: 0;
padding-right: 30px;
background: url("/experiens/static/images/choix.svg") no-repeat;
background-position: right center;
background-color: #fff;
background-size: contain;
} }
/* line 311, ../../sass/screen.scss */ /* line 317, ../../sass/screen.scss */
select option { select option {
padding: 3px; padding: 3px;
white-space: pre-wrap; white-space: pre-wrap;
} }
/* line 317, ../../sass/screen.scss */ /* line 323, ../../sass/screen.scss */
select optgroup option { select optgroup option {
padding-left: 10px; padding-left: 10px;
} }
/* line 320, ../../sass/screen.scss */ /* line 326, ../../sass/screen.scss */
select optgroup:before { select optgroup:before {
font-weight: bold; font-weight: bold;
} }
/* line 326, ../../sass/screen.scss */ /* line 332, ../../sass/screen.scss */
input[type="submit"], .btn { input[type="submit"], .btn {
font: 19px "Dosis", sans-serif; font: 19px "Dosis", sans-serif;
background-color: #8fcc33; background-color: #8fcc33;
@ -675,17 +681,17 @@ input[type="submit"], .btn {
display: inline-block; display: inline-block;
} }
/* line 336, ../../sass/screen.scss */ /* line 342, ../../sass/screen.scss */
p.submits { p.submits {
text-align: right; text-align: right;
} }
/* line 340, ../../sass/screen.scss */ /* line 346, ../../sass/screen.scss */
form .commentaire { form .commentaire {
font-style: italic; font-style: italic;
} }
/* line 344, ../../sass/screen.scss */ /* line 350, ../../sass/screen.scss */
.edit-btn { .edit-btn {
border-color: #706c00; border-color: #706c00;
color: #000; color: #000;
@ -694,14 +700,14 @@ form .commentaire {
background-origin: content-box; background-origin: content-box;
background-size: contain; background-size: contain;
} }
/* line 352, ../../sass/screen.scss */ /* line 358, ../../sass/screen.scss */
.edit-btn:after { .edit-btn:after {
content: ""; content: "";
width: 30px; width: 30px;
display: inline-block; display: inline-block;
} }
/* line 359, ../../sass/screen.scss */ /* line 365, ../../sass/screen.scss */
textarea, div.tinymce { textarea, div.tinymce {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
border: none; border: none;
@ -711,20 +717,20 @@ textarea, div.tinymce {
transition: border 1s ease-out, background 1s ease-out; transition: border 1s ease-out, background 1s ease-out;
} }
/* line 368, ../../sass/screen.scss */ /* line 374, ../../sass/screen.scss */
textarea { textarea {
height: 200px; height: 200px;
resize: vertical; resize: vertical;
} }
/* line 376, ../../sass/screen.scss */ /* line 382, ../../sass/screen.scss */
form .field { form .field {
margin: 5px 0; margin: 5px 0;
display: flex; display: flex;
background: #fff; background: #fff;
padding: 10px; padding: 10px;
} }
/* line 382, ../../sass/screen.scss */ /* line 388, ../../sass/screen.scss */
form .field label, form .field .label { form .field label, form .field .label {
display: inline-block; display: inline-block;
width: 250px; width: 250px;
@ -733,39 +739,39 @@ form .field label, form .field .label {
padding-top: 5px; padding-top: 5px;
flex-shrink: 0; flex-shrink: 0;
} }
/* line 390, ../../sass/screen.scss */ /* line 396, ../../sass/screen.scss */
form .field label.required:before, form .field .label.required:before { form .field label.required:before, form .field .label.required:before {
margin-right: 5px; margin-right: 5px;
content: "*"; content: "*";
color: #f70978; color: #f70978;
} }
/* line 396, ../../sass/screen.scss */ /* line 402, ../../sass/screen.scss */
form .field label { form .field label {
font-family: Alegreya, serif; font-family: Alegreya, serif;
font-weight: bold; font-weight: bold;
} }
/* line 400, ../../sass/screen.scss */ /* line 406, ../../sass/screen.scss */
form .field .help_text { form .field .help_text {
font-style: italic; font-style: italic;
font-size: 0.9em; font-size: 0.9em;
} }
/* line 404, ../../sass/screen.scss */ /* line 410, ../../sass/screen.scss */
form .field .input { form .field .input {
display: inline-block; display: inline-block;
flex-grow: 1; flex-grow: 1;
margin-right: 10px; margin-right: 10px;
} }
/* line 414, ../../sass/screen.scss */ /* line 420, ../../sass/screen.scss */
ul.as-selections { ul.as-selections {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
/* line 418, ../../sass/screen.scss */ /* line 424, ../../sass/screen.scss */
ul.as-selections li { ul.as-selections li {
display: inline-block; display: inline-block;
} }
/* line 422, ../../sass/screen.scss */ /* line 428, ../../sass/screen.scss */
ul.as-selections .as-selection-item { ul.as-selections .as-selection-item {
padding: 0 5px; padding: 0 5px;
background: #f99b20; background: #f99b20;
@ -774,52 +780,52 @@ ul.as-selections .as-selection-item {
border-radius: 2px; border-radius: 2px;
font-weight: 500; font-weight: 500;
} }
/* line 430, ../../sass/screen.scss */ /* line 436, ../../sass/screen.scss */
ul.as-selections .as-selection-item a.as-close { ul.as-selections .as-selection-item a.as-close {
color: #fff; color: #fff;
-webkit-cursor: pointer; -webkit-cursor: pointer;
cursor: pointer; cursor: pointer;
margin-right: 5px; margin-right: 5px;
} }
/* line 437, ../../sass/screen.scss */ /* line 443, ../../sass/screen.scss */
ul.as-selections .as-selection-item.selected { ul.as-selections .as-selection-item.selected {
background: #8fcc33; background: #8fcc33;
} }
/* line 442, ../../sass/screen.scss */ /* line 448, ../../sass/screen.scss */
ul.as-selections .as-original { ul.as-selections .as-original {
flex-grow: 1; flex-grow: 1;
min-width: 200px; min-width: 200px;
} }
/* line 446, ../../sass/screen.scss */ /* line 452, ../../sass/screen.scss */
ul.as-selections .as-original input { ul.as-selections .as-original input {
width: 100%; width: 100%;
} }
/* line 452, ../../sass/screen.scss */ /* line 458, ../../sass/screen.scss */
div.as-results { div.as-results {
position: relative; position: relative;
} }
/* line 454, ../../sass/screen.scss */ /* line 460, ../../sass/screen.scss */
div.as-results ul { div.as-results ul {
position: absolute; position: absolute;
width: 100%; width: 100%;
background: #fff; background: #fff;
border: 1px solid #d2ebad; border: 1px solid #d2ebad;
} }
/* line 461, ../../sass/screen.scss */ /* line 467, ../../sass/screen.scss */
div.as-results ul li { div.as-results ul li {
padding: 3px 5px; padding: 3px 5px;
} }
/* line 467, ../../sass/screen.scss */ /* line 473, ../../sass/screen.scss */
div.as-results ul li.as-result-item.active { div.as-results ul li.as-result-item.active {
background: #fddeb5; background: #fddeb5;
} }
/* line 472, ../../sass/screen.scss */ /* line 478, ../../sass/screen.scss */
div.as-results ul li.as-message { div.as-results ul li.as-message {
font-style: italic; font-style: italic;
} }
/* line 482, ../../sass/screen.scss */ /* line 488, ../../sass/screen.scss */
.window { .window {
display: none; display: none;
position: fixed; position: fixed;
@ -830,11 +836,11 @@ div.as-results ul li.as-message {
left: 0; left: 0;
z-index: 50; z-index: 50;
} }
/* line 492, ../../sass/screen.scss */ /* line 498, ../../sass/screen.scss */
.window.visible { .window.visible {
display: block; display: block;
} }
/* line 496, ../../sass/screen.scss */ /* line 502, ../../sass/screen.scss */
.window .window-bg { .window .window-bg {
background: #000; background: #000;
opacity: 0.7; opacity: 0.7;
@ -845,7 +851,7 @@ div.as-results ul li.as-message {
top: 0; top: 0;
z-index: -1; z-index: -1;
} }
/* line 507, ../../sass/screen.scss */ /* line 513, ../../sass/screen.scss */
.window .window-content { .window .window-content {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
@ -859,11 +865,11 @@ div.as-results ul li.as-message {
max-height: 100%; max-height: 100%;
overflow: auto; overflow: auto;
} }
/* line 521, ../../sass/screen.scss */ /* line 527, ../../sass/screen.scss */
.window .window-content form label, .window .window-content form .label { .window .window-content form label, .window .window-content form .label {
width: 150px; width: 150px;
} }
/* line 527, ../../sass/screen.scss */ /* line 533, ../../sass/screen.scss */
.window .window-closer { .window .window-closer {
position: absolute; position: absolute;
top: 0; top: 0;
@ -871,65 +877,65 @@ div.as-results ul li.as-message {
padding: 12px; padding: 12px;
z-index: 3; z-index: 3;
} }
/* line 533, ../../sass/screen.scss */ /* line 539, ../../sass/screen.scss */
.window .window-closer:after { .window .window-closer:after {
content: "×"; content: "×";
} }
/* line 544, ../../sass/screen.scss */ /* line 550, ../../sass/screen.scss */
#lieu_widget .lieu-ui { #lieu_widget .lieu-ui {
position: relative; position: relative;
} }
/* line 546, ../../sass/screen.scss */ /* line 552, ../../sass/screen.scss */
#lieu_widget .lieu-ui .map { #lieu_widget .lieu-ui .map {
height: 400px; height: 400px;
width: 100%; width: 100%;
} }
/* line 550, ../../sass/screen.scss */ /* line 556, ../../sass/screen.scss */
#lieu_widget .lieu-ui.hidden { #lieu_widget .lieu-ui.hidden {
display: none; display: none;
} }
/* line 553, ../../sass/screen.scss */ /* line 559, ../../sass/screen.scss */
#lieu_widget .lieu-ui .masked { #lieu_widget .lieu-ui .masked {
visibility: hidden; visibility: hidden;
} }
/* line 558, ../../sass/screen.scss */ /* line 564, ../../sass/screen.scss */
#lieu_widget .lieu-choixmodif { #lieu_widget .lieu-choixmodif {
display: none; display: none;
} }
/* line 563, ../../sass/screen.scss */ /* line 569, ../../sass/screen.scss */
#lieu_widget.modif .lieu-choixmodif { #lieu_widget.modif .lieu-choixmodif {
display: unset; display: unset;
} }
/* line 568, ../../sass/screen.scss */ /* line 574, ../../sass/screen.scss */
#lieu_widget.modif .lieu-ui, #lieu_widget.attente .lieu-ui { #lieu_widget.modif .lieu-ui, #lieu_widget.attente .lieu-ui {
display: none; display: none;
} }
/* line 575, ../../sass/screen.scss */ /* line 581, ../../sass/screen.scss */
#lieu_widget.edit .lieu-ui .lieu-acinput { #lieu_widget.edit .lieu-ui .lieu-acinput {
display: none; display: none;
} }
/* line 578, ../../sass/screen.scss */ /* line 584, ../../sass/screen.scss */
#lieu_widget.edit .lieu-ui .map { #lieu_widget.edit .lieu-ui .map {
height: 200px; height: 200px;
} }
/* line 584, ../../sass/screen.scss */ /* line 590, ../../sass/screen.scss */
#lieu_widget #avis_lieu_vide { #lieu_widget #avis_lieu_vide {
display: none; display: none;
} }
/* line 588, ../../sass/screen.scss */ /* line 594, ../../sass/screen.scss */
#lieu_widget .message { #lieu_widget .message {
background: #fddeb5; background: #fddeb5;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
font-size: 0.9em; font-size: 0.9em;
} }
/* line 594, ../../sass/screen.scss */ /* line 600, ../../sass/screen.scss */
#lieu_widget .message.hidden { #lieu_widget .message.hidden {
display: none; display: none;
} }
/* line 600, ../../sass/screen.scss */ /* line 606, ../../sass/screen.scss */
a.lieu-change { a.lieu-change {
color: #fff; color: #fff;
background: #f99b20; background: #f99b20;
@ -942,25 +948,25 @@ a.lieu-change {
border-radius: 5px; border-radius: 5px;
margin-right: 7px; margin-right: 7px;
} }
/* line 612, ../../sass/screen.scss */ /* line 618, ../../sass/screen.scss */
a.lieu-change.ajout:before { a.lieu-change.ajout:before {
content: "+"; content: "+";
margin-right: 5px; margin-right: 5px;
} }
/* line 618, ../../sass/screen.scss */ /* line 624, ../../sass/screen.scss */
#stages-map { #stages-map {
width: 100%; width: 100%;
height: 600px; height: 600px;
max-height: 90vh; max-height: 90vh;
} }
/* line 625, ../../sass/screen.scss */ /* line 631, ../../sass/screen.scss */
#id_stage-thematiques { #id_stage-thematiques {
display: none; display: none;
} }
/* line 631, ../../sass/screen.scss */ /* line 637, ../../sass/screen.scss */
.homeh1 { .homeh1 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -970,22 +976,22 @@ a.lieu-change.ajout:before {
border-bottom: 3px solid #000; border-bottom: 3px solid #000;
margin-bottom: 15px; margin-bottom: 15px;
} }
/* line 640, ../../sass/screen.scss */ /* line 646, ../../sass/screen.scss */
.homeh1 > * { .homeh1 > * {
display: inline-block; display: inline-block;
} }
/* line 643, ../../sass/screen.scss */ /* line 649, ../../sass/screen.scss */
.homeh1 p { .homeh1 p {
text-align: right; text-align: right;
} }
/* line 648, ../../sass/screen.scss */ /* line 654, ../../sass/screen.scss */
.betacadre { .betacadre {
background: #fa6cae; background: #fa6cae;
padding: 10px; padding: 10px;
} }
/* line 653, ../../sass/screen.scss */ /* line 659, ../../sass/screen.scss */
.entrer { .entrer {
background: #fff; background: #fff;
max-width: 500px; max-width: 500px;
@ -994,84 +1000,84 @@ a.lieu-change.ajout:before {
margin: 15px auto; margin: 15px auto;
} }
/* line 661, ../../sass/screen.scss */ /* line 667, ../../sass/screen.scss */
article.promo { article.promo {
display: block; display: block;
font-size: 1.1em; font-size: 1.1em;
} }
/* line 665, ../../sass/screen.scss */ /* line 671, ../../sass/screen.scss */
article.promo .explications { article.promo .explications {
display: table; display: table;
} }
/* line 668, ../../sass/screen.scss */ /* line 674, ../../sass/screen.scss */
article.promo .explications:first-child { article.promo .explications:first-child {
direction: rtl; direction: rtl;
} }
/* line 670, ../../sass/screen.scss */ /* line 676, ../../sass/screen.scss */
article.promo .explications:first-child > * { article.promo .explications:first-child > * {
direction: ltr; direction: ltr;
} }
/* line 675, ../../sass/screen.scss */ /* line 681, ../../sass/screen.scss */
article.promo .explications > div { article.promo .explications > div {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
} }
/* line 680, ../../sass/screen.scss */ /* line 686, ../../sass/screen.scss */
article.promo .explications > div p { article.promo .explications > div p {
margin: 15px 15px; margin: 15px 15px;
} }
/* line 688, ../../sass/screen.scss */ /* line 694, ../../sass/screen.scss */
.faq-toc { .faq-toc {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
display: block; display: block;
max-width: 700px; max-width: 700px;
margin: 0 auto; margin: 0 auto;
} }
/* line 693, ../../sass/screen.scss */ /* line 699, ../../sass/screen.scss */
.faq-toc ul { .faq-toc ul {
margin: 20px; margin: 20px;
} }
/* line 697, ../../sass/screen.scss */ /* line 703, ../../sass/screen.scss */
.faq-toc ul li a { .faq-toc ul li a {
color: #000; color: #000;
display: block; display: block;
padding: 5px; padding: 5px;
} }
/* line 703, ../../sass/screen.scss */ /* line 709, ../../sass/screen.scss */
.faq-toc ul li.toc-h1 { .faq-toc ul li.toc-h1 {
display: none; display: none;
} }
/* line 707, ../../sass/screen.scss */ /* line 713, ../../sass/screen.scss */
.faq-toc ul li.toc-h2 a { .faq-toc ul li.toc-h2 a {
background: #fcc883; background: #fcc883;
} }
/* line 711, ../../sass/screen.scss */ /* line 717, ../../sass/screen.scss */
.faq-toc ul li.toc-h3 a { .faq-toc ul li.toc-h3 a {
padding-left: 10px; padding-left: 10px;
background: #fff; background: #fff;
font-weight: normal; font-weight: normal;
} }
/* line 717, ../../sass/screen.scss */ /* line 723, ../../sass/screen.scss */
.faq-toc ul li a:hover { .faq-toc ul li a:hover {
color: #395214; color: #395214;
background: #bce085 !important; background: #bce085 !important;
} }
/* line 726, ../../sass/screen.scss */ /* line 732, ../../sass/screen.scss */
.faq article { .faq article {
background: #fff; background: #fff;
padding: 15px; padding: 15px;
} }
/* line 729, ../../sass/screen.scss */ /* line 735, ../../sass/screen.scss */
.faq article h2 { .faq article h2 {
background-color: #fcc883; background-color: #fcc883;
color: #ae6505; color: #ae6505;
margin: -15px; margin: -15px;
padding: 15px; padding: 15px;
} }
/* line 736, ../../sass/screen.scss */ /* line 742, ../../sass/screen.scss */
.faq article h3 { .faq article h3 {
color: #0f4c82; color: #0f4c82;
background-color: #9dcbf3; background-color: #9dcbf3;
@ -1079,19 +1085,19 @@ article.promo .explications > div p {
margin-top: 30px; margin-top: 30px;
padding: 10px 15px; padding: 10px 15px;
} }
/* line 743, ../../sass/screen.scss */ /* line 749, ../../sass/screen.scss */
.faq article h3:nth-child(2) { .faq article h3:nth-child(2) {
margin-top: 0; margin-top: 0;
} }
/* line 748, ../../sass/screen.scss */ /* line 754, ../../sass/screen.scss */
.faq article ul { .faq article ul {
padding-left: 20px; padding-left: 20px;
} }
/* line 750, ../../sass/screen.scss */ /* line 756, ../../sass/screen.scss */
.faq article ul li { .faq article ul li {
list-style: initial; list-style: initial;
} }
/* line 755, ../../sass/screen.scss */ /* line 761, ../../sass/screen.scss */
.faq article p, .faq article ul { .faq article p, .faq article ul {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 18px; font-size: 18px;
@ -1100,45 +1106,148 @@ article.promo .explications > div p {
margin-right: 5%; margin-right: 5%;
} }
/* line 2, ../../sass/_recherche.scss */ /* line 3, ../../sass/_recherche.scss */
form.recherche .generale { section.content.recherche form.recherche .generale {
display: inline-block;
text-align: right;
position: relative;
left: 50%;
transform: translateX(-50%);
width: 500px;
max-width: 100%;
white-space: nowrap;
}
/* line 13, ../../sass/_recherche.scss */
section.content.recherche form.recherche .generale span {
display: flex;
}
/* line 17, ../../sass/_recherche.scss */
section.content.recherche form.recherche .generale input[type="text"] {
max-width: 500px;
padding: 10px;
border: 1px solid #8fcc33;
margin: 0 5px;
}
/* line 23, ../../sass/_recherche.scss */
section.content.recherche form.recherche .generale input {
display: inline;
}
/* line 28, ../../sass/_recherche.scss */
section.content.recherche form.recherche .avancee {
background: #fff;
display: none;
padding: 15px;
margin-bottom: 15px;
}
/* line 34, ../../sass/_recherche.scss */
section.content.recherche form.recherche .avancee.expanded {
display: block; display: block;
text-align: center;
} }
/* line 6, ../../sass/_recherche.scss */ /* line 38, ../../sass/_recherche.scss */
form.recherche .generale input[type="text"] { section.content.recherche form.recherche .avancee .help_text {
max-width: 400px; font-style: italic;
font-size: 0.9em;
} }
/* line 12, ../../sass/_recherche.scss */ /* line 43, ../../sass/_recherche.scss */
form.recherche .avancee ul { section.content.recherche form.recherche .avancee ul {
margin: 0 -5px;
display: flexbox; display: flexbox;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
} }
/* line 19, ../../sass/_recherche.scss */ /* line 51, ../../sass/_recherche.scss */
form.recherche .avancee ul li { section.content.recherche form.recherche .avancee ul li {
flex-grow: 1; flex-grow: 1;
width: 40%; width: 22%;
min-width: 150px;
margin: 5px 0; margin: 5px 0;
padding: 0 10px; padding: 0 10px;
} }
/* line 25, ../../sass/_recherche.scss */ /* line 58, ../../sass/_recherche.scss */
form.recherche .avancee ul li label { section.content.recherche form.recherche .avancee ul li label {
font-weight: bold; font-weight: bold;
font-size: 0.9em; font-size: 0.9em;
} }
/* line 29, ../../sass/_recherche.scss */ /* line 63, ../../sass/_recherche.scss */
form.recherche .avancee ul li input { section.content.recherche form.recherche .avancee ul li input[type="text"], section.content.recherche form.recherche .avancee ul li input[type='number'], section.content.recherche form.recherche .avancee ul li select {
display: block; display: block;
min-width: 150px; min-width: 150px;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
font-size: 0.9em;
background-color: #f8f8f8;
} }
/* line 35, ../../sass/_recherche.scss */ /* line 71, ../../sass/_recherche.scss */
form.recherche .avancee ul li.field__sujet, form.recherche .avancee ul li.field__contexte { section.content.recherche form.recherche .avancee ul li.btnsubmit {
text-align: right;
}
/* line 74, ../../sass/_recherche.scss */
section.content.recherche form.recherche .avancee ul li.field__sujet, section.content.recherche form.recherche .avancee ul li.field__contexte {
width: 45%;
min-width: 300px;
}
/* line 84, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride, section.content.recherche.vue-carte {
width: 100%; width: 100%;
min-width: unset;
max-width: unset;
min-height: unset;
max-height: unset;
height: 90vh;
height: calc(100vh - 30px);
padding: 0;
margin: 0;
}
/* line 95, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride .recherche-carte, section.content.recherche.vue-hybride .recherche-liste, section.content.recherche.vue-carte .recherche-carte, section.content.recherche.vue-carte .recherche-liste {
height: 100%;
}
/* line 98, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride .recherche-liste, section.content.recherche.vue-carte .recherche-liste {
overflow-y: auto;
padding: 15px;
}
/* line 104, ../../sass/_recherche.scss */
section.content.recherche.vue-liste .recherche-carte, section.content.recherche.vue-carte .recherche-liste {
display: none;
}
/* line 109, ../../sass/_recherche.scss */
section.content.recherche.vue-carte .recherche-carte, section.content.recherche.vue-liste .recherche-liste {
display: block;
width: 100%;
}
/* line 115, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride {
display: flex;
}
/* line 118, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride .recherche-liste {
width: 40vw;
min-width: 500px;
max-width: 800px;
}
/* line 123, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride .recherche-carte {
flex-shrink: 1;
width: 100%;
}
/* line 129, ../../sass/_recherche.scss */
section.content.recherche .vue-options {
text-align: center;
}
/* line 131, ../../sass/_recherche.scss */
section.content.recherche .vue-options ul {
display: inline-block;
border-radius: 5px;
overflow: hidden;
}
/* line 136, ../../sass/_recherche.scss */
section.content.recherche .vue-options ul li {
display: inline-block;
background: #fff;
padding: 10px;
} }
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {

75
avisstage/static/images/choix.svg Normal file
View file

@ -0,0 +1,75 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="40"
height="40"
viewBox="0 0 40.000001 40.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="choix.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.979899"
inkscape:cx="-158.22667"
inkscape:cy="-53.805144"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1366"
inkscape:window-height="720"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1012.3622)">
<path
sodipodi:type="star"
style="fill:#000000;fill-opacity:1;stroke:none;stroke-opacity:1"
id="path3338"
sodipodi:sides="3"
sodipodi:cx="154.28571"
sodipodi:cy="312.36221"
sodipodi:r1="49.897854"
sodipodi:r2="24.948927"
sodipodi:arg1="-0.52359878"
sodipodi:arg2="0.52359878"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 197.49851,287.41329 -43.2128,74.84678 -43.21281,-74.84678 z"
inkscape:transform-center-y="1.3333278"
transform="matrix(0.18513029,0,0,0.10688502,-8.5629579,997.64203)" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

2
avisstage/templates/avisstage/base.html
View file

@ -46,7 +46,7 @@
{% feedback_widget %} {% feedback_widget %}
{% endif %} {% endif %}
<section class="content"> <section class="content {% block extra_content_class %}{% endblock %}">
{% if messages %} {% if messages %}
<ul class="messages"> <ul class="messages">
{% for message in messages %} {% for message in messages %}

117
avisstage/templates/avisstage/liste/recherche_resultats.html
View file

@ -1,52 +1,81 @@
{% extends "avisstage/base.html" %} {% extends "avisstage/base.html" %}
{% load staticfiles %} {% load staticfiles %}
{% block title %}Dernières mises à jour - ExperiENS{% endblock %} {% block title %}Chercher un stage - ExperiENS{% endblock %}
{% block extra_content_class %}recherche {{ vue }}{% endblock %}
{% block content %} {% block content %}
<section class="recherche-liste">
<h1>Résultats de la recherche</h1> <h1>Recherche</h1>
<form class="recherche" method="GET" action=""> <form class="recherche" method="GET" action="">
<p class="generale">{{ form.generique }} <input type="submit" action="submit" value="Rechercher"/></p> <div>
<a class="toggle_avancee" href="#">Recherche avancée</a> <p class="generale">
<div class="avancee"> <span>
<ul> {{ form.generique }}
{% for field in form %} <input type="submit" action="submit" value="Chercher un stage"/>
{% if field != form.generique %} </span>
<li class="field__{{ field.name }}"> <a class="toggle_avancee" href="#" onclick="$('#recherche_avancee').toggleClass('expanded'); return false;">Recherche avancée</a>
{% if field.label %}{{ field.label_tag }}{% endif %} </p>
{{ field }} </div>
</li> <div class="avancee" id="recherche_avancee">
<p class="help_text">Le champ principal (ci-dessus) est aussi utilisé dans la recherche, ces champs ne servent qu'à filtrer plus précisément</p>
<ul>
{% for field in form %}
{% if field != form.generique %}
<li class="field__{{ field.name }}">
{% if field.label %}{{ field.label_tag }}{% endif %}
{{ field }}
</li>
{% endif %}
{% endfor %}
<li class="btnsubmit">
<input type="submit" action="submit" value="Chercher un stage"/>
</li>
</ul>
</div>
</form>
<article class="resultslist">
<h2>Résultats de la recherche</h2>
<div id="vue-options" class="vue-options">
<ul>
<li>Affichage :</li>
<li><a href="javascript:void(0);" id="display_list">Liste</a></li>
<li><a href="javascript:void(0);" id="display_hybrid">Hybride</a></li>
<li><a href="javascript:void(0);" id="display_map">Carte</a></li>
</ul>
</div>
<ul class="stage-liste">
{% for stage in stages %}
{% if tri == '-date_maj' %}
{% ifchanged stage.date_maj.date %}<li class="date-maj">Mis à jour le {{ stage.date_maj.date }}</li>{% endifchanged %}
{% endif %} {% endif %}
<li class="stage">
<div class="misc-hdr">
<h3><a href="{% url "avisstage:stage" stage.id %}">{{ stage.sujet }}</a><span class="auteur"> par <a href="{% url "avisstage:profil" stage.auteur.user.username %}">{{ stage.auteur.nom }}</a></span></h3>
<p class="dates"><span class="detail"><span class="debut">{{ stage.date_debut|date:"d/m" }}</span><span class="fin">{{ stage.date_fin|date:"d/m" }}</span></span><span class="year">{{ stage.date_debut|date:"Y" }}</span></p>
</div>
<div>
<ul class="infos">
<li class="type">{{ stage.get_type_stage_display }}</li>
<li class="structure">{{ stage.structure }}</li>
{% for lieu in stage.lieux.all %}<li class="lieu">{{ lieu.nom }}</li>{% endfor %}
{% for matiere in stage.matieres.all %}
<li class="matiere">{{ matiere.nom }}</li>
{% endfor %}
{% for thematique in stage.thematiques.all %}
<li class="thematique">{{ thematique.name }}</li>
{% endfor %}
</ul>
</div>
</li>
{% empty %}
<li class="stage">Aucun stage ne correspond à votre recherche et vos critères</li>
{% endfor %} {% endfor %}
</ul> </ul>
<input type="submit" action="submit" value="Rechercher"/> </article>
</div> </section>
</form> <section class="recherche-carte">
<article>
<ul class="stage-liste"> </section>
{% for stage in stages %}
{% ifchanged stage.date_maj.date %}<li class="date-maj">Mis à jour le {{ stage.date_maj.date }}</li>{% endifchanged %}
<li class="stage">
<div class="misc-hdr">
<h3><a href="{% url "avisstage:stage" stage.id %}">{{ stage.sujet }}</a><span class="auteur"> par <a href="{% url "avisstage:profil" stage.auteur.user.username %}">{{ stage.auteur.nom }}</a></span></h3>
<p class="dates"><span class="detail"><span class="debut">{{ stage.date_debut|date:"d/m" }}</span><span class="fin">{{ stage.date_fin|date:"d/m" }}</span></span><span class="year">{{ stage.date_debut|date:"Y" }}</span></p>
</div>
<div>
<ul class="infos">
<li class="type">{{ stage.get_type_stage_display }}</li>
<li class="structure">{{ stage.structure }}</li>
{% for lieu in stage.lieux.all %}<li class="lieu">{{ lieu.nom }}</li>{% endfor %}
{% for matiere in stage.matieres.all %}
<li class="matiere">{{ matiere.nom }}</li>
{% endfor %}
{% for thematique in stage.thematiques.all %}
<li class="thematique">{{ thematique.name }}</li>
{% endfor %}
</ul>
</div>
</li>
{% endfor %}
</ul>
</article>
{% endblock %} {% endblock %}

37
avisstage/views_search.py
View file

@ -16,26 +16,26 @@ from datetime import date
class SearchForm(forms.Form): class SearchForm(forms.Form):
generique = forms.CharField(required=False) generique = forms.CharField(required=False)
sujet = forms.CharField(label=u'À propos de', required=False) sujet = forms.CharField(label=u'À propos de', required=False)
sujet.full_line = True contexte = forms.CharField(label=u'Contexte (lieu, encadrant⋅e⋅s, structure)',
required=False)
apres_annee = forms.IntegerField(label=u'Après cette année', required=False) apres_annee = forms.IntegerField(label=u'Après cette année', required=False)
avant_annee = forms.IntegerField(label=u'Avant cette année', required=False) avant_annee = forms.IntegerField(label=u'Avant cette année', required=False)
type_stage = forms.ChoiceField(label="", choices=([('', u'Type de stage')] type_stage = forms.ChoiceField(label="Type de stage", choices=([('', u'')]
+ list(TYPE_STAGE_OPTIONS)), + list(TYPE_STAGE_OPTIONS)),
required=False) required=False)
niveau_scol = forms.ChoiceField(label="", choices=([('', u'Année d\'études')] niveau_scol = forms.ChoiceField(label="Année d'étude", choices=([('', u'')]
+ list(NIVEAU_SCOL_OPTIONS)), + list(NIVEAU_SCOL_OPTIONS)),
required=False) required=False)
contexte = forms.CharField(label=u'Contexte (lieu, encadrant⋅e⋅s, structure)', type_lieu = forms.ChoiceField(label=u"Type de lieu d'accueil",
required=False) choices=([('', u'')]
type_lieu = forms.ChoiceField(choices=([('', u'Type de lieu d\'accueil')]
+ list(TYPE_LIEU_OPTIONS)), + list(TYPE_LIEU_OPTIONS)),
required=False) required=False)
tri = forms.ChoiceField(label=u'Trier par', tri = forms.ChoiceField(label=u'Tri par',
choices=[('pertinence', u'Par pertinence'), choices=[('pertinence', u'Pertinence'),
('-date_maj',u'Par dernière mise à jour')], ('-date_maj',u'Dernière mise à jour')],
required=False, initial='pertinence') required=False, initial='pertinence')
@ -111,19 +111,30 @@ def cherche(**kwargs):
print filtres print filtres
resultat = Stage.objects.filter(filtres) resultat = Stage.objects.filter(filtres)
tri = 'pertinence'
if not use_dsl:
kwargs['tri'] = '-date_maj'
if field_relevant('tri') and kwargs['tri'] != 'pertinence': if field_relevant('tri') and kwargs['tri'] != 'pertinence':
tri = kwargs['tri']
resultat = resultat.order_by(kwargs['tri']) resultat = resultat.order_by(kwargs['tri'])
return resultat
return resultat, tri
@login_required @login_required
def recherche(request): def recherche(request):
stages = [] stages = []
tri = ''
vue = 'vue-liste'
if request.method == "GET": if request.method == "GET":
form = SearchForm(request.GET) form = SearchForm(request.GET)
if form.is_valid(): if form.is_valid():
stages = cherche(**form.cleaned_data) stages, tri = cherche(**form.cleaned_data)
else: else:
form = SearchForm() form = SearchForm()
if stages:
vue = 'vue-hybride'
return render(request, 'avisstage/liste/recherche_resultats.html', return render(request, 'avisstage/liste/recherche_resultats.html',
{"form": form, "stages":stages}) {"form": form, "stages":stages,
"tri": tri, "vue": vue})