Plus lisible

This commit is contained in:
Evarin 2017-05-16 23:37:10 +02:00
parent bcb5d35dd1
commit 0255158352
8 changed files with 604 additions and 337 deletions

View file

@ -15,7 +15,7 @@ from taggit_autosuggest.managers import TaggableManager
from tinymce.models import HTMLField as RichTextField
from .utils import choices_length
from .statics import DEPARTEMENTS_DEFAUT, PAYS_OPTIONS, TYPE_LIEU_OPTIONS, TYPE_STAGE_OPTIONS, TYPE_LIEU_DICT, TYPE_STAGE_DICT, NIVEAU_SCOL_OPTIONS
from .statics import DEPARTEMENTS_DEFAUT, PAYS_OPTIONS, TYPE_LIEU_OPTIONS, TYPE_STAGE_OPTIONS, TYPE_LIEU_DICT, TYPE_STAGE_DICT, NIVEAU_SCOL_OPTIONS, NIVEAU_SCOL_DICT
import ldap
@ -125,10 +125,11 @@ class Lieu(models.Model):
@property
def type_lieu_fancy(self):
return TYPE_LIEU_DICT.get(self.type_lieu, ("lieu", False))[0]
@property
def type_lieu_fem(self):
return TYPE_LIEU_DICT.get(self.type_lieu, ("lieu", False))[1]
def __unicode__(self):
return u"%s (%s)" % (self.nom, self.ville)
@ -207,7 +208,13 @@ class Stage(models.Model):
@property
def type_stage_fem(self):
return TYPE_STAGE_DICT.get(self.type_stage, ("stage", False))[1]
# Niveau scolaire en plus joli
@property
def niveau_scol_fancy(self):
return NIVEAU_SCOL_DICT.get(self.niveau_scol, "")
def get_absolute_url(self):
return reverse('avisstage:stage', self)

View file

@ -10,4 +10,5 @@ $rouge: #f70978;
$textfont: 'Dosis', sans-serif;
$textfontsize: 19px;
$headfont: Podkova, serif;
$paragraphfont: 'Lato', sans-serif;
$headfont: Alegreya, serif;

View file

