Skip to content

Commit 98b3c6b

Browse files
KoberSaschaKoberSascha
committed
[FIX] - Desing Issues
1 parent 968bdb2 commit 98b3c6b

3 files changed

Lines changed: 169 additions & 96 deletions

File tree

‎herkunftcheck/index.html‎

Lines changed: 67 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -62,40 +62,64 @@
6262

6363

6464
function showSidebarWithStep(step) {
65-
document.getElementById('sidebar').style.display = 'block';
66-
document.getElementById('step-name').textContent = step.name || "-";
67-
document.getElementById('step-location').textContent = step.address?.name || "-";
68-
document.getElementById('step-street').textContent = step.address?.street || "-";
69-
document.getElementById('step-zipcity').textContent = `${step.address?.zip || ""} ${step.address?.city || ""}`;
70-
document.getElementById('step-country').textContent = step.address?.country || "-";
71-
72-
const entriesContainer = document.getElementById("step-entries");
73-
entriesContainer.innerHTML = "";
74-
75-
if (Array.isArray(step.stepEntries) && step.stepEntries.length > 0) {
76-
step.stepEntries.forEach(entry => {
77-
const entryHtml = `
78-
<div class="step-entry">
79-
<p><span class="entry-label">Datum:</span> ${entry.date ? new Date(entry.date).toLocaleDateString("de-DE") : "-"}</p>
80-
<p><span class="entry-label">Beschreibung:</span> ${entry.description || "-"}</p>
81-
<p><span class="entry-label">Menge:</span> ${entry.amount && entry.amountUnit ? `${entry.amount} ${entry.amountUnit}` : "-"}</p>
82-
<p><span class="entry-label">Energieverbrauch:</span> ${entry.energyConsumption || "-"}</p>
83-
<p><span class="entry-label">CO₂-Ausstoß:</span> ${entry.co2Emission || "-"}</p>
84-
</div>
85-
`;
86-
entriesContainer.insertAdjacentHTML("beforeend", entryHtml);
87-
});
88-
} else {
89-
entriesContainer.innerHTML = "<p>Keine Einträge vorhanden.</p>";
90-
}
91-
92-
if (step.imageSrc && step.imageSrc !== "string") {
93-
const imageDiv = document.getElementById("top-image");
94-
if (imageDiv) {
95-
imageDiv.style.backgroundImage = `url('${step.imageSrc}')`;
96-
}
97-
}
65+
document.getElementById('sidebar').style.display = 'block';
66+
document.getElementById('step-name').textContent = step.name || "-";
67+
document.getElementById('step-location').textContent = step.address?.name || "-";
68+
document.getElementById('step-street').textContent = step.address?.street || "-";
69+
document.getElementById('step-zipcity').textContent = `${step.address?.zip || ""} ${step.address?.city || ""}`;
70+
document.getElementById('step-country').textContent = step.address?.country || "-";
71+
72+
const entriesContainer = document.getElementById("step-entries");
73+
entriesContainer.innerHTML = "";
74+
75+
if (Array.isArray(step.stepEntries) && step.stepEntries.length > 0) {
76+
step.stepEntries.forEach((entry, index) => {
77+
78+
const entryHtml = `
79+
<details>
80+
<summary>Eintrag ${index + 1}</summary>
81+
82+
<div class="sidebar-row sidebar-row-spaced">
83+
<span class="label">Datum</span>
84+
<span class="value">${entry.date ? new Date(entry.date).toLocaleDateString("de-DE") : "-"}</span>
85+
</div>
86+
87+
<div class="sidebar-row sidebar-row-spaced">
88+
<span class="label">Beschreibung</span>
89+
<span class="value">${entry.description || "-"}</span>
90+
</div>
91+
92+
<div class="sidebar-row sidebar-row-spaced">
93+
<span class="label">Menge</span>
94+
<span class="value">${entry.amount && entry.amountUnit ? `${entry.amount} ${entry.amountUnit}` : "-"}</span>
95+
</div>
96+
97+
<div class="sidebar-row sidebar-row-spaced">
98+
<span class="label">Energieverbrauch</span>
99+
<span class="value">${entry.energyConsumption || "-"}</span>
100+
</div>
101+
102+
<div class="sidebar-row sidebar-row-spaced">
103+
<span class="label">CO₂-Ausstoß</span>
104+
<span class="value">${entry.co2Emission || "-"}</span>
105+
</div>
106+
107+
</details>
108+
`;
109+
110+
entriesContainer.insertAdjacentHTML("beforeend", entryHtml);
111+
});
112+
} else {
113+
entriesContainer.innerHTML = "<p>Keine Einträge vorhanden.</p>";
114+
}
115+
116+
if (step.imageSrc && step.imageSrc !== "string") {
117+
const imageDiv = document.getElementById("top-image");
118+
if (imageDiv) {
119+
imageDiv.style.backgroundImage = `url('${step.imageSrc}')`;
98120
}
121+
}
122+
}
99123

100124
// Event Listener zum Schließen der Seitenleiste
101125
window.addEventListener("DOMContentLoaded", () => {
@@ -127,8 +151,9 @@ <h1 id="product-name">Laden...</h2>
127151

128152

129153
<div id="sidebar" class="modern-sidebar">
130-
154+
131155
<div class="card-hover">
156+
<div id="top-image" class="top-image" style="background-image: url('img/example.jpg');"></div>
132157
<button id="sidebar-close" title="Schließen">&#8592;</button>
133158
<div class="card-hover__content">
134159
<h3 class="card-hover__title" id="step-name">
@@ -141,19 +166,19 @@ <h4 class="card-hover__title-2" id="">
141166
</h4>
142167
<div class="info-panel-data">
143168
<div class="sidebar-content card-hover__text">
144-
<div class="sidebar-row">
169+
<div class="sidebar-row sidebar-row-undelined">
145170
<span class="label">Ort:</span>
146171
<span class="value" id="step-location"></span>
147172
</div>
148-
<div class="sidebar-row">
173+
<div class="sidebar-row sidebar-row-undelined">
149174
<span class="label">Straße:</span>
150175
<span class="value" id="step-street"></span>
151176
</div>
152-
<div class="sidebar-row">
177+
<div class="sidebar-row sidebar-row-undelined">
153178
<span class="label">PLZ & Stadt:</span>
154179
<span class="value" id="step-zipcity"></span>
155180
</div>
156-
<div class="sidebar-row">
181+
<div class="sidebar-row sidebar-row-undelined">
157182
<span class="label">Land:</span>
158183
<span class="value" id="step-country"></span>
159184
</div>
@@ -164,48 +189,16 @@ <h4 class="card-hover__title-2" id="">
164189
Einträge
165190
</h4>
166191

167-
<div id="step-entries" class="step-entries">
168-
169-
170-
171-
172-
</div>
192+
<section id="step-entries" class="step-entries"></section>
173193
</div>
174-
</div>
175-
</div>
176-
177-
178-
179-
180-
181-
182-
183-
184-
<div id="top-image" class="top-image" style="background-image: url('img/example.jpg');">
185-
194+
195+
</div>
186196
</div>
187-
188-
189-
190-
191-
192-
193-
194-
</div>
195-
196-
</div>
197+
</div>
197198
</div>
198199

199200

200201

201-
202-
</div>
203-
204-
205-
206-
207-
208202
<div id="map"></div>
209203
</body>
210-
211204
</html>

‎herkunftcheck/style/sidebar.css‎

Lines changed: 99 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,17 @@
33
right: 0;
44
top: 0;
55
width: 25%;
6-
max-width: 350px;
6+
max-width: 450px;
77
height: 100%;
88
background-color: #f9fafb;
99
box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
10-
1110
display: none;
1211
z-index: 1000;
13-
1412
backdrop-filter: blur(8px);
1513
border-left: 1px solid #e0e0e0;
1614
border-top-left-radius: 16px;
1715
border-bottom-left-radius: 16px;
18-
16+
1917
}
2018

2119
#sidebar-close {
@@ -105,11 +103,23 @@
105103
.sidebar-row {
106104
display: flex;
107105
justify-content: space-between;
108-
border-bottom: 1px solid #eee;
106+
109107
padding-bottom: 4px;
110108
font-size: 17px;
111109
}
112110

111+
112+
.sidebar-row-undelined{
113+
border-bottom: 1px solid #000;
114+
}
115+
116+
.sidebar-row-spaced{
117+
margin-top:5px;
118+
margin-bottom:5px;
119+
}
120+
121+
122+
113123
.la2bel {
114124
font-weight: 600;
115125
color: #555;
@@ -129,16 +139,9 @@
129139
}
130140

131141

132-
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;600&display=swap');
133142

134-
html {
135-
box-sizing: border-box;
136-
font-size: 100%;
137-
}
138143

139-
html, body {
140-
height: 100%;
141-
}
144+
142145

143146
*, *:before, *:after {
144147
box-sizing: inherit;
@@ -177,10 +180,10 @@ h1, h2, h3, h4, h5 {
177180

178181
.card-hover {
179182
width: 100%;
180-
height: 100%;
183+
height: 100vh;
181184
position: relative;
182-
overflow: hidden;
183185
box-shadow: 0 0 32px -10px rgba(0,0,0,0.08);
186+
overflow: auto;
184187
}
185188

186189
.card-hovere:hover .card-hover__content {
@@ -221,13 +224,12 @@ h1, h2, h3, h4, h5 {
221224
.card-hover__content-2 {
222225
margin-top:100px;
223226
padding: 0 20px 50px;
224-
height: 100%;
227+
min-height: calc(100% - 138px);
225228
background: #86b974;
226229
}
227230

228231

229-
.card-hover__content-2::before,
230-
.card-hover__content-2::after {
232+
.card-hover__content-2::before {
231233
content: '';
232234
width: 100%;
233235
height: 120px;
@@ -244,8 +246,7 @@ h1, h2, h3, h4, h5 {
244246

245247

246248

247-
.card-hover__content::before,
248-
.card-hover__content::after {
249+
.card-hover__content::before {
249250
content: '';
250251
width: 100%;
251252
height: 120px;
@@ -345,4 +346,81 @@ h1, h2, h3, h4, h5 {
345346
transform: scale(1.2);
346347
transition: 0.35s 0.35s transform cubic-bezier(.1,.72,.4,.97);
347348
}
348-
*/
349+
*/
350+
351+
352+
353+
html,
354+
.root {
355+
padding: 0;
356+
margin: 0;
357+
font-size: 18px;
358+
}
359+
360+
body {
361+
font: menu;
362+
font-size: 1rem;
363+
line-height: 1.4;
364+
padding: 0;
365+
margin: 0;
366+
}
367+
section {
368+
padding-top: 0rem;
369+
width: 100%;
370+
margin: auto;
371+
}
372+
h1 {
373+
font-size: 2rem;
374+
font-weight: 500;
375+
}
376+
details[open] summary ~ * {
377+
animation: open 0.3s ease-in-out;
378+
}
379+
380+
@keyframes open {
381+
0% {
382+
opacity: 0;
383+
}
384+
100% {
385+
opacity: 1;
386+
}
387+
}
388+
details summary::-webkit-details-marker {
389+
display: none;
390+
}
391+
392+
details summary {
393+
width: 100%;
394+
padding: 0.5rem 0;
395+
border-top: 1px solid black;
396+
position: relative;
397+
cursor: pointer;
398+
font-size: 1.25rem;
399+
font-weight: 300;
400+
list-style: none;
401+
}
402+
403+
details summary:after {
404+
content: "+";
405+
color: black;
406+
position: absolute;
407+
font-size: 1.75rem;
408+
line-height: 0;
409+
margin-top: 0.75rem;
410+
right: 0;
411+
font-weight: 200;
412+
transform-origin: center;
413+
transition: 200ms linear;
414+
}
415+
details[open] summary:after {
416+
transform: rotate(45deg);
417+
font-size: 2rem;
418+
}
419+
details summary {
420+
outline: 0;
421+
}
422+
details p {
423+
font-size: 0.95rem;
424+
margin: 0 0 1rem;
425+
padding-top: 1rem;
426+
}

‎herkunftcheck/style/style.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,6 @@ html {
1212

1313
h1,h2,h3,h4{
1414
font-family: "Boldonse", system-ui;
15-
}
15+
}
16+
17+

0 commit comments

Comments
 (0)