More, about & contact rework
This commit is contained in:
parent
41dad395b2
commit
12d4256021
10 changed files with 118 additions and 365 deletions
2
app.js
2
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) => {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
.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;
|
||||
min-height: 100vh;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
9
routes/about.js
Normal file
9
routes/about.js
Normal 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;
|
||||
|
|
@ -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");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
35
views/about.pug
Normal file
35
views/about.pug
Normal 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")
|
||||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
.hide
|
||||
div#more
|
||||
a=__("layout.about")
|
||||
a=__("contact")
|
||||
if !test
|
||||
p !{captcha}
|
||||
|
||||
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}
|
||||
|
|
|
|||
Reference in a new issue