Replace font-awesome by bootstrap-icons

Testing needed: prize at the end of topic?

Replace font-awesome by bootstrap-icons
Testing needed: prize at the end of topic?
Miguel Barão
1 parent bcbec429
Showing 7 changed files with 77 additions and 23 deletions Show diff stats
aprendizations/templates/courses.html
aprendizations/templates/login.html
aprendizations/templates/maintopics-table.html
aprendizations/templates/rankings.html
aprendizations/templates/topic.html
demo/courses.yaml
demo/math.yaml
@@ -10,9 +10,10 @@
     <!-- bootstrap -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
     <!-- font-awesome -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
+    <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"> -->
     <link rel="stylesheet" href="{{static_url('css/maintopics.css')}}">
     <link rel="stylesheet" href="{{static_url('css/sticky-footer-navbar.css')}}">
@@ -43,7 +44,8 @@
           <ul class="navbar-nav ms-auto">
             <li class="nav-item dropdown">
               <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                <i class="fas fa-user-graduate" aria-hidden="true"></i>
+                <i class="bi bi-person-circle"></i>
+                <!-- <i class="fas fa-user-graduate" aria-hidden="true"></i> -->
                 &nbsp;
                 <span id="name">{{ escape(name) }}</span>
                 <span class="caret"></span>
