Merge pull request #15 from flifloo/materialize

Materialize

app.js

@@ -20,6 +20,7 @@ let profileRouter = require("./routes/profile");
 let checkRouter = require("./routes/check");
 let adminRouter = require("./routes/admin");
 let contactRouter = require("./routes/contact");
+let aboutRouter = require("./routes/about");
 
 let app = express();
 let sess = {
@@ -76,6 +77,7 @@ app.use("/profile", profileRouter);
 app.use("/check", checkRouter);
 app.use("/admin", adminRouter);
 app.use("/contact", contactRouter);
+app.use("/about", aboutRouter);
 
 // catch 404 and forward to error handler
 app.use((req, res) => {

locales/en.json

@@ -24,14 +24,17 @@
 		"question": "Practical question",
 		"profile": "My profile",
 		"other": "Another question",
-		"powered": "Powered by"
+		"powered": "Powered by",
+		"links": "Links",
+		"chooseSubject": "Choose a subject"
 	},
 	"index": {
 		"welcome": "Welcome to Sandwiches Order Doua",
 		"day": "Day",
 		"pay": "Pay",
 		"payment": "Payment method",
-		"creditCard": "Credit card"
+		"creditCard": "Credit card",
+		"chooseSandwich": "Choose your sandwich"
 	},
 	"login": {
 		"title": "Login",
@@ -70,9 +73,11 @@
 		"firstDate": "First date",
 		"lastDate": "Last date",
 		"paid": "Paid",
-		"given": "Given"
+		"given": "Given",
+		"chooseUser": "Choose an user"
 	},
 	"payment": {
+		"payment": "Payment",
 		"successful": "Payment successful !",
 		"canceled": "Payment canceled",
 		"error": "An error occurred with the payment",
@@ -92,5 +97,6 @@
 	"sandwich": "Sandwich",
 	"contact": "Contact",
 	"messageSend": "The message has been sent",
-	"forgetPassword": "Forgot your password"
+	"forgetPassword": "Forgot your password",
+	"chooseDepartment": "Choose your department"
 }

locales/fr.json

@@ -24,14 +24,17 @@
 		"question": "Question Pratique",
 		"profile": "Mon profil",
 		"other": "Autre question",
-		"powered": "Propulsé par"
+		"powered": "Propulsé par",
+		"links": "Liens",
+		"chooseSubject": "Choisissez un sujet"
 	},
 	"index": {
 		"welcome": "Bienvenue sur Sandwiches Order Doua",
 		"day": "Jour",
 		"pay": "Payer",
 		"payment": "Mode de paiement",
-		"creditCard": "CB"
+		"creditCard": "CB",
+		"chooseSandwich": "Choisissez votre sandwiche"
 	},
 	"login": {
 		"title": "Se connecter",
@@ -70,9 +73,11 @@
 		"firstDate": "Première date",
 		"lastDate": "Dernière date",
 		"paid": "Payé",
-		"given": "Donné"
+		"given": "Donné",
+		"chooseUser": "Choisissez un utilisateur"
 	},
 	"payment": {
+		"payment": "Paiement",
 		"successful": "Paiement réussi !",
 		"canceled": "Paiement annulé",
 		"error": "Une erreur est survenue lors du paiement",
@@ -93,5 +98,6 @@
 	"contact": "Contact",
 	"messageSend": "Le message a bien été envoyé",
 	"forgetPassword": "Mot de passe oublié",
-	"send": "send"
+	"send": "send",
+	"chooseDepartment": "Choisissez votre département"
 }

public/javascripts/admin/departments.js

@@ -1,4 +1,4 @@
-document.querySelectorAll("a.remove")
+document.querySelectorAll(".delete")
     .forEach(e => e.addEventListener("click", ev => {
         if (!confirm("Do you really want to remove this department ?"))
             ev.preventDefault();

public/javascripts/admin/orders/add.js

@@ -1,40 +1,59 @@
-const orderAction = document.getElementById("order-action");
-const rmButton = document.getElementById("remove-order");
+const orders = document.getElementById("orders");
+const sandwich = document.getElementById("sandwich");
+const day = document.getElementById("day");
 const locals = {
-    order: document.querySelector("#order1>h2").innerHTML.replace(" 1", ""),
-    sandwich: document.querySelector("label[for='sandwich1']").innerHTML,
-    day: document.querySelector("label[for='day1']").innerHTML
+    sandwich: document.querySelector("#oderCreator label").innerHTML,
+    day: document.querySelector("label[for=day]").innerText,
+    give: document.querySelector("p label span").innerText
 };
 
 function lastOrderId() {
-    let list = document.querySelectorAll("div.order h2");
-    return parseInt(list[list.length-1].innerText.replace(locals.order+" ", ""));
+    if (orders.lastChild)
+        return parseInt(orders.lastChild.id.replace("order", ""));
+    return 0;
 }
 
-document.getElementById("add-order").addEventListener("click", () => {
+document.getElementById("addOrder").addEventListener("click", () => {
+    if (!sandwich.value || !day.value)
+        return;
+
     let id = lastOrderId() + 1;
-    orderAction.insertAdjacentHTML("beforebegin", `<div id="order${id}" class="order">
-    <h2>${locals.order} ${id}</h2>
-    <div class="field">
+
+    orders.insertAdjacentHTML("beforeend", `<div id="order${id}" class="row">
+    <div class="input-field col s6">
+        <input id="sandwich${id}" type="text" name="sandwiches[${id}]" value="${sandwich.value}" readonly required>
         <label for="sandwich${id}">${locals.sandwich}</label>
-        <span class="list_arrow"><input id="sandwich${id}" type="list" list="sandwich-list" name="sandwiches[${id}]" autocomplete="off" required></span>
     </div>
-    <div class="field">
-        <label for="day${id}">${locals.day}</label>
-        <input id="day${id}" type="date" name="dates[${id}]" required>
+    <div class="input-field col s6">
+        <input id="date${id}" type="date" name="dates[${id}]" value="${day.value}" readonly required>
+        <label for="date${id}">${locals.day}</label>
     </div>
-    <div class="field">
-        <label for="give${id}">${locals.day}</label>
-        <input id="give${id}" type="checkbox" name="give[${id}]">
+    <div class="input-field col s12 center">
+        <p>
+            <label>
+                <input type="checkbox" name="give[${id}]">
+                <span>${locals.give}</span>
+            </label>
+        </p>
     </div>
+    <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">remove</i></a>
 </div>`);
-    document.getElementById("order"+lastOrderId()).scrollIntoView({behavior: "smooth"});
-    rmButton.classList.remove("hide");
+
+    sandwich.selectedIndex = 0;
+    day.value = "";
+
+    let order = document.getElementById("order"+id);
+    order.querySelector("a").addEventListener("click", () => {
+        order.remove();
+        if (lastOrderId() === 0) {
+            sandwich.required = true;
+            day.required = true;
+        }
+    });
+
+    document.getElementById("order"+id).scrollIntoView({behavior: "smooth"});
 });
 
-rmButton.addEventListener("click", () => {
-    let id = lastOrderId();
-    document.getElementById("order"+id).remove();
-    if (id === 2)
-        rmButton.classList.add("hide");
+document.querySelector("form").addEventListener("submit", () => {
+    return lastOrderId();
 });

public/javascripts/admin/orders/edit.js

@@ -0,0 +1,3 @@
+for (let e of document.getElementById("orders").children) {
+    e.querySelector("a").addEventListener("click", () => e.remove());
+}

public/javascripts/admin/orders/index.js

@@ -1,5 +1,4 @@
-document.querySelectorAll(".order form")
-    .forEach(e => e.addEventListener("submit", ev => {
+document.querySelectorAll(".delete").forEach(e => e.addEventListener("click", ev => {
         if (!confirm("Do you really want to remove this ?"))
             ev.preventDefault();
     }));

public/javascripts/admin/sandwiches.js

@@ -1,4 +1,4 @@
-document.querySelectorAll("a.remove")
+document.querySelectorAll(".delete")
     .forEach(e => e.addEventListener("click", ev => {
         if (!confirm("Do you really want to remove this sandwich ?"))
             ev.preventDefault();

public/javascripts/admin/users.js

@@ -1,4 +1,4 @@
-document.querySelectorAll("a.remove")
+document.querySelectorAll(".delete")
     .forEach(e => e.addEventListener("click", ev => {
         if (!confirm("Do you really want to remove this user ?"))
             ev.preventDefault();

public/javascripts/index.js

@@ -1,37 +1,50 @@
-const orderAction = document.getElementById("order-action");
-const rmButton = document.getElementById("remove-order");
+const orders = document.getElementById("orders");
+const sandwich = document.getElementById("sandwich");
+const day = document.getElementById("day");
 const locals = {
-    order: document.querySelector("#order1>h2").innerHTML.replace(" 1", ""),
-    sandwich: document.querySelector("label[for='sandwich1']").innerHTML,
-    day: document.querySelector("label[for='day1']").innerHTML
+    sandwich: document.querySelector("#oderCreator label").innerHTML,
+    day: document.querySelector("label[for=day]").innerText
 };
-const [min, max] = [document.getElementById("day1").min, document.getElementById("day1").max];
 
 function lastOrderId() {
-    let list = document.querySelectorAll("div.order h2");
-    return parseInt(list[list.length-1].innerText.replace(locals.order+" ", ""));
+    if (orders.lastChild)
+        return parseInt(orders.lastChild.id.replace("order", ""));
+    return 0;
 }
 
-document.getElementById("add-order").addEventListener("click", () => {
+document.getElementById("addOrder").addEventListener("click", () => {
+    if (!sandwich.value || !day.value)
+        return;
+
     let id = lastOrderId() + 1;
-    orderAction.insertAdjacentHTML("beforebegin", `<div id="order${id}" class="order">
-    <h2>${locals.order} ${id}</h2>
-    <div class="field">
+
+    orders.insertAdjacentHTML("beforeend", `<div id="order${id}" class="row">
+    <div class="input-field col s6">
+        <input id="sandwich${id}" type="text" name="sandwiches[${id}]" value="${sandwich.value}" readonly required>
         <label for="sandwich${id}">${locals.sandwich}</label>
-        <span class="list_arrow"><input id="sandwich${id}" type="list" list="sandwich-list" name="sandwiches[${id}]" autocomplete="off" required></span>
     </div>
-    <div class="field">
-        <label for="day${id}">${locals.day}</label>
-        <input id="da${id}y" type="date" min="${min}" max="${max}" name="dates[${id}]" required>
+    <div class="input-field col s6">
+        <input id="date${id}" type="date" name="dates[${id}]" value="${day.value}" readonly required>
+        <label for="date${id}">${locals.day}</label>
     </div>
+    <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">remove</i></a>
 </div>`);
-    document.getElementById("order"+lastOrderId()).scrollIntoView({behavior: "smooth"});
-    rmButton.classList.remove("hide");
+
+    sandwich.selectedIndex = 0;
+    day.value = "";
+
+    let order = document.getElementById("order"+id);
+    order.querySelector("a").addEventListener("click", () => {
+        order.remove();
+        if (lastOrderId() === 0) {
+            sandwich.required = true;
+            day.required = true;
+        }
+    });
+
+    document.getElementById("order"+id).scrollIntoView({behavior: "smooth"});
 });
 
-rmButton.addEventListener("click", () => {
-    let id = lastOrderId();
-    document.getElementById("order"+id).remove();
-    if (id === 2)
-        rmButton.classList.add("hide");
+document.querySelector("form").addEventListener("submit", () => {
+    return lastOrderId();
 });

public/javascripts/layout.js

@@ -1,25 +1,6 @@
-const more = document.getElementById("more");
-const dark = document.getElementById("dark");
-const about = document.getElementById("about");
-const contact = document.getElementById("contact");
-
-
-more.firstChild.addEventListener("click", () => {
-    dark.classList.remove("hide");
-    about.classList.remove("hide");
-});
-
-more.lastChild.addEventListener("click", () => {
-    dark.classList.remove("hide");
-    contact.classList.remove("hide")
-});
-
-dark.addEventListener("click", () => {
-    dark.classList.add("hide");
-    if (! about.classList.contains("hide"))
-        about.classList.add("hide");
-    else
-        contact.classList.add("hide");
+document.addEventListener("DOMContentLoaded", function() {
+    M.AutoInit();
+    M.updateTextFields;
 });
 
 function cb(token) {

public/javascripts/orders.js

@@ -1,25 +1,17 @@
 const date = document.getElementById("date");
 
-
-function collapse(e, subDiv) {
+document.querySelectorAll("h4").forEach((e) => {
     e.addEventListener("click", ev => {
         ev.stopPropagation();
         let action;
-        if (e.classList.contains("collapse"))
+        if (e.classList.contains("collapsed"))
             action = "remove";
         else
             action = "add";
 
-        e.querySelectorAll("."+subDiv).forEach(e => e.classList[action]("hide"));
-        e.classList[action]("collapse");
+        e.parentElement.querySelectorAll(".collection").forEach(c => c.classList[action]("hide"));
+        e.classList[action]("collapsed");
     })
-}
-
-
-document.querySelectorAll(".department").forEach(e => collapse(e, "user"));
-
-document.querySelectorAll(".user").forEach(e => collapse(e, "order"));
-
-document.querySelectorAll(".order").forEach(e => collapse(e, "sandwich"));
+});
 
 date.addEventListener("change", () => window.location.href = "?date="+date.value);

public/stylesheets/style.css

@@ -1,271 +1,9 @@
-html, body {
-  margin: 0;
-  height: 100%;
-}
-
 body {
-  display: flex;
-  align-items: center;
-  font: large "Lucida Grande", Helvetica, Arial, sans-serif;
-  background-color: #db970a;
-  background-image: linear-gradient(white 2px, transparent 2px),
-  linear-gradient(90deg, white 2px, transparent 2px),
-  linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
-  linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
-  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
-  background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
 }
 
-.card {
-  display: flex;
-  flex-direction: column;
-  width: max-content;
-  height: auto;
-  padding: 1em;
-  margin: auto;
-  background-color: white;
-  box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2);
-}
-
-h1, h2, h3, p, label {
-  display: block;
-  text-align: center;
-}
-
-a {
-  color: #00B7FF;
-  cursor: pointer;
-  text-decoration: none;
-}
-
-#order {
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.field {
-  margin: 1em auto auto auto;
-  width: 90%;
-}
-
-.field input {
-  box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2);
-  margin: auto;
-  width: 100%;
-  font-size: 100%;
-  height: 2.5vh;
-  border-top: none;
-  border-left: none;
-  border-right: none;
-  border-bottom: 1px gray solid;
-}
-
-.field input[type="radio"], .field input[type="checkbox"] {
-  box-shadow: none;
-}
-
-.field input[type="submit"] {
-  height: 4vh;
-  border: none;
-}
-
-#order-action {
-  display: flex;
-  justify-content: space-around;
-}
-
-#add-order, #remove-order {
-  font-weight: bold;
-  font-size: 2em;
-  margin: auto auto 1em auto;
-}
-
-.hide {
-  display: none;
-}
-
-#more {
-  display: flex;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  padding: 0.3em;
-  background-color: white;
-  box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2);
-  border-radius: 0.5em 0.5em 0 0;
-}
-
-#more a {
-  margin: 0.1em;
-  color: black;
-  text-decoration: underline;
-}
-
-#contact .cont {
-  display: flex;
-  justify-content: space-between;
-}
-
-#contact .cont .field {
-  margin: 0.5em;
-}
-
-.field.message {
-  width: max-content;
-  height: max-content;
-}
-
-.message>textarea {
-  width: 60vw;
-  height: 30vh;
-  overflow: auto;
-  resize: none;
-  font-size: large;
-}
-
-.popup {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  height: max-content;
-  width: max-content;
-  max-height: 100%;
-  max-width: 90%;
-}
-
-.images {
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
-  overflow-y: auto;
-}
-
-.images>div {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  margin: 1em;
-}
-
-.images img {
-  height: 5em;
-}
-
-p.before-link a::before {
-  content: " ";
-}
-
-#dark {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(52, 55, 55, .4);
-}
-
-#date-selector {
-  position: fixed;
-  top: 0;
-  left: 0;
-  border-radius: 0 0 0.5em 0.5em;
-}
-
-.department {
-  box-shadow: 0.3em 0.3em 0.3em rgba(0, 0, 255, .2);
-}
-
-.sandwich {
-  display: flex;
-  margin-left: 1em;
-}
-
-.buttons {
-  display: flex;
-  justify-content: space-around;
-}
-
-#user {
-  position: fixed;
-  top: 0;
-  right: 0;
-  display: flex;
-  padding: 0.3em;
-  background-color: white;
-  border-radius: 0 0 0.3em 0.3em;
-  box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2);
-}
-
-#user>p, #user>a {
-  margin: 0.1em;
-}
-
-#user>a {
-  text-decoration: underline;
-  color: black;
-}
-
-#userOrderList {
-  max-height: 90%;
-  overflow-y: auto;
-}
-
-#ordersManagement, #sandwichesManagement {
-  max-height: 90%;
-}
-
-#ordersManagement h2 {
-  margin: 0.2em 0 0 0;
-}
-
-#ordersManagement>div, #sandwichesManagement>div {
-  overflow-y: auto;
-}
-
-#ordersManagement .order {
-  box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2);
-}
-
-#ordersManagement .order .title, #ordersManagement .sandwich {
-  display: flex;
-  justify-content: center;
-}
-
-#ordersManagement input[value="x"] {
-  border: none;
-  background-color: unset;
-  cursor: pointer;
-}
-
-#sandwichesManagement>a>button, #departmentsManagement>a>button, #usersManagement>a>button, #ordersManagement>a>button {
-  width: 100%;
-}
-
-.give {
-  height: min-content;
-  width: min-content;
-}
-
-input[type="list"]::-webkit-calendar-picker-indicator {
-  display: none;/* remove default arrow */
-}
-
-.list_arrow:after {
-  content: url(https://i.stack.imgur.com/i9WFO.png);
-  margin-left: -20px;
-  padding: .1em;
-  pointer-events:none;
-}
-
-@media (hover: none) and (pointer: coarse) {
-  body {
-    font-size: xx-large;
-  }
-
-  .message>textarea {
-    font-size: xx-large;
-  }
+main {
+    flex: 1 0 auto;
 }

routes/about.js

@@ -0,0 +1,9 @@
+let express = require("express");
+let router = express.Router();
+
+
+router.get("/", async (req, res) => {
+    res.render("about", {title: "SOD - About"});
+});
+
+module.exports = router;

routes/contact.js

@@ -5,7 +5,9 @@ let reCaptcha = require("../middlewares/reCaptcha");
 let Message = require("emailjs").Message;
 
 
-router.post("/", reCaptcha, async (req, res) => {
+router.get("/", async (req, res) => {
+    res.render("contact", {title: "SOD - Contact", send: req.query.send});
+}).post("/", reCaptcha, async (req, res) => {
     if (!req.body.firstName || !req.body.lastName || !req.body.email || !req.body.subject || ! req.body.message)
         return error(req, res, "Invalid contact form !", 400, "Missing arg");
 
@@ -25,7 +27,7 @@ ${req.body.message}`,
             return error(req, res, "Fail to send message !", 500,
                 req.app.get("env") !== "production" ? err : undefined);
         else
-            res.render("contact", {title: "SOD - Contact"});
+            res.redirect("/contact?send=1");
     });
 });
 

routes/orders.js

@@ -30,11 +30,11 @@ router.get("/", sessionCheck(2), async (req, res) => {
         orders[o.DepartmentName][name][o.id] = o.Sandwiches;
     }
     res.render("orders", {title: "SOD - Orders", orders: orders, date: date});
-}).post("/give", sessionCheck(2), async (req, res) => {
-    if (!req.body.id)
+}).get("/give", sessionCheck(2), async (req, res) => {
+    if (!req.query.id)
         return error(req, res, "Missing arg !", 400);
 
-    let order = await models.SandwichOrder.findByPk(req.body.id, {where: {give: false}});
+    let order = await models.SandwichOrder.findByPk(req.query.id, {where: {give: false}});
     if (!order)
         return error(req, res, "Invalid order id !", 400);
 

views/about.pug

@@ -0,0 +1,35 @@
+extends layout
+
+block content
+    div.container.center
+        h1=__("layout.about")
+            h6=__("layout.aboutDescription")
+            div.row
+                div.col.s4.m4
+                    div.card
+                        div.card-image
+                            img(src="/images/logoBio.png")
+                        div.card-content=__("layout.bio")
+                div.col.s4.m4
+                    div.card
+                        div.card-image
+                            img(src="/images/logoChimie.png")
+                        div.card-content=__("layout.chemistry")
+                div.col.s4.m4
+                    div.card
+                        div.card-image
+                            img(src="/images/logoGCGP.png")
+                        div.card-content=__("layout.GCPD")
+            div.row
+                div.col.s4.m4
+                    div.card
+                        div.card-image
+                            img(src="/images/logoGEA.png")
+                        div.card-content=__("layout.GEA")
+                div.col.s4.m4
+                    div.card
+                        div.card-image
+                            img(src="/images/logoInfo.png")
+                        div.card-content=__("layout.IT")
+            p.before-link
+                a(href="" target="_blank")

views/admin/departments/add.pug

@@ -1,11 +1,14 @@
 extends ../../layout
 
 block content
-    div.card#departmentsManagement
+    div.container
         h1=__("admin.new")+" "+__("department")
-        form(action="/admin/departments/add" method="POST")
-            div.field
-                label(for="name")=__("admin.name")+":"
-                input#name(type="text" name="name" required)
-            div.field
-                input(type="submit" value=__("admin.add"))
+        div.row
+            form(action="/admin/departments/add" method="POST")
+                div.row
+                    div.input-field.col.s12
+                        label(for="name")=__("admin.name")+":"
+                        input#name(type="text" name="name" required)
+                div.row.center
+                    div.input-field.col.s12
+                        +submit(__("admin.add"))

views/admin/departments/edit.pug

@@ -1,12 +1,15 @@
 extends ../../layout
 
 block content
-    div.card#departmentsManagement
+    div.container
         h1=__("admin.edit")+" "+department.name
-        form(action="/admin/departments/edit" method="POST")
-            input.hide(type="text" name="name" value=department.name required)
-            div.field
-                label(for="name")=__("admin.name")+":"
-                input#name(type="text" name="newName" value=department.name required)
-            div.field
-                input(type="submit" value=__("save"))
+        div.row
+            form(action="/admin/departments/edit" method="POST")
+                input.hide(type="text" name="name" value=department.name required)
+                div.row
+                    div.input-field.col.s12
+                    label(for="name")=__("admin.name")+":"
+                    input#name(type="text" name="newName" value=department.name required)
+                div.row.center
+                    div.input-field.col.s12
+                        +submit(__("save"))

views/admin/departments/index.pug

@@ -1,18 +1,20 @@
 extends ../../layout
 
 block content
-    div.card#departmentsManagement
+    div.container
         h1=__("admin.departmentsManagement")
-        a.add(href="/admin/departments/add")
-            button=__("admin.add")
-        div
+        ul.collection
             each department in departments
-                div.department
-                    h2=department.name
-                    div.buttons
-                        a.edit(href="/admin/departments/edit?name="+department.name)
-                            button=__("admin.edit")
-                        a.remove(href="/admin/departments/delete?name="+department.name)
-                            button=__("admin.remove")
+                li.collection-item
+                    div=department.name
+                        div.secondary-content
+                            a(href="/admin/departments/edit?name="+department.name)
+                                i.material-icons edit
+                            a.delete(href="/admin/departments/delete?name="+department.name)
+                                i.material-icons remove
+
+    div.fixed-action-btn
+        a.btn-floating.btn-large.blue(href="/admin/departments/add")
+            i.large.material-icons add
 
     script(src="/javascripts/admin/departments.js")

views/admin/index.pug

@@ -1,30 +1,36 @@
 extends ../layout
 
 block content
-    div.card
-        h1=__("admin.title")
-        div
-            h2=__("admin.ordersManagement")
-            div.buttons
-                a(href="/admin/orders/date")
-                    button=__("admin.ordersDate")
-                a(href="/admin/orders")
-                    button=__("admin.manageOrders")
+    div.container
+        h4=__("admin.title")
+        div.row.center
+            div.col
+                div.card.blue-grey
+                    div.card-content.white-text
+                        span.card-title=__("admin.ordersManagement")
+                        p
+                    div.card-action
+                        a(href="/admin/orders/date")=__("admin.ordersDate")
+                        a(href="/admin/orders")=__("admin.manageOrders")
 
-        div
-            h2=__("admin.sandwichManagement")
-            div.buttons
-                a(href="/admin/sandwiches")
-                    button=__("admin.manageSandwiches")
-
-        div
-            h2=__("admin.departmentsManagement")
-            div.buttons
-                a(href="/admin/departments")
-                    button=__("admin.manageDepartments")
-
-        div
-            h2=__("admin.userManagement")
-            div.buttons
-                a(href="/admin/users")
-                    button=__("admin.manageUsers")
+            div.col
+                div.card.blue-grey
+                    div.card-content.white-text
+                        span.card-title=__("admin.sandwichManagement")
+                        p
+                    div.card-action
+                        a(href="/admin/sandwiches")=__("admin.manageSandwiches")
+            div.col
+                div.card.blue-grey
+                    div.card-content.white-text
+                        span.card-title=__("admin.departmentsManagement")
+                        p
+                    div.card-action
+                        a(href="/admin/departments")=__("admin.manageDepartments")
+            div.col
+                div.card.blue-grey
+                    div.card-content.white-text
+                        span.card-title=__("admin.userManagement")
+                        p
+                    div.card-action
+                        a(href="/admin/users")=__("admin.manageUsers")

views/admin/orders/add.pug

@@ -1,56 +1,59 @@
 extends ../../layout
 
 block content
-    div.card
+    span#dummy.hide=__("admin.given")
+    div.container
         h1=__("admin.ordersManagement")
-        form#order(method="POST")
-            div.field
-                label(for="department")=__("department") + ":"
-                +list("department", "department-list", "department", "", "off", true)
-                datalist#department-list
-                    each department in departments
-                        option(value=department.name)
+        div.row
+            form#order.col.s12(method="POST")
+                div.row
+                    div.input-field.col.s12
+                        select(name="department" required)
+                            option(value="" disabled selected hidden)=__("chooseDepartment")
+                            each department in departments
+                                option(value=department.name)=department.name
+                        label=__("department") + ":"
 
-            div.field
-                label(for="firstname")=__("firstName") + ":"
-                input#firstname(type="text" name="firstName" required)
-            div.field
-                label(for="lastname")=__("lastName") + ":"
-                input#lastname(type="text" name="lastName" required)
+                div.row
+                    div.input-field.col.s12
+                        select(name="username")
+                            option(value="" disabled selected hidden)=__("admin.chooseUser")
+                            each user in users
+                                option(value=user.username)=user.username
+                        label=__("username") + ":"
 
-            div.field
-                label(for="username")=__("username")
-                +list("username", "usernames", "username", "", "off")
+                div.row
+                    div.input-field.col.s6
+                        input#firstname(type="text" name="firstName" required)
+                        label(for="firstname")=__("firstName") + ":"
+                    div.input-field.col.s6
+                        input#lastname(type="text" name="lastName" required)
+                        label(for="lastname")=__("lastName") + ":"
 
-            div#order1.order
-                h2=__("order") + " 1"
-                div.field
-                    label(for="sandwich1")=__("sandwich") + ":"
-                    +list("sandwich1", "sandwich-list", "sandwiches[1]", "", "off", true)
-                div.field
-                    label(for="day1")=__("index.day") + ":"
-                    input#day1(type="date" name="dates[1]" required)
-                div.field
-                    label(for="given1")=__("admin.given")
-                    input#given1(type="checkbox" name="give[1]")
+                div#oderCreator.row
+                    h5=__("order")
+                    div.input-field.col.s6
+                        select#sandwich
+                            option(value="" disabled selected hidden)=__("index.chooseSandwich")
+                            each sandwich in sandwiches
+                                option(value=sandwich.name)=sandwich.name
+                        label=__("sandwich") + ":"
+                    div.input-field.col.s6
+                        input#day(type="date")
+                        label(for="day")=__("index.day") + ":"
+                    a#addOrder.btn-floating.btn-large.waves-effect.waves-light.blue: i.material-icons add
 
-            div#order-action
-                a#add-order +
-                a#remove-order.hide -
+                div#orders
 
-            div.field
-                label(for="paid")=__("admin.paid")
-                input#paid(type="checkbox" name="paid")
-
-            div.field
-                input#send(type="submit" value=__("admin.add"))
-
-            datalist#sandwich-list
-                each sandwich in sandwiches
-                    option(value=sandwich.name)
-            datalist#usernames
-                each user in users
-                    option(value=user.username)
+                div.row.center
+                    div.input-field.col.s12
+                        p
+                            label(for="paid")
+                                input#paid(type="checkbox" name="paid")
+                                span=__("admin.paid")
 
+                div.row.center
+                    div.input-field.col.s12
+                        +submit(__("admin.add"))
 
     script(src="/javascripts/admin/orders/add.js")

views/admin/orders/date.pug

@@ -1,14 +1,17 @@
 extends ../../layout
 
 block content
-    div.card#ordersManagement
+    div.container
         h1=__("admin.ordersDate")
-        form(action="/admin/orders/date" method="POST")
-            div.field
-                label(for="firstDate")=__("admin.firstDate")
-                input#firstDate(type="date" name="firstDate" value=date? date.firstDate: "" required)
-            div.field
-                label(for="lastDate")=__("admin.lastDate")
-                input#lastDate(type="date" name="lastDate" value=date? date.lastDate: "" required)
-            div.field
-                input(type="submit" value=__("save"))
+        div.row
+            form(action="/admin/orders/date" method="POST")
+                div.row
+                    div.input-field.col.s6
+                        label(for="firstDate")=__("admin.firstDate")
+                        input#firstDate(type="date" name="firstDate" value=date? date.firstDate: "" required)
+                    div.input-field.col.s6
+                        label(for="lastDate")=__("admin.lastDate")
+                        input#lastDate(type="date" name="lastDate" value=date? date.lastDate: "" required)
+                div.row
+                    div.input-field.col.s12
+                        +submit(__("save"))

views/admin/orders/edit.pug

@@ -1,63 +1,75 @@
 extends ../../layout
 
 block content
-    div.card
+    div.container
         h1=__("admin.ordersManagement")
-        form#order(method="POST")
-            input(type="hidden" name="id" value=order.id)
-            div.field
-                label(for="department")=__("department") + ":"
-                +list("department", "department-list", "department", order.Department.name, "off", true)
-                datalist#department-list
-                    each department in departments
-                        option(value=department.name)
+        div.row
+            form#order.col.s12(method="POST")
+                input(type="hidden" name="id" value=order.id)
+                div.row
+                    div.input-field.col.s12
+                        select(name="department" required)
+                            each department in departments
+                                option(value=department.name selected=order.Department.name === department.name)=department.name
+                        label=__("department") + ":"
 
-            div.field
-                label(for="firstname")=__("firstName") + ":"
-                input#firstname(type="text" name="firstName" value=order.firstName required)
-            div.field
-                label(for="lastname")=__("lastName") + ":"
-                input#lastname(type="text" name="lastName" value=order.lastName required)
+                div.row
+                    div.input-field.col.s12
+                        select(name="username")
+                            each user in users
+                                option(value=user.username selected=order.User && order.User.username === user.username)=user.username
+                        label=__("username") + ":"
 
-            div.field
-                label(for="username")=__("username")
-                +list("username", "usernames", "username", order.User ? order.User.username : "", "off")
+                div.row
+                    div.input-field.col.s6
+                        input#firstname(type="text" name="firstName" value=order.firstName required)
+                        label(for="firstname")=__("firstName") + ":"
+                    div.input-field.col.s6
+                        input#lastname(type="text" name="lastName" value=order.lastName required)
+                        label(for="lastname")=__("lastName") + ":"
 
-            - i = 0;
-            each sandwich in order.Sandwiches
-                - i++;
-                div.order(id="order"+i)
-                    h2=__("order") + " "  + i
-                    div.field
-                        label(for="sandwich"+i)=__("sandwich") + ":"
-                        +list("#sandwich"+i, "sandwich-list", "sandwiches["+i+"]", sandwich.name, "off", true)
-                    div.field
-                        label(for="day"+i)=__("index.day") + ":"
-                        input(id="#day"+i type="date" name="dates["+i+"]" value=sandwich.SandwichOrder.date required)
-                    div.field
-                        label(for="given"+i)=__("admin.given")
-                        input(id="given"+i type="checkbox" name="give["+i+"]" checked=sandwich.SandwichOrder.give)
+                div#oderCreator.row
+                    h5=__("order")
+                    div.input-field.col.s6
+                        select#sandwich
+                            option(value="" disabled selected hidden)=__("index.chooseSandwich")
+                            each sandwich in sandwiches
+                                option(value=sandwich.name)=sandwich.name
+                        label=__("sandwich") + ":"
+                    div.input-field.col.s6
+                        input#day(type="date")
+                        label(for="day")=__("index.day") + ":"
+                    a#addOrder.btn-floating.btn-large.waves-effect.waves-light.blue: i.material-icons add
 
-            div#order-action
-                a#add-order +
-                if i > 1
-                    a#remove-order -
-                else
-                    a#remove-order.hide -
+                div#orders
+                    - i = 0;
+                    each sandwich in order.Sandwiches
+                        - i++;
+                        div.row(id="order"+i)
+                            div.input-field.col.s6
+                                input(id="sandwich"+i type="text" name="sandwiches[#{i}]" value=sandwich.name readonly required)
+                                label(for="sandwich"+i)=__("sandwich")
+                            div.input-field.col.s6
+                                input(id="date"+i type="date" name="dates[#{i}]" value=sandwich.SandwichOrder.date readonly required)
+                                label(for="date"+i)=__("index.day")
+                            div.input-field.col.s12.center
+                                p
+                                    label
+                                        input(type="checkbox" name="give[#{i}]" checked=sandwich.SandwichOrder.give)
+                                        span=__("admin.given")
+                            a.btn-floating.btn-large.waves-effect.waves-light.red
+                                i.material-icons remove
 
-            div.field
-                label(for="paid")=__("admin.paid")
-                input#paid(type="checkbox" name="paid" checked=order.paid)
-
-            div.field
-                input#send(type="submit" value=__("save"))
-
-            datalist#sandwich-list
-                each sandwich in sandwiches
-                    option(value=sandwich.name)
-            datalist#usernames
-                each user in users
-                    option(value=user.username)
+                div.row.center
+                    div.input-field.col.s12
+                        p
+                            label(for="paid")
+                                input#paid(type="checkbox" name="paid" checked=order.paid)
+                                span=__("admin.paid")
 
+                div.row.center
+                    div.input-field.col.s12
+                        +submit(__("save"))
 
     script(src="/javascripts/admin/orders/add.js")
+    script(src="/javascripts/admin/orders/edit.js")

views/admin/orders/index.pug

@@ -1,23 +1,23 @@
 extends ../../layout
 
 block content
-    div.card#ordersManagement
+    div.container
         h1=__("admin.ordersManagement")
-        a.add(href="/admin/orders/add")
-            button=__("admin.add")
-        div
+        ul.collection
             each order in orders
-                div.order
-                    div.title
-                        h2=order.id
-                    h3 #{order.firstName} #{order.lastName} - #{order.price}€
-                    each sandwich in order.Sandwiches
-                        div.sandwich
+                li.collection-item
+                    div #{order.id} | #{order.firstName} #{order.lastName} - #{order.price}€
+                        div.secondary-content
+                            a(href="/admin/orders/edit?id=" + order.id)
+                                i.material-icons edit
+                            a.delete(href="/admin/orders/delete?id=" + order.id)
+                                i.material-icons remove
+                        each sandwich in order.Sandwiches
                             p #{sandwich.name} - #{sandwich.SandwichOrder.date}
-                    div.buttons
-                        a.edit(href="/admin/orders/edit?id=" + order.id)
-                            button=__("admin.edit")
-                        a.remove(href="/admin/orders/delete?id=" + order.id)
-                            button=__("admin.remove")
+
+
+    div.fixed-action-btn
+        a.btn-floating.btn-large.blue(href="/admin/orders/add")
+            i.large.material-icons add
 
     script(src="/javascripts/admin/orders/index.js")

views/admin/sandwiches/add.pug

@@ -1,14 +1,18 @@
 extends ../../layout
 
 block content
-    div.card#sandwichesManagement
+    div.container
         h1=__("admin.new")+" "+__("sandwich")
-        form(action="/admin/sandwiches/add" method="POST")
-            div.field
-                label(for="name")=__("admin.name")+":"
-                input#name(type="text" name="name" required)
-            div.field
-                label(for="price")=__("admin.price") + ":"
-                input#price(type="number" min="0" step="any" name="price" value="0" required)
-            div.field
-                input(type="submit" value=__("admin.add"))
+        div.row
+            form(action="/admin/sandwiches/add" method="POST")
+                div.row
+                    div.input-field.col.s12
+                        label(for="name")=__("admin.name")+":"
+                        input#name(type="text" name="name" required)
+                div.row
+                    div.input-field.col.s12
+                        label(for="price")=__("admin.price") + ":"
+                        input#price(type="number" min="0" step="any" name="price" value="0" required)
+                div.row.center
+                    div.input-field.col.s12
+                        +submit(__("admin.add"))

views/admin/sandwiches/edit.pug

@@ -1,15 +1,19 @@
 extends ../../layout
 
 block content
-    div.card#sandwichesManagement
+    div.container
         h1=__("admin.edit")+" "+sandwich.name
-        form(action="/admin/sandwiches/edit" method="POST")
-            input.hide(type="text" name="name" value=sandwich.name required)
-            div.field
-                label(for="name")=__("admin.name")+":"
-                input#name(type="text" name="newName" value=sandwich.name required)
-            div.field
-                label(for="price")=__("admin.price") + ":"
-                input#price(type="number" min="0" step="any" name="price" value=sandwich.price required)
-            div.field
-                input(type="submit" value=__("save"))
+        div.row
+            form(action="/admin/sandwiches/edit" method="POST")
+                input.hide(type="text" name="name" value=sandwich.name required)
+                div.row
+                    div.input-field.col.s12
+                        label(for="name")=__("admin.name")+":"
+                        input#name(type="text" name="newName" value=sandwich.name required)
+                div.row
+                    div.input-field.col.s12
+                        label(for="price")=__("admin.price") + ":"
+                        input#price(type="number" min="0" step="any" name="price" value=sandwich.price required)
+                div.row.center
+                    div.input-field.col.s12
+                        +submit(__("save"))

views/admin/sandwiches/index.pug

@@ -1,18 +1,20 @@
 extends ../../layout
 
 block content
-    div.card#sandwichesManagement
+    div.container
         h1=__("admin.sandwichManagement")
-        a.add(href="/admin/sandwiches/add")
-            button=__("admin.add")
-        div
+        ul.collection
             each sandwich in sandwiches
-                div.sandwich
-                    h2=sandwich.name
-                    div.buttons
-                        a.edit(href="/admin/sandwiches/edit?name="+sandwich.name)
-                            button=__("admin.edit")
-                        a.remove(href="/admin/sandwiches/delete?name="+sandwich.name)
-                            button=__("admin.remove")
+                li.collection-item
+                    div=sandwich.name
+                        div.secondary-content
+                            a(href="/admin/sandwiches/edit?name="+sandwich.name)
+                                i.material-icons edit
+                            a.delete(href="/admin/sandwiches/delete?name="+sandwich.name)
+                                i.material-icons remove
+
+    div.fixed-action-btn
+        a.btn-floating.btn-large.blue(href="/admin/sandwiches/add")
+            i.large.material-icons add
 
     script(src="/javascripts/admin/sandwiches.js")

views/admin/users/add.pug

@@ -1,34 +1,41 @@
 extends ../../layout
 
 block content
-    div.card#usersManagement
+    div.container
         h1=__("admin.new")+" "+__("admin.user")
-        form(action="/admin/users/add" method="POST")
-            h1=__("register.title")
-            div.field
-                label(for="username")=__("username") + ":"
-                input#username(type="text" name="username" required)
-            div.field
-                label(for="email")=__("email") + ":"
-                input#email(type="email" name="email" required)
-            div.field
-                label(for="firstName")=__("firstName") + ":"
-                input#firstName(type="text" name="firstName" required)
-            div.field
-                label(for="lastName")=__("lastName") + ":"
-                input#lastName(type="text" name="lastName" required)
-            div.field
-                label(for="department")=__("department") + ":"
-                +list("department", "department-list", "department", "", "off", true)
-            div.field
-                label(for="password")=__("password") + ":"
-                input#password(type="password" name="password" required)
-            div.field
-                label(for="permissions")=__("admin.permissions")
-                input#permissions(type="number" min="0" max="3" value="0" name="permissions")
-            div.field
-                input(type="submit" value=__("register.submit"))
-
-        datalist#department-list
-            each department in departments
-                option(value=department.name)
+        div.row
+            form(action="/admin/users/add" method="POST")
+                h1=__("register.title")
+                div.row
+                    div.input-field.col.s12
+                        input#username(type="text" name="username" required)
+                        label(for="username")=__("username") + ":"
+                div.row
+                    div.input-field.col.s12
+                        input#email(type="email" name="email" required)
+                        label(for="email")=__("email") + ":"
+                div.row
+                    div.input-field.col.s6
+                        input#firstName(type="text" name="firstName" required)
+                        label(for="firstName")=__("firstName") + ":"
+                    div.input-field.col.s6
+                        input#lastName(type="text" name="lastName" required)
+                        label(for="lastName")=__("lastName") + ":"
+                div.row
+                    div.input-field.col.s12
+                        select(name="department" required)
+                            option(value="" disabled selected hidden)=__("chooseDepartment")
+                            each department in departments
+                                option(value=department.name)=department.name
+                        label=__("department") + ":"
+                div.row
+                    div.input-field.col.s12
+                        input#password(type="password" name="password" required)
+                        label(for="password")=__("password") + ":"
+                div.row
+                    div.input-field.col.s12
+                        input#permissions(type="number" min="0" max="3" value="0" name="permissions")
+                        label(for="permissions")=__("admin.permissions")
+                div.row.center
+                    div.input-field.col.s12
+                        +submit(__("register.submit"))

views/admin/users/edit.pug

@@ -1,35 +1,41 @@
 extends ../../layout
 
 block content
-    div.card#sandwichesManagement
+    div.container
         h1=__("admin.edit")+" "+targetUser.username
-        form(action="/admin/users/edit" method="POST")
-            h2=__("profile.infos")
-            input.hide(type="text" name="oldUsername" value=targetUser.username required)
-            div.field
-                label(for="username")=__("username") + ":"
-                input#username(type="text" name="username" value=targetUser.username required)
-            div.field
-                label(for="email")=__("email") + ":"
-                input#email(type="email" name="email" value=targetUser.email required)
-            div.field
-                label(for="firstName")=__("firstName") + ":"
-                input#firstName(type="text" name="firstName" value=targetUser.firstName required)
-            div.field
-                label(for="lastName")=__("lastName") + ":"
-                input#lastName(type="text" name="lastName" value=targetUser.lastName required)
-            div.field
-                label(for="department")=__("department") + ":"
-                +list("department", "department-list", "department", targetUser.DepartmentName, "off", true)
-            div.field
-                label(for="password")=__("password") + ":"
-                input#password(type="password" name="password")
-            div.field
-                label(for="permissions")=__("admin.permissions")
-                input#permissions(type="number" min="0" max="3" value=targetUser.permissions name="permissions")
-            div.field
-                input(type="submit" value=__("save"))
-
-        datalist#department-list
-            each department in departments
-                option(value=department.name)
+        div.row
+            form(action="/admin/users/edit" method="POST")
+                h2=__("profile.infos")
+                input.hide(type="text" name="oldUsername" value=targetUser.username required)
+                div.row
+                    div.input-field.col.s12
+                        input#username(type="text" name="username" value=targetUser.username required)
+                        label(for="username")=__("username") + ":"
+                div.row
+                    div.input-field.col.s12
+                        input#email(type="email" name="email" value=targetUser.email required)
+                        label(for="email")=__("email") + ":"
+                div.row
+                    div.input-field.col.s6
+                        input#firstName(type="text" name="firstName" value=targetUser.firstName required)
+                        label(for="firstName")=__("firstName") + ":"
+                    div.input-field.col.s6
+                        input#lastName(type="text" name="lastName" value=targetUser.lastName required)
+                        label(for="lastName")=__("lastName") + ":"
+                div.row
+                    div.input-field.col.s12
+                        select(name="department" required=)
+                            each department in departments
+                                option(value=department.name selected=department.name === targetUser.DepartmentName)=department.name
+                        label=__("department") + ":"
+                div.row
+                    div.input-field.col.s12
+                        input#password(type="password" name="password")
+                        label(for="password")=__("password") + ":"
+                div.row
+                    div.input-field.col.s12
+                        input#permissions(type="number" min="0" max="3" value=targetUser.permissions name="permissions")
+                        label(for="permissions")=__("admin.permissions")
+                div.row.center
+                    div.input-field.col.s12
+                        +submit(__("save"))

views/admin/users/index.pug

@@ -1,18 +1,20 @@
 extends ../../layout
 
 block content
-    div.card#usersManagement
+    div.container
         h1=__("admin.userManagement")
-        a.add(href="/admin/users/add")
-            button=__("admin.add")
-        div
+        ul.collection
             each user in users
-                div.user
-                    h2=user.username
-                    div.buttons
-                        a.edit(href="/admin/users/edit?name="+user.username)
-                            button=__("admin.edit")
-                        a.remove(href="/admin/users/delete?name="+user.username)
-                            button=__("admin.remove")
+                li.collection-item
+                    div=user.username
+                        div.secondary-content
+                            a(href="/admin/users/edit?name="+user.username)
+                                i.material-icons edit
+                            a.delete(href="/admin/users/delete?name="+user.username)
+                                i.material-icons remove
+
+    div.fixed-action-btn
+        a.btn-floating.btn-large.blue(href="/admin/users/add")
+            i.large.material-icons add
 
     script(src="/javascripts/admin/users.js")

views/contact.pug

@@ -1,6 +1,43 @@
 extends layout
 
 block content
-    div.card
+    div.container
         h1=__("contact")
-        p=__("messageSend")
+        if !send
+            div.row
+                form(method="POST")
+                    div.row
+                        div.input-field.col.s6
+                            input#firstNameContact(type="text" name="firstName" value=user ? user.firstName : "" required)
+                            label(for="firstNameContact")="* " + __("firstName")
+                        div.input-field.col.s6
+                            input#lastNameContact(type="text" name="lastName" value=user ? user.lastName : "" required)
+                            label(for="lastNameContact")="* " + __("lastName")
+                    div.row
+                        div.input-field.col.s6
+                            input#emailContact(type="email" name="email" value=user ? user.email : "" required)
+                            label(for="emailContact")="* " + __("email")
+                        div.input-field.col.s6
+                            input#phoneNumberContact(type="tel" name="phoneNumber")
+                            label(for="phoneNumberContact")=__("layout.phoneNumber")
+                    div.row
+                        div.input-field.col.s12
+                            select(name="subject" required)
+                                option(value="" selected disabled)=__("layout.chooseSubject")
+                                option(value=__("layout.commandEdit"))=__("layout.commandEdit")
+                                option(value=__("layout.commandRemove"))=__("layout.commandRemove")
+                                option(value=__("layout.question"))=__("layout.question")
+                                option(value=__("layout.profile"))=__("layout.profile")
+                                option(value=__("layout.other"))=__("layout.other")
+                            label="* " + __("layout.subject")
+                    p.center: strong=__("layout.warnMessage")
+                    div.row
+                        div.input-field.col.s12
+                            textarea#messageContact.materialize-textarea(name="message" required)
+                            label(for="messageContact")=__("layout.message")
+                    div.row.center
+                        div.input-field.col.s12
+                            +submit(__("send"))
+
+        else
+            h5=__("messageSend")

views/error.pug

@@ -1,7 +1,7 @@
 extends layout
 
 block content
-  div.card
-    h1= message
-    h2= error.status
-    pre #{error.stack}
+  div.container.center
+    h1=message
+    h3=error.status
+    h5=error.stack

views/forget.pug

@@ -1,20 +1,26 @@
 extends layout
 
 block content
-    div.card
-        h1=__("forgetPassword")
-        if (!token)
-            form(action="/forget" method="POST")
-                div.field
-                    label(for="email")=__("email")
-                    input#email(type="email" name="email" required)
-                div.field
-                    +submit(value=__("send"))
-        else
-            form(action="/forget" method="POST")
-                input(type="hidden" name="token" value=token)
-                div.field
-                    label(for="password")=__("password")
-                    input#password(type="password" name="password" required)
-                div.field
-                    +submit(value=__("send"))
+    div.container
+        div.row
+            h3=__("forgetPassword")
+            if (!token)
+                form(action="/forget" method="POST")
+                    div.row
+                        div.input-field.col.s12
+                            input#email(type="email" name="email" required)
+                            label(for="email")=__("email")
+                    div.row
+                        div.input-field.col.s12
+                            +submit(__("send"))
+            else
+                form(action="/forget" method="POST")
+                    div.row
+                    input(type="hidden" name="token" value=token)
+                    div.row
+                        div.input-field.col.s12
+                            input#password(type="password" name="password" required)
+                            label(for="password")=__("password")
+                    div.row
+                        div.input-field.col.s12
+                            +submit(__("send"))

views/index.pug

@@ -1,49 +1,55 @@
 extends layout
 
 block content
-  div.card
-    h1= title
-    p=__("index.welcome")
-    form#order(action="/order" method="POST")
-      div.field
-        label(for="department")=__("department")+":"
-        +list("department", "department-list", "department", user ? user.DepartmentName : "", "off", true)
-        datalist#department-list
-          each department in departments
-            option(value=department.name)
+  div.container
+    h4.center=__("index.welcome")
+    div.row
+      form#order.col.s12(action="/order" method="POST")
+        div.row
+          div.input-field.col.s12
+            select(name="department" required)
+              option(value="" disabled selected hidden)=__("chooseDepartment")
+              each department in departments
+                option(value=department.name selected=user && user.DepartmentName===department.name)=department.name
+            label=__("department")+":"
 
-      div.field
-        label(for="firstname")=__("firstName")+":"
-        input#firstname(type="text" name="firstName" value=user ? user.firstName : "" required)
-      div.field
-        label(for="lastname")=__("lastName")+":"
-        input#lastname(type="text" name="lastName" value=user ? user.lastName : "" required)
+        div.row
+          div.input-field.col.s6
+            input#firstname(type="text" name="firstName" value=user ? user.firstName : "" required)
+            label(for="firstname")=__("firstName")+":"
+          div.input-field.col.s6
+            input#lastname(type="text" name="lastName" value=user ? user.lastName : "" required)
+            label(for="lastname")=__("lastName")+":"
 
-      div#order1.order
-        h2=__("order")+" 1"
-        div.field
-          label(for="sandwich1")=__("sandwich")+":"
-          +list("sandwich1", "sandwich-list", "sandwiches[1]", "", "off", true)
-        div.field
-          label(for="day1")=__("index.day")+":"
-          input#day1(type="date" min=date.firstDate ? date.firstDate : "" max=date.lastDate ? date.lastDate : "" name="dates[1]" required)
+        div#oderCreator.row
+          h5=__("order")
+          div.input-field.col.s6
+            select#sandwich
+              option(value="" disabled selected hidden)=__("index.chooseSandwich")
+              each sandwich in sandwiches
+                option(value=sandwich.name)=sandwich.name
+            label=__("sandwich")+":"
+          div.input-field.col.s6
+            input#day(type="date" min=date.firstDate ? date.firstDate : "" max=date.lastDate ? date.lastDate : "")
+            label(for="day")=__("index.day")+":"
+          a#addOrder.btn-floating.btn-large.waves-effect.waves-light.blue: i.material-icons add
 
-      div#order-action
-        a#add-order +
-        a#remove-order.hide -
+        div#orders
 
-      h3=__("index.payment")
-      div.field.buttons
-        label(for="lyf_pay") LyfPay
-        input#lyf_pay(type="radio" name="payment" value="lyfPay" checked)
-        label(for="credit_card")=__("index.creditCard")
-        input#credit_card(type="radio" name="payment" value="creditCard")
+        div.row
+          h5=__("index.payment")
+            div.col.s12
+              p
+                label
+                  input(type="radio" name="payment" value="lyfPay" checked)
+                  span LyfPay
+              p
+                label
+                  input(type="radio" name="payment" value="creditCard")
+                  span=__("index.creditCard")
 
-      div.field
-        +submit(value=__("index.pay"))
-
-      datalist#sandwich-list
-        each sandwich in sandwiches
-          option(value=sandwich.name)
+        div.row.center
+          div.input-field.col.s12
+            +submit(__("index.pay"))
 
   script(src="/javascripts/index.js")

views/layout.pug

@@ -4,94 +4,50 @@ doctype html
 html
   head
     title= title
-    link(rel="stylesheet", href="/stylesheets/style.css")
+    link(rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons")
+    link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css")
+    link(rel="stylesheet" href="/stylesheets/style.css")
+    meta(name="viewport" content="width=device-width, initial-scale=1.0")
   body
-    block content
-
-    div#user
-      a(href="/")=__("layout.home")
+    mixin nav
       if user
         if user.permissions >= 1
-          p -
-          a(href="/sandwiches")=__("sandwiches")
+          li: a(href="/sandwiches")=__("sandwiches")
         if user.permissions >= 2
-          p -
-          a(href="/orders")=__("orders")
+          li: a(href="/orders")=__("orders")
         if user.permissions >= 3
-          p -
-          a(href="/admin")=__("admin.title")
-      p |
-      if user
-        a(href="/profile")=user.username
-        a(href="/logout")=__("layout.logout")
+          li: a(href="/admin")=__("admin.title")
+        li: a(href="/profile")=user.username
+        li: a(href="/logout")=__("layout.logout")
       else
-        a(href="/login")=__("layout.login")
-        a(href="/register")=__("layout.register")
+        li: a(href="/login")=__("layout.login")
+        li: a(href="/register")=__("layout.register")
+    nav.orange(role="navigation")
+      div.nav-wrapper.container
+        a.brand-logo(href="/") SOD
+        a.sidenav-trigger(href="#" data-target="mobile-nav"): i.material-icons menu
+        ul.right.hide-on-med-and-down
+          +nav
+      ul#mobile-nav.sidenav
+        +nav
+    main
+      block content
 
-    div#more
-      a=__("layout.about")
-      a=__("contact")
-
-    div#dark.hide
-    div#about.popup.card.hide
-      h1=__("layout.about")
-      p=__("layout.aboutDescription")
-      div.images
-        div
-          img(src="/images/logoBio.png")
-          p=__("layout.bio")
-        div
-          img(src="/images/logoChimie.png")
-          p=__("layout.chemistry")
-        div
-          img(src="/images/logoGC.png")
-          p=__("layout.GC")
-        div
-          img(src="/images/logoGCGP.png")
-          p=__("layout.GCPD")
-        div
-          img(src="/images/logoGEA.png")
-          p=__("layout.GEA")
-        div
-          img(src="/images/logoInfo.png")
-          p=__("layout.IT")
-      p.before-link=__("layout.made")
-        a(href="https://www.linkedin.com/in/florian-charlaix" target="_blank") Florian Charlaix
-      p.before-link=__("layout.powered")
-        a(href="https://sapinet.fr" target="_blank") Sapinet
-    div#contact.popup.card.hide
-      h1=__("contact")
-      form(action="/contact" method="POST")
-        div.cont
-          div.field
-            label(for="firstNameContact")="* "+__("firstName")
-            input#firstNameContact(type="text" name="firstName" value=user?user.firstName:"" required)
-          div.field
-            label(for="lastNameContact")="* "+__("lastName")
-            input#lastNameContact(type="text" name="lastName" value=user ? user.lastName : "" required)
-        div.cont
-          div.field
-            label(for="emailContact")="* "+__("email")
-            input#emailContact(type="email" name="email" value=user ? user.email : "" required)
-          div.field
-            label(for="phoneNumberContact")=__("layout.phoneNumber")
-            input#phoneNumberContact(type="tel" name="phoneNumber")
-        div.field
-          label(for="subjectContact")="* "+__("layout.subject")
-          +list("subjectContact", "subjectContactList", "subject", "", "off", true)
-          datalist#subjectContactList
-            option(value=__("layout.commandEdit"))
-            option(value=__("layout.commandRemove"))
-            option(value=__("layout.question"))
-            option(value=__("layout.profile"))
-            option(value=__("layout.other"))
-        p=__("layout.warnMessage")
-        div.field.message
-          label(for="messageContact")=__("layout.message")
-          textarea#messageContact(name="message" required)
-        div.field
-          +submit(value=__("send"))
-
-    script(src="/javascripts/layout.js")
     if !test
       p !{captcha}
+
+    footer.page-footer
+      div.container
+        div.row
+          div.col.l6.s12
+            h5.white-text=__("layout.links")
+            ul
+              li: a.grey-text.text-lighten-3(href="/about")=__("layout.about")
+              li: a.grey-text.text-lighten-3(href="/contact")=__("contact")
+      div.footer-copyright
+        div.container
+          a.grey-text.text-lighten-4(href="https://sapinet.fr" target="_blank")=__("layout.powered") + " Sapinet"
+          a.grey-text.text-lighten-4.right(href="https://www.linkedin.com/in/florian-charlaix" target="_blank")=__("layout.made") + " Florian Charlaix"
+
+    script(src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js")
+    script(src="/javascripts/layout.js")

views/login.pug

@@ -1,18 +1,22 @@
 extends layout
 
 block content
-    div.card
-        form(action="/login" method="POST")
-            h1=__("login.title")
-            div.field
-                label(for="username")=__("username")+":"
-                input#username(type="text" name="username" required)
-            div.field
-                label(for="password")=__("password")+":"
-                input#password(type="password" name="password" required)
-            div.field
-                +submit(value=__("login.submit"))
+    div.container
+        div.row
+            form(action="/login" method="POST")
+                h3=__("login.title")
+                div.row
+                    div.input-field.col.s12
+                        input#username(type="text" name="username" required)
+                        label(for="username")=__("username")+":"
+                div.row
+                    div.input-field.col.s12
+                        input#password(type="password" name="password" required)
+                        label(for="password")=__("password")+":"
+                div.row.center
+                    div.input-field.col.s12
+                        +submit(__("login.submit"))
 
-        div.field
-            a(href="/forget")
-                input(type="button" value=__("forgetPassword"))
+            div.row.center
+                div.input-field.col.s12
+                    a.btn.waves-effect.waves-light.red(href="/forget")=__("forgetPassword")

views/mixin.pug

@@ -1,7 +1,4 @@
 mixin submit(value)
     div.recaptcha.recaptcha-cb
-        input(type="submit" value!=value)
-
-mixin list(id, list, name, value="", autocomplete="on", required=false)
-    span.list_arrow
-        input(id=id type="list" list=list name=name value=value autocomplete=autocomplete required=required)
+        button.btn.waves-effect.waves-light(type="submit" name="action")=value
+            i.material-icons.right send

views/order.pug

@@ -1,14 +1,13 @@
 extends layout
 
 block content
-    div.card
-        h1 Payment
+    div.container.center
+        h1=__("payment.payment")
         if (state === "success")
-            h2=__("payment.successful")
+            h4=__("payment.successful")
         else if (state === "cancel")
-            h2=__("payment.canceled")
+            h4=__("payment.canceled")
         else if (state === "error")
-            h2=__("payment.error")
+            h4=__("payment.error")
         if (state !== "success")
-            a(href="/order/retry")
-                button=__("payment.retry")
+            a.waves-effect.waves-teal.btn(href="/order/retry")=__("payment.retry")

views/orders.pug

@@ -1,25 +1,22 @@
 extends layout
 
 block content
-    div#date-selector.card
+    div.container
         label(for="date")=__("date")
         input#date(type="date" value=date)
-    div#orders.card
+    div.container
         h1=__("orders")
         each user, department in orders
-            div.department
-                h2= department
+            div.container
+                h4=department
                 each orders, name in user
-                    div.user
-                        h3= name
-                        each order, id in orders
-                            div.order
-                                h4 #{__("order")} N°#{id}
-                                each sandwich in order
-                                    div.sandwich
-                                        form.give(method="POST" action="/orders/give")
-                                            input(type="hidden" name="id" value=sandwich.SandwichOrder.id)
-                                            input.give(type="submit" value="v")
-                                        h4= sandwich.name
+                    each order, id in orders
+                        ul.collection.with-header
+                            li.collection-header: h5 #{name} - #{__("order")} N°#{id}
+                            each sandwich in order
+                                li.collection-item
+                                    div=sandwich.name
+                                        a.secondary-content(href="/orders/give?id="+sandwich.SandwichOrder.id)
+                                            i.material-icons check
 
     script(src="/javascripts/orders.js")

views/profile.pug

@@ -1,44 +1,51 @@
 extends layout
 
 block content
-    div.card
-        h1=__("profile.title")
-        form(action="/profile" method="POST")
-            h2=__("profile.infos")
-            div.field
-                label(for="username")=__("username")+":"
-                input#username(type="text" name="username" value=user.username disabled required)
-            div.field
-                label(for="email")=__("email")+":"
-                input#email(type="email" name="email" value=user.email required)
-            div.field
-                label(for="firstName")=__("firstName")+":"
-                input#firstName(type="text" name="firstName" value=user.firstName required)
-            div.field
-                label(for="lastName")=__("lastName")+":"
-                input#lastName(type="text" name="lastName" value=user.lastName required)
-            div.field
-                label(for="department")=__("department")+":"
-                +list("department", "department-list", "department", user.DepartmentName, "off", true)
-            div.field
-                label(for="password")=__("password")+":"
-                input#password(type="password" name="password")
-            div.field
-                input(type="submit" value=__("save"))
+    div.container
+        div.row
+            h4=__("profile.title")
+            form(action="/profile" method="POST")
+                h2=__("profile.infos")
+                div.row
+                    div.input-field.col.s6
+                        input#username(type="text" name="username" value=user.username disabled required)
+                        label(for="username")=__("username")+":"
+                    div.input-field.col.s6
+                        input#email(type="email" name="email" value=user.email required)
+                        label(for="email")=__("email")+":"
+                div.row
+                    div.input-field.col.s6
+                        input#firstName(type="text" name="firstName" value=user.firstName required)
+                        label(for="firstName")=__("firstName")+":"
+                    div.input-field.col.s6
+                        input#lastName(type="text" name="lastName" value=user.lastName required)
+                        label(for="lastName")=__("lastName")+":"
+                div.row
+                    div.input-field.col.s12
+                        select(name="department" required)
+                            each department in departments
+                                option(value=department.name selected=department.name===user.DepartmentName)=department.name
+                        label=__("department")+":"
+                div.row
+                    div.input-field.col.s12
+                        label(for="password")=__("password")+":"
+                        input#password(type="password" name="password")
+                div.row.center
+                    div.input-field.col.s12
+                        +submit(__("save"))
 
-            datalist#department-list
-                each department in departments
-                    option(value=department.name)
+            if (!user.emailVerified)
+                div.row.center
+                    div.input-field.col.s12
+                        a.btn.waves-effect.waves-light.yellow.darken-4(href="/profile/resend")=__("profile.emailCheck")
 
-        if (!user.emailVerified)
-            div.field
-                a(href="/profile/resend")
-                    input(type="button" value=__("profile.emailCheck"))
-
-    div.card#userOrderList
-        h1=__("orders")
-        each order in orders
-            div
-                h2=order.id
-                each sandwich in order.Sandwiches
-                    p #{sandwich.name} - #{sandwich.SandwichOrder.date}
+    div.container.valign-wrapper
+        div.row.center
+            h4=__("orders")
+            each order in orders
+                div.col
+                    div.card.blue-grey
+                        div.card-content.white-text
+                            span.card-title=order.id
+                            each sandwich in order.Sandwiches
+                                p #{sandwich.name} - #{sandwich.SandwichOrder.date}

views/register.pug

@@ -1,29 +1,35 @@
 extends layout
 
 block content
-    form.card(action="/register" method="POST")
-        h1=__("register.title")
-        div.field
-            label(for="username")=__("username")+":"
-            input#username(type="text" name="username" required)
-        div.field
-            label(for="email")=__("email")+":"
-            input#email(type="email" name="email" required)
-        div.field
-            label(for="firstName")=__("firstName")+":"
-            input#firstName(type="text" name="firstName" required)
-        div.field
-            label(for="lastName")=__("lastName")+":"
-            input#lastName(type="text" name="lastName" required)
-        div.field
-            label(for="department")=__("department")+":"
-            +list("department", "department-list", "department", "", "off", true)
-        div.field
-            label(for="password")=__("password")+":"
-            input#password(type="password" name="password" required)
-        div.field
-            +submit(value=__("register.submit"))
-
-    datalist#department-list
-        each department in departments
-            option(value=department.name)
+    div.container
+        div.row
+            form(action="/register" method="POST")
+                h3=__("register.title")
+                div.row
+                    div.input-field.col.s6
+                        input#username(type="text" name="username" required)
+                        label(for="username")=__("username")+":"
+                    div.input-field.col.s6
+                        input#email(type="email" name="email" required)
+                        label(for="email")=__("email")+":"
+                div.row
+                    div.input-field.col.s6
+                        input#firstName(type="text" name="firstName" required)
+                        label(for="firstName")=__("firstName")+":"
+                    div.input-field.col.s6
+                        input#lastName(type="text" name="lastName" required)
+                        label(for="lastName")=__("lastName")+":"
+                div.row
+                    div.input-field.col.s12
+                        select(name="department" required)
+                            option(value="" disabled selected hidden)=__("chooseDepartment")
+                            each department in departments
+                                option(value=department.name)=department.name
+                        label=__("department")+":"
+                div.row
+                    div.input-field.col.s12
+                        input#password(type="password" name="password" required)
+                        label(for="password")=__("password")+":"
+                div.row.center
+                    div.input-field.col.s12
+                        +submit(__("register.submit"))

views/sandwiches.pug

@@ -1,13 +1,15 @@
 extends layout
 
 block content
-    div#date-selector.card
+    div.container
         label(for="date")=__("date")
         input#date(type="date" value=date)
-    div.card
+    div.container
         h1=__("sandwiches")
-        each sandwich in sandwiches
-            div.sandwich
-                h2 #{sandwich.name}: #{sandwich.dataValues.number}
+        ul.collection
+            each sandwich in sandwiches
+                li.collection-item
+                    div=sandwich.name
+                        a.secondary-content=sandwich.dataValues.number
 
     script(src="/javascripts/sandwiches.js")