Skip to content

Commit 04414be

Browse files
StanFromIrelandStanFromIreland
committed
Add Light/Dark Mode
1 parent c84a8d7 commit 04414be

File tree

2 files changed

+140
-31
lines changed

2 files changed

+140
-31
lines changed

‎generate.py‎

Lines changed: 58 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
from potodo.potodo import scan_path
1414
from jinja2 import Template
1515

16-
completion_progress = []
16+
#completion_progress = []
1717
generation_time = datetime.now(timezone.utc)
1818

1919
with TemporaryDirectory() as tmpdir:
@@ -39,32 +39,65 @@
3939
template = Template("""
4040
<html lang="en">
4141
<head>
42-
<title>Python Docs Translation Dashboard</title>
43-
<link rel="stylesheet" href="style.css">
42+
<!-- Load Material Symbols font for both dark_mode and light_mode icons -->
43+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=dark_mode,light_mode" />
44+
<link rel="stylesheet" href="style.css">
45+
<title>Python Docs Translation Dashboard</title>
46+
47+
<script>
48+
// Function to toggle between dark and light mode
49+
function toggleMode() {
50+
let element = document.body;
51+
let currentMode = element.className.includes('dark-mode') ? 'dark' : 'light';
52+
let newMode = currentMode === 'dark' ? 'light' : 'dark';
53+
element.className = newMode + '-mode';
54+
updateIcon(newMode); // Update the icon when the mode changes
55+
}
56+
57+
// Function to update the icon class based on the current mode
58+
function updateIcon(mode) {
59+
const icon = document.getElementById('mode-icon');
60+
if (mode === 'dark') {
61+
icon.textContent = 'light_mode'; // Set icon to light_mode
62+
} else {
63+
icon.textContent = 'dark_mode'; // Set icon to dark_mode
64+
}
65+
}
66+
</script>
67+
4468
</head>
4569
<body>
46-
<h1>Python Docs Translation Dashboard</h1>
47-
<table>
48-
<thead>
49-
<tr><th>language</th><th>branch</th><th>completion</th></tr>
50-
</thead>
51-
<tbody>
52-
{% for language, completion, branch in completion_progress | sort(attribute=1) | reverse %}
53-
<tr>
54-
<td data-label="language">
55-
<a href="https://github.com/python/python-docs-{{ language }}" target="_blank">
56-
{{ language }}
57-
</a>
58-
</td>
59-
<td data-label="branch">{{ branch }}</td>
60-
<td data-label="completion">
61-
<div class="progress-bar" style="width: {{ completion | round(2) }}%;">{{ completion | round(2) }}%</div>
62-
</td>
63-
</tr>
64-
{% endfor %}
65-
</tbody>
66-
</table>
67-
<p>Last updated at {{ generation_time.strftime('%A, %d %B %Y, %X %Z') }}.</p>
70+
71+
<h1>Python Docs Translation Dashboard</h1>
72+
73+
<!-- Mode toggle button with an icon -->
74+
<button class="mode-toggle" onclick="toggleMode()">
75+
<span id="mode-icon" class="material-symbols-outlined">dark_mode</span>
76+
</button>
77+
78+
<!-- Table for displaying the data -->
79+
<table>
80+
<thead>
81+
<tr><th>Language</th><th>Branch</th><th>Completion %</th></tr>
82+
</thead>
83+
<tbody>
84+
{% for language, completion, branch in completion_progress | sort(attribute=1) | reverse %}
85+
<tr>
86+
<td data-label="language">
87+
<a href="https://github.com/python/python-docs-{{ language }}" target="_blank">
88+
{{ language }}
89+
</a>
90+
</td>
91+
<td data-label="branch">{{ branch }}</td>
92+
<td data-label="completion">
93+
<div class="progress-bar" style="width: {{ completion | round(2) }}%;">{{ completion | round(2) }}%</div>
94+
</td>
95+
</tr>
96+
{% endfor %}
97+
</tbody>
98+
</table>
99+
100+
<p>Last updated at {{ generation_time.strftime('%A, %d %B %Y, %X %Z') }}.</p>
68101
</body>
69102
</html>
70103
""")

‎style.css‎

Lines changed: 82 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,45 @@
11
body {
22
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
3+
transition: background-color 0.3s, color 0.3s; /* Smooth transition for background and text color */
34
}
5+
6+
/* Table styles */
47
table {
5-
border-collapse: collapse;
6-
width: 100%;
8+
border: 1px solid #ddd;
9+
border-collapse: separate;
10+
border-left: 0;
11+
border-radius: 4px;
12+
border-spacing: 0px;
13+
}
14+
thead {
15+
display: table-header-group;
16+
vertical-align: middle;
17+
border-color: inherit;
18+
border-collapse: separate;
19+
background-color: #f4f4f4;
20+
}
21+
tr {
22+
display: table-row;
23+
vertical-align: inherit;
24+
border-color: inherit;
725
}
826
th, td {
9-
border: 1px solid #ddd;
10-
padding: 8px 12px;
27+
padding: 5px 4px 6px 4px;
1128
text-align: left;
29+
vertical-align: top;
30+
border-left: 1px solid #ddd;
1231
}
13-
th {
14-
background-color: #f4f4f4;
32+
td {
33+
border-top: 1px solid #ddd;
34+
}
35+
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
36+
border-radius: 4px 0 0 0;
1537
}
38+
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
39+
border-radius: 0 0 0 4px;
40+
}
41+
42+
/* Progress bar styles */
1643
.progress-bar {
1744
background-color: #4caf50;
1845
color: white;
@@ -27,6 +54,7 @@ th {
2754
td:nth-child(3) {
2855
width: 100%;
2956
}
57+
3058
@media screen and (max-width: 600px) {
3159
table, thead, tbody, th, td, tr {
3260
display: block;
@@ -60,3 +88,51 @@ td:nth-child(3) {
6088
width: 100% !important;
6189
}
6290
}
91+
92+
/* Mode toggle button */
93+
.mode-toggle {
94+
position: absolute;
95+
top: 10px;
96+
right: 10px;
97+
background: none;
98+
border: none;
99+
color: inherit;
100+
font-size: 2rem;
101+
cursor: pointer;
102+
}
103+
104+
.dark-mode {
105+
background-color: #2f2f2f;
106+
color: #f4f4f4;
107+
}
108+
109+
.dark-mode table {
110+
background-color: #333;
111+
border-color: #444;
112+
}
113+
114+
.dark-mode thead {
115+
background-color: #444;
116+
}
117+
118+
.dark-mode th, .dark-mode td {
119+
border-color: #555;
120+
}
121+
122+
.light-mode {
123+
background-color: #ffffff;
124+
color: #000000;
125+
}
126+
127+
.light-mode table {
128+
background-color: #ffffff;
129+
border-color: #ddd;
130+
}
131+
132+
.light-mode thead {
133+
background-color: #f4f4f4;
134+
}
135+
136+
.light-mode th, .light-mode td {
137+
border-color: #ddd;
138+
}

0 commit comments

Comments
 (0)