implemented sort-by,
implemented divider, fixed class/id in css
This commit is contained in:
J-Klinke
parent
5a682e1800
commit
b721973d05
@ -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
61
src/main/resources/static/sort.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user