Merge branch '7-add-page-to-view-dataset-api' into '22-integrate-api-and-frontend'

Resolve "Add page to view dataset/API"

See merge request padas/24ss-5430-web-and-data-eng/gruppe-3/datadash!21

src/main/resources/static/details.css

@@ -14,12 +14,14 @@ main {
     }
     
     & > :first-child {
-        border-radius: var(--corner-radius) var(--corner-radius) 0 0;
+        border-top-left-radius: var(--corner-radius);
+        border-top-right-radius: var(--corner-radius);
         margin-top: var(--pad-main);
     }
 
     & > :last-child {
-        border-radius: 0 0 var(--corner-radius) var(--corner-radius);
+        border-bottom-left-radius: var(--corner-radius);
+        border-bottom-right-radius: var(--corner-radius);
         margin-bottom: var(--pad-main);
     }
 
@@ -43,10 +45,13 @@ header {
     grid-gap: var(--gap-medium);
 }
 
-#title {
+h1 {
-    grid-column: 1 / 3;
     margin-block: var(--gap-medium) 0;
     text-align: center;
+}
+
+#title {
+    grid-column: 1 / 3;
 
     &::after {
         content: attr(data-type);
@@ -69,28 +74,41 @@ header {
     }
 }
 
-:has(#rating), #url {
+#details summary, #url {
     text-align: start;
     grid-column: 1 / 3;
 }
 
 #rating {
     color: color-mix(in oklab, var(--text-color) 80%, black);
-}
+    color: transparent;
-
+    width: 5lh;
-#rating::after {
-    content: "";
-    display: inline-block;
-    width: 5em;
     height: 1lh;
-    vertical-align: bottom;
     margin-inline: .5ch;
     mask-image: url("stars.svg");
     -webkit-mask-image: url("stars.svg");
-    mask-size: 100% 100%;
+    mask-size: contain;
     mask-mode: alpha;
     --rating-percent: calc((var(--rating, 0) / 5) * 100%);
-    background: linear-gradient(to right, var(--rating-color) var(--rating-percent), var(--bg-color) var(--rating-percent));
+    background: var(--bg-color);
+    vertical-align: bottom;
+}
+
+#rating::-webkit-meter-bar {
+    background: var(--bg-color);
+    border: none;
+    border-radius: 0;
+    grid-row: 1 / -1;
+}
+
+#rating::-webkit-meter-optimum-value,
+#rating::-webkit-meter-suboptimum-value,
+#rating::-webkit-meter-even-less-good-value {
+    background-color: var(--rating-color);
+}
+
+#rating::-moz-meter-bar {
+    background: var(--rating-color);
 }
 
 a {
@@ -103,10 +121,6 @@ a {
     color: var(--text-color); 
 }
 
-#terms-of-use {
-    /* text-align: end; */
-}
-
 .upvote {
     margin: var(--gap-medium) 0;
     align-self: self-start;
@@ -125,10 +139,10 @@ a {
     text-wrap: balance;
     text-wrap: pretty;
     margin-top: 0;
-
-    br {
-        margin-bottom: .5lh;
 }
+
+:is(#full-description, #not-found) br {
+    margin-bottom: .5lh;
 }
 
 .skeleton {
@@ -178,3 +192,22 @@ a {
         background-position-x: calc(1.4 * var(--min-card-size)), 0;
     }
 }
+
+#not-found:not(.hidden) {
+    min-height: calc(100vh - 2 * var(--pad-main));
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-large);
+    justify-content: space-evenly;
+    container: nothing-found / inline-size;
+
+    p, h1 {
+        text-align: center;
+        text-wrap: balance;
+        text-wrap: pretty;
+    }
+}
+
+#nothing-found-bg {
+    background-position-x: calc(50% + 3cqh);
+}

src/main/resources/static/details.html

@@ -19,13 +19,13 @@
         </aside>
     </template>
 
