Merge branch 'thubrecht/mobile' into 'master'

Thubrecht/mobile

Closes #23

See merge request klub-dev-ens/annuaire!20

.gitignore

@@ -9,7 +9,7 @@
 
 /venv/
 .vagrant/
-static/
+/static/
 
 *.sqlite3
 fiches/templates/fiches/base_old.html

fiches/static/fiches/css/annuaire.css

@@ -28,65 +28,21 @@
   font-weight: 400;
   src: local("Source Code Pro Regular"), local("SourceCodePro-Regular"), url("../fonts/source-code-pro/source-code-pro-v12-latin-regular.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v12-latin-regular.woff") format("woff");
 }
-#main-menu a a, #account-area a, a {
+a, #main-menu a a, #account-area a {
   text-decoration: none;
   color: #FFDC00;
 }
 
-#main-menu a a:hover, #account-area a:hover, a:hover,
+a:hover, #main-menu a a:hover, #account-area a:hover,
+a:active,
 #main-menu a a:active,
 #account-area a:active,
-a:active,
+a:focus,
 #main-menu a a:focus,
-#account-area a:focus,
-a:focus {
+#account-area a:focus {
   color: #ffbb00;
 }
 
-* {
-  box-sizing: border-box;
-}
-
-body, html {
-  height: 100%;
-}
-
-body {
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-template-areas: "aside main";
-  background-color: #301827;
-  color: #FFFFFF;
-  font-family: "Fira Sans", "Roboto", sans-serif;
-}
-
-#aside {
-  grid-area: aside;
-  padding: 0 0 0 10vw;
-  background-color: #1f0e19;
-  box-shadow: 4px 0 0 rgba(31, 14, 25, 0.3);
-  z-index: 10;
-}
-
-#main {
-  grid-area: main;
-  padding: 0 10vw 0 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: #301827;
-  z-index: 5;
-}
-
-@media only screen and (max-width: 1200px) {
-  #header {
-    margin: 0;
-  }
-
-  #main {
-    margin: 0;
-  }
-}
 #menu {
   display: grid;
   float: right;
@@ -95,6 +51,15 @@ body {
   grid-template-rows: auto auto auto auto 120px;
   grid-template-areas: "title" "language" "search" "menu" "account";
 }
+#menu #hamburger {
+  display: none;
+  grid-area: hamburger;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TS1VaHOwg4pChOlkoKuKoVShChVIrtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEzc1J0UVK/F9SaBHjwXE/3t173L0DhGaVqWZPHFA1y8gkE2IuvyoGXyEggD6EEZeYqc+l0yl4jq97+Ph6F+NZ3uf+HGGlYDLAJxLPMt2wiDeIpzctnfM+cYSVJYX4nHjcoAsSP3JddvmNc8lhgWdGjGxmnjhCLJa6WO5iVjZU4iniqKJqlC/kXFY4b3FWq3XWvid/YaigrSxzneYIkljEEtIQIaOOCqqwEKNVI8VEhvYTHv5hx58ml0yuChg5FlCDCsnxg//B727N4uSEmxRKAIEX2/4YBYK7QKth29/Htt06AfzPwJXW8deawMwn6Y2OFj0CBraBi+uOJu8BlzvA0JMuGZIj+WkKxSLwfkbflAcGb4H+Nbe39j5OH4AsdZW6AQ4OgbESZa97vLu3u7d/z7T7+wEsq3KLN3ZkxAAAAAlwSFlzAAAA7AAAAOwBeShxvQAAADNJREFUWMPt1EERAEAIA7Ee/h0hjpPBg0RBp49NrnvTmc0Btf2AARVAipVQikGKpdgArvsZZAhH7c55ywAAAABJRU5ErkJggg==");
+  height: 30px;
+  width: 30px;
+  float: right;
+  margin-top: 20px;
+}
 
 #title {
   grid-area: title;
@@ -279,10 +244,10 @@ body {
 }
 #content-home form {
   display: grid;
-  width: 400px;
+  width: min(400px, 100%);
   margin: 0 auto;
-  grid-template-columns: 150px 250px;
-  gap: 20px;
+  grid-template-columns: 30% 65%;
+  gap: 5%;
 }
 #content-home form label {
   grid-column: 1;
