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

minor changes

Browse Source
This commit is contained in:
J-Klinke
2024-06-18 15:09:40 +02:00
parent 2f96de274b
commit 3e131c49ae
2 changed files with 32 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/main/resources/static/main.css
View File

@@ -4,7 +4,7 @@
--text-color: #dbdbdb; --text-color: #dbdbdb;
--pad-datasets: 1rem; --pad-datasets: 1rem;
--pad-main: 2rem; --pad-main: 2rem;
--min-card-size: 60ch; --min-card-size: min(60ch, 33vw);
--corner-radius: 1rem; --corner-radius: 1rem;
font-size: 12pt; font-size: 12pt;
font-family: sans-serif; font-family: sans-serif;
@@ -49,6 +49,9 @@ header {
gap: .5rem; gap: .5rem;
background-color: var(--fg-color, darkgrey); background-color: var(--fg-color, darkgrey);
padding: .5rem 1rem; padding: .5rem 1rem;
margin-bottom: var(--pad-datasets);
margin-left: var(--pad-datasets);
margin-right: var(--pad-datasets);
border-radius: 1.5rem; border-radius: 1.5rem;
} }
@@ -69,14 +72,14 @@ header {
gap: 1rem; gap: 1rem;
} }
@container (width < 80ch) { @container (width < 60ch) {
.datasets { .datasets {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
.dataset { .dataset {
padding: 1rem 2rem; padding: var(--pad-datasets) 2rem;
background-color: var(--fg-color, darkgrey); background-color: var(--fg-color, darkgrey);
border-radius: var(--corner-radius); border-radius: var(--corner-radius);
list-style: none; list-style: none;
@@ -136,10 +139,18 @@ header {
background-color: var(--bg-color); background-color: var(--bg-color);
} }
:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):is(:hover, :focus-visible) { #add-btn:is(:hover, :focus-visible) {
filter: brightness(1.2);
}
#add-btn:active {
filter: brightness(1.3);
}
.btn:is(:hover, :focus-visible) {
filter: brightness(1.5); filter: brightness(1.5);
} }
:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):active { .btn:active {
filter: brightness(1.75); filter: brightness(1.75);
} }

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

@@ -7,7 +7,7 @@
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
</head> </head>
<body> <body>
<div onclick="console.log('add')" id="add-btn"></div> <div onclick="console.log('add')" id="add-btn" title="Add a new API entry"></div>
<main> <main>
<header> <header>
<h1>Welcome to DataDash</h1> <h1>Welcome to DataDash</h1>
@@ -15,12 +15,12 @@
</header> </header>
<section id="tool-bar"> <section id="tool-bar">
<select id="sort-btn">Sort by <select id="sort-btn" title="Sort entries">Sort by
<option>Option 1</option> <option>Option 1</option>
<option>Option 2</option> <option>Option 2</option>
</select> </select>
<div class="divider"></div> <div class="divider"></div>
<select id="filter-btn">Filter <select class="btn" id="filter-btn" title="Filter entries">Filter
<optgroup label="Standard categories"> <optgroup label="Standard categories">
<option>Option 1</option> <option>Option 1</option>
<option>Option 2</option> <option>Option 2</option>
@@ -30,7 +30,7 @@
</optgroup> </optgroup>
</select> </select>
<input type="search" name="query" id="search-entry" placeholder="Search"> <input type="search" name="query" id="search-entry" placeholder="Search">
<button id="search-btn">Search</button> <button class="btn" id="search-btn" title="Search entries">Search</button>
</section> </section>
<section id="recents"> <section id="recents">
@@ -46,9 +46,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn">Upvote</button> <button class="upvote-btn btn">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn">Downvote</button> <button class="downvote-btn btn">Downvote</button>
</aside> </aside>
</li> </li>
<li class="dataset"> <li class="dataset">
@@ -60,9 +60,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn">Upvote</button> <button class="upvote-btn btn">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn">Downvote</button> <button class="downvote-btn btn">Downvote</button>
</aside> </aside>
</li> </li>
<li class="dataset"> <li class="dataset">
@@ -74,9 +74,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn">Upvote</button> <button class="upvote-btn btn">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn">Downvote</button> <button class="downvote-btn btn">Downvote</button>
</aside> </aside>
</li> </li>
<li class="dataset"> <li class="dataset">
@@ -88,9 +88,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn">Upvote</button> <button class="upvote-btn btn">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn">Downvote</button> <button class="downvote-btn btn">Downvote</button>
</aside> </aside>
</li> </li>
<li class="dataset"> <li class="dataset">
@@ -102,9 +102,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn">Upvote</button> <button class="upvote-btn btn">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn">Downvote</button> <button class="downvote-btn btn">Downvote</button>
</aside> </aside>
</li> </li>
</ul> </ul>
@@ -121,9 +121,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn">Upvote</button> <button class="upvote-btn btn">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn">Downvote</button> <button class="downvote-btn btn">Downvote</button>
</aside> </aside>
</li> </li>
</ul> </ul>