Erik/DataDash
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add loading skeleton

Browse Source
This commit is contained in:
Elias Schriefer 2024-07-04 12:40:59 +02:00
parent 8810bfa53f
commit 20c4524bba
3 changed files with 73 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/main/resources/static/details.css
View File

@ -1,7 +1,9 @@
@import url("./main.css"); @import url("./main.css");
@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap');
:root { :root {
--min-card-size: min(60ch, calc(100vw - var(--pad-main))); --min-card-size: min(60ch, calc(100vw - var(--pad-main)));
--rating-color: gold;
} }
main { main {
@ -80,19 +82,25 @@ header {
content: ""; content: "";
display: inline-block; display: inline-block;
width: 5em; width: 5em;
height: 1em; height: 1lh;
margin-block: calc(-1 * (1lh - 1.25em)); vertical-align: bottom;
margin-inline: .5ch; margin-inline: .5ch;
mask-image: url("stars.svg"); mask-image: url("stars.svg");
-webkit-mask-image: url("stars.svg"); -webkit-mask-image: url("stars.svg");
mask-size: 100% 100%; mask-size: 100% 100%;
mask-mode: alpha; mask-mode: alpha;
--rating-percent: calc((var(--rating, 0) / 5) * 100%); --rating-percent: calc((var(--rating, 0) / 5) * 100%);
background: linear-gradient(to right, gold var(--rating-percent), var(--bg-color) var(--rating-percent)); background: linear-gradient(to right, var(--rating-color) var(--rating-percent), var(--bg-color) var(--rating-percent));
} }
a { a {
color: var(--accent-color); --text-color: var(--accent-color);
/*
Why doesn't it do this automatically? It is inherited from body,
so I should be able to just change --text-color, right?
*/
color: var(--text-color);
} }
#terms-of-use { #terms-of-use {
@ -121,4 +129,52 @@ a {
br { br {
margin-bottom: .5lh; margin-bottom: .5lh;
} }
} }
.skeleton {
font-family: "Flow Circular";
font-weight: 400;
font-style: normal;
user-select: none;
--rating-color: var(--text-color);
a, .btn {
pointer-events: none;
}
& > * {
cursor: progress;
}
@media screen and not (prefers-reduced-motion) {
:is(header, section) > :is(p, span, h1, a) {
animation: infinite 2s linear skeleton-loading;
background: radial-gradient(
circle farthest-side,
var(--highlight-color, white) 20%,
var(--text-color) 40%
) no-repeat, var(--text-color);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
&:is(a) {
--highlight-color: color-mix(in oklab, white, var(--text-color));
}
}
}
#title::after {
color: color-mix(in oklab, var(--accent-color) 50%, currentcolor);
}
}
@keyframes skeleton-loading {
from {
background-position-x: calc(-1.4 * var(--min-card-size)), 0;
}
to {
background-position-x: calc(1.4 * var(--min-card-size)), 0;
}
}

15
src/main/resources/static/details.html
View File

@ -4,22 +4,25 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dataset details</title> <title>Dataset details</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap" crossorigin>
<link rel="stylesheet" href="details.css"> <link rel="stylesheet" href="details.css">
<script defer type="module" src="details.js"></script> <script defer type="module" src="details.js"></script>
</head> </head>
<body> <body>
<main> <main class="skeleton">
<header data-id="dataset-id"> <header data-id="dataset-id">
<h1 id="title" data-type="api">Title</h1> <h1 id="title" data-type="api">Title</h1>
<span> <span>
<span id="rating" style="--rating: 3.5">3.5</span> <span id="rating" style="--rating: 4">4</span>
<span id="short-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis recusandae laborum odio corrupti voluptas quisquam dicta, quibusdam ipsum qui exercitationem.</span> <span id="short-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis recusandae laborum odio corrupti voluptas quisquam dicta, quibusdam ipsum qui exercitationem.</span>
</span> </span>
<a href="#" id="url">https://example.com/dataset</a> <a id="url">https://example.com/dataset</a>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn btn flat">Upvote</button> <button disabled class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn flat">Downvote</button> <button disabled class="downvote-btn btn flat">Downvote</button>
</aside> </aside>
</header> </header>
@ -27,7 +30,7 @@
<span>Added on: <span id="date" data-date="0">1. January 1970</span></span> <span>Added on: <span id="date" data-date="0">1. January 1970</span></span>
<span>Category: <span id="category">Something</span></span> <span>Category: <span id="category">Something</span></span>
<span>License: <span id="license">MIT</span></span> <span>License: <span id="license">MIT</span></span>
<a href="#" id="terms-of-use">Terms of Use</a> <a id="terms-of-use">Terms of Use</a>
</section> </section>
<section id="details"> <section id="details">

3
src/main/resources/templates/index.html
View File

@ -4,6 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataDash</title> <title>DataDash</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="prefetch" href="https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap">
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
<script type="module" src="main.js" defer></script> <script type="module" src="main.js" defer></script>
</head> </head>