R E S P O N S I V E

avisstage/sass/_definitions.scss

@@ -0,0 +1,13 @@
+
+$staticurl: "/experiens/static/";
+
+$fond: #8fcc33;
+$barre: darken($fond, 10%);
+$compl: #f99b20;
+$jaune: #fff60a;
+$vert: #1a82dd;//09f7b0;
+$rouge: #f70978;
+
+$textfont: 'Dosis', sans-serif;
+$textfontsize: 19px;
+$headfont: Podkova, serif;

avisstage/sass/_responsive.scss

@@ -0,0 +1,162 @@
+@media screen and (max-width: 850px) {
+    header {
+        font-size: 0.9em;
+        
+        h1 {
+            font-size: 1.5em;
+        }
+        
+        nav ul li a {
+            height: 60px;
+        }
+    }
+
+    .explications div {
+        max-width: 50vw;
+        overflow: hidden;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    header {
+        z-index: 40;
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        display: block;
+        max-height:100vh;
+        overflow-y: auto;
+        
+        h1 {
+            padding: 10px;
+        }
+        #showmenu {
+            display: block;
+            float: right;
+            padding: 10px;
+            
+            img {
+                width: 35px;
+            }
+        }
+        nav {
+            clear: both;
+            text-align: right;
+            
+            ul {
+                display: none;
+                
+                li {
+                    display: block;
+                    a {
+                        display: block;
+                        padding: 10px 20px;
+                        height: auto;
+                        text-align:right;
+                        
+                        br {
+                            display: none;
+                        }
+                        .username:after {
+                            content: " | ";
+                        }
+                    }
+                }
+            }
+        }
+    }
+    header.expanded {
+        nav ul {
+            display:block;
+        }
+    }
+
+    #feedback-button {
+        transform: unset;
+        top: 0px;
+        left: 165px;
+        padding: 15px 5px;
+        z-index: 41;
+        background: rgba(#000, 0.5);
+    }
+    .content {
+        margin-top: 70px;
+    }
+    .article-wrapper {
+        display: block;
+        .toc-wrapper, article {
+            display: block;
+        }
+        .toc-wrapper {
+            max-width: unset;
+            width: unset;
+        }
+        .toc {
+            display: none;
+            position: relative;
+            font-size:0.9em;
+            border: 1px solid #000;
+            padding: 4px;
+        }
+    }
+    article.stage {
+        h3 {
+            margin-top: 10px;
+        }
+        section {
+            .avis-texte, .chapo {
+                padding: 10px;
+            }
+        }
+        section .plusmoins > div::before {
+            width: 70px;
+        }
+    }
+
+    .homeh1 {
+        display: block;
+        & > * {
+            display:block;
+        }
+    }
+    article.promo {
+        .explications {
+            display:block;
+            div {
+                max-width: 100%;
+                display: block;
+            }
+        }
+    }
+
+    form {
+        .field {
+            display: block;
+            
+            label, .label {
+                display: block;
+                text-align: left;
+                font-size: 0.95em;
+                color: $compl * 0.8;
+                margin-top: 0;
+                width: auto;
+            }
+
+            .help_text {
+                text-align: right;
+                color: $fond * 0.4;
+            }
+
+            .input {
+                padding-left: 20px;
+                display: block;
+                text-align: right;
+            }
+
+            input, textarea, div.tinymce {
+                background: lighten($fond, 45%);
+            }
+        }
+    }
+}

avisstage/sass/screen.scss

@@ -1,19 +1,10 @@
 @import "compass/reset";
-
+@import "_definitions.scss";
 @import url('https://fonts.googleapis.com/css?family=Dosis:300,500,700|Podkova:700');
 
