Skip to content

Commit 1e4d4a4

Browse files
m-aciekm-aciek
committed
Introduce cards in the main view
1 parent 12499aa commit 1e4d4a4

File tree

1 file changed

+32
-40
lines changed

1 file changed

+32
-40
lines changed

‎template.html.jinja‎

Lines changed: 32 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,53 +5,44 @@
55
<meta charset="UTF-8">
66
<meta name="description" content="Python Docs Translation Dashboard">
77
<base target="_blank">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
810
</head>
9-
<body>
11+
<body class="container">
1012
<h1>Python Docs Translation Dashboard</h1>
1113
<nav class="switchpages">
1214
main | <a href="metadata.html" target="_self">meta</a>
1315
</nav>
14-
<table>
15-
<thead>
16-
<tr>
17-
<th>language</th>
18-
<th>switcher</th>
19-
<th>translators</th>
20-
<th>completion*</th>
21-
</tr>
22-
</thead>
23-
<tbody>
16+
<div class="row row-cols-1 row-cols-md-4 g-4">
2417
{% for project in completion_progress | sort(attribute='completion,translators.number') | reverse %}
25-
<tr>
26-
<td data-label="language">
27-
<a href="{{ project.contribution_link }}">{{ project.language.name }} ({{ project.language.code }})</a>
28-
</td>
29-
<td data-label="build">
30-
{% if project.in_switcher %}
31-
<a href="https://docs.python.org/{{ project.language.code }}/">✓</a>
32-
{% elif project.built %}
33-
<a href="https://docs.python.org/{{ project.language.code }}/">✗</a>
34-
{% endif %}
35-
</td>
36-
<td data-label="translators">
37-
{% if project.translators.link %}<a href="{{ project.translators.link }}">{% endif %}
38-
{{ project.translators.number }}
39-
{% if project.translators.link %}</a>{% endif %}
40-
</td>
41-
<td data-label="completion">
42-
<div class="progress-bar"
43-
style="width: {{ project.completion }}%;{% if project.change %}background: linear-gradient(to left, #94cf96 {{ project.change * 100 / project.completion }}%, #4caf50 {{ project.change * 100 / project.completion }}%);{% else %}background-color: #4caf50;{% endif %}"
44-
>
45-
{{ '{:.2f}%'.format(project.completion) }} {% if project.change >= 0.01 %}({{ '{:+.2f}%'.format(project.change) }}){% endif %}
46-
</div>
47-
<div class="progress-bar-outer-label">
48-
{{ '{:.2f}%'.format(project.completion) }} {% if project.change >= 0.01 %}({{ '{:+.2f}%'.format(project.change) }}){% endif %}
49-
</div>
50-
</td>
51-
</tr>
18+
<div class="col">
19+
<div class="card">
20+
<div class="card-body">
21+
<h5>{{ project.language.name }} ({{ project.language.code }})</h5>
22+
<p>translators: {% if project.translators.link %}<a href="{{ project.translators.link }}">
23+
{{ project.translators.number }}</a>{% else %}
24+
{{ project.translators.number }}{% endif %}</p>
25+
<div data-label="completion">
26+
<div class="progress-bar"
27+
style="width: {{ project.completion }}%;{% if project.change %}background: linear-gradient(to left, #94cf96 {{ project.change * 100 / project.completion }}%, #4caf50 {{ project.change * 100 / project.completion }}%);{% else %}background-color: #4caf50;{% endif %}"
28+
>
29+
{{ '{:.2f}%'.format(project.completion) }} {% if project.change >= 0.01 %}({{ '{:+.2f}%'.format(project.change) }}){% endif %}
30+
</div>
31+
<div class="progress-bar-outer-label">
32+
{{ '{:.2f}%'.format(project.completion) }} {% if project.change >= 0.01 %}({{ '{:+.2f}%'.format(project.change) }}){% endif %}
33+
</div>
34+
</div>
35+
{% if project.built %}
36+
<a href="https://docs.python.org/{{ project.language.code }}/" class="btn btn-outline-secondary">Read</a>
37+
{% else %}
38+
<button type="button" class="btn btn-outline-secondary" disabled>Read</button>
39+
{% endif %}
40+
<a href="{{ project.contribution_link }}" class="btn btn-outline-primary">Contribute</a>
41+
</div>
42+
</div>
43+
</div>
5244
{% endfor %}
53-
</tbody>
54-
</table>
45+
</div>
5546
<p>* the number in parentheses shows change in the last 30 days, included in the total completion</p>
5647
<p>
5748
Currently being translated into {{ completion_progress|length }} languages.
@@ -62,6 +53,7 @@ For more information about translations, see the <a href="https://devguide.pytho
6253
<p>You can download the data on this page in <a href="https://github.com/python-docs-translations/dashboard/blob/gh-pages/index.json">JSON format</a>.</p>
6354
<p>You can also find the scripts used to generate these pages <a href="https://github.com/python-docs-translations/dashboard">here</a>.</p>
6455
<p>Last updated at {{ generation_time.strftime('%A, %-d %B %Y, %-H:%M:%S %Z') }} (in {{ duration // 60 }}:{{ "{:02}".format(duration % 60) }} minutes).</p>
56+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
6557
</body>
6658
<script>
6759
function updateProgressBarVisibility() {

0 commit comments

Comments
 (0)