devtool: switch another page to be using bulma

kantord · Mar 3, 2022 · 4818b08 · 4818b08
1 parent 95ccf8b
commit 4818b08
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 23 deletions.
diff --git a/apps/tools/librelingo_tools/templates/central/header.html b/apps/tools/librelingo_tools/templates/central/header.html
@@ -6,6 +6,7 @@
   <head>
     <title>{{ title }}</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
   </head>
   <body>
     <section class="section">

diff --git a/apps/tools/librelingo_tools/templates/incl/header.html b/apps/tools/librelingo_tools/templates/incl/header.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
     <title>{{ title }}</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
     <script src="https://use.fontawesome.com/57525b30bb.js"></script>
   </head>
   <body>

diff --git a/apps/tools/librelingo_tools/templates/missing_words.html b/apps/tools/librelingo_tools/templates/missing_words.html
@@ -1,29 +1,19 @@
 {% include 'incl/header.html' %}
 
-<style>
-.missing {
-    background-color: red;
-}
-.exists {
-    background-color: white;
-}
-.onlywe {
-    background-color: yellow;
-}
-</style>
+<h1 class="title">Missing Words</h1>
 
-<h2>Missing Words</h2>
+<div class="content">
+   List all the words in the source language ({{ course.source_language_name }}) from all the courses with the same source language and mark which are
+   <span class="has-background-danger-light">missing</span> or
+   which we <span class="has-background-warning-light">have but the other courses don't</a>.
+   <span class="has-background-success-light"></span>
 
-List all the words in the source language ({{ course.source_language_name }}) from all the courses with the same source language and mark which are <span class="missing">missing</span> or which we <span class="onlywe">have but they
-don't</a>.
-
-<div>Total number of words: <span id="total_words"></span></div>
-<div>Number of words we have: <span id="our_words"></span></div>
-<div id="output">
+   <div>Total number of words: <span id="total_words"></span></div>
+   <div>Number of words we have: <span id="our_words"></span></div>
+   <div id="output">
+   </div>
 </div>
 
-
-<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 <script>
 $(document).ready(function(){
     //var source_to_target = null;
@@ -62,12 +52,12 @@ <h2>Missing Words</h2>
         html += "<tr><th>word</th><th>count</th></tr>";
         for (var ix=0; ix < words_array.length; ix++) {
             var word = words_array[ix];
-            var css_class = "missing";
+            var css_class = "has-background-danger-light";
             if (word in this_source_to_target) {
                 count_our_words++;
-                css_class = "exists";
+                css_class = "has-background-success-light";
                 if (words[word] == 1) {
-                    css_class = "onlywe";
+                    css_class = "has-background-warning-light";
                 }
             }
             html += `<tr class="${css_class}"><td>${word}</td><td>${words[word]}</td></tr>`;