@@ -308,7 +273,7 @@ body {
 
 #content-view-profile {
   display: grid;
-  grid-template-rows: 150px auto auto;
+  grid-template-rows: min(150px, 45%) auto auto;
   grid-template-columns: 3fr 1fr;
   grid-template-areas: "header    header" "infos     infos" "free-text free-text";
   gap: 20px;
@@ -398,7 +363,7 @@ body {
 }
 
 #content-edit-profile form {
-  width: 400px;
+  width: min(400px, 100%);
   margin: 0 auto;
 }
 #content-edit-profile form .form-entry {
@@ -545,4 +510,101 @@ body {
   text-align: center;
 }
 
+* {
+  box-sizing: border-box;
+}
+
+body, html {
+  height: 100%;
+}
+
+body {
+  display: grid;
+  grid-template-areas: "aside main";
+  background-color: #301827;
+  color: #FFFFFF;
+  font-family: "Fira Sans", "Roboto", sans-serif;
+  border: none;
+}
+
+#aside {
+  grid-area: aside;
+  padding: 0 0 0 10vw;
+  background-color: #1f0e19;
+  box-shadow: 4px 0 0 rgba(31, 14, 25, 0.3);
+  z-index: 10;
+}
+
+#main {
+  grid-area: main;
+  padding: 0 10vw 0 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #301827;
+  z-index: 5;
+}
+
+@media screen and (max-width: 900px), (orientation: portrait) {
+  body {
+    grid-template-rows: max-content auto;
+    grid-template-areas: "aside" "main";
+  }
+
+  h1 {
+    font-size: 1.5em;
+  }
+
+  #aside,
+#main {
+    padding: 0;
+    box-shadow: unset;
+    width: 100vw;
+  }
+
+  #content-home,
+#content-birthdays,
+#content-view-profile,
+#content-edit-profile {
+    width: auto;
+  }
+
+  #content-home form input[type=submit] {
+    grid-column: 1/3;
+  }
+
+  #title {
+    font-size: 1.75rem;
+  }
+
+  .content h2 {
+    font-size: 1.5rem;
+  }
+
+  #footer,
+.content {
+    max-width: 100%;
+  }
+
+  #menu {
+    width: auto;
+    float: none;
+    grid-template-columns: auto 50px;
+    grid-template-areas: "title hamburger" "language language" "search search" "menu menu" "account account";
+  }
+  #menu #hamburger {
+    display: grid;
+  }
+  #menu #main-menu,
+#menu #account-area {
+    display: none;
+  }
+
+  #search-area {
+    justify-content: center;
+    margin: auto;
+    width: 80%;
+  }
+}
+
 /*# sourceMappingURL=annuaire.css.map */