@ -1,6 +1,6 @@
@import "compass/reset";
@import "_definitions.scss";
@import url('https://fonts.googleapis.com/css?family=Dosis:300,500,700|Podkova:700');
@import url('https://fonts.googleapis.com/css?family=Dosis:300,500,700|Alegreya:700|Lato:300,300i,700');
// Général
@ -19,6 +19,7 @@ body {
h1, h2, h3, h4 {
font-family: $headfont;
line-height: 1.2;
font-weight: bold;
}
h1 {
@ -190,7 +191,7 @@ header {
li {
display: block;
&.date-maj {
font-weight: bold;
font-weight: 300;
font-size: 0.9em;
padding: 3px 0;
}
@ -201,42 +202,64 @@ header {
h3 {
font-size: 1.4em;
padding-left: 5px;
& > a {
color: darken($vert, 20);
}
.auteur {
font-family: $textfont;
font-weight: bold;
font-size: 0.8em;
&, a {
font-family: $textfont;
font-weight: normal;
}
}
}
ul.infos {
display:inline;
}
}
.misc-hdr {
margin-bottom: 10px;
.dates {
& > span {
display: table-cell;
vertical-align: middle;
}
.year {
padding-left: 8px;
}
}
}
}
}
ul.infos {
margin: 0 -3px;
padding: 0;
li {
display: inline-block;
padding: 5px;
margin: 3px;
font-weight: normal;
font-weight: bold;
font-size: 0.9em;
border-radius: 4px;
&.thematique {
background-color: $vert;
color: #fff;
color: darken($vert, 20);
background-color: lighten($vert, 20);
}
&.matiere {
color: #fff;
background-color: $fond;
color: darken($fond, 20);
background-color: lighten($fond, 20);
}
&.lieu {
color: #fff;
background-color: $compl;
color: darken($rouge, 20);
background-color: lighten($rouge, 20);
}
}
}
@ -245,39 +268,44 @@ ul.infos {
//
// Détail d'un stage
article.stage .avis, div.tinymce {
ul, ol {
list-style: unset;
padding-left: 20px;
}
}
article.stage {
font-weight: normal;
font-family: $paragraphfont;
h2 {
background: desaturate(lighten($jaune, 15%), 40%);
color: #000;
padding: 10px 20px;
margin: -20px;
margin-bottom: 25px;
margin-bottom: 5px;
text-shadow: -3px 3px 0 rgba(#fff, 0.3);
}
h3 {
border-bottom: 2px solid desaturate($compl, 40%);
margin-left: -25px;
//border-bottom: 2px solid desaturate($compl, 40%);
margin-top: 30px;
padding: 5px;
padding-left: 20px;
color: #000;
text-shadow: -3px 3px 0 rgba(#000, 0.1);
padding-left: 0px;
color: darken($vert, 20);
text-shadow: -3px 3px 0 rgba($vert, 0.1);
//margin-right: 25px;
}
#stage-map {
height: 300px;
width: 100%;
}
section {
background: #eee;
padding: 14px;
max-width: 600px;
margin: 30px auto;
&.avis section {
max-width: 700px;
background: #fff;
padding: 14px;
margin: 30px auto;
}
&:first-child {
margin-top: 0;
h3 {
@ -285,28 +313,61 @@ article.stage {
}
}
#stage-map {
height: 300px;
width: 100%;
}
&.misc {
padding-top: 0;
margin-bottom: 30px;
.misc-content {
&.withmap {
display:table;
width: 100%;
& > div {
display:table-cell;
vertical-align: top;
}
.map {
min-width: 250px;
width: 30%;
min-height: 300px;
}
.desc {
padding: 5px;
padding-left: 15px;
}
}
}
}
.chapo, .avis-texte {
margin-bottom: 15px;
background: #fff;
padding: 20px;
}
.chapo {
font-size: 1.1em;
font-weight: 500;
font-variant: small-caps;
padding: 0 20px;
}
.avis-texte {
border-left: 1px solid #ccc;
font-size: $textfontsize - 1px;
}
.chapo {
font-size: 1.1em;
font-family: $textfont;
font-weight: 500;
padding-left: 0px;
}
.avis-texte {
//border-left: 1px solid #ccc;
padding-left: 15px;
}
.plusmoins {
max-width: 600px;
margin: 15px auto;
margin-top: 40px;
& > div {
display: table;
@ -314,7 +375,7 @@ article.stage {
&:before {
content: "&nbsp";
width: 100px;
width: 90px;
font-size: 1.8em;
font-weight: bold;
text-align: right;
@ -356,59 +417,103 @@ article.stage {
background: darken($rouge, 5%);
}
&:before {
content: "Les -";
content: "Les ";
vertical-align: top;
color: darken($rouge, 10%);
}
}
}
}
}
// Sommaire sur le côté
// Sommaire sur le côté
.article-wrapper {
display: table;
margin-left: -15px;
.toc-wrapper, article {
display: table-cell;
vertical-align: top;
}
.toc-wrapper {
max-width: 250px;
width: 25%;
background: #f6f6f6;
padding: 5px;
}
.toc {
position: -webkit-sticky;
position: sticky;
top: 12px;
.section-wrapper {
display: table;
margin-left: -15px;
width: 100%;
a {
display: block;
color: inherit;
font-weight: normal;
border-radius: 7px;
padding: 7px;
line-height: 1;
.toc-wrapper, & > section {
display: table-cell;
vertical-align: top;
}
.toc-wrapper {
max-width: 230px;
width: 25%;
padding: 5px;
padding-right: 25px;
}
.toc {
font-family: $textfont;
position: -webkit-sticky;
position: sticky;
top: 12px;
margin-left: -40px;
background: #fff;
padding: 5px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
ul {
list-style: none;
padding: 0;
}
&:hover {
background-color: $fond;
a {
display: block;
color: inherit;
font-weight: normal;
border-radius: 7px;
padding: 5px;
line-height: 1;
&:hover {
color: $fond;
}
}
.toc-h1 a {
font-weight: 900;
}
.toc-h2 {
margin-top: 10px;
font-weight: 400;
}
.toc-h3 a {
font-weight: 300;
}
.toc-active a {
color: darken($vert, 20);
}
}
.toc-h1 a {
font-weight: 900;
}
}
.misc-hdr {
display:table;
width: 100%;
border-bottom: 1px solid #ccc;
& > * {
display: table-cell;
vertical-align: bottom;
}
h1 {
width: 100%;
}
.dates {
width: 50px;
background-color: darken($rouge, 20);
color: #fff;
padding: 3px 10px;
border-radius: 5px 5px 0 0;
font-family: $textfont;
font-size: 0.8em;
text-align: center;
span {
display:block;
}
.toc-h2 {
margin-top: 15px;
}
.toc-h3 a {
font-weight: 300;
}
.toc-active a {
background-color: lighten($fond, 30%);
.year {
font-size: 1.8em;
}
}
}
@ -520,6 +625,7 @@ h1 .btn {
}
textarea, div.tinymce {
font-family: $paragraphfont;
border:none;
border-left: 1px solid $fond;
height: auto;
@ -848,6 +954,7 @@ article.promo {
// FAQ
.faq-toc {
font-family: $paragraphfont;
display: block;
max-width: 700px;
margin: 0 auto;
@ -876,8 +983,8 @@ article.promo {
}
a:hover {
color: #fff;
background: $compl !important;
color: darken($fond, 30);
background: lighten($fond, 20) !important;
}
}
}
@ -888,14 +995,15 @@ article.promo {
background: #fff;
padding: 15px;
h2 {
background: lighten($compl, 20%);
background-color: lighten($compl, 20%);
color: darken($compl, 20%);
margin: -15px;
padding: 15px;
}
h3 {
background: $vert;
color: #fff;
color: darken($vert, 20%);
background-color: lighten($vert, 30%);
margin: 0 -15px;
margin-top: 30px;
padding: 10px 15px;
@ -912,8 +1020,12 @@ article.promo {
}
}
p {
p, ul {
font-family: $paragraphfont;
font-size: $textfontsize - 1px;
max-width: 700px;
margin-left: auto;
margin-right: 5%;
}
}
}

File diff suppressed because it is too large Load diff

View file

@ -64,6 +64,18 @@ NIVEAU_SCOL_OPTIONS = (
('', u"Autre"),
)
NIVEAU_SCOL_DICT = {
"L3": u"pendant sa troisième année de Licence",
"M1": u"pendant sa première année de Master",
"M2": u"pendant sa deuxième année de Master",
"DOC": u"pendant son année de pré-doctorat",
"CST": u"pendant une année de césure",
"BLA": u"pendant une année blanche",
"VAC": u"pendant des vacances scolaires",
"MIT": u"à mi-temps en parallèle des études",
}
# Dictionnaire des noms de lieux (et de leur genre, True=féminin)
TYPE_LIEU_DICT = {
'universite': (u"université", True),

View file

@ -23,10 +23,13 @@
<ul class="stage-liste">
{% for stage in object.stages_publics %}
{% ifchanged stage.date_maj.date %}<li class="date-maj">Mis à jour le {{ stage.date_maj.date }}</li>{% endifchanged %}
<li class="stage"><h3><a href="{% url "avisstage:stage" stage.id %}">{{ stage.sujet }}</a></h3>
<li class="stage">
<div class="misc-hdr">
<h3><a href="{% url "avisstage:stage" stage.id %}">{{ stage.sujet }}</a><span class="auteur"></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="dates">Du {{ stage.date_debut }} au {{ stage.date_fin }}</li>
<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 %}

View file

@ -39,65 +39,83 @@
{% endblock %}
{% block content %}
<h1>{{ object.sujet }}</h1>
{% if object.auteur == user.profil %}
<div class="edit-box {{ object.public|yesno:"public,prive" }}">
<p><a href="{% url "avisstage:stage_edit" object.id %}" class="edit-btn btn">Modifier cette expérience</a></p>
<form action="{% url "avisstage:stage_publication" object.id %}" method="POST">
{% csrf_token %}
{% if object.public %}
<p>Cette page est visible publiquement. <input type="submit" value="Masquer ce stage" name="depublier" /></p>
<p>Cette page est visible par les autres utilisateurs. <input type="submit" value="Masquer ce stage" name="depublier" /></p>
{% else %}
<p>Cette page n'est qu'un brouillon, vous seul pouvez le voir. <input type="submit" value="Publier ce stage" name="publier" /></p>
{% endif %}
</form>
</div>
{% endif %}
<div class="article-wrapper">
<div class="toc-wrapper">
<div class="toc">
</div>
</div>
<article class="stage">
<section class="misc">
<h3>À propos de cette expérience</h3>
<article class="stage">
<section class="misc">
<div class="misc-content {% if object.lieux.all %}withmap{% endif %}">
{% if object.lieux.all %}
<div id="stage-map"></div>
<script type="text/javascript">
var lieux = [
{% for lieu in object.lieux.all %}
{
coord: {lat: "{{ lieu.coord.y|escapejs }}", lon: "{{ lieu.coord.x|escapejs }}" },
popup: "<h3>{{ lieu.nom|escapejs }}</h3>" +
"<p>{{ lieu.get_type_lieu_display|escapejs }}</p>" +
"<p>{{ lieu.ville|escapejs }}, {{ lieu.get_pays_display|escapejs }}</p>"
}{% if not forloop.last %},{% endif %}
{% endfor %}
];
$(function(){
initStageMap(lieux);
});
</script>
<div class="map">
<div id="stage-map"></div>
<script type="text/javascript">
var lieux = [
{% for lieu in object.lieux.all %}
{
coord: {lat: "{{ lieu.coord.y|escapejs }}", lon: "{{ lieu.coord.x|escapejs }}" },
popup: "<h3>{{ lieu.nom|escapejs }}</h3>" +
"<p>{{ lieu.get_type_lieu_display|escapejs }}</p>" +
"<p>{{ lieu.ville|escapejs }}, {{ lieu.get_pays_display|escapejs }}</p>"
}{% if not forloop.last %},{% endif %}
{% endfor %}
];
$(function(){
initStageMap(lieux);
});
</script>
</div>
{% endif %}
<p><a href="{% url "avisstage:profil" object.auteur.user.username %}">{{ object.auteur.nom }}</a>
<div class="desc">
<div class="misc-hdr">
<h1>{{ object.sujet }}</h1>
<p class="dates"><span class="year">{{ object.date_debut|date:"Y" }}</span><span class="debut">{{ object.date_debut|date:"d/m" }}</span><span class="fin">{{ object.date_fin|date:"d/m" }}</span></p>
</div>
<p><a href="{% url "avisstage:profil" object.auteur.user.username %}">{{ object.auteur.nom }}</a>
a fait {{ object.type_stage_fem|yesno:"cette,ce" }} <b>{{ object.type_stage_fancy }}</b>
{% if object.niveau_scol %} pendant son année de {{ object.get_niveau_scol_display }}, {% endif %}
du {{ object.date_debut }} au {{ object.date_fin }}{% if object.structure %}, au sein de {{ object.structure }}{% endif %}{% if object.encadrants %}, supervisé par {{ object.encadrants }}{% endif %}.</p>
<ul class="infos">
{% for matiere in object.matieres.all %}
<li class="matiere">{{ matiere.nom }}</li>
{% endfor %}
{% for thematique in object.thematiques.all %}
<li class="thematique">{{ thematique.name }}</li>
{% endfor %}
</ul>
{% if object.niveau_scol %}{{ object.niveau_scol_fancy }},{% endif %}
{% if object.structure %}au sein de {{ object.structure }}{% endif %}{% if object.encadrants %}, supervisé par {{ object.encadrants }}{% endif %}.</p>
{% if object.lieux.all %}<p>Cela s'est passé à :
{% for lieu in object.lieux.all %}{{ lieu.nom }} ({{ lieu.ville }}){% if not forloop.last %}, {% endif %}{% endfor %}.</p>
{% endif %}
<ul class="infos">
{% for matiere in object.matieres.all %}
<li class="matiere">{{ matiere.nom }}</li>
{% endfor %}
{% for thematique in object.thematiques.all %}
<li class="thematique">{{ thematique.name }}</li>
{% endfor %}
</ul>
</div>
</div>
</section>
<div class="section-wrapper">
<div class="toc-wrapper">
<div class="toc">
</div>
</div>
<section class="avis">
{% include "avisstage/detail/avis.html" with avis=object.avis_stage titre="Avis sur le travail" %}
{% for avis in object.avislieu_set.all %}
{% include "avisstage/detail/avis.html" with avis=avis titre=avis.lieu %}
{% endfor %}
</section>
{% include "avisstage/detail/avis.html" with avis=object.avis_stage titre="Avis sur le travail" %}
{% for avis in object.avislieu_set.all %}
{% include "avisstage/detail/avis.html" with avis=avis titre=avis.lieu %}
{% endfor %}
</article>
</div>
</article>
</div>
{% endblock %}

View file

@ -9,10 +9,13 @@
<ul class="stage-liste">
{% for stage in object_list %}
{% ifchanged stage.date_maj.date %}<li class="date-maj">Mis à jour le {{ stage.date_maj.date }}</li>{% endifchanged %}
<li class="stage"><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></h3>
<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="dates">Du {{ stage.date_debut }} au {{ stage.date_fin }}</li>
<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 %}