From 1888b91afeb309103e7078ccaf020dc26a3e7291 Mon Sep 17 00:00:00 2001
From: Elias Schriefer <schriefer@fim.uni-passau.de>
Date: Sun, 7 Jul 2024 19:47:56 +0200
Subject: [PATCH] Fix add page design

---
 src/main/resources/static/add.css  | 47 +++++++++++++++++++++++-------
 src/main/resources/static/add.html | 40 +++++++++++++------------
 2 files changed, 58 insertions(+), 29 deletions(-)

diff --git a/src/main/resources/static/add.css b/src/main/resources/static/add.css
index 979d061..ffdc542 100644
--- a/src/main/resources/static/add.css
+++ b/src/main/resources/static/add.css
@@ -1,9 +1,18 @@
 @import url("main.css");
 
+main {
+    padding: var(--pad-main);
+    padding-top: 0;
+}
+
 form {
     display: grid;
-    grid-template-columns: 1fr 1fr auto;
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
     gap: 1rem 2rem;
+
+    @container (width >= 50rem) {
+        grid-template-columns: 1fr 1fr auto;
+    }
 }
 
 form > * {
@@ -25,6 +34,8 @@ form :is(input[type=text], input[type=url], textarea) {
     padding: .5em;
     font-family: sans-serif;
     flex-grow: 1;
+    width: 100%;
+    min-width: 5rem;
 }
 
 /* focus outlines */
@@ -73,6 +84,8 @@ label:has(#is-dataset) {
     background-color: var(--fg-color);
     border-radius: .5lh;
     position: relative;
+    display: inline-block;
+    vertical-align: bottom;
 }
 
 #is-dataset-toggle::before {
@@ -91,6 +104,14 @@ label:has(#is-dataset) {
     filter: drop-shadow(rgba(0, 0, 0, .8) 0 0 .25rem);
 }
 
+#is-dataset-toggle-container {
+    justify-content: center;
+
+    label::after {
+        content: none;
+    }
+}
+
 #is-dataset:focus-visible + #is-dataset-toggle {
     outline: 2px solid var(--accent-color);
 }
@@ -103,20 +124,17 @@ label:has(#is-dataset) {
     inset-inline: calc(2rem - .5lh - var(--switch-gap)) 0;
 }
 
-/* short description box */
-form :has(#short-description) {
-    grid-column: 1 / 2;
-}
-
 form :has(#url) {
-    grid-column: 2 / 4;
+    @container (width >= 50rem) {
+        grid-column: span 2;
+    }
 }
 
 /* full description box */
 #full-description-box {
-    grid-column: 1 / 4;
-    margin: 1rem 0;
+    grid-column: 1 / -1;
     align-items: start;
+    flex-direction: column;
 }
 
 #full-description {
@@ -126,7 +144,7 @@ form :has(#url) {
 
 /* button bar */
 #btn-bar {
-    grid-column: 1 / 4;
+    grid-column: -2 / -1;
     justify-content: end;
     gap: 1rem ;
 }
@@ -172,6 +190,11 @@ form :has(#url) {
     filter: var(--drop-shadow) grayscale(.5) brightness(.5);
 }
 
+.btn.full-width {
+    width: -moz-available;
+    width: -webkit-fill-available;
+}
+
 #category[value="new"] {
     display: none;
 }
@@ -184,6 +207,7 @@ label[for="category"] {
 
 span:has(#category) {
     gap: unset;
+    justify-content: center;
 }
 
 #new-category-group:not(.hidden) {
@@ -197,4 +221,7 @@ span:has(#category) {
     background-image: url("./sort.svg");
     background-size: contain;
     background-origin: content-box;
+    background-repeat: no-repeat;
+    min-width: 2rem;
+    padding: var(--gap-small)
 }
diff --git a/src/main/resources/static/add.html b/src/main/resources/static/add.html
index 3c9f9c8..65378d1 100644
--- a/src/main/resources/static/add.html
+++ b/src/main/resources/static/add.html
@@ -13,7 +13,7 @@
             <h1>Add new DataDash content</h1>
         </header>
 
-        <section>
+        <section id="add-content-section">
             <p>
                 Please add the following information about your dataset/API to
                 help users better find it and understand what it is about and
@@ -23,62 +23,64 @@
             <form>
                 <span>
                     <label for="title">Title</label>
-                    <input type="text" name="title" id="title" minlength="1" maxlength="50" required>
+                    <input type="text" name="title" id="title" size="3" minlength="1" maxlength="50" required>
                 </span>
 
                 <span id="author-box">
                     <label for="author">Author/provider</label>
-                    <input type="text" name="author" id="author" required>
+                    <input type="text" name="author" id="author" size="3" required>
                 </span>
 
-                <label>
-                    Dataset
-                    <input type="checkbox" name="is-dataset" id="is-dataset">
-                    <span id="is-dataset-toggle"></span>
-                    API
-                </label>
+                <span id="is-dataset-toggle-container">
+                    <label>
+                        Dataset
+                        <input type="checkbox" name="is-dataset" id="is-dataset">
+                        <span id="is-dataset-toggle"></span>
+                        API
+                    </label>
+                </span>
 
                 <span>
                     <label for="short-description">Short description</label>
-                    <input type="text" name="short-description" id="short-description" maxlength="100" required spellcheck="true">
+                    <input type="text" name="short-description" id="short-description" size="3" maxlength="100" required spellcheck="true">
                 </span>
 
                 <span>
                     <label for="url">URL</label>
-                    <input type="url" name="url" id="url" required>
+                    <input type="url" name="url" id="url" size="3" required>
                 </span>
 
                 <span>
                     <label for="terms-of-use">Terms of Use URL</label>
-                    <input type="url" name="terms-of-use" id="terms-of-use" required>
+                    <input type="url" name="terms-of-use" id="terms-of-use" size="3" required>
                 </span>
 
                 <span>
                     <label for="license">License</label>
-                    <input type="text" name="license" id="license" required>
+                    <input type="text" name="license" id="license" size="3" required>
                 </span>
 
                 <span>
                     <label for="category">Category</label>
-                    <select name="category" id="category" class="btn" required autocomplete="off">
+                    <select name="category" id="category" class="btn full-width" required autocomplete="off">
                         <option value="" selected disabled hidden>Category</option>
                         <option value="new">New category</option>
                         <hr>
                     </select>
                     <span id="new-category-group" class="hidden">
-                        <input type="text" id="new-category" size="2" required disabled autocomplete="off">
-                        <button id="change-category-btn" class="btn flat" title="change category"></button>
+                        <input type="text" id="new-category" size="3" required disabled autocomplete="off">
+                        <button id="change-category-btn" class="btn" title="change category"></button>
                     </span>
                 </span>
 
                 <span id="full-description-box">
                     <label for="full-description">Full description</label>
-                    <textarea name="full-description" id="full-description" spellcheck="true"></textarea>
+                    <textarea name="full-description" id="full-description" cols="3" spellcheck="true"></textarea>
                 </span>
 
                 <span id="btn-bar">
-                    <input type="submit" value="Add" id="btn-add" class="btn suggested" disabled>
-                    <input type="reset" value="Cancel" id="btn-cancel" class="btn">
+                    <input type="submit" value="Add" id="btn-add" class="btn suggested full-width" disabled>
+                    <input type="reset" value="Cancel" id="btn-cancel" class="btn full-width">
                 </span>
             </form>
         </section>