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

Fix add page design

Browse Source
This commit is contained in:
Elias Schriefer 2024-07-07 19:47:56 +02:00
parent ae20623aa3
commit 1888b91afe
2 changed files with 58 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/main/resources/static/add.css
View File

@ -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)
}

40
src/main/resources/static/add.html
View File

@ -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>