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

implemented sort-by,

Browse Source 
implemented divider,
fixed class/id in css
This commit is contained in:
J-Klinke
2024-06-17 15:42:20 +02:00
parent 5a682e1800
commit b721973d05
3 changed files with 93 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -87,7 +87,7 @@ header {
gap: .5em;
}
/* Buttons */
.upvote-btn, .downvote-btn, .search-btn, .filter-btn {
.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn {
background: var(--icon-url) no-repeat;
background-size: contain;
border: none;
@@ -108,19 +108,29 @@ header {
transform: rotate(180deg);
}
.search-btn {
#search-btn {
--icon-url: url(looking-glass.svg);
--icon-size: 1rem;
}
.filter-btn{
#filter-btn {
--icon-url: url(filter.svg);
--icon-size: 1rem;
}
:is(.upvote-btn, .downvote-btn, .search-btn, .filter-btn):is(:hover, :focus-visible) {
#sort-btn {
--icon-url: url(sort.svg);
--icon-size: 1rem;
}
.divider {
width: .05rem;
background-color: #222;
}
:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn):is(:hover, :focus-visible) {
filter: brightness(1.5);
}
:is(.upvote-btn, .downvote-btn, .search-btn, .filter-btn):active {
:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn):active {
filter: brightness(1.75);
}

61
src/main/resources/static/sort.svg Normal file
View File

@@ -0,0 +1,61 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="1.2in" height="1.05333in"
viewBox="0 0 360 316">
<path id="Selection"
fill="#222" stroke="#222" stroke-width="1"
d="M 64.00,85.00
C 64.00,85.00 43.62,121.00 43.62,121.00
40.24,127.21 33.18,140.58 27.99,144.58
16.02,153.82 -0.96,144.07 0.10,129.00
0.58,122.10 5.78,114.81 9.25,109.00
9.25,109.00 17.50,94.00 17.50,94.00
17.50,94.00 27.91,76.00 27.91,76.00
27.91,76.00 34.83,65.00 34.83,65.00
34.83,65.00 62.26,17.00 62.26,17.00
67.57,7.75 71.45,-0.78 84.00,0.10
94.23,0.81 97.72,8.22 102.17,16.00
102.17,16.00 108.62,27.00 108.62,27.00
108.62,27.00 125.76,57.00 125.76,57.00
125.76,57.00 130.48,64.00 130.48,64.00
130.48,64.00 150.17,99.00 150.17,99.00
155.14,107.71 165.61,121.95 164.90,132.00
164.00,144.90 148.83,152.55 138.00,145.30
131.19,140.74 124.40,125.60 119.70,118.00
119.70,118.00 100.00,84.00 100.00,84.00
100.00,84.00 100.00,263.00 100.00,263.00
100.00,263.00 100.00,289.00 100.00,289.00
100.00,293.06 100.34,300.37 99.20,304.00
96.71,311.96 89.10,316.47 81.00,315.90
68.82,315.05 65.02,305.63 65.00,295.00
65.00,295.00 65.00,152.00 65.00,152.00
65.00,152.00 65.00,108.00 65.00,108.00
65.00,101.39 65.72,91.06 64.00,85.00 Z
M 260.00,232.00
C 260.00,232.00 260.00,53.00 260.00,53.00
260.00,53.00 260.00,27.00 260.00,27.00
260.00,22.94 259.66,15.63 260.80,12.00
263.29,4.04 270.90,-0.47 279.00,0.10
291.18,0.95 294.98,10.37 295.00,21.00
295.00,21.00 295.00,164.00 295.00,164.00
295.00,164.00 295.00,208.00 295.00,208.00
295.00,214.61 294.28,224.94 296.00,231.00
296.00,231.00 316.38,195.00 316.38,195.00
319.76,188.79 326.82,175.42 332.01,171.42
343.98,162.18 360.96,171.93 359.90,187.00
359.42,193.90 354.22,201.19 350.75,207.00
350.75,207.00 342.50,222.00 342.50,222.00
342.50,222.00 332.09,240.00 332.09,240.00
332.09,240.00 325.17,251.00 325.17,251.00
325.17,251.00 297.74,299.00 297.74,299.00
292.43,308.25 288.55,316.78 276.00,315.90
265.77,315.19 262.28,307.78 257.83,300.00
257.83,300.00 251.38,289.00 251.38,289.00
251.38,289.00 234.24,259.00 234.24,259.00
234.24,259.00 229.52,252.00 229.52,252.00
229.52,252.00 209.83,217.00 209.83,217.00
204.86,208.29 194.39,194.05 195.10,184.00
196.00,171.10 211.17,163.45 222.00,170.70
228.81,175.26 235.60,190.40 240.30,198.00
240.30,198.00 260.00,232.00 260.00,232.00 Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

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

@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataDash</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="../static/main.css">
</head>
<body>
<svg id="add-btn" width="100" height="100">
@@ -18,17 +18,22 @@
</header>
<section id="tool-bar">
<select class="filter-btn">Filter
<optgroup label="Standard categories">
<option>Option 1</option>
<option>Option 2</option>
</optgroup>
<optgroup label="User categories">
<option>user category</option>
</optgroup>
</select>
<input type="search" name="query" id="search-entry" placeholder="Search">
<button class="search-btn">Search</button>
<select id="sort-btn">Sort by
<option>Option 1</option>
<option>Option 2</option>
</select>
<div class="divider"></div>
<select id="filter-btn">Filter
<optgroup label="Standard categories">
<option>Option 1</option>
<option>Option 2</option>
</optgroup>
<optgroup label="User categories">
<option>user category</option>
</optgroup>
</select>
<input type="search" name="query" id="search-entry" placeholder="Search">
<button id="search-btn">Search</button>
</section>
<section id="recents">