Skip to content

Commit e796ca5

Browse files
m-aciekm-aciek
authored
Merge pull request python-docs-translations#1 from hugovk/main
Style the table
2 parents 8cea780 + b9eeb45 commit e796ca5

File tree

3 files changed

+173
-15
lines changed

3 files changed

+173
-15
lines changed

‎generate.py‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,27 @@
3636

3737
template = Template("""
3838
<html lang="en">
39+
<head>
40+
<title>Python Docs Translation Dashboard</title>
41+
<link rel="stylesheet" href="style.css">
42+
</head>
3943
<body>
44+
<h1>Python Docs Translation Dashboard</h1>
4045
<table>
41-
<tr><th>language</th><th>completion</th><th>branch</th></tr>
46+
<thead>
47+
<tr><th>language</th><th>branch</th><th>completion</th></tr>
48+
</thead>
49+
<tbody>
4250
{% for language, completion, branch in completion_progress | sort(attribute=1) | reverse %}
43-
<tr><td>{{ language }}</td><td>{{ completion | round(2) }}</td><td>{{ branch }}</td></tr>
51+
<tr>
52+
<td data-label="language">{{ language }}</td>
53+
<td data-label="branch">{{ branch }}</td>
54+
<td data-label="completion">
55+
<div class="progress-bar" style="width: {{ completion | round(2) }}%;">{{ completion | round(2) }}%</div>
56+
</td>
57+
</tr>
4458
{% endfor %}
59+
</tbody>
4560
</table>
4661
</body>
4762
</html>

‎index.html‎

Lines changed: 94 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,114 @@
11

22
<html lang="en">
3+
<head>
4+
<title>Python Docs Translation Dashboard</title>
5+
<link rel="stylesheet" href="style.css">
6+
</head>
37
<body>
8+
<h1>Python Docs Translation Dashboard</h1>
49
<table>
5-
<tr><th>language</th><th>completion</th><th>branch</th></tr>
10+
<thead>
11+
<tr><th>language</th><th>branch</th><th>completion</th></tr>
12+
</thead>
13+
<tbody>
614

7-
<tr><td>zh-cn</td><td>93.13</td><td>3.13</td></tr>
15+
<tr>
16+
<td data-label="language">zh-cn</td>
17+
<td data-label="branch">3.13</td>
18+
<td data-label="completion">
19+
<div class="progress-bar" style="width: 93.13%;">93.13%</div>
20+
</td>
21+
</tr>
822

9-
<tr><td>es</td><td>91.12</td><td>3.12</td></tr>
23+
<tr>
24+
<td data-label="language">es</td>
25+
<td data-label="branch">3.12</td>
26+
<td data-label="completion">
27+
<div class="progress-bar" style="width: 91.12%;">91.12%</div>
28+
</td>
29+
</tr>
1030

11-
<tr><td>ko</td><td>89.35</td><td>3.9</td></tr>
31+
<tr>
32+
<td data-label="language">ko</td>
33+
<td data-label="branch">3.9</td>
34+
<td data-label="completion">
35+
<div class="progress-bar" style="width: 89.35%;">89.35%</div>
36+
</td>
37+
</tr>
1238

13-
<tr><td>uk</td><td>68.76</td><td>3.12</td></tr>
39+
<tr>
40+
<td data-label="language">uk</td>
41+
<td data-label="branch">3.12</td>
42+
<td data-label="completion">
43+
<div class="progress-bar" style="width: 68.76%;">68.76%</div>
44+
</td>
45+
</tr>
1446

15-
<tr><td>ja</td><td>68.08</td><td>3.11</td></tr>
47+
<tr>
48+
<td data-label="language">ja</td>
49+
<td data-label="branch">3.11</td>
50+
<td data-label="completion">
51+
<div class="progress-bar" style="width: 68.08%;">68.08%</div>
52+
</td>
53+
</tr>
1654

17-
<tr><td>pt-br</td><td>62.71</td><td>3.13</td></tr>
55+
<tr>
56+
<td data-label="language">pt-br</td>
57+
<td data-label="branch">3.13</td>
58+
<td data-label="completion">
59+
<div class="progress-bar" style="width: 62.71%;">62.71%</div>
60+
</td>
61+
</tr>
1862

19-
<tr><td>fr</td><td>47.49</td><td>3.13</td></tr>
63+
<tr>
64+
<td data-label="language">fr</td>
65+
<td data-label="branch">3.13</td>
66+
<td data-label="completion">
67+
<div class="progress-bar" style="width: 47.49%;">47.49%</div>
68+
</td>
69+
</tr>
2070

21-
<tr><td>zh-tw</td><td>43.2</td><td>3.13</td></tr>
71+
<tr>
72+
<td data-label="language">zh-tw</td>
73+
<td data-label="branch">3.13</td>
74+
<td data-label="completion">
75+
<div class="progress-bar" style="width: 43.2%;">43.2%</div>
76+
</td>
77+
</tr>
2278

23-
<tr><td>id</td><td>15.46</td><td>3.9</td></tr>
79+
<tr>
80+
<td data-label="language">id</td>
81+
<td data-label="branch">3.9</td>
82+
<td data-label="completion">
83+
<div class="progress-bar" style="width: 15.46%;">15.46%</div>
84+
</td>
85+
</tr>
2486

25-
<tr><td>tr</td><td>6.31</td><td>3.12</td></tr>
87+
<tr>
88+
<td data-label="language">tr</td>
89+
<td data-label="branch">3.12</td>
90+
<td data-label="completion">
91+
<div class="progress-bar" style="width: 6.31%;">6.31%</div>
92+
</td>
93+
</tr>
2694

27-
<tr><td>pl</td><td>5.57</td><td>3.13</td></tr>
95+
<tr>
96+
<td data-label="language">pl</td>
97+
<td data-label="branch">3.13</td>
98+
<td data-label="completion">
99+
<div class="progress-bar" style="width: 5.57%;">5.57%</div>
100+
</td>
101+
</tr>
28102

29-
<tr><td>it</td><td>5.44</td><td>3.12</td></tr>
103+
<tr>
104+
<td data-label="language">it</td>
105+
<td data-label="branch">3.12</td>
106+
<td data-label="completion">
107+
<div class="progress-bar" style="width: 5.44%;">5.44%</div>
108+
</td>
109+
</tr>
30110

111+
</tbody>
31112
</table>
32113
</body>
33114
</html>

‎style.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
body {
2+
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
3+
}
4+
table {
5+
border-collapse: collapse;
6+
width: 100%;
7+
}
8+
th, td {
9+
border: 1px solid #ddd;
10+
padding: 8px 12px;
11+
text-align: left;
12+
}
13+
th {
14+
background-color: #f4f4f4;
15+
}
16+
.progress-bar {
17+
background-color: #4caf50;
18+
color: white;
19+
height: 20px;
20+
line-height: 20px;
21+
text-align: center;
22+
overflow: hidden;
23+
white-space: nowrap;
24+
min-width: 50px;
25+
box-sizing: border-box;
26+
}
27+
td:nth-child(3) {
28+
width: 100%;
29+
}
30+
@media screen and (max-width: 600px) {
31+
table, thead, tbody, th, td, tr {
32+
display: block;
33+
}
34+
th {
35+
position: absolute;
36+
top: -9999px;
37+
left: -9999px;
38+
}
39+
tr {
40+
border: 1px solid #ccc;
41+
margin-bottom: 5px;
42+
}
43+
td {
44+
border: none;
45+
border-bottom: 1px solid #eee;
46+
padding-left: 50%;
47+
position: relative;
48+
}
49+
td:before {
50+
content: attr(data-label);
51+
font-weight: bold;
52+
left: 10px;
53+
position: absolute;
54+
}
55+
td:nth-child(3) {
56+
width: inherit;
57+
}
58+
.progress-bar {
59+
min-width: 0;
60+
width: 100% !important;
61+
}
62+
}

0 commit comments

Comments
 (0)