Skip to content

Commit a82ee33

Browse files
FsztaFszta
authored
Merge pull request #32 refactor: modularize frontend for better maintainability
2 parents e0f7e9e + 7601d96 commit a82ee33

File tree

12 files changed

+4591
-4369
lines changed

12 files changed

+4591
-4369
lines changed

‎dbt_column_lineage/lineage/display/html/static/css/base.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* Base styles - CSS variables, resets, and fundamental styles
3+
*/
4+
5+
:root {
6+
--primary: #4a6fa5;
7+
--primary-light: #6989b9;
8+
--secondary: #f8f9fa;
9+
--accent: #ff9100;
10+
--text-dark: #333;
11+
--text-light: #666;
12+
--border: #e0e0e0;
13+
--shadow: rgba(0,0,0,0.1);
14+
--model-bg: #ffffff;
15+
--column-bg: #f8fafc;
16+
--edge-color: #9eb3c6;
17+
--edge-highlight: #ff9100;
18+
}
19+
20+
html, body {
21+
margin: 0;
22+
padding: 0;
23+
width: 100%;
24+
height: 100%;
25+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
26+
background-color: #f8f9fa;
27+
color: var(--text-dark);
28+
display: flex;
29+
height: 100vh;
30+
overflow: hidden; /* Prevent body scroll */
31+
}
32+
33+
.error-message {
34+
background: #fee2e2;
35+
border: 1px solid #fca5a5;
36+
border-left: 4px solid #dc2626;
37+
border-radius: 8px;
38+
color: #dc2626;
39+
padding: 20px 24px;
40+
text-align: center;
41+
font-weight: 600;
42+
font-size: 14px;
43+
margin: 20px auto;
44+
max-width: 600px;
45+
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);
46+
display: flex;
47+
align-items: center;
48+
justify-content: center;
49+
gap: 12px;
50+
}

‎dbt_column_lineage/lineage/display/html/static/css/components.css‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
/**
2+
* Component styles - Buttons, cards, panels, controls
3+
*/
4+
5+
.controls {
6+
position: fixed;
7+
bottom: 20px;
8+
right: 20px;
9+
background: white;
10+
border-radius: 50px;
11+
padding: 10px;
12+
box-shadow: 0 4px 12px var(--shadow);
13+
z-index: 100;
14+
display: flex;
15+
flex-direction: row;
16+
gap: 8px;
17+
width: auto;
18+
}
19+
20+
.controls h3 {
21+
display: none;
22+
}
23+
24+
.controls button {
25+
padding: 10px;
26+
background: var(--secondary);
27+
border: 1px solid var(--border);
28+
border-radius: 50%;
29+
cursor: pointer;
30+
color: var(--primary);
31+
font-weight: 500;
32+
transition: all 0.2s;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
min-width: 40px;
37+
min-height: 40px;
38+
width: 40px;
39+
height: 40px;
40+
position: relative;
41+
text-indent: -9999px;
42+
overflow: hidden;
43+
}
44+
45+
/* Ensure the icons remain visible and centered */
46+
.controls button::before {
47+
position: absolute;
48+
top: 50%;
49+
left: 50%;
50+
transform: translate(-50%, -50%);
51+
text-indent: 0;
52+
}
53+
54+
.controls button:hover {
55+
background: var(--primary);
56+
color: white;
57+
border-color: var(--primary);
58+
transform: translateY(-2px);
59+
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
60+
}
61+
62+
.controls button:active {
63+
transform: translateY(0);
64+
}
65+
66+
.controls {
67+
display: flex;
68+
flex-direction: column;
69+
gap: 10px;
70+
}
71+
72+
.controls button:hover {
73+
background: var(--primary);
74+
color: white;
75+
border-color: var(--primary);
76+
transform: translateY(-1px);
77+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
78+
}
79+
80+
.controls button:active {
81+
transform: translateY(0px);
82+
}
83+
84+
#zoomIn::before, #zoomOut::before, #resetView::before {
85+
content: "";
86+
display: inline-block;
87+
width: 20px;
88+
height: 20px;
89+
background-size: contain;
90+
background-repeat: no-repeat;
91+
background-position: center;
92+
position: absolute;
93+
top: 50%;
94+
left: 50%;
95+
transform: translate(-50%, -50%);
96+
text-indent: 0;
97+
}
98+
99+
#zoomIn::before {
100+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3Cline x1='11' y1='8' x2='11' y2='14'%3E%3C/line%3E%3Cline x1='8' y1='11' x2='14' y2='11'%3E%3C/line%3E%3C/svg%3E");
101+
}
102+
103+
#zoomOut::before {
104+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3Cline x1='8' y1='11' x2='14' y2='11'%3E%3C/line%3E%3C/svg%3E");
105+
}
106+
107+
#resetView::before {
108+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16'/%3E%3Cpath d='M16 16h5v5'/%3E%3C/svg%3E");
109+
}
110+
111+
.controls button:hover::before {
112+
filter: brightness(0) invert(1);
113+
}
114+
115+
#resetView[title]::after {
116+
content: "Reset Layout & View";
117+
}
118+
119+
.info-panel {
120+
margin-top: 20px;
121+
}
122+
123+
.info-panel h3 {
124+
margin-bottom: 10px;
125+
}
126+
127+
.node-info {
128+
background: white;
129+
border-radius: 6px;
130+
padding: 20px;
131+
box-shadow: 0 2px 8px var(--shadow);
132+
margin-top: 10px;
133+
}
134+
135+
.node-info-placeholder {
136+
color: var(--text-light);
137+
font-style: italic;
138+
padding: 10px 0;
139+
}
140+
141+
.node-header {
142+
display: flex;
143+
justify-content: space-between;
144+
align-items: center;
145+
margin-bottom: 15px;
146+
}
147+
148+
.node-label {
149+
font-weight: 600;
150+
font-size: 16px;
151+
color: var(--primary);
152+
word-break: break-word;
153+
overflow-wrap: break-word;
154+
max-width: 85%;
155+
}
156+
157+
.node-badge {
158+
background: var(--primary-light);
159+
color: white;
160+
padding: 2px 8px;
161+
border-radius: 12px;
162+
font-size: 11px;
163+
text-transform: uppercase;
164+
flex-shrink: 0;
165+
}
166+
167+
.node-detail {
168+
margin-bottom: 12px;
169+
display: flex;
170+
flex-wrap: wrap;
171+
}
172+
173+
.detail-label {
174+
width: 80px;
175+
color: var(--text-light);
176+
flex-shrink: 0;
177+
}
178+
179+
.node-detail span:last-child {
180+
flex: 1;
181+
word-break: break-word;
182+
overflow-wrap: break-word;
183+
padding-right: 5px;
184+
}
185+
186+
.focus-button {
187+
margin-top: 12px;
188+
background: var(--primary);
189+
color: white;
190+
border: none;
191+
padding: 6px 12px;
192+
border-radius: 4px;
193+
cursor: pointer;
194+
width: 100%;
195+
}
196+
197+
.focus-button:hover {
198+
background: var(--primary-light);
199+
}
200+
201+
@media (max-width: 768px) {
202+
.controls {
203+
bottom: 15px;
204+
right: 15px;
205+
padding: 8px;
206+
}
207+
}

0 commit comments

Comments
 (0)