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

Merge branch '18-fix-button-styling-on-add-page' into 'main'

Browse Source 
Resolve "Fix button styling on 'add' page"

Closes #18

See merge request padas/24ss-5430-web-and-data-eng/gruppe-3/datadash!13
This commit is contained in:
Elias Schriefer 2024-06-18 15:41:36 +02:00
commit 49f7c92178
3 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,6 +66,7 @@ label:has(#is-dataset) {
box-sizing: border-box; box-sizing: border-box;
background-color: var(--text-color); background-color: var(--text-color);
transition: inset-inline ease-out 50ms; transition: inset-inline ease-out 50ms;
filter: drop-shadow(rgba(0, 0, 0, .8) 0 0 .25rem);
} }
#is-dataset:not(:checked) + #is-dataset-toggle::before { #is-dataset:not(:checked) + #is-dataset-toggle::before {

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

@ -147,10 +147,14 @@ header {
filter: brightness(1.3); filter: brightness(1.3);
} }
.btn:is(:hover, :focus-visible) { .btn.flat {
transition: filter ease-out 50ms;
}
.btn.flat:is(:hover, :focus-visible) {
filter: brightness(1.5); filter: brightness(1.5);
} }
.btn:active { .btn.flat:active {
filter: brightness(1.75); filter: brightness(1.75);
} }

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

@ -15,12 +15,12 @@
</header> </header>
<section id="tool-bar"> <section id="tool-bar">
<select id="sort-btn" title="Sort entries">Sort by <select id="sort-btn" class="btn flat" 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 class="btn" id="filter-btn" title="Filter entries">Filter <select class="btn flat" 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 class="btn" id="search-btn" title="Search entries">Search</button> <button class="btn flat" 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 btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">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 btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">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 btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">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 btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">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 btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">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 btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">Downvote</button>
</aside> </aside>
</li> </li>
</ul> </ul>