Archived
1
0
Fork 0

More, about & contact rework

This commit is contained in:
Ethanell 2020-09-29 16:12:43 +02:00
parent 41dad395b2
commit 12d4256021
10 changed files with 118 additions and 365 deletions

2
app.js
View file

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

View file

@ -24,7 +24,9 @@
"question": "Practical question", "question": "Practical question",
"profile": "My profile", "profile": "My profile",
"other": "Another question", "other": "Another question",
"powered": "Powered by" "powered": "Powered by",
"links": "Links",
"chooseSubject": "Choose a subject"
}, },
"index": { "index": {
"welcome": "Welcome to Sandwiches Order Doua", "welcome": "Welcome to Sandwiches Order Doua",

View file

@ -24,7 +24,9 @@
"question": "Question Pratique", "question": "Question Pratique",
"profile": "Mon profil", "profile": "Mon profil",
"other": "Autre question", "other": "Autre question",
"powered": "Propulsé par" "powered": "Propulsé par",
"links": "Liens",
"chooseSubject": "Choisissez un sujet"
}, },
"index": { "index": {
"welcome": "Bienvenue sur Sandwiches Order Doua", "welcome": "Bienvenue sur Sandwiches Order Doua",

View file

@ -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() { document.addEventListener("DOMContentLoaded", function() {
M.AutoInit(); M.AutoInit();
M.updateTextFields;
}); });
function cb(token) { function cb(token) {

View file

@ -1,271 +1,9 @@
html, body {
margin: 0;
height: 100%;
}
body { body {
display: flex; display: flex;
align-items: center; min-height: 100vh;
font: large "Lucida Grande", Helvetica, Arial, sans-serif; flex-direction: column;
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;
} }
.card { main {
display: flex; flex: 1 0 auto;
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;
}
} }

9
routes/about.js Normal file
View file

@ -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;

View file

@ -5,7 +5,9 @@ let reCaptcha = require("../middlewares/reCaptcha");
let Message = require("emailjs").Message; 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) 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"); 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, return error(req, res, "Fail to send message !", 500,
req.app.get("env") !== "production" ? err : undefined); req.app.get("env") !== "production" ? err : undefined);
else else
res.render("contact", {title: "SOD - Contact"}); res.redirect("/contact?send=1");
}); });
}); });

35
views/about.pug Normal file
View file

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

View file

@ -1,6 +1,43 @@
extends layout extends layout
block content block content
div.card div.container
h1=__("contact") 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")

View file

@ -6,7 +6,7 @@ html
title= title title= title
link(rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons") 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="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") meta(name="viewport" content="width=device-width, initial-scale=1.0")
body body
mixin nav mixin nav
@ -30,75 +30,24 @@ html
+nav +nav
ul#mobile-nav.sidenav ul#mobile-nav.sidenav
+nav +nav
main
block content
block content if !test
p !{captcha}
.hide footer.page-footer
div#more div.container
a=__("layout.about") div.row
a=__("contact") div.col.l6.s12
h5.white-text=__("layout.links")
div#dark.hide ul
div#about.popup.card.hide li: a.grey-text.text-lighten-3(href="/about")=__("layout.about")
h1=__("layout.about") li: a.grey-text.text-lighten-3(href="/contact")=__("contact")
p=__("layout.aboutDescription") div.footer-copyright
div.images div.container
div a.grey-text.text-lighten-4(href="https://sapinet.fr" target="_blank")=__("layout.powered") + " Sapinet"
img(src="/images/logoBio.png") a.grey-text.text-lighten-4.right(href="https://www.linkedin.com/in/florian-charlaix" target="_blank")=__("layout.made") + " Florian Charlaix"
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="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js") script(src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js")
script(src="/javascripts/layout.js") script(src="/javascripts/layout.js")
if !test
p !{captcha}