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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,22 +4,25 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<script defer type="module" src="details.js"></script>
</head>
<body>
<main>
<main class="skeleton">
<header data-id="dataset-id">
<h1 id="title" data-type="api">Title</h1>
<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>
<a href="#" id="url">https://example.com/dataset</a>
<a id="url">https://example.com/dataset</a>
<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>
<button class="downvote-btn btn flat">Downvote</button>
<button disabled class="downvote-btn btn flat">Downvote</button>
</aside>
</header>
@@ -27,7 +30,7 @@
<span>Added on: <span id="date" data-date="0">1. January 1970</span></span>
<span>Category: <span id="category">Something</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 id="details">