maltejur/hsarch
maltejur/hsarch
1
0
Fork 0
Code Activity

button skeleton

Browse source
This commit is contained in:
Malte Jürgens 2022-09-14 15:57:14 +00:00
parent 17aacdfae5
commit 06b4611dcc
Signed by: maltejur
GPG key ID: D29FBD5F93C0CFC3
3 changed files with 91 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/modules/ausgabeHertzblatt.ts
View file

@ -7,7 +7,11 @@ export default function AusgabeHertzblatt(params) {
const ausg = json.hertzblatt.find((i) => i["Ausgabe"] == params.id);
if (ausg) {
if (ausg === undefined) {
console.warn(params.id, "not found");
return;
}
let pagehtml = `
<img class="cover" src="${json.baseUrl}hertzblatt/images/${ausg.Ausgabe}.jpg"></img>
<h1>HertzBLATT ${ausg["Name"]}</h1>
@ -17,13 +21,24 @@ export default function AusgabeHertzblatt(params) {
pagehtml = pagehtml + "<p><b>" + i + ":</b> " + ausg[i] + "</p>";
}
}
if (ausg.Web)
pagehtml += `<a class="button" href="${ausg.Web}">
<i class="fas fa-link"></i>Link
</a>`;
const skeleton = document.createElement("div");
skeleton.innerHTML = `
<a class="button-skeleton"><i class="fas fa-file-pdf"></i><span>PDF Anzeigen</span></a>
<a class="button-skeleton"><i class="fas fa-download"></i><span>Download</span></a>
`;
ret.innerHTML = pagehtml;
ret.appendChild(skeleton);
checkFile(`${json.baseUrl}hertzblatt/pdf/${ausg.Ausgabe}.pdf`).then(
(exists) => {
if (exists) {
skeleton.remove();
ret.innerHTML +=
// prettier-ignore
`
@ -33,10 +48,10 @@ export default function AusgabeHertzblatt(params) {
<button>
<i class="fas fa-download"></i>Download
<div class="dropdown">
<a onclick="window.open('${json.baseUrl}hertzblatt/pdf/compressed/${ausg.Ausgabe}.pdf?download', '_self');">
<a onclick="window.open('${json.baseUrl}hertzblatt/pdf/compressed/${ausg.Ausgabe}.pdf', '_self');">
<i class="fas fa-file-download"></i>Niedrige Qualität
</a>
<a onclick="window.open('${json.baseUrl}hertzblatt/pdf/${ausg.Ausgabe}.pdf?download', '_self');">
<a onclick="window.open('${json.baseUrl}hertzblatt/pdf/${ausg.Ausgabe}.pdf', '_self');">
<i class="fas fa-file-download"></i>Hohe Qualität
</a>
</div>
@ -46,7 +61,5 @@ export default function AusgabeHertzblatt(params) {
}
);
ret.innerHTML = pagehtml;
}
return Page(ret);
}

20
src/modules/ausgabeHertzschlag.ts
View file

@ -7,6 +7,11 @@ export default function AusgabeHertzschlag(params) {
const ausg = json.hertzschlag.find((i) => i["Ausgabe"] == params.id);
if (ausg === undefined) {
console.warn(params.id, "not found");
return;
}
let pagehtml = `
<img class="cover" src="${json.baseUrl}hertzschlag/images/${ausg["Ausgabe"]}.jpg"></img>
<h2>HertzSCHLAG ${ausg["Ausgabe"]}</h2>
@ -23,9 +28,19 @@ export default function AusgabeHertzschlag(params) {
pagehtml = pagehtml + "<p><b>" + i + ":</b> " + ausg[i] + "</p>";
}
}
const skeleton = document.createElement("div");
skeleton.innerHTML = `
<a class="button-skeleton"><i class="fas fa-file-pdf"></i><span>PDF Anzeigen</span></a>
<a class="button-skeleton"><i class="fas fa-download"></i><span>Download</span></a>
`;
ret.innerHTML = pagehtml;
ret.appendChild(skeleton);
checkFile(`${json.baseUrl}hertzschlag/pdf/${ausg["Ausgabe"]}.pdf`).then(
(exists) => {
if (exists) {
skeleton.remove();
ret.innerHTML +=
// prettier-ignore
`
@ -35,10 +50,10 @@ export default function AusgabeHertzschlag(params) {
<button>
<i class="fas fa-download"></i>Download
<div class="dropdown">
<a href="${json.baseUrl}hertzschlag/pdf/compressed/${ausg["Ausgabe"]}.pdf?download">
<a href="${json.baseUrl}hertzschlag/pdf/compressed/${ausg["Ausgabe"]}.pdf">
<i class="fas fa-file-download"></i>Niedrige Qualität
</a>
<a href="${json.baseUrl}hertzschlag/pdf/${ausg["Ausgabe"]}.pdf?download">
<a href="${json.baseUrl}hertzschlag/pdf/${ausg["Ausgabe"]}.pdf">
<i class="fas fa-file-download"></i>Hohe Qualität
</a>
</div>
@ -48,6 +63,5 @@ export default function AusgabeHertzschlag(params) {
}
);
ret.innerHTML = pagehtml;
return Page(ret);
}

47
src/style.css
View file

@ -162,30 +162,62 @@ body {
}
button,
.button {
background-color: rgb(201, 2, 2);
.button,
.button-skeleton {
border: none;
border-radius: 8px;
color: white;
padding: 15px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-right: 1em;
margin-top: 1em;
transition: background-color 0.2s ease;
padding: 15px 20px;
position: relative;
}
button,
.button {
background-color: rgb(201, 2, 2);
color: white;
cursor: pointer;
transition: background-color 0.2s ease;
}
.button-skeleton {
background: linear-gradient(90deg,
rgb(250, 250, 250) 0%,
rgb(230, 230, 230) 50%,
rgb(250, 250, 250) 100%) rgb(250, 250, 250);
background-repeat: no-repeat;
animation: skeleton-loading 1s infinite;
}
.button-skeleton>span,
.button-skeleton>i {
color: transparent;
user-select: none;
background-color: rgb(230, 230, 230);
}
@keyframes skeleton-loading {
from {
background-position: -200px 0;
}
to {
background-position: 200px 0;
}
}
button:hover,
.button:hover {
background-color: darkred;
}
button .fas,
.button .fas {
.button .fas,
.button-skeleton .fas {
margin-right: 0.6em;
}
@ -316,6 +348,7 @@ iframe {
top: 25px;
right: 55px;
}
#header nav a {
font-size: 16px;
margin-left: 15px;