fiches/static/fiches/css/annuaire.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/_fonts.scss","../scss/_links.scss","../scss/_colors.scss","../scss/_header.scss","../scss/_buttons.scss","../scss/_errors.scss","../scss/_content.scss","../scss/_footer.scss","../scss/_common.scss"],"names":[],"mappings":";AASA;AACA;EACI;EACA;EACA;EACA;;AAKJ;AACA;EACI;EACA;EACA;EACA;;AAKJ;AACA;EACI;EACA;EACA;EACA;;AAUJ;AAUA;AACA;EACI;EACA;EACA;EACA;;ACzDJ;EACI;EACA,OCOQ;;;ADJZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGI,OCEc;;;ACJlB;EACI;EACA;EACA;EAEA;EACA;EACA,qBACI;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIN;EACI;EAGA;EACA;EACA;EACA;;AAIA;EACI;;;AAIR;EACI;EACA;EACA;EACA,QAhDgB;EAiDhB;EACA;;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI,kBDxEI;;;AC4EZ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA,OD3Fc;;AC8FlB;EACI,OD5FI;EC6FJ;;AAGJ;AAAA;EAEI;EACA;EACA;EACA,ODxGc;;AC2GlB;EACI;;AAGJ;EACI;;;AAKJ;EAEI;EACA;EACA;EACA;EAEA,ODzHI;EC0HJ;;AAGJ;EAEI,OD9HU;;;ACkIlB;EAEI;EAEA;EACA,ODhIa;ECiIb;;AAEA;EAEI;EACA;EACA;EACA;EAEA,ODlJI;ECmJJ;;AAGJ;EAEI,ODvJU;;;AC2JlB;EACI;EACA;EACA;EACA;;AAIA;EACI,aH5GU;;;AIlElB;AAAA;AAAA;EACI;EACA,kBFUqB;EETrB;EACA;EACA,OFSe;EERf;EACA;;;AAGJ;AAAA;AAAA;EACI,kBFE2B;;;AGf/B;EACI;EACA;;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;;ACrBR;EACI,OJqBW;;;AIlBf;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAWJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAMJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIA;EACI;;;AAYhB;EACI;EACA;EACA;EACA,qBACI;EAGJ;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA,OJnGU;EIoGV;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;EAEA;EACA,OJpHS;EIqHT;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,kBJtHe;EIuHf;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA,OJvJF;EIwJE;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACE;;AASlB;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;;AAMR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA,kBJpLe;EIqLf;;AAEA;EACI;;AAGJ;EACI;EACA,OJ7MC;EI8MD;EACA;EACA;;AAGJ;EACI;;AAGJ;EAGI;EACA;;AAIR;EACI;EACA;EACA;EACA,qBACI;EAEJ;EACA;EACA;;AAEA;EACI;;AAMJ;EACI;EACA;;AAEJ;EAAqB;;AACrB;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;AAAA;EAEI;;AAGJ;EACI;;AAUA;EAAqB;;AACrB;EAAqB;;AAGrB;AAAA;EAEI;;AAIR;EAEI;;AAIR;EACI;;AAGJ;EACI;;AAIA;EACI;EACA;;AAIR;EACI;EACA;;AAIA;EACI;;AAGJ;EACI;EACA;EACA;;AAMR;EACI;EACA;EACA;;AAKJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA,OJ1WC;EI2WD;;AASJ;EACI;;;AC5XhB;EACI;EACA;EACA,OLGkB;EKFlB;;AAEA;EACI;EACA;;;ACNR;EACI;;;AAMJ;EACI;;;AAGJ;EACI;EACA,qBACI;EAEJ,kBNnBc;EMoBd,ONdQ;EMeR,aR6CY;EQ5CZ;;;AAGJ;EACI;EACA;EACA,kBN3Be;EM4Bf;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA,kBNvCc;EMwCd;;;AAIJ;EACE;IACE;IACA,qBACI;;;EAIN;IACE;;;EAGF;AAAA;IAEE;IACA;IACA;;;EAGF;AAAA;AAAA;AAAA;IAIE;;;EAKE;IACE;;;EAKN;IACE;;;EAIA;IACE;;;EAIJ;AAAA;IAEE;;;EAGF;IACE;IACA;IACA;IACA,qBACE;;EAMF;IACE;;EAGF;AAAA;IAEE;;;EAIJ;IACE;IACA;IACA","file":"annuaire.css"}

fiches/static/fiches/css/datepicker.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/datepicker.scss"],"names":[],"mappings":"AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0FA;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA,SAvDc;EAwDd,aA1DmB;;AA4DnB;EACE;EACA,gBA9DiB;;;AAkErB;EACE;EACA,eA3EiB;EA4EjB,kBA9EoB;;AAgFpB;EACE,YAvEiB;;AA0EnB;EACE;EACA;EACA;EACA,eAtFe;EAuFf;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA,kBA/GM;;;AAkHR;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,QA3GkB;EA4GlB,aA5GkB;;;AA+GpB;EACE;EACA,kBAnH0B;EAoH1B;EACA;EACA,aA3HoB;;;AAiIpB;EACE;;AAMA;EAqBE;EACA;EACA;EACA;EACA;EACA;EACA,eAzKa;EA0Kb;EACA,kBAvLE;EAwLF;EACA;EACA;EACA;EACA;EACA,aA/KgB;EAgLhB;EACA,OA7LC;EA8LD,WAjLgB;;AAmLhB;EAEE;;AAGF;EACE,cAlMK;EAmML,OAvMD;;AA0MD;EACE,cA1MD;EA2MC,OA5MD;;AA8MC;EACE;;AAIJ;EACE,cAjNI;EAkNJ,OArND;;AAwND;EACE;;AAGF;EA1KJ;EACA;;AA4KM;EACE;;AAIA;EACE;;AAIJ;EACE;;AAGF;EACE;;AAIJ;EA3LJ;EACA,eA7CuB;EA8CvB;EACA,WA5CmB;;AA0OnB;EACE;;AAGF;AAAA;EAEE;EACA;EACA,OAzOgB;;AA2OhB;AAAA;EACE;;;AAYJ;EAEE;EACA;EACA;EACA,aApQkB;;AAuQpB;EAEE,OAlQgB;EAmQhB,OAtRS;EAuRT,WA7QiB;;AA+QjB;EANF;IAOI,OAhPmB;;;;AAqPzB;EAIE;;AAEA;EACE;IACE;;;;AAQJ;EACE;EACA;;AAGF;EACE,kBAjS6B;;AAqS7B;EAEE,kBApS8B;EAqS9B,OApSmB;EAqSnB,aApSyB;;AAwS7B;EACE,OAjUW;;AAsUX;EACE,OAnTmB;;AAsTrB;EACE;;AAIJ;EACE;EACA,kBAtTmC;;AAwTnC;EACE;;AAGF;EACE,kBArU2B;;AA0U7B;EACE,kBArU2B;;AAuU3B;EACE,OAvUc;;AA2UlB;EACE;;AAQJ;EAEE;EACA;;;AAIJ;EACE,cAlV8B;;AAoV9B;EAEE","file":"datepicker.css"}

fiches/static/fiches/scss/_common.scss

@@ -15,13 +15,13 @@ body, html {
 
 body {
     display: grid;
-    grid-template-columns: auto auto;
     grid-template-areas:
         "aside main";
 
     background-color: colors.$page-background;
     color: colors.$page-text;
     font-family: fonts.$regular-fonts;
+    border:none;
 }
 
 #aside {
@@ -42,13 +42,81 @@ body {
     z-index: 5;
 }
 
-@media only screen and (max-width: 1200px) {
-    #header {
-        margin: 0;
+// Pour les vues mobile
+@media screen and (max-width: 900px), (orientation: portrait) {
+  body {
+    grid-template-rows: max-content auto;
+    grid-template-areas:
+        "aside"
+        "main";
   }
 
+  h1 {
+    font-size: 1.5em;
+  }
+
+  #aside,
   #main {
-        margin: 0;
+    padding: 0;
+    box-shadow: unset;
+    width: 100vw;
   }
-}
 
+  #content-home,
+  #content-birthdays,
+  #content-view-profile,
+  #content-edit-profile {
+    width: auto;
+  }
+
+  #content-home {
+    form {
+      input[type="submit"] {
+        grid-column: 1/3;
+      }
+    }
+  }
+
+  #title {
+    font-size: 1.75rem;
+  }
+
+  .content {
+    h2 {
+      font-size: 1.5rem;
+    }
+  }
+
+  #footer,
+  .content {
+    max-width: 100%;
+  }
+
+  #menu {
+    width: auto;
+    float: none;
+    grid-template-columns: auto 50px;
+    grid-template-areas:
+      "title hamburger"
+      "language language"
+      "search search"
+      "menu menu"
+      "account account";
+
+    #hamburger {
+      display: grid;
+    }
+
+    #main-menu,
+    #account-area {
+      display: none;
+    }
+  }
+
+  #search-area {
+    justify-content: center;
+    margin: auto;
+    width: 80%;
+  }
+
+}

fiches/static/fiches/scss/_content.scss