-$fond: #8fcc33;
+* {
-$barre: darken($fond, 10%);
+    box-sizing: border-box;
-$compl: #f99b20;
+}
-$jaune: #fff60a;
-$vert: #1a82dd;//09f7b0;
-$rouge: #f70978;
-$staticurl: "/experiens/static/";
-
-$textfont: 'Dosis', sans-serif;
-$textfontsize: 19px;
-$headfont: Podkova, serif;
-
 
 body {
     background: $fond;
@@ -29,6 +20,7 @@ h1, h2, h3, h4 {
 
 h1 {
     font-size: 2.3em;
+    position: relative;
 }
 
 h2 {
@@ -39,15 +31,20 @@ h3 {
     font-size: 1.4em;
 }
 
-b, strong, em {
+b, strong {
     font-weight: bold;
 }
 
+em, i {
+    font-style: italic;
+}
+
 .beta {
+    position: absolute;
     opacity: 0.5;
     font-size: 0.7em;
     display: inline-block;
-    transform: translate(-1em, 0.6em) rotate(-15deg);
+    transform: translate(-1em, 1em) rotate(-15deg);
 }
 
 a {
@@ -62,22 +59,29 @@ header {
     justify-content: space-between;
     align-items: center;
 
-    nav ul {
+    #showmenu {
-        display: inline-flex;
+        display:none;
+    }
     
-        li {
+    nav {
-            display: inline-table;
+        display: inline;
+        ul {
+            display: inline-flex;
             
-            a {
+            li {
-                text-align: center;
+                display: inline-table;
-                display: table-cell;
-                padding: 0 20px;
-                height: 90px;
-                vertical-align: middle;
-                color: lighten($fond, 40%);
                 
-                &:hover {
+                a {
-                    background: $barre * 0.6;
+                    text-align: center;
+                    display: table-cell;
+                    padding: 0 20px;
+                    height: 90px;
+                    vertical-align: middle;
+                    color: lighten($fond, 40%);
+                    
+                    &:hover {
+                        background: $barre * 0.6;
+                    }
                 }
             }
         }
@@ -91,6 +95,7 @@ header {
     h1 {
         padding: 15px;
         word-wrap: none;
+        display: inline-block;
     }
 }
 
@@ -100,7 +105,8 @@ p {
 
 .content {
     background: #efefef;
-    max-width: 900px;
+    width: 900px;
+    max-width: 95vw;
     padding: 30px;
     margin: 15px auto;
 
@@ -123,7 +129,9 @@ p {
     & > * {
         display: inline-block;
     }
-    
+    p {
+        text-align: right;
+    }
 }
 
 // Liste des stages
@@ -204,11 +212,11 @@ article.stage {
     
     h2 {
         background: desaturate(lighten($jaune, 15%), 40%);
-        color: #fff;
+        color: #000;
         padding: 10px 20px;
         margin: -20px;
         margin-bottom: 25px;
-        text-shadow: -3px 3px 0 rgba(#000, 0.3);
+        text-shadow: -3px 3px 0 rgba(#fff, 0.3);
     }
     h3 {
         border-bottom: 2px solid desaturate($compl, 40%);
@@ -377,6 +385,7 @@ input, textarea, select, div.tinymce {
     line-height: 1.3em;
     font-weight: 500;
     padding: 5px;
+    text-align: left;
 
     &:focus, &.mce-edit-focus {
         background-color: lighten($fond, 40%);
@@ -534,7 +543,7 @@ div.as-results {
         li.as-result-item {
 
             &.active {
-                background: lighten($compl, 50%);
+                background: lighten($compl, 30%);
             }
         }
 
@@ -554,7 +563,7 @@ div.as-results {
     overflow: hidden;
     top: 0;
     left: 0;
-    z-index: 10;
+    z-index: 50;
 
     &.visible {
         display:block;
@@ -645,6 +654,7 @@ a.lieu-change {
 #stages-map {
     width:100%;
     height: 600px;
+    max-height: 90vh;
 }
 
 #feedback-button {
@@ -680,6 +690,12 @@ article.promo {
     .explications {
         display:table;
 
+        &:first-child {
+            direction: rtl;
+            & > * {
+                direction: ltr;
+            }
+        }
 
         & > div {
             display:table-cell;
@@ -697,6 +713,10 @@ article.promo {
     display: none;
 }
 
+.leaflet-container {
+    z-index: 1;
+}
+
 .stage-liste {
     li {
         display: block;
@@ -725,3 +745,5 @@ article.promo {
         }
     }
 }
+
+@import "_responsive.scss";

avisstage/static/images/minimenu.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
+<path fill="none" stroke="#FFFFFF" stroke-width="2" d="M47.062,41.393c0,3.131-2.538,5.669-5.669,5.669H8.608  c-3.131,0-5.669-2.538-5.669-5.669V8.608c0-3.131,2.538-5.669,5.669-5.669h32.785c3.131,0,5.669,2.538,5.669,5.669V41.393z"/>
+<g>
+	<line fill="none" stroke="#FFFFFF" stroke-width="3" x1="10.826" y1="15" x2="40.241" y2="15"/>
+	<line fill="none" stroke="#FFFFFF" stroke-width="3" x1="10.826" y1="25" x2="40.241" y2="25"/>
+	<line fill="none" stroke="#FFFFFF" stroke-width="3" x1="10.826" y1="35" x2="40.241" y2="35"/>
+</g>
+</svg>

avisstage/templates/avisstage/base.html

@@ -22,6 +22,7 @@
             <h1><a href="{% url 'avisstage:index' %}">ExperiENS <span class='beta'>beta</span></a></h1>
             
             <nav>
+                <a id="showmenu" href="#" onclick="$('header').toggleClass('expanded');return false;"><img src="{% static "images/minimenu.svg" %}" width="50px"></a>
                 <ul id="menu">
                     <li><a href="{% url 'avisstage:index' %}">Accueil</a></li>
                     {% if user.is_authenticated %}
@@ -29,7 +30,7 @@
                         <li><a href="{% url 'avisstage:recherche' %}">Recherche</a></li>
                     {% endif %}
                     {% if user.is_staff %}
-                        <li><a href="{% url 'admin:index' %}">Administration</a></li>
+                        <li><a href="{% url 'admin:index' %}">Admin</a></li>
                     {% endif %}
                     {% if user.is_authenticated %}
                         <li><a href="{% url 'logout' %}"><span class="username">{{ user.username }}</span><br/> Déconnexion</a></li>

avisstage/templates/avisstage/index.html

@@ -6,7 +6,7 @@
 {% block content %}
     <div class="homeh1">
         <h1>ExperiENS <span class="beta">beta</span></h1>
-        <p>Partagez vos expériences de stages !</p>
+        <p>Partagez vos expériences de stages&nbsp;!</p>
     </div>
     
     <div class="betacadre">
@@ -15,7 +15,7 @@
     
     {% if not user.is_authenticated %}
         <div class="entrer">
-            <p><a href="{% url 'login' %}">Connexion</a></p>
+            <p><a href="{% url 'login' %}" class="btn">Connexion</a></p>
             <p class="helptext">Connexion via le serveur central d'authentification ENS (identifiants clipper)</p>
         </div>
     {% endif %}
@@ -23,16 +23,16 @@
     <article class="promo">
         <div class="explications">
             <div>
-                <p>Ne partez plus en stage en terre inconnue : nourrissez-vous de l'expérience des stages effectués par la communauté normalienne, repérez les bons plans, et ne faites pas les mêmes erreurs&nbsp;!</p>
+                <img src="{% static 'images/home2.jpg' %}"/>
-                {% if user.is_authenticated %}<p><a href="{% url 'avisstage:recherche' %}" class="btn">Rechercher des stages</a></p>{% endif %}
             </div>
             <div>
-                <img src="{% static 'images/home2.jpg' %}" width="350"/>
+                <p>Ne partez plus en stage en terre inconnue : nourrissez-vous de l'expérience des stages effectués par la communauté normalienne, repérez les bons plans, et ne faites pas les mêmes erreurs&nbsp;!</p>
+                {% if user.is_authenticated %}<p><a href="{% url 'avisstage:recherche' %}" class="btn">Rechercher des stages</a></p>{% endif %}
             </div>
         </div>
         <div class="explications">
             <div>
-                <img src="{% static 'images/home1.jpg' %}" width="350"/>
+                <img src="{% static 'images/home1.jpg' %}"/>
             </div>
             <div>
                 <p>Vous revenez du bout du monde (ou de la rue d'à côté)&nbsp;? N'attendez plus, rédigez un avis sur votre stage pour que votre expérience profite à d'autres&nbsp;!</p>