Plus lisible

avisstage/models.py

@@ -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,6 +125,7 @@ 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]
@@ -208,6 +209,12 @@ class Stage(models.Model):
     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)
     

avisstage/sass/_definitions.scss

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

avisstage/sass/screen.scss

@@ -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: darken($vert, 20);
-            color: #fff;
+            background-color: lighten($vert, 20);
         }
         &.matiere {
-            color: #fff;
+            color: darken($fond, 20);
-            background-color: $fond;
+            background-color: lighten($fond, 20);
         }
         &.lieu {
-            color: #fff;
+            color: darken($rouge, 20);
-            background-color: $compl;
+            background-color: lighten($rouge, 20);
         }
     }
 }
@@ -245,38 +268,43 @@ 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%);
+        //border-bottom: 2px solid desaturate($compl, 40%);
-        margin-left: -25px;
         margin-top: 30px;
         padding: 5px;
-        padding-left: 20px;
+        padding-left: 0px;
-        color: #000;
+        color: darken($vert, 20);
-        text-shadow: -3px 3px 0 rgba(#000, 0.1);
+        text-shadow: -3px 3px 0 rgba($vert, 0.1);
         //margin-right: 25px;
     }
     
-     #stage-map {
-        height: 300px;
-        width: 100%;
-    }
-    
     section {
-        background: #eee;
+
+        &.avis section {
+            max-width: 700px;
+            background: #fff;
             padding: 14px;
-        max-width: 600px;
             margin: 30px auto;
+        }
         
         &:first-child {
             margin-top: 0;
@@ -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;
+            padding: 0 20px;
-        }
-        .chapo {
-            font-size: 1.1em;
-            font-weight: 500;
-            font-variant: small-caps;
         }
         .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 {
+    .section-wrapper {
         display: table;
         margin-left: -15px;
+        width: 100%;
         
-    .toc-wrapper, article {
+        .toc-wrapper, & > section {
             display: table-cell;
             vertical-align: top;
         }
         .toc-wrapper {
-        max-width: 250px;
+            max-width: 230px;
             width: 25%;
-        background: #f6f6f6;
             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;
+            }
             
             a {
                 display: block;
                 color: inherit;
                 font-weight: normal;
                 border-radius: 7px;
-            padding: 7px;
+                padding: 5px;
                 line-height: 1;
                 
                 &:hover {
-                background-color: $fond;
+                    color: $fond;
                 }
             }
             .toc-h1 a {
                 font-weight: 900;
             }
             .toc-h2 {
-            margin-top: 15px;
+                margin-top: 10px;
+                font-weight: 400;
             }
             .toc-h3 a {
                 font-weight: 300;
             }
             .toc-active a {
-            background-color: lighten($fond, 30%);
+                color: darken($vert, 20);
+            }
+        }
+    }
+}
+
+.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;
+        }
+        .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;
+                color: darken($fond, 30);
-                background: $compl !important;
+                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: darken($vert, 20%);
-            color: #fff;
+            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%;
         }
     }
 }

avisstage/statics.py

@@ -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),

avisstage/templates/avisstage/detail/profil.html

@@ -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 %}

avisstage/templates/avisstage/detail/stage.html

@@ -39,29 +39,24 @@
 {% 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>
+            <div class="misc-content {% if object.lieux.all %}withmap{% endif %}">
                 {% if object.lieux.all %}
+                    <div class="map">
                         <div id="stage-map"></div>
                         <script type="text/javascript">
                          var lieux = [
@@ -78,11 +73,21 @@
                              initStageMap(lieux);
                          });
                         </script>
+                    </div>
                 {% endif %}
+                <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 %}
+                        {% if object.niveau_scol %}{{ object.niveau_scol_fancy }},{% 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>
+                        {% 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>
@@ -91,13 +96,26 @@
                             <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>
+        </div>
     </article>
+    
     </div>
 {% endblock %}

avisstage/templates/avisstage/liste/stage.html

@@ -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 %}