@@ -6,8 +6,8 @@
     <meta name="author" content="Miguel Barão">
     <!-- Bootstrap core CSS -->
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
     <style>
       .bd-placeholder-img {
@@ -14,9 +14,10 @@
   <!-- bootstrap -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
   <!-- font-awesome -->
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
+  <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"> -->
   <link rel="stylesheet" href="{{static_url('css/maintopics.css')}}">
   <script defer src="{{static_url('js/maintopics.js')}}"></script>
@@ -41,7 +42,8 @@
       <ul class="navbar-nav ms-auto">
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-            <i class="fas fa-user-graduate" aria-hidden="true"></i>
+            <!-- <i class="fas fa-user-graduate" aria-hidden="true"></i> -->
+            <i class="bi bi-person-circle"></i>
             &nbsp;
             <span id="name">{{ escape(name) }}</span>
             <span class="caret"></span>
@@ -107,17 +109,26 @@
           <tr>
             <th scope="row" class="text-muted text-center">
               {% if t['type']=='chapter' %}
-                <i class="fas fa-flag"></i>
+                <!-- <i class="fas fa-flag"></i> -->
+                <i class="bi bi-flag-fill"></i>
               {% elif t['type']=='learn' %}
-                <i class="fas fa-book"></i>&nbsp;
+                <!-- <i class="fas fa-book"></i>&nbsp; -->
+                <!-- <i class="bi bi-book-fill"></i>&nbsp; -->
+                <h5>
+                <i class="bi bi-book"></i>&nbsp;
+                </h5>
+
               {% else %}
                 <i class="fas fa-pencil-alt"></i>&nbsp;
+                <i class="bi bi-pencil-fill"></i>&nbsp;
+                <i class="bi bi-pencil"></i>&nbsp;
               {% end %}
             </th>
             <td>
               <div class="text-muted">
                 {% if t['ref'] not in course['goals'] %}
-                  <i class="fas fa-puzzle-piece"></i>
+                  <!-- <i class="fas fa-puzzle-piece"></i> -->
+                  <i class="bi bi-puzzle-fill"></i>
                 {% end %}
@@ -125,7 +136,8 @@
               </div>
             </td>
             <td class="text-center">
-              <i class="fas fa-lock text-muted"></i>
+              <!-- <i class="fas fa-lock text-muted"></i> -->
+              <i class="bi bi-lock-fill text-muted"></i>
             </td>
           </tr>
@@ -134,16 +146,30 @@
           <tr class="clickable-row " data-href="/topic/{{t['ref']}}">
             <th scope="row" class="text-primary text-center">
               {% if t['type']=='chapter' %}
-                <i class="fas fa-flag-checkered"></i>&nbsp;
+                <span class="text-nowrap" data-toggle="tooltip" data-placement="bottom" title="Fim do capítulo">
+                <!-- <i class="fas fa-flag-checkered"></i>&nbsp; -->
+                <i class="bi bi-flag-fill"></i>&nbsp;
+                </span>
               {% elif t['type']=='learn' %}
-                <i class="fas fa-book"></i>&nbsp;
+                <span class="text-nowrap" data-toggle="tooltip" data-placement="bottom" title="Texto com matéria">
+                <!-- <i class="fas fa-book"></i>&nbsp; -->
+                <!-- <i class="bi bi-book-fill"></i>&nbsp; -->
+                <i class="bi bi-book"></i>&nbsp;
+                </span>
               {% else %}
-                <i class="fas fa-pencil-alt"></i>&nbsp;
+                <span class="text-nowrap" data-toggle="tooltip" data-placement="bottom" title="Exercícios">
+                <!-- <i class="fas fa-pencil-alt"></i>&nbsp; -->
+                <!-- <i class="bi bi-pencil-fill"></i>&nbsp; -->
+                <i class="bi bi-pencil"></i>&nbsp;
+                </span>
               {% end %}
             </th>
             <td class="text-primary">
               {% if t['ref'] not in course['goals'] %}
-                <i class="fas fa-puzzle-piece"></i>
+                <span class="text-nowrap" data-toggle="tooltip" data-placement="bottom" title="Pré-requisito para este curso">
+                <!-- <i class="fas fa-puzzle-piece"></i> -->
+                <i class="bi bi-puzzle-fill"></i>
+                </span>
               {% end %}
               {{ t['name'] }}
@@ -151,12 +177,16 @@
             <td class="text-center">
               {% if t['level'] < 0.01 %}
-                <i class="fas fa-lock-open text-success"></i>
+                <!-- <i class="fas fa-lock-open text-success"></i> -->
+                <i class="bi bi-unlock-fill text-success"></i>
+
               {% elif t['type']=='chapter' %}
-                <h5><i class="fas fa-award text-warning"></i></h5>
+                <!-- <h5><i class="fas fa-award text-warning"></i></h5> -->
+                <i class="bi bi-award-fill"></i>
+
               {% else %}
-                <span class="text-nowrap text-warning" data-toggle="tooltip" data-placement="bottom" title="{{round(t['level']*5, 2)}}">
-                  {{int(t['level']*5+0.25)*'<i class="fas fa-star"></i>'}}{% if int(t['level']*5+0.25) < 5 %}{{'<i class="fas fa-star-half-alt"></i>' if 0.25 <= t['level']*5-int(t['level']*5) < 0.75 else '<i class="far fa-star"></i>'}}{% end %}{{(4-int(t['level']*5+0.25))*'<i class="far fa-star"></i>' }}
+                <span class="text-nowrap text-warning" data-toggle="tooltip" data-placement="bottom" title="{{round(t['level']*5, 3)}}">
+                  {{ int(t['level']*5+0.25)*'<i class="bi bi-star-fill"></i>' }}{% if int(t['level']*5+0.25) < 5 %}{{'<i class="bi bi-star-half"></i>' if 0.25 <= t['level']*5-int(t['level']*5) < 0.75 else '<i class="bi bi-star"></i>'}}{% end %}{{ (4-int(t['level']*5+0.25))*'<i class="bi bi-star"></i>' }}
                 </span>
               {% end %} <!-- if -->
             </td>
@@ -10,9 +10,10 @@
   <!-- bootstrap -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
   <!-- font-awesome -->
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
+  <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"> -->
   <link rel="stylesheet" href="{{static_url('css/maintopics.css')}}">
   <script defer src="{{static_url('js/maintopics.js')}}"></script>
@@ -37,7 +38,8 @@
       <ul class="navbar-nav ms-auto">
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-            <i class="fas fa-user-graduate" aria-hidden="true"></i>
+            <!-- <i class="fas fa-user-graduate" aria-hidden="true"></i> -->
+            <i class="bi bi-person-circle"></i>
             &nbsp;
             <span id="name">{{ escape(name) }}</span>
             <span class="caret"></span>
@@ -60,7 +62,7 @@
   <thead>
     <tr>
       <th scope="col" class="text-center">Posição</th>
-      <th scope="col">Aluno</th>
+      <th scope="col">Nome</th>
       <th scope="col">Progresso</th>
     </tr>
   </thead>
@@ -69,7 +71,9 @@
     <tr class="{{ 'table-secondary' if r[0] == uid else '' }}">
       <td class="text-center"> <!-- rank -->
         <strong>
-          {{ '<i class="fas fa-crown fa-lg text-warning"></i>' if i==0 else i+1 }}
+          <!-- {{ '<i class="fas fa-crown fa-lg text-warning"></i>' if i==0 else i+1 }} -->
+          <!-- {{ '<h3><i class="bi bi-mortarboard-fill text-warning"></i></h3>' if i==0 else i+1 }} -->
+          {{ '<h3><i class="bi bi-trophy-fill text-warning"></i></h3>' if i==0 else i+1 }}
         </strong>
       </td>
       <td> <!-- student name -->
@@ -12,9 +12,10 @@
     <!-- bootstrap -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
     <!-- font-awesome -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
+    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" /> -->
     <!-- mathjax -->
     <script>
@@ -15,6 +15,7 @@ courses:
     description: |
       Adição, multiplicação e números primos.
     goals:
+      - math
       - math/addition
       - math/multiplication
       - math/prime-numbers
@@ -25,7 +25,23 @@ topics:
     deps:
       - math/addition
+  math/learn-prime-numbers:
+    name: O que são números primos?
+    type: learn
+    file: learn.yaml
+    deps:
+      - math/multiplication
+
   math/prime-numbers:
     name: Números primos
     deps:
+      - math/learn-prime-numbers
+
+  math:
+    name: Números e operações aritméticas
+    type: chapter
+    deps:
+      - math/addition
       - math/multiplication
+      - math/learn-prime-numbers
+      - math/prime-numbers
	@@ -25,7 +25,23 @@ topics:		@@ -25,7 +25,23 @@ topics:
25	deps:	25	deps:
26	- math/addition	26	- math/addition
27		27
		28	+ math/learn-prime-numbers:
		29	+ name: O que são números primos?
		30	+ type: learn
		31	+ file: learn.yaml
		32	+ deps:
		33	+ - math/multiplication
		34	+
28	math/prime-numbers:	35	math/prime-numbers:
29	name: Números primos	36	name: Números primos
30	deps:	37	deps:
		38	+ - math/learn-prime-numbers
		39	+
		40	+ math:
		41	+ name: Números e operações aritméticas
		42	+ type: chapter
		43	+ deps:
		44	+ - math/addition
31	- math/multiplication	45	- math/multiplication
		46	+ - math/learn-prime-numbers
		47	+ - math/prime-numbers