From 12d4256021f8fe91530118a73a371b09fd0abe88 Mon Sep 17 00:00:00 2001 From: flifloo Date: Tue, 29 Sep 2020 16:12:43 +0200 Subject: [PATCH] More, about & contact rework --- app.js | 2 + locales/en.json | 4 +- locales/fr.json | 4 +- public/javascripts/layout.js | 25 +--- public/stylesheets/style.css | 272 +---------------------------------- routes/about.js | 9 ++ routes/contact.js | 6 +- views/about.pug | 35 +++++ views/contact.pug | 41 +++++- views/layout.pug | 85 +++-------- 10 files changed, 118 insertions(+), 365 deletions(-) create mode 100644 routes/about.js create mode 100644 views/about.pug diff --git a/app.js b/app.js index 6fc741c..6582cd9 100644 --- a/app.js +++ b/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) => { diff --git a/locales/en.json b/locales/en.json index dc3b259..a6718e5 100644 --- a/locales/en.json +++ b/locales/en.json @@ -24,7 +24,9 @@ "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", diff --git a/locales/fr.json b/locales/fr.json index 04b7836..bea7027 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -24,7 +24,9 @@ "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", diff --git a/public/javascripts/layout.js b/public/javascripts/layout.js index 7dbd804..a97274c 100644 --- a/public/javascripts/layout.js +++ b/public/javascripts/layout.js @@ -1,29 +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) { diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index c1f2317..a2a7ebf 100644 --- a/public/stylesheets/style.css +++ b/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; } diff --git a/routes/about.js b/routes/about.js new file mode 100644 index 0000000..fc2f0de --- /dev/null +++ b/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; diff --git a/routes/contact.js b/routes/contact.js index 4f041d7..549ffa8 100644 --- a/routes/contact.js +++ b/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"); }); }); diff --git a/views/about.pug b/views/about.pug new file mode 100644 index 0000000..5689512 --- /dev/null +++ b/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") diff --git a/views/contact.pug b/views/contact.pug index 06c785a..1bc5ab4 100644 --- a/views/contact.pug +++ b/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") diff --git a/views/layout.pug b/views/layout.pug index 912f7cd..4ebd1dd 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -6,7 +6,7 @@ html title= title 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") + link(rel="stylesheet" href="/stylesheets/style.css") meta(name="viewport" content="width=device-width, initial-scale=1.0") body mixin nav @@ -30,75 +30,24 @@ html +nav ul#mobile-nav.sidenav +nav + main + block content - block content + if !test + p !{captcha} - .hide - 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")) + 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") - if !test - p !{captcha}