Fixes

Author: StanFromIreland

generate_metadata.py

@@ -9,7 +9,7 @@
 
 import dacite
 from git import Repo
-from jinja2 import Template
+from jinja2 import Environment, FileSystemLoader
 from urllib3 import request
 
 import build_warnings
@@ -55,7 +55,7 @@ def get_language_repo_and_completion(
 if __name__ == '__main__':
     logging.basicConfig(level=logging.INFO)
     logging.info(f'starting at {generation_time}')
-    template = Template(Path('templates/metadata.html.jinja').read_text())
+    env = Environment(loader=FileSystemLoader('templates'))
     if (index_path := Path('build/index.json')).exists():
         index_json = loads(Path('build/index.json').read_text())
     else:
@@ -65,7 +65,7 @@ def get_language_repo_and_completion(
         dacite.from_dict(LanguageProjectData, project) for project in index_json
     ]
 
-    output = template.render(
+    output = env.get_template('metadata.html.jinja').render(
         metadata=zip(completion_progress, get_projects_metadata(completion_progress)),
         generation_time=generation_time,
         duration=(datetime.now(timezone.utc) - generation_time).seconds,

src/style.css

@@ -17,7 +17,7 @@ a {
 }
 
 a:hover {
-  color: #fe6615;
+  color: #1595fe;
 }
 
 /* NAVAR
@@ -91,7 +91,7 @@ th, td {
   white-space: nowrap;
 }
 th {
-  background-color: #f4f4f4;
+  background-color: #d6d6d6;
 }
 hr {
   color: #f4f4f4;

templates/base.html.jinja

@@ -19,8 +19,8 @@
 
       <div class="navbar-brand">
         <a href="./" style="all: unset; cursor: pointer;">
-          <img src="logo.png" style="height: 2rem;" alt="Translation dashboard">
-          <span style="font-size: 1.25rem; font-weight: bold;">Docs Translation Dashboard</span>
+          <img src="logo.png" style="height: 2rem;" alt="">
+          <span style="font-size: 1.25rem; font-weight: bold;">Translation Dashboard</span>
         </a>
       </div>
 
@@ -33,13 +33,13 @@
       <div class="collapse navbar-collapse" id="navbarNavDropdown">
         <ul class="navbar-nav mr-auto">
           <li class="nav-item">
-            <a class="nav-link" href="https://devguide.python.org/">Translating</a>
+            <a class="nav-link" href="chart.html">Chart</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="metadata.html">Metadata</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="chart.html">Chart</a>
+            <a class="nav-link" href="https://devguide.python.org/documentation/translations/translating/">Devguide ❯ Translating</a>
           </li>
         </ul>
       </div>
@@ -53,6 +53,17 @@
 
 </body>
 
+<script>
+  function padnavbar() {
+    const navbar = document.querySelector('.navbar.fixed-top');
+    if (navbar) {
+      document.body.style.paddingTop = (navbar.offsetHeight + 10) + 'px';
+    }
+  }
+  window.addEventListener('load', padnavbar);
+  window.addEventListener('resize', padnavbar);
+</script>
+
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
   integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
   crossorigin="anonymous">

templates/index.html.jinja

@@ -4,7 +4,7 @@
     <div>
       <div class="row">
         {% for project in completion_progress | sort(attribute='completion,translators.number') | reverse %}
-          <div class="col-sm-6 col-md-4 col-lg-3 d-flex">
+          <div class="col-12 col-sm-6 col-md-4 d-flex">
             <a href="{{ project.language.code }}.html" class="card mb-3 w-100">
               <div class="card-body">
                 <h5 class="card-title">{{ project.language.name }} ({{ project.language.code }})</h5>