-    <main class="skeleton">
+    <main id="details" class="skeleton">
         <header data-id="dataset-id">
             <h1 id="title" data-type="api">Title</h1>
-            <span>
+            <summary>
-                <span id="rating" style="--rating: 4">4</span>
+                <span id="rating-text">4</span><meter id="rating" value="4" max="5"></meter>
                 <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>
+            </summary>
             <a id="url">https://example.com/dataset</a>
             <aside class="upvote">
                 <button disabled class="upvote-btn btn flat">Upvote</button>
@@ -35,13 +35,13 @@
         </header>
         
         <section id="metadata">
-            <span>Added on: <span id="date" data-date="0">1. January 1970</span></span>
+            <span>Added on: <time id="date" datetime="0">1. January 1970</time></span>
             <span>Category: <span id="category">Something</span></span>
             <span>License: <span id="license">MIT</span></span>
             <a id="terms-of-use">Terms of Use</a>
         </section>
         
-        <section id="details">
+        <section>
             <p id="full-description">Full description<br>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
                 nihil saepe et numquam quo id voluptatum recusandae assumenda
@@ -59,5 +59,18 @@
             </p>
         </section>
     </main>
+
+    <main id="not-found" class="hidden">
+        <h1>This is not the page you're looking for.</h1>
+        <div id="nothing-found-bg"></div>
+        <p>
+            The dataset or API you were sent to is not in our database.
+            Either it has been deleted by its author or we didn't know of it
+            to begin with.
+            <br>
+            You can try browsing for other datasets and APIs on our
+            <a href="/">homepage</a>.
+        </p>
+    </main>
 </body>
 </html>

src/main/resources/static/details.js

@@ -1,9 +1,11 @@
 import Dataset from "./dataset.js";
 
-const mainElement = document.getElementsByTagName("main")[0];
+const mainPage = document.getElementById("details");
+const notFoundPage = document.getElementById("not-found");
 
 const title = document.getElementById("title");
 const rating = document.getElementById("rating");
+const ratingText = document.getElementById("rating-text");
 const shortDescription = document.getElementById("short-description");
 const url = document.getElementById("url");
 const date = document.getElementById("date");
@@ -26,19 +28,19 @@ if (currentLocation.searchParams.has("id")) {
 
         title.innerText = dataset.title;
         title.dataset.type = dataset.type.toLowerCase();
-        rating.innerText = dataset.rating;
+        rating.value = dataset.rating;
-        rating.style.setProperty("--rating", `${dataset.rating}`);
+        ratingText.innerText = dataset.rating;
         shortDescription.innerText = dataset.shortDescription;
         url.href = dataset.url;
         url.innerText = dataset.url;
-        mainElement.querySelector(".upvote").replaceWith(upvoteComponent);
+        mainPage.querySelector(".upvote").replaceWith(upvoteComponent);
 
+        date.datetime = dataset.date;
         date.innerText = dataset.parseDate().toLocaleDateString(undefined, {
             day: "numeric",
             month: "long",
             year: "numeric",
         });
-        date.dataset.date = dataset.parseDate().getTime();
         category.innerText = dataset.category.name;
         category.dataset.id = dataset.category.id;
         license.innerText = dataset.license;
@@ -46,6 +48,12 @@ if (currentLocation.searchParams.has("id")) {
 
         fullDescription.innerText = dataset.fullDescription;
 
-        mainElement.classList.remove("skeleton");
+        mainPage.classList.remove("skeleton");
+    } else {
+        mainPage.classList.add("hidden");
+        notFoundPage.classList.remove("hidden");
     }
+} else {
+    mainPage.classList.add("hidden");
+    notFoundPage.classList.remove("hidden");
 }

src/main/resources/static/index.html

@@ -8,6 +8,8 @@
     <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="prefetch" href="details.html">
+    <link rel="prefetch" href="details.css">
     <script type="module" src="main.js" defer></script>
 </head>
 <body>