Skip to content

Commit 3b25532

Browse files
author
Sidharth123-cpu
committed
styling for dashboard
1 parent 642cae7 commit 3b25532

File tree

3 files changed

+164
-6
lines changed

3 files changed

+164
-6
lines changed

‎docs/assets/css/style.scss

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,71 @@
22
---
33

44
@import "{{ site.theme }}";
5+
6+
/* Custom styles for header and navigation */
7+
body {
8+
padding-top: 60px; /* Space for fixed header */
9+
}
10+
11+
header {
12+
background-color: #333;
13+
color: white;
14+
padding: 10px 20px;
15+
position: fixed;
16+
width: 100%;
17+
top: 0;
18+
left: 0;
19+
z-index: 1000;
20+
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
21+
}
22+
23+
nav {
24+
display: flex;
25+
justify-content: flex-start;
26+
gap: 20px;
27+
}
28+
29+
nav a {
30+
color: white;
31+
text-decoration: none;
32+
padding: 5px 10px;
33+
border-radius: 4px;
34+
transition: background-color 0.3s ease;
35+
}
36+
37+
nav a:hover {
38+
background-color: #575757;
39+
}
40+
41+
.metric-container {
42+
display: flex;
43+
flex-wrap: wrap;
44+
gap: 20px;
45+
margin-top: 30px;
46+
justify-content: center;
47+
}
48+
49+
.metric-box {
50+
background-color: #f9f9f9;
51+
border: 1px solid #ddd;
52+
border-radius: 8px;
53+
padding: 20px;
54+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
55+
text-align: center;
56+
flex: 1;
57+
min-width: 250px;
58+
max-width: 300px;
59+
}
60+
61+
.metric-box h3 {
62+
color: #333;
63+
margin-top: 0;
64+
font-size: 1.2em;
65+
}
66+
67+
.metric-box p {
68+
font-size: 2em;
69+
font-weight: bold;
70+
color: #007bff;
71+
margin-bottom: 0;
72+
}

‎docs/dashboard.md

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,18 @@ title: Graph Break Dashboard
55

66
# Graph Break Metrics Dashboard
77

8-
- Total Graph Breaks: 252
9-
- Graph Breaks with Additional Info: 1
10-
- Graph Breaks with Missing Content: 68
8+
<div class="metric-container">
9+
<div class="metric-box">
10+
<h3>Total Graph Breaks</h3>
11+
<p>252</p>
12+
</div>
13+
<div class="metric-box">
14+
<h3>Graph Breaks with Additional Info</h3>
15+
<p>1</p>
16+
</div>
17+
<div class="metric-box">
18+
<h3>Graph Breaks with Missing Content</h3>
19+
<p>68</p>
20+
</div>
21+
</div>
1122

‎generate-site.py

Lines changed: 82 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,74 @@ def generate_site():
5858
---
5959
6060
@import "{{ site.theme }}";
61+
62+
/* Custom styles for header and navigation */
63+
body {
64+
padding-top: 60px; /* Space for fixed header */
65+
}
66+
67+
header {
68+
background-color: #333;
69+
color: white;
70+
padding: 10px 20px;
71+
position: fixed;
72+
width: 100%;
73+
top: 0;
74+
left: 0;
75+
z-index: 1000;
76+
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
77+
}
78+
79+
nav {
80+
display: flex;
81+
justify-content: flex-start;
82+
gap: 20px;
83+
}
84+
85+
nav a {
86+
color: white;
87+
text-decoration: none;
88+
padding: 5px 10px;
89+
border-radius: 4px;
90+
transition: background-color 0.3s ease;
91+
}
92+
93+
nav a:hover {
94+
background-color: #575757;
95+
}
96+
97+
.metric-container {
98+
display: flex;
99+
flex-wrap: wrap;
100+
gap: 20px;
101+
margin-top: 30px;
102+
justify-content: center;
103+
}
104+
105+
.metric-box {
106+
background-color: #f9f9f9;
107+
border: 1px solid #ddd;
108+
border-radius: 8px;
109+
padding: 20px;
110+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
111+
text-align: center;
112+
flex: 1;
113+
min-width: 250px;
114+
max-width: 300px;
115+
}
116+
117+
.metric-box h3 {
118+
color: #333;
119+
margin-top: 0;
120+
font-size: 1.2em;
121+
}
122+
123+
.metric-box p {
124+
font-size: 2em;
125+
font-weight: bold;
126+
color: #007bff;
127+
margin-bottom: 0;
128+
}
61129
"""
62130

63131
with open(os.path.join(css_dir, 'style.scss'), 'w') as f:
@@ -227,9 +295,20 @@ def generate_site():
227295
228296
# Graph Break Metrics Dashboard
229297
230-
- Total Graph Breaks: {total_graph_breaks}
231-
- Graph Breaks with Additional Info: {graph_breaks_with_additional_info}
232-
- Graph Breaks with Missing Content: {graph_breaks_with_missing_content}
298+
<div class="metric-container">
299+
<div class="metric-box">
300+
<h3>Total Graph Breaks</h3>
301+
<p>{total_graph_breaks}</p>
302+
</div>
303+
<div class="metric-box">
304+
<h3>Graph Breaks with Additional Info</h3>
305+
<p>{graph_breaks_with_additional_info}</p>
306+
</div>
307+
<div class="metric-box">
308+
<h3>Graph Breaks with Missing Content</h3>
309+
<p>{graph_breaks_with_missing_content}</p>
310+
</div>
311+
</div>
233312
234313
"""
235314
with open(os.path.join(output_dir, 'dashboard.md'), 'w') as f:

0 commit comments

Comments
 (0)