Merge branch 'frontend-addbutton' into 'frontend-searchbar'
finished basic implementation of frontend features toolbar/searchbar & addbutton See merge request padas/24ss-5430-web-and-data-eng/gruppe-3/datadash!10
This commit is contained in:
Julian Klinke
commit
968bb733a5
105
src/main/resources/static/add-button-mask.svg
Normal file
105
src/main/resources/static/add-button-mask.svg
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="1.70667in" height="1.70667in"
|
||||||
|
viewBox="0 0 512 512">
|
||||||
|
<path id="Selection"
|
||||||
|
fill="#222" stroke="#222" stroke-width="1"
|
||||||
|
d="M 343.00,167.00
|
||||||
|
C 343.00,167.00 459.00,51.00 459.00,51.00
|
||||||
|
459.00,51.00 493.00,17.00 493.00,17.00
|
||||||
|
498.17,11.83 505.67,2.99 512.00,0.00
|
||||||
|
512.00,0.00 512.00,512.00 512.00,512.00
|
||||||
|
512.00,512.00 0.00,512.00 0.00,512.00
|
||||||
|
0.00,512.00 23.83,487.00 23.83,487.00
|
||||||
|
23.83,487.00 58.00,452.00 58.00,452.00
|
||||||
|
58.00,452.00 107.00,403.00 107.00,403.00
|
||||||
|
107.00,403.00 136.00,374.00 136.00,374.00
|
||||||
|
137.97,372.03 145.89,364.80 146.29,362.58
|
||||||
|
146.69,360.29 142.68,354.93 141.35,353.00
|
||||||
|
141.35,353.00 125.66,330.00 125.66,330.00
|
||||||
|
125.66,330.00 80.32,263.00 80.32,263.00
|
||||||
|
80.32,263.00 69.89,247.83 69.89,247.83
|
||||||
|
68.45,245.69 65.56,242.71 65.91,240.00
|
||||||
|
66.25,237.36 70.15,233.86 72.00,232.00
|
||||||
|
72.00,232.00 92.00,212.42 92.00,212.42
|
||||||
|
96.05,209.82 99.54,213.00 103.00,215.28
|
||||||
|
103.00,215.28 127.00,231.61 127.00,231.61
|
||||||
|
127.00,231.61 144.00,242.96 144.00,242.96
|
||||||
|
144.00,242.96 194.00,277.00 194.00,277.00
|
||||||
|
194.00,277.00 210.00,287.95 210.00,287.95
|
||||||
|
211.56,289.01 214.71,291.60 216.58,291.58
|
||||||
|
219.48,291.55 227.66,282.34 230.00,280.00
|
||||||
|
230.00,280.00 210.00,261.00 210.00,261.00
|
||||||
|
210.00,261.00 178.00,229.00 178.00,229.00
|
||||||
|
178.00,229.00 146.00,197.00 146.00,197.00
|
||||||
|
146.00,197.00 127.00,177.00 127.00,177.00
|
||||||
|
143.52,160.48 160.02,138.08 186.00,139.36
|
||||||
|
201.99,140.15 214.55,147.35 227.00,156.83
|
||||||
|
246.44,171.64 266.00,194.88 269.19,220.00
|
||||||
|
270.40,229.48 267.55,235.32 266.00,244.00
|
||||||
|
266.00,244.00 307.00,203.00 307.00,203.00
|
||||||
|
307.00,203.00 287.00,184.00 287.00,184.00
|
||||||
|
287.00,184.00 255.00,152.00 255.00,152.00
|
||||||
|
255.00,152.00 223.00,120.00 223.00,120.00
|
||||||
|
223.00,120.00 204.00,100.00 204.00,100.00
|
||||||
|
219.55,84.45 234.07,64.73 257.58,62.38
|
||||||
|
275.04,60.64 290.72,69.69 304.00,79.83
|
||||||
|
324.38,95.39 345.96,120.97 346.68,148.00
|
||||||
|
346.85,154.54 344.43,160.73 343.00,167.00 Z
|
||||||
|
M 315.00,164.00
|
||||||
|
C 316.37,161.28 318.16,158.01 318.65,155.00
|
||||||
|
320.22,145.40 311.79,134.05 306.22,127.00
|
||||||
|
297.46,115.92 292.28,110.47 281.00,101.83
|
||||||
|
268.92,92.58 259.85,85.59 245.00,94.00
|
||||||
|
247.97,100.29 255.94,106.94 261.00,112.00
|
||||||
|
261.00,112.00 294.00,145.00 294.00,145.00
|
||||||
|
299.40,150.40 308.55,160.95 315.00,164.00 Z
|
||||||
|
M 237.00,242.00
|
||||||
|
C 239.18,238.69 241.42,235.05 241.78,231.00
|
||||||
|
242.25,225.48 239.16,219.09 236.49,214.42
|
||||||
|
230.27,203.54 220.92,194.72 212.00,186.01
|
||||||
|
208.24,182.34 204.16,178.87 200.01,175.64
|
||||||
|
190.44,168.17 176.54,162.65 167.00,173.00
|
||||||
|
167.00,173.00 212.00,218.00 212.00,218.00
|
||||||
|
212.00,218.00 237.00,242.00 237.00,242.00 Z
|
||||||
|
M 343.00,167.00
|
||||||
|
C 343.00,167.00 342.00,167.00 342.00,167.00
|
||||||
|
342.00,167.00 343.00,168.00 343.00,168.00
|
||||||
|
343.00,168.00 343.00,167.00 343.00,167.00 Z
|
||||||
|
M 266.00,244.00
|
||||||
|
C 266.00,244.00 265.00,244.00 265.00,244.00
|
||||||
|
265.00,244.00 266.00,245.00 266.00,245.00
|
||||||
|
266.00,245.00 266.00,244.00 266.00,244.00 Z
|
||||||
|
M 100.00,245.00
|
||||||
|
C 100.00,245.00 99.00,245.00 99.00,245.00
|
||||||
|
99.00,245.00 100.00,246.00 100.00,246.00
|
||||||
|
100.00,246.00 100.00,245.00 100.00,245.00 Z
|
||||||
|
M 265.00,245.00
|
||||||
|
C 265.00,245.00 264.00,245.00 264.00,245.00
|
||||||
|
264.00,245.00 265.00,246.00 265.00,246.00
|
||||||
|
265.00,246.00 265.00,245.00 265.00,245.00 Z
|
||||||
|
M 101.00,246.00
|
||||||
|
C 101.00,246.00 100.00,246.00 100.00,246.00
|
||||||
|
100.00,246.00 101.00,247.00 101.00,247.00
|
||||||
|
101.00,247.00 101.00,246.00 101.00,246.00 Z
|
||||||
|
M 102.00,247.00
|
||||||
|
C 102.00,247.00 101.00,247.00 101.00,247.00
|
||||||
|
101.00,247.00 102.00,248.00 102.00,248.00
|
||||||
|
102.00,248.00 102.00,247.00 102.00,247.00 Z
|
||||||
|
M 146.00,278.00
|
||||||
|
C 146.00,278.00 122.00,261.20 122.00,261.20
|
||||||
|
117.33,257.51 107.29,249.51 102.00,248.00
|
||||||
|
102.00,248.00 122.98,278.00 122.98,278.00
|
||||||
|
124.77,280.69 130.15,288.87 133.09,289.66
|
||||||
|
137.56,290.87 144.36,281.48 146.00,278.00 Z
|
||||||
|
M 167.00,293.00
|
||||||
|
C 167.00,293.00 154.01,305.00 154.01,305.00
|
||||||
|
154.01,305.00 149.32,312.00 149.32,312.00
|
||||||
|
149.32,312.00 154.21,321.00 154.21,321.00
|
||||||
|
154.21,321.00 168.00,341.00 168.00,341.00
|
||||||
|
174.28,338.03 183.78,327.33 189.00,322.00
|
||||||
|
190.79,320.17 194.48,317.02 193.66,314.13
|
||||||
|
193.08,312.05 188.76,309.50 187.00,308.16
|
||||||
|
187.00,308.16 167.00,293.00 167.00,293.00 Z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.1 KiB |
@ -29,12 +29,19 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#add-btn {
|
#add-btn {
|
||||||
|
width: 7rem;
|
||||||
|
height: 7rem;
|
||||||
|
content: url("add-button-mask.svg");
|
||||||
|
background: linear-gradient(135deg, pink, darkblue);
|
||||||
|
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tool-bar {
|
#tool-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -50,6 +57,7 @@ header {
|
|||||||
border: none;
|
border: none;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-entry:focus-visible {
|
#search-entry:focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
@ -124,13 +132,14 @@ header {
|
|||||||
|
|
||||||
.divider {
|
.divider {
|
||||||
width: .05rem;
|
width: .05rem;
|
||||||
background-color: #222;
|
height: 1rem;
|
||||||
|
background-color: var(--bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn):is(:hover, :focus-visible) {
|
:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):is(:hover, :focus-visible) {
|
||||||
filter: brightness(1.5);
|
filter: brightness(1.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn):active {
|
:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):active {
|
||||||
filter: brightness(1.75);
|
filter: brightness(1.75);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,10 +7,7 @@
|
|||||||
<link rel="stylesheet" href="main.css">
|
<link rel="stylesheet" href="main.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<svg id="add-btn" width="100" height="100">
|
<div onclick="console.log('add')" id="add-btn"></div>
|
||||||
<polygon onclick="console.log('ahhhh')" points="0, 0, 0, 100, 100, 0" fill="yellow" />
|
|
||||||
<text x="25" y="25" >+</text>
|
|
||||||
</svg>
|
|
||||||
<main>
|
<main>
|
||||||
<header>
|
<header>
|
||||||
<h1>Welcome to DataDash</h1>
|
<h1>Welcome to DataDash</h1>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user