@@ -35,10 +35,10 @@
 #content-home {
     form {
         display: grid;
-        width: 400px;
+        width: min(400px, 100%);
         margin: 0 auto;
-        grid-template-columns: 150px 250px;
-        gap: 20px;
+        grid-template-columns: 30% 65%;
+        gap: 5%;
 
         label {
             grid-column: 1;
@@ -82,7 +82,7 @@
 
 #content-view-profile {
     display: grid;
-    grid-template-rows: 150px auto auto;
+    grid-template-rows: min(150px, 45%) auto auto;
     grid-template-columns: 3fr 1fr;
     grid-template-areas:
         "header    header"
@@ -195,7 +195,7 @@
 
 #content-edit-profile {
     form {
-        width: 400px;
+        width: min(400px, 100%);
         margin: 0 auto;
 
         .form-entry {

fiches/static/fiches/scss/_header.scss

@@ -19,6 +19,16 @@ $account-area-height: 120px;
         "search"
         "menu"
         "account";
+
+    #hamburger {
+      display: none;
+      grid-area: hamburger;
+      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TS1VaHOwg4pChOlkoKuKoVShChVIrtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEzc1J0UVK/F9SaBHjwXE/3t173L0DhGaVqWZPHFA1y8gkE2IuvyoGXyEggD6EEZeYqc+l0yl4jq97+Ph6F+NZ3uf+HGGlYDLAJxLPMt2wiDeIpzctnfM+cYSVJYX4nHjcoAsSP3JddvmNc8lhgWdGjGxmnjhCLJa6WO5iVjZU4iniqKJqlC/kXFY4b3FWq3XWvid/YaigrSxzneYIkljEEtIQIaOOCqqwEKNVI8VEhvYTHv5hx58ml0yuChg5FlCDCsnxg//B727N4uSEmxRKAIEX2/4YBYK7QKth29/Htt06AfzPwJXW8deawMwn6Y2OFj0CBraBi+uOJu8BlzvA0JMuGZIj+WkKxSLwfkbflAcGb4H+Nbe39j5OH4AsdZW6AQ4OgbESZa97vLu3u7d/z7T7+wEsq3KLN3ZkxAAAAAlwSFlzAAAA7AAAAOwBeShxvQAAADNJREFUWMPt1EERAEAIA7Ee/h0hjpPBg0RBp49NrnvTmc0Btf2AARVAipVQikGKpdgArvsZZAhH7c55ywAAAABJRU5ErkJggg==');
+      height: 30px;
+      width: 30px;
+      float: right;
+      margin-top: 20px;
+    }
 }
 
 #title {

fiches/static/fiches/scss/annuaire.scss

@@ -1,4 +1,4 @@
-@use "common";
 @use "header";
 @use "content";
 @use "footer";
+@use "common";

fiches/templates/fiches/base.html

@@ -5,7 +5,7 @@
 
 <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-  <meta charset="UTF-8">
+  <meta content="width=device-width, initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0;" name="viewport">
   <title>
     {% block title_onglet %}{% trans "Annuaire des élèves de l'ENS" %}{% endblock %}
   </title>
@@ -17,6 +17,11 @@
 <body>
   <div id="aside">
     <div id="menu">
+      <h1 id="title">
+        {% block title %} <a href='{% url "home" %}'>{% trans "Annuaire des élèves de l'ENS" %}</a>{% endblock %}
+      </h1>
+      <a id="hamburger" href="javascript:void(0);" onclick="toggleMenu()"></a>
+
       <div id="language_switch">
         <form action="{% url 'set_language' %}" method="post">
           {% csrf_token %}
@@ -32,11 +37,6 @@
         <button type="submit">{% trans "Rechercher" %}</button>
       </form>
 
-      <h1 id="title">
-        {% block title %} <a href='{% url "home" %}'>{% trans "Annuaire des élèves de l'ENS" %}</a>{% endblock %}
-      </h1>
-
-
       <div id="main-menu">
         <nav>
           <a href='{% url "home" %}'>{% trans "Accueil" %}</a>
@@ -78,6 +78,20 @@
       {% endblock %}
     </div>
   </div>
+  <script>
+    function toggleMenu() {
+      var menu = document.getElementById("main-menu");
+      var account = document.getElementById("account-area");
+      if (menu.style.display === "none") {
+        menu.style.display = "grid"
+        account.style.display = "grid"
+      } else {
+        menu.style.display = "none"
+        account.style.display = "none"
+      }
+    }
+
+  </script>
   {% block extra_js %}{% endblock %}
 </body>