Skip to content
Snippets Groups Projects
Commit 91d199c1 authored by Dominik Hebeler's avatar Dominik Hebeler
Browse files

fixed layout

parent 4cf432f9
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 137 additions and 41 deletions
pass/public/styles/base.less
+ 4
− 0
View file @ 91d199c1
......@@ -35,6 +35,10 @@
font-style: italic;
}
* {
box-sizing: border-box;
}
html {
font-family: Liberation Sans;
font-size: 1.1rem;
......
pass/public/styles/key/checkout-payment.less
+ 1
− 0
View file @ 91d199c1
......@@ -57,6 +57,7 @@
gap: 0.5rem;
color: inherit;
text-decoration: none;
box-sizing: content-box;
img {
max-width: 100%;
max-height: 100%;
......
pass/public/styles/key/key.less
+ 13
− 14
View file @ 91d199c1
......@@ -4,14 +4,13 @@
@max-width: 980px;
@key-breakpoint-1: 770px;
@key-breakpoint-2: 430px;
main {
max-width: @max-width;
margin: 0 auto;
display: grid;
row-gap: 1rem;
padding-right: 1rem;
gap: 1rem;
padding: 1rem;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto auto auto;
grid-template-areas: "qr key " "qr setting-url" "qr buttons" "amount second-nav" "amount content";
......@@ -19,11 +18,12 @@ main {
> #qr {
grid-area: qr;
justify-self: center;
max-width: 8em;
}
#key {
grid-area: key;
font-size: clamp(0.9rem, 4.8vw, 1.5rem);
font-size: clamp(0.8rem, 4.8vw, 1.5rem);
font-weight: bold;
width: max-content;
margin-top: 11px;
......@@ -69,7 +69,7 @@ main {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2rem;
> h3 {
font-size: 1.5rem;
margin: 0;
......@@ -91,11 +91,13 @@ main {
}
@media (max-width: @key-breakpoint-1) {
padding: 0 1rem;
grid-template-rows: auto auto auto auto auto auto;
grid-template-columns: auto auto;
grid-template-areas: "amount qr " "key key" "setting-url setting-url" "buttons buttons " "second-nav second-nav" "content content ";
> #qr {
align-self: center;
}
> #key {
margin: 0;
justify-self: center;
......@@ -112,6 +114,8 @@ main {
> #amount {
align-self: center;
padding: 10px;
margin-top: unset;
}
> #charge {
......@@ -122,12 +126,6 @@ main {
}
}
}
@media (max-width: @key-breakpoint-2) {
grid-template-rows: auto auto auto auto auto auto auto;
grid-template-columns: auto;
grid-template-areas: "qr" "key" "setting-url" "buttons" "amount" "second-nav" "content";
}
}
h2 {
......@@ -156,6 +154,7 @@ h2 {
color: inherit;
text-decoration: none;
gap: 0.5rem;
box-sizing: content-box;
img {
max-width: 70%;
max-height: 100%;
......@@ -175,7 +174,7 @@ h2 {
text-align: center;
gap: 0.5rem;
grid-template-columns: 1fr 1fr;
margin-top: 2rem;
a {
width: auto;
padding: 0.5rem;
......@@ -188,7 +187,7 @@ h2 {
border-top: 0;
border-radius: 10px;
white-space: nowrap;
font-size: clamp(1rem, 5vw, 1.8rem);
font-size: clamp(1rem, 5vw, 1.5rem);
&:not(.active) {
border: 0;
}
......
pass/public/styles/orders/order.css 0 → 100644
+ 1
− 0
View file @ 91d199c1
#order{padding:1rem 0;grid-area:content}#order .breadcrumbs{display:flex;gap:.5rem;padding:0;list-style-type:disclosure-closed;font-size:clamp(.7rem, 4w, 1rem)}#order .breadcrumbs li{margin-left:1rem}#order .breadcrumbs li:first-child{margin-left:0;list-style-type:none}#order .breadcrumbs li a{color:#777}#order #order-details{display:grid;grid-template-columns:1fr 4rem 4rem;text-align:right;padding:2rem 0}#order #order-details>div.heading{text-align:left;border-bottom:1px solid #ff7f00;font-weight:bold;padding-bottom:.2rem}#order #order-details>div:not(.heading){padding:.5rem 0}#order #order-details>div.sum{font-weight:bold}#order>h3{text-align:center}#order #order-buttons{display:grid;grid-template-columns:1fr auto;justify-items:end;gap:.5rem}#order #order-buttons .button{font-size:.8rem;display:flex;align-items:center;justify-content:center;line-height:1;gap:.5rem;padding:.5rem}#order #order-buttons .button img{height:1rem;filter:brightness(0) invert(1)}@media (max-width:500px){#order #order-buttons{grid-template-columns:1fr}#order #order-buttons>a.button{width:100%;padding:1rem}}#order #invoice #download-receipt>a.button{display:flex;margin:0 auto;justify-content:center;align-items:center;gap:.5rem;padding:.5rem}#order #invoice #download-receipt>a.button>img{height:1.5em}#order #invoice #invoice-form #invoice-form-fields{display:grid;gap:1rem}#order #invoice #invoice-form #invoice-form-fields .invoice-form-field{display:grid;gap:.5rem;font-weight:bold;color:#777;font-size:.7rem;place-content:center;text-align:center}#order #invoice #invoice-form #invoice-form-fields .invoice-form-field #email,#order #invoice #invoice-form #invoice-form-fields .invoice-form-field #name{padding:.5rem;border-radius:5px;font-size:.8rem;width:13rem;text-align:center}#order #invoice #invoice-form #invoice-form-fields .invoice-form-field #address{padding:.5rem;border-radius:5px;line-height:2;text-align:center;width:13rem}#order #invoice #invoice-form #invoice-form-fields .invoice-form-field button{display:flex;align-items:center;gap:.5rem;padding:.5rem}#order #invoice #invoice-form #invoice-form-fields .invoice-form-field button img{height:1.2rem}#order #invoice #invoice-form .storage-time{font-size:.8rem;text-align:center}
\ No newline at end of file
pass/public/styles/orders.less → pass/public/styles/orders/order.less
+ 11
− 7
View file @ 91d199c1
@import "./misc/vars.less";
@import "../misc/vars.less";
#order {
padding: 1rem 0;
.breadcrumbs {
......@@ -44,8 +44,9 @@
}
#order-buttons {
display: flex;
justify-content: flex-end;
display: grid;
grid-template-columns: 1fr auto;
justify-items: end;
gap: 0.5rem;
.button {
font-size: 0.8rem;
......@@ -60,15 +61,18 @@
filter: brightness(0) invert(1);
}
}
@media (max-width: 510px) {
flex-direction: column;
align-items: center;
@media (max-width: 500px) {
grid-template-columns: 1fr;
> a.button {
width: 100%;
padding: 1rem;
}
}
}
#invoice {
#download-receipt {
> a {
> a.button {
display: flex;
margin: 0 auto;
justify-content: center;
......
pass/public/styles/orders/orders.css 0 → 100644
+ 1
− 0
View file @ 91d199c1
#load-order{grid-area:content}#load-order>#load-order-form{display:flex}#load-order>#load-order-form>input{padding:.5rem;border-radius:5px;border-top-right-radius:0;border-bottom-right-radius:0;flex-grow:1}#load-order>#load-order-form>button{padding:.5rem}
\ No newline at end of file
pass/public/styles/orders/orders.less 0 → 100644
+ 16
− 0
View file @ 91d199c1
#load-order {
grid-area: content;
> #load-order-form {
display: flex;
> input {
padding: 0.5rem;
border-radius: 5px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
flex-grow: 1;
}
> button {
padding: 0.5rem;
}
}
}
pass/routes/key.js
+ 5
− 0
View file @ 91d199c1
......@@ -37,6 +37,11 @@ router.use("/:key", param("key").isUUID(4), async (req, res, next) => {
settings_url: metager_url,
qr: qr_data_uri,
},
page: "fill",
links: {
fill_url: `/key/${req.params.key}`,
orders_url: `/key/${req.params.key}/orders`,
},
js: [],
css: ["/styles/key/key.css"],
});
......
pass/routes/orders.js
+ 54
− 5
View file @ 91d199c1
......@@ -7,6 +7,54 @@ const config = require("config");
const dayjs = require("dayjs");
const OrderReceipt = require("../app/pdf/OrderReceipt");
router.use("/", (req, res, next) => {
if (typeof req.cookies.order !== "undefined") {
req.data.form = {
"order-id": req.cookies.order,
};
}
console.log(req.cookies);
next();
});
router.get("/", (req, res, next) => {
req.data.page = "order";
req.data.css.push("/styles/orders/orders.css");
res.render("key", req.data);
});
router.post("/", (req, res, next) => {
console.log(req.body["order-id"]);
let matches = req.body["order-id"].match(/^(INV_)?(\d{14})$/);
if (!matches) {
req.data.page = "order";
req.data.css.push("/styles/orders/orders.css");
req.data.error = 400;
req.data.form = {
"order-id": req.body["order-id"],
};
res.render("key", req.data);
} else {
let order_id = matches[2];
Order.LOAD_ORDER_FROM_ID(order_id)
.then(/** @param {Order} order */ (order) => order.getKeyFromOrderLink())
.then((key) => {
if (key !== req.data.key.key) {
throw "Order is not connected to this key";
}
res.redirect(`/key/${req.data.key.key}/orders/${order_id}`);
})
.catch((reason) => {
req.data.page = "order";
req.data.css.push("/styles/orders/orders.css");
req.data.error = 404;
req.data.form = {
"order-id": req.body["order-id"],
};
res.render("key", req.data);
});
}
});
router.use("/:order_id", param("order_id").isInt(), (req, res, next) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
......@@ -19,12 +67,13 @@ router.use("/:order_id", param("order_id").isInt(), (req, res, next) => {
}
Order.LOAD_ORDER_FROM_ID(req.params.order_id)
.then((order) => {
req.data.css.push("/styles/orders.css");
res.cookie("order", order.getOrderID());
req.data.page = "order";
req.data.css.push("/styles/orders/order.css");
req.data.order = { order: order };
req.data.order.orders_url = `/key/${req.data.key.key}/orders`;
req.data.order.order_url = `/key/${req.data.key.key}/orders/${req.params.order_id}#order`;
req.data.order.receipt_url = `/key/${req.data.key.key}/orders/${req.params.order_id}/pdf`;
req.data.order.invoice_url = `/key/${req.data.key.key}/orders/${req.params.order_id}/invoice#invoice-form`;
req.data.links.order_url = `/key/${req.data.key.key}/orders/${req.params.order_id}#order`;
req.data.links.receipt_url = `/key/${req.data.key.key}/orders/${req.params.order_id}/pdf`;
req.data.links.invoice_url = `/key/${req.data.key.key}/orders/${req.params.order_id}/invoice#invoice-form`;
if (req.data.order.order.isReceiptCreated()) {
req.data.order.download_invoice_url = `/key/${
req.data.key.key
......
pass/views/key.ejs
+ 7
− 3
View file @ 91d199c1
......@@ -25,8 +25,8 @@
<div>bis <span><%= key.expiration.format("DD.MM.YYYY") %></span></div>
</div>
<nav id="second-nav">
<a class="button active" href="#">Auffüllen</a>
<a class="button" href="#">Bestellungen</a>
<a class="button <% if(page === "fill") { _%> active<%_ } _%>" href="<%= links.fill_url %>">Auffüllen</a>
<a class="button <% if(page === "order") { _%> active<%_ } %>" href="<%= links.orders_url %>">Bestellungen</a>
</nav>
<%_ if (created_new) { _%>
<div id="store">
......@@ -39,8 +39,12 @@
</p>
<a class="button" href="/key/<%= key.key %>">Schlüssel jetzt aufladen</a>
</div>
<% } else if (typeof order !== "undefined") { %>
<% } else if (page === "order") { %>
<%_ if(typeof order === "undefined") { _%>
<%- include('./orders/orders', {}); %>
<%_ } else { _%>
<%- include('./orders/order', {}); %>
<%_ } _%>
<%_ } else { _%>
<div id="charge">
<%_ if (typeof checkout !== "undefined" && typeof checkout.amount !== "undefined") { _%>
......
pass/views/orders/invoice.ejs
+ 5
− 5
View file @ 91d199c1
<div id="invoice">
<h2>Rechnung</h2>
<ul class="breadcrumbs">
<li><a href="<%= order.orders_url %>">Bestellungen</a></li>
<li><a href="<%= order.order_url %>"><%= order.order.getOrderID() %></a></li>
<li><a href="<%= links.orders_url %>">Bestellungen</a></li>
<li><a href="<%= links.order_url %>"><%= order.order.getOrderID() %></a></li>
<li>Rechnung</li>
</ul>
<div id="order-details">
......@@ -11,13 +11,13 @@
<div class="heading price">Preis</div>
<div class="item">MetaGer Schlüssel: Suchanfragen (300x)</div>
<div class="count"><%= order.order.getAmount() / 300 %></div>
<div class="price"><%= order.order.getNettoPrice() %> €</div>
<div class="price"><%= order.order.getNettoPrice().toFixed(2) %> €</div>
<div class="item">MwSt. (<%= order.order.getVat() %> %)</div>
<div class="count"></div>
<div class="price"><%= order.order.getVatAmount() %> €</div>
<div class="price"><%= order.order.getVatAmount().toFixed(2) %> €</div>
<div class="item sum">Gesamtbetrag</div>
<div class="count"></div>
<div class="price"><%= order.order.getPrice() %> €</div>
<div class="price"><%= order.order.getPrice().toFixed(2) %> €</div>
</div>
<form <% if(admin) { %>action="<%= order.invoice.create_invoice_url %>"<%_ } _%> method="POST" id="invoice-form">
......
pass/views/orders/order.ejs
+ 7
− 7
View file @ 91d199c1
......@@ -2,7 +2,7 @@
<%_ if(!order.invoice) { _%>
<h2>Ihre Bestellung Nr. <%= order.order.getOrderID() %></h2>
<ul class="breadcrumbs">
<li><a href="<%= order.orders_url %>">Bestellungen</a></li>
<li><a href="<%= links.orders_url %>">Bestellungen</a></li>
<li><%= order.order.getOrderID() %></li>
</ul>
<div id="order-details">
......@@ -11,28 +11,28 @@
<div class="heading price">Preis</div>
<div class="item">MetaGer Schlüssel: Suchanfragen (300x)</div>
<div class="count"><%= order.order.getAmount() / 300 %></div>
<div class="price"><%= order.order.getNettoPrice() %> €</div>
<div class="price"><%= order.order.getNettoPrice().toFixed(2) %> €</div>
<div class="item">MwSt. (<%= order.order.getVat() %> %)</div>
<div class="count"></div>
<div class="price"><%= order.order.getVatAmount() %> €</div>
<div class="price"><%= order.order.getVatAmount().toFixed(2) %> €</div>
<div class="item sum">Gesamtbetrag</div>
<div class="count"></div>
<div class="price"><%= order.order.getPrice() %> €</div>
<div class="price"><%= order.order.getPrice().toFixed(2) %> €</div>
</div>
<h3>Vielen Dank für Ihren Einkauf!</h3>
<div id="order-buttons">
<a href="<%= order.receipt_url %>" target="_blank" class="button">
<a href="<%= links.receipt_url %>" target="_blank" class="button">
<img src="/images/download.svg" alt="" />
<span>Auftragsbestätigung herunterladen</span>
</a>
<%_ if(!order.order.isReceiptCreated()) { _%>
<a href="<%= order.invoice_url %>" class="button">
<a href="<%= links.invoice_url %>" class="button">
<img src="/images/invoice.svg" alt="" />
<span>Rechnung beantragen</span>
</a>
<%_ } else { _%>
<div id="download-receipt">
<a href="<%= order.download_invoice_url %>" target="_blank" class="button">
<a href="<%= links.download_invoice_url %>" target="_blank" class="button">
<img src="/images/invoice.svg" alt="" />
<span>Rechnung herunterladen</span>
</a>
......
pass/views/orders/orders.ejs 0 → 100644
+ 12
− 0
View file @ 91d199c1
<div id="load-order">
<p>Geben Sie nachfolgend bitte die Auftrags- oder Rechnungsnummer für eine Ihrer Bestellungen ein um Details zu dieser anzuzeigen.</p>
<%_ if(typeof error !== "undefined" && error === 400) { _%>
<p class="error">Ungültige Auftrags-/Rechnungsnummer</p>
<%_ } else if(typeof error !== "undefined" && error === 404) { _%>
<p class="error">Auftrags-/Rechnungsnummer nicht gefunden</p>
<%_ } _%>
<form id="load-order-form" method="post">
<input type="text" name="order-id" id="order-id" placeholder="Auftrags-/Rechnungsnummer" <% if(typeof form !== "undefined") { %>value="<%= form["order-id"] %>"<% } %> size="1">
<button type="submit" class="button">Bestellung laden</button>
</form>
</div>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment