Skip to content

Commit aaf521d

Browse files
jh-RLIjh-RLI
authored
Merge pull request #2029 from OpenEnergyPlatform/feature-1983-add-database-info
Add database info
2 parents ffbd322 + 6e57088 commit aaf521d

File tree

5 files changed

+481
-0
lines changed

5 files changed

+481
-0
lines changed

‎dataedit/static/database/css/database-enhancements.css‎

Lines changed: 379 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,379 @@
1+
/* Database UI Enhancements */
2+
3+
/* Info Banner Styles */
4+
.database-info-section {
5+
margin-bottom: 1.5rem;
6+
}
7+
8+
.info-banner {
9+
background: linear-gradient(135deg, #e5eff6 0%, #f6f9fb 100%);
10+
border: 1px solid #c1d9eb;
11+
border-radius: 0.75rem;
12+
overflow: hidden;
13+
box-shadow: 0 2px 8px rgba(41, 68, 86, 0.08);
14+
transition: all 0.3s ease;
15+
}
16+
17+
.info-banner:hover {
18+
box-shadow: 0 4px 16px rgba(41, 68, 86, 0.12);
19+
}
20+
21+
.info-banner--compact {
22+
background: linear-gradient(135deg, #f6f9fb 0%, #e3eaef 100%);
23+
}
24+
25+
.info-banner__content {
26+
padding: 0;
27+
}
28+
29+
.info-banner__header {
30+
display: flex;
31+
align-items: center;
32+
justify-content: space-between;
33+
padding: 1rem 1.5rem;
34+
background: rgba(255, 255, 255, 0.7);
35+
border-bottom: 1px solid rgba(193, 217, 235, 0.5);
36+
cursor: pointer;
37+
transition: background-color 0.2s ease;
38+
}
39+
40+
.info-banner__header:hover {
41+
background: rgba(255, 255, 255, 0.9);
42+
}
43+
44+
.info-banner__title {
45+
display: flex;
46+
align-items: center;
47+
font-weight: 600;
48+
font-size: 1rem;
49+
color: #1f567d;
50+
margin: 0;
51+
}
52+
53+
.info-banner__toggle {
54+
background: none;
55+
border: none;
56+
color: #2972a6;
57+
padding: 0.25rem;
58+
border-radius: 0.25rem;
59+
transition: all 0.2s ease;
60+
cursor: pointer;
61+
}
62+
63+
.info-banner__toggle:hover {
64+
background-color: rgba(41, 114, 166, 0.1);
65+
transform: scale(1.1);
66+
}
67+
68+
.info-banner__toggle--active {
69+
background-color: rgba(41, 114, 166, 0.15);
70+
transform: rotate(180deg);
71+
}
72+
73+
.info-banner__body {
74+
padding: 1.5rem;
75+
background: rgba(255, 255, 255, 0.5);
76+
}
77+
78+
.info-section__subtitle {
79+
color: #294456;
80+
font-weight: 600;
81+
font-size: 0.95rem;
82+
margin-bottom: 0.75rem;
83+
margin-top: 1rem;
84+
}
85+
86+
.info-section__subtitle:first-child {
87+
margin-top: 0;
88+
}
89+
90+
.info-section__text {
91+
color: #4b6678;
92+
font-size: 0.9rem;
93+
line-height: 1.6;
94+
margin-bottom: 1rem;
95+
}
96+
97+
.info-section__list {
98+
color: #4b6678;
99+
font-size: 0.875rem;
100+
line-height: 1.5;
101+
margin-bottom: 1rem;
102+
padding-left: 1.25rem;
103+
}
104+
105+
.info-section__list li {
106+
margin-bottom: 0.5rem;
107+
}
108+
109+
.info-section__stats {
110+
background: rgba(255, 255, 255, 0.8);
111+
border: 1px solid rgba(193, 217, 235, 0.6);
112+
border-radius: 0.5rem;
113+
padding: 1.25rem;
114+
}
115+
116+
.stat-item {
117+
display: flex;
118+
flex-direction: column;
119+
align-items: center;
120+
text-align: center;
121+
margin-bottom: 1rem;
122+
}
123+
124+
.stat-item:last-child {
125+
margin-bottom: 0;
126+
}
127+
128+
.stat-number {
129+
font-size: 1.5rem;
130+
font-weight: 700;
131+
color: #2972a6;
132+
line-height: 1;
133+
}
134+
135+
.stat-label {
136+
font-size: 0.8rem;
137+
color: #708696;
138+
margin-top: 0.25rem;
139+
font-weight: 500;
140+
}
141+
142+
.info-section__actions {
143+
display: flex;
144+
flex-wrap: wrap;
145+
gap: 0.5rem;
146+
align-items: center;
147+
}
148+
149+
/* Enhanced Topic Cards */
150+
.topic-card--featured {
151+
border: 2px solid #c1d9eb;
152+
box-shadow: 0 4px 16px rgba(41, 114, 166, 0.12);
153+
}
154+
155+
.topic-card--featured:hover {
156+
transform: translateY(-2px);
157+
box-shadow: 0 8px 24px rgba(41, 114, 166, 0.18);
158+
}
159+
160+
.table-count {
161+
background: rgba(41, 114, 166, 0.1);
162+
color: #2972a6;
163+
padding: 0.25rem 0.75rem;
164+
border-radius: 1rem;
165+
font-size: 0.8rem;
166+
font-weight: 600;
167+
}
168+
169+
/* Enhanced Table Styles */
170+
.table-container {
171+
background: white;
172+
border-radius: 0.75rem;
173+
overflow: hidden;
174+
box-shadow: 0 2px 12px rgba(41, 68, 86, 0.08);
175+
border: 1px solid #e3eaef;
176+
}
177+
178+
.table-header {
179+
background: linear-gradient(135deg, #f6f9fb 0%, #e5eff6 100%);
180+
padding: 1.25rem 1.5rem;
181+
border-bottom: 1px solid #e3eaef;
182+
display: flex;
183+
justify-content: space-between;
184+
align-items: center;
185+
}
186+
187+
.table-title {
188+
margin: 0;
189+
font-size: 1.25rem;
190+
font-weight: 600;
191+
color: #294456;
192+
display: flex;
193+
align-items: center;
194+
}
195+
196+
.table-count-badge {
197+
background: #2972a6;
198+
color: white;
199+
padding: 0.375rem 0.875rem;
200+
border-radius: 1.25rem;
201+
font-size: 0.8rem;
202+
font-weight: 600;
203+
}
204+
205+
.enhanced-table {
206+
margin-bottom: 0;
207+
border: none;
208+
}
209+
210+
.enhanced-table thead tr {
211+
background: linear-gradient(135deg, #2972a6 0%, #236695 100%);
212+
}
213+
214+
.table-header-cell {
215+
border: none;
216+
padding: 1rem 1.5rem;
217+
font-weight: 600;
218+
color: white;
219+
font-size: 0.9rem;
220+
}
221+
222+
.header-content {
223+
display: flex;
224+
align-items: center;
225+
}
226+
227+
.table-row {
228+
transition: all 0.2s ease;
229+
border-bottom: 1px solid #f6f9fb;
230+
}
231+
232+
.table-row:hover {
233+
background-color: #f6f9fb;
234+
transform: translateX(2px);
235+
}
236+
237+
.table-name-cell {
238+
padding: 1.25rem 1.5rem;
239+
cursor: pointer;
240+
border: none;
241+
vertical-align: middle;
242+
}
243+
244+
.table-name-content {
245+
display: flex;
246+
flex-direction: column;
247+
}
248+
249+
.table-name {
250+
font-weight: 600;
251+
color: #294456;
252+
font-size: 0.95rem;
253+
margin-bottom: 0.25rem;
254+
}
255+
256+
.table-identifier {
257+
font-size: 0.8rem;
258+
color: #708696;
259+
font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
260+
}
261+
262+
.table-tags-cell {
263+
padding: 1.25rem 1.5rem;
264+
border: none;
265+
vertical-align: middle;
266+
}
267+
268+
.tags-container {
269+
display: flex;
270+
flex-wrap: wrap;
271+
gap: 0.5rem;
272+
align-items: center;
273+
}
274+
275+
.tag-badge {
276+
display: inline-flex;
277+
align-items: center;
278+
padding: 0.375rem 0.75rem;
279+
border-radius: 1rem;
280+
font-size: 0.8rem;
281+
font-weight: 500;
282+
text-decoration: none;
283+
transition: all 0.2s ease;
284+
border: 1px solid rgba(255, 255, 255, 0.2);
285+
}
286+
287+
.tag-badge:hover {
288+
transform: translateY(-1px);
289+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
290+
text-decoration: none;
291+
}
292+
293+
.no-tags {
294+
color: #a2b3be;
295+
font-style: italic;
296+
font-size: 0.85rem;
297+
}
298+
299+
/* Responsive Design */
300+
@media (max-width: 768px) {
301+
.info-banner__header {
302+
padding: 0.875rem 1rem;
303+
}
304+
305+
.info-banner__body {
306+
padding: 1rem;
307+
}
308+
309+
.info-section__stats {
310+
margin-top: 1rem;
311+
}
312+
313+
.stat-item {
314+
margin-bottom: 0.75rem;
315+
}
316+
317+
.table-header {
318+
padding: 1rem;
319+
flex-direction: column;
320+
align-items: flex-start;
321+
gap: 0.75rem;
322+
}
323+
324+
.table-header-cell,
325+
.table-name-cell,
326+
.table-tags-cell {
327+
padding: 1rem;
328+
}
329+
330+
.info-section__actions {
331+
flex-direction: column;
332+
align-items: stretch;
333+
}
334+
335+
.info-section__actions .btn {
336+
justify-content: center;
337+
}
338+
}
339+
340+
/* Animation for smooth transitions */
341+
@keyframes slideDown {
342+
from {
343+
opacity: 0;
344+
transform: translateY(-10px);
345+
}
346+
to {
347+
opacity: 1;
348+
transform: translateY(0);
349+
}
350+
}
351+
352+
.info-banner__body[style*="block"] {
353+
animation: slideDown 0.3s ease-out;
354+
}
355+
356+
/* Focus states for accessibility */
357+
.info-banner__toggle:focus,
358+
.tag-badge:focus,
359+
.table-name-cell:focus {
360+
outline: 2px solid #2972a6;
361+
outline-offset: 2px;
362+
}
363+
364+
/* Print styles */
365+
@media print {
366+
.info-banner__toggle,
367+
.info-section__actions {
368+
display: none;
369+
}
370+
371+
.info-banner__body {
372+
display: block !important;
373+
}
374+
375+
.table-container {
376+
box-shadow: none;
377+
border: 1px solid #ccc;
378+
}
379+
}

0 commit comments

Comments
 (0)