From 4aee2d63f578a0bc619b40c7c81b46b3f4b749c6 Mon Sep 17 00:00:00 2001
From: Miguel Barão <mjsb@uevora.pt>
Date: Thu, 14 Apr 2022 21:35:22 +0100
Subject: [PATCH] update html templates to latest bootstrap5 replace fontawesome by bootstrap-icons cosmetic changes

---
 perguntations/static/fontawesome-free                 |   1 -
 perguntations/templates/grade.html                    |  63 +++++++++++++++++++++++++++++++++++++++++++++++++--------------
 perguntations/templates/question.html                 |   4 ++--
 perguntations/templates/review-question-checkbox.html |  18 +++++++++---------
 perguntations/templates/review-question-radio.html    |   6 +++++-
 perguntations/templates/review-question.html          |  24 ++++++++++++------------
 perguntations/templates/review.html                   | 109 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------------------------------
 perguntations/templates/test.html                     |  56 +++++++++++++++++++++++++++-----------------------------
 8 files changed, 160 insertions(+), 121 deletions(-)
 delete mode 120000 perguntations/static/fontawesome-free

diff --git a/perguntations/static/fontawesome-free b/perguntations/static/fontawesome-free
deleted file mode 120000
index 50141d7..0000000
--- a/perguntations/static/fontawesome-free
+++ /dev/null
@@ -1 +0,0 @@
-../../node_modules/@fortawesome/fontawesome-free/
\ No newline at end of file
diff --git a/perguntations/templates/grade.html b/perguntations/templates/grade.html
index 19fd034..59e283f 100644
--- a/perguntations/templates/grade.html
+++ b/perguntations/templates/grade.html
@@ -33,13 +33,14 @@
 
       <ul class="nav navbar-nav mx-auto">
         <li class="nav-item">
-          <span class="navbar-text">{{ t['title'] }}</span>
+          <span class="navbar-text">Resultado</span>
         </li>
       </ul>
 
       <ul class="nav navbar-nav">
         <li class="nav-item">
           <span class="navbar-text">
+            <i class="bi bi-person-fill"></i>
             <span id="name">{{ escape(name) }}</span>
             (<span id="number">{{ escape(uid) }}</span>)
           </span>
@@ -49,22 +50,56 @@
   </div>
 </nav>
 <!-- ================================================================== -->
-  <div class="container">
-    <div class="bg-light p-3">
+<div class="container">
+  <div class="card">
+    <h5 class="card-header">{{ t['title'] }}</h5>
+    <div class="card-body">
+      <div class="row">
+        <label for="nome" class="col-3">Nome:</label>
+        <div class="col-9" id="nome">{{ escape(name) }}</div>
+      </div>
+      <div class="row">
+        <label for="numero" class="col-3">Número:</label>
+        <div class="col-9" id="numero">{{ escape(uid) }}</div>
+      </div>
+      <div class="row">
+        <label for="duracao" class="col-3">Duração:</label>
+        <div class="col-9" id="duracao">{{ str(t['duration'])+' minutos' if t['duration'] > 0 else 'sem limite de tempo' }}</div>
+      </div>
+      <div class="row">
+        <label for="submissao" class="col-3">Submissão:</label>
+        <div class="col-9" id="submissao">{{ 'automática no fim do tempo' if t['autosubmit'] else 'manual' }}</div>
+      </div>
+      <div class="row">
+        <label for="start_time" class="col-3">Início:</label>
+        <div class="col-9 font-monospace" id="start_time">{{ t['start_time'] }}</div>
+      </div>
+      <div class="row">
+        <label for="finish_time" class="col-3">Fim:</label>
+        <div class="col-9 font-monospace" id="finish_time">{{ t['finish_time'] }}</div>
+      </div>
+    </div>
+    <div class="card-footer">
       {% if t['state'] == 'CORRECTED' %}
-        <h3>Nota: <strong>{{ f'{round(t["grade"], 3)}' }}</strong> valores</h3>
+        <div class="row">
+          <label for="nota" class="col-3">Nota:</label>
+          <div class="col-9" id="nota">
+            <strong>{{ f'{round(t["grade"], 3)}' }}</strong> valores
+          </div>
+        </div>
       {% elif t['state'] == 'SUBMITTED' %}
-        <h3>A prova foi submetida com sucesso. Vai ser corrigida mais tarde.</h3>
+        A prova foi submetida com sucesso. Vai ser corrigida mais tarde.
       {% elif t['state'] == 'QUIT' %}
-        <h3>Foi registada a sua desistência da prova.</h3>
+        Foi registada a sua desistência da prova.
       {% end %}
-
-      <p>
-        <a href="/logout" class="btn btn-primary btn-lg active" role="button">
-          Sair
-        </a>
-      </p>
-    </div> <!-- panel -->
-  </div> <!-- container -->
+    </div>
+  </div> <!-- card -->
+  <div class="d-grid gap-2">
+    <a href="/logout" class="btn btn-primary btn-lg active" role="button">
+      Sair do teste
+    </a>
+    <!-- <button class="btn btn-primary" type="button">Button</button> -->
+  </div>
+</div> <!-- container -->
 </body>
 </html>
diff --git a/perguntations/templates/question.html b/perguntations/templates/question.html
index 3f635fc..a927030 100644
--- a/perguntations/templates/question.html
+++ b/perguntations/templates/question.html
@@ -4,7 +4,7 @@
 <div class="card border-dark">
   <h5 class="card-header text-white bg-dark">
     {{ q['number'] }}.  {{ q['title'] }}
-    <div class="float-right">
+    <div class="float-end">
       <small>Classificar&nbsp;</small>
       <input type="checkbox" class="question_disabler" data-size="mini" name="answered-{{i}}" id="answered-{{i}}" checked="">
     </div>
@@ -16,7 +16,7 @@
 
     {% block answer %}{% end %}
 
-    <p class="text-right">
+    <p class="text-end">
       <small>
         {% if q['type'] == 'radio' %}
           (Cotação: {{ -round(q['points']/(len(q['options'])-1), 2) }} a {{ round(q['points'], 2) }} pontos)
diff --git a/perguntations/templates/review-question-checkbox.html b/perguntations/templates/review-question-checkbox.html
index 61886c0..e2ec641 100644
--- a/perguntations/templates/review-question-checkbox.html
+++ b/perguntations/templates/review-question-checkbox.html
@@ -15,13 +15,13 @@
           {{ md(opt) }}
         </div>
         <div class="ms-auto p-2">
-          <div class="text-end">
+          <h3>
             {% if q['correct'][n] > 0 %}
-                <i class="bi bi-check-lg text-success"></i>
+              <i class="bi bi-check-lg text-success"></i>
             {% else %}
-                <i class="bi bi-x-lg text-danger"></i>
+              <i class="bi bi-x-lg text-danger"></i>
             {% end %}
-          </div>
+          </h3>
         </div>
 
       {% else %}
@@ -32,13 +32,13 @@
             {{ md(opt) }}
         </div>
         <div class="ms-auto p-2">
-          <div class="text-end">
-            {% if q['correct'][n] > 0 %}
+          <h3>
+              {% if q['correct'][n] > 0 %}
               <i class="bi bi-x-lg text-danger"></i>
-            {% else %}
+              {% else %}
               <i class="bi bi-check-lg text-success"></i>
-            {% end %}
-          </div>
+              {% end %}
+          </h3>
         </div>
       {% end %}
       </div>
diff --git a/perguntations/templates/review-question-radio.html b/perguntations/templates/review-question-radio.html
index f7f080c..42ad8ff 100644
--- a/perguntations/templates/review-question-radio.html
+++ b/perguntations/templates/review-question-radio.html
@@ -9,17 +9,19 @@
             <div class="d-flex flex-row">
             {% if q['answer'] is not None and str(n)==q['answer'] %}
                 <div class="p-2">
-                    <i class="bi bi-record-circle"></i>
+                    <i class="bi bi-record-circle-fill"></i>
                 </div>
                 <div class="p-2">
                     {{ md(opt) }}
                 </div>
                 <div class="ms-auto p-2">
+                    <h3>
                     {% if q['correct'][n] > 0 %}
                       <i class="bi bi-check-lg text-success"></i>
                     {% else %}
                       <i class="bi bi-x-lg text-danger"></i>
                     {% end %}
+                    </h3>
                 </div>
 
             {% else %}
@@ -31,7 +33,9 @@
                 </div>
                 <div class="ms-auto p-2">
                     {% if q['correct'][n] > 0 %}
+                    <h3>
                         <i class="bi bi-arrow-left text-info"></i>
+                    </h3>
                     {% end %}
                 </div>
             {% end %}
diff --git a/perguntations/templates/review-question.html b/perguntations/templates/review-question.html
index 938e610..7395e15 100644
--- a/perguntations/templates/review-question.html
+++ b/perguntations/templates/review-question.html
@@ -3,12 +3,12 @@
 {% block question %}
   {% if q['answer'] is not None %}
 
-    <div class="card border-dark mb-3">
-      <h5 class="card-header text-white bg-dark">
+    <div class="card border-dark">
+      <h5 class="card-header text-light bg-dark">
         {{ q['number'] }}.  {{ q['title'] }}
         <div class="float-end">
-          <small>Classificada&nbsp;</small>
-          <i class="bi bi-toggle2-on"></i>
+          <small>Classificar&nbsp;</small>
+          <i class="bi bi-check-square"></i>
         </div>
       </h5> <!-- card-header -->
 
@@ -19,7 +19,7 @@
 
         {% block answer %}{% end %}
 
-        <p class="text-right">
+        <p class="text-end">
           <small>
             {% if q['type'] == 'radio' %}
               (Cotação: {{ -round(q['points']/(len(q['options'])-1), 2) }} a {{ round(q['points'], 2) }} pontos)
@@ -35,7 +35,7 @@
       {% if 'grade' in q %}
         <div class="card-footer">
           {% if q['grade'] > 0.999 %}
-            <h1 class="text-success"><i class="bi bi-hand-thumbs-up"></i></h1>
+            <h1 class="text-success"><i class="bi bi-hand-thumbs-up-fill"></i></h1>
             <p class="text-success">
               {{ round(q['grade'] * q['points'], 2) }} pontos
             </p>
@@ -73,12 +73,12 @@
 
   {% else %}
 
-    <div class="card border-secondary mb-3">
-      <h5 class="card-header text-white bg-secondary">
+    <div class="card border-secondary">
+      <h5 class="card-header text-secondary bg-light">
         {{ q['number'] }}.  {{ q['title'] }}
         <div class="float-end">
-          <small>Não classificada</small>
-          <i class="bi bi-toggle2-off"></i>
+          <small>Classificar</small>
+          <i class="bi bi-square"></i>
         </div>
       </h5> <!-- card-header -->
 
@@ -89,14 +89,14 @@
 
         {% block answer %}{% end %}
 
-        <p class="text-right">
+        <p class="text-end">
           <small>
             (Cotação: {{ round(q['points'], 2) }})
           </small>
         </p>
       </div> <!-- card-body -->
 
-      <div class="card-footer">
+      <div class="card-footer text-secondary">
         {{ md(q['comments']) }}
         {% if q['solution'] %}
           {{ md('**Solução:** \n\n' + q['solution']) }}
diff --git a/perguntations/templates/review.html b/perguntations/templates/review.html
index d47c099..fedae9f 100644
--- a/perguntations/templates/review.html
+++ b/perguntations/templates/review.html
@@ -1,10 +1,17 @@
 <!DOCTYPE html>
 <html lang="pt-PT">
 <head>
-  <title>Teste</title>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+  <title>Revisão de prova</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" href="/static/favicon.ico">
+
+<!-- Styles -->
+  <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
+  <link rel="stylesheet" type="text/css" href="/static/bootstrap-icons/font/bootstrap-icons.css">
+  <link rel="stylesheet" type="text/css" href="/static/css/github.css">  <!-- syntax highlight -->
+  <link rel="stylesheet" type="text/css" href="/static/css/test.css">
+
 <!-- MathJax3 -->
   <script>
   MathJax = {
@@ -16,15 +23,7 @@
     }
   };
   </script>
-  <script type="text/javascript" id="MathJax-script" async
-    src="/static/mathjax/es5/tex-svg.js">
-  </script>
-
-<!-- Styles -->
-  <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
-  <link rel="stylesheet" type="text/css" href="/static/bootstrap-icons/font/bootstrap-icons.css">
-  <link rel="stylesheet" type="text/css" href="/static/css/github.css">  <!-- syntax highlight -->
-  <link rel="stylesheet" type="text/css" href="/static/css/test.css">
+  <script async type="text/javascript" id="MathJax-script" src="/static/mathjax/es5/tex-svg.js"></script>
 
 <!-- Scripts -->
   <script src="/static/jquery/jquery.min.js"></script>
@@ -56,6 +55,7 @@
       <ul class="nav navbar-nav">
         <li class="nav-item">
           <span class="navbar-text">
+            <i class="bi bi-person-fill"></i>
             <span id="name">{{ escape(name) }}</span>
             (<span id="number">{{ escape(uid) }}</span>)
           </span>
@@ -67,50 +67,53 @@
 
 <!-- ===================================================================== -->
 <div class="container">
-  <div class="bg-light p-3">
-    <h1 class="display-5">{{ t['title'] }}</h1>
-    <hr>
-    <div class="row">
-      <label for="nome" class="col-sm-2">Nome:</label>
-      <div class="col-sm-9" id="nome">{{ escape(name) }}</div>
-    </div>
-    <div class="row">
-      <label for="numero" class="col-sm-2">Número:</label>
-      <div class="col-sm-9" id="numero">{{ escape(uid) }}</div>
-    </div>
-    <div class="row">
-      <label for="duracao" class="col-sm-2">Duração:</label>
-      <div class="col-sm-10" id="duracao">
-        {{ str(t.get('duration', 0)) + ' minutos' if t.get('duration', 0) > 0 else '+'+chr(8734) }}
+  <div class="card">
+    <h5 class="card-header">{{ t['title'] }}</h5>
+    <div class="card-body">
+      <div class="row">
+        <label for="nome" class="col-3">Nome:</label>
+        <div class="col-9" id="nome">{{ escape(name) }}</div>
       </div>
-    </div>
-    <div class="row">
-      <label for="inicio" class="col-sm-2">Início:</label>
-      <div class="col-sm-10" id="inicio">{{t['start_time'][:19]}}</div>
-    </div>
-    <div class="row">
-      <label for="fim" class="col-sm-2">Fim:</label>
-      <div class="col-sm-10" id="fim">{{t['finish_time'][:19]}}</div>
-    </div>
-    <div class="row">
-      <label for="nota" class="col-sm-2">Nota:</label>
-      <div class="col-sm-10" id="nota">
-        {% if t['state'] == 'CORRECTED' %}
-          <strong>{{ round(t['grade'], 2) }}</strong> valores
-        {% elif t['state'] == 'SUBMITTED' %}
-          (não corrigido)
-        {% elif t['state'] == 'QUIT' %}
-          (DESISTIU)
-        {% end %}
+      <div class="row">
+        <label for="numero" class="col-3">Número:</label>
+        <div class="col-9" id="numero">{{ escape(uid) }}</div>
       </div>
-    </div>
-    {% if t['comment'] != '' %}
       <div class="row">
-        <label for="comentario" class="col-sm-2">Comentário:</label>
-        <div class="col-sm-10" id="comentario">{{ t['comment'] }}</div>
+        <label for="duracao" class="col-3">Duração:</label>
+        <div class="col-9" id="duracao">
+          {{ str(t.get('duration', 0)) + ' minutos' if t.get('duration', 0) > 0 else 'sem limite' }}
+        </div>
       </div>
-    {% end %}
-  </div>
+      <div class="row">
+        <label for="inicio" class="col-3">Início:</label>
+        <div class="col-9" id="inicio">{{t['start_time'][:19]}}</div>
+      </div>
+      <div class="row">
+        <label for="fim" class="col-3">Fim:</label>
+        <div class="col-9" id="fim">{{t['finish_time'][:19]}}</div>
+      </div>
+    </div> <!-- card-body -->
+    <div class="card-footer">
+      <div class="row">
+        <label for="nota" class="col-3">Nota:</label>
+        <div class="col-9" id="nota">
+          {% if t['state'] == 'CORRECTED' %}
+            <strong>{{ round(t['grade'], 2) }}</strong> valores
+          {% elif t['state'] == 'SUBMITTED' %}
+            (não corrigido)
+          {% elif t['state'] == 'QUIT' %}
+            (DESISTIU)
+          {% end %}
+        </div>
+      </div>
+      {% if t['comment'] != '' %}
+        <div class="row">
+          <label for="comentario" class="col-3">Comentário:</label>
+          <div class="col-9" id="comentario">{{ t['comment'] }}</div>
+        </div>
+      {% end %}
+    </div> <!-- card-footer -->
+  </div> <!-- card -->
 
   {% for i, q in enumerate(t['questions']) %}
     {% module Template(templ[q['type']], i=i, q=q, md=md(q['ref']), t=t, debug=debug) %}
diff --git a/perguntations/templates/test.html b/perguntations/templates/test.html
index 1e4c0da..47a3693 100644
--- a/perguntations/templates/test.html
+++ b/perguntations/templates/test.html
@@ -8,6 +8,7 @@
 
 <!-- Styles -->
   <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
+  <link rel="stylesheet" type="text/css" href="/static/bootstrap-icons/font/bootstrap-icons.css">
   <link rel="stylesheet" type="text/css" href="/static/codemirror/lib/codemirror.css">
   <link rel="stylesheet" type="text/css" href="/static/codemirror/theme/darcula.css">
   <link rel="stylesheet" type="text/css" href="/static/css/github.css">  <!-- syntax highlight -->
@@ -61,16 +62,15 @@
       </ul>
 
       <ul class="nav navbar-nav mx-auto">
-        <li class="nav-item"><h5>
-          <span class="navbar-text" id="clock"> --:-- </span>
-          </h5>
-
+        <li class="nav-item">
+          <h5> <span class="navbar-text" id="clock"> --:-- </span> </h5>
         </li>
       </ul>
 
       <ul class="nav navbar-nav">
         <li class="nav-item">
           <span class="navbar-text">
+            <i class="bi bi-person-fill"></i>
             <span id="name">{{ escape(name) }}</span>
             (<span id="number">{{ escape(uid) }}</span>)
           </span>
@@ -82,25 +82,25 @@
 
 <!-- ===================================================================== -->
 <div class="container">
-
-  <div class="bg-light p-3">
-    <h3 class="display-5">{{ t['title'] }}</h3>
-    <hr>
-    <div class="row">
-      <label for="nome" class="col-sm-3">Nome:</label>
-      <div class="col-sm-9" id="nome">{{ escape(name) }}</div>
-    </div>
-    <div class="row">
-      <label for="numero" class="col-sm-3">Número:</label>
-      <div class="col-sm-9" id="numero">{{ escape(uid) }}</div>
-    </div>
-    <div class="row">
-      <label for="duracao" class="col-sm-3">Duração:</label>
-      <div class="col-sm-9" id="duracao">{{ str(t['duration'])+' minutos' if t['duration'] > 0 else 'sem limite de tempo' }}</div>
-    </div>
-    <div class="row">
-      <label for="submissao" class="col-sm-3">Submissão:</label>
-      <div class="col-sm-9" id="submissao">{{ 'automática no fim do tempo' if t['autosubmit'] else 'manual' }}</div>
+  <div class="card">
+    <h5 class="card-header">{{ t['title'] }}</h5>
+    <div class="card-body">
+      <div class="row">
+        <label for="nome" class="col-3">Nome:</label>
+        <div class="col-9" id="nome">{{ escape(name) }}</div>
+      </div>
+      <div class="row">
+        <label for="numero" class="col-3">Número:</label>
+        <div class="col-9" id="numero">{{ escape(uid) }}</div>
+      </div>
+      <div class="row">
+        <label for="duracao" class="col-3">Duração:</label>
+        <div class="col-9" id="duracao">{{ str(t['duration'])+' minutos' if t['duration'] > 0 else 'sem limite' }}</div>
+      </div>
+      <div class="row">
+        <label for="submissao" class="col-3">Submissão:</label>
+        <div class="col-9" id="submissao">{{ 'automática no fim do tempo' if t['autosubmit'] else 'manual' }}</div>
+      </div>
     </div>
   </div>
 
@@ -111,12 +111,10 @@
       {% module Template(templ[q['type']], i=i, q=q, md=md(q['ref']), debug=debug) %}
     {% end %}
 
-    <div class="form-row">
-      <div class="col-12">
-        <button type="button" class="btn btn-success btn-lg btn-block" data-bs-toggle="modal" data-bs-target="#confirmar" id="form-button-submit">
-          Submeter teste
-        </button>
-      </div>
+    <div class="d-grid gap-2">
+      <button type="button" class="btn btn-success btn-lg btn-block" data-bs-toggle="modal" data-bs-target="#confirmar" id="form-button-submit">
+        Submeter teste
+      </button>
     </div>
   </form>
   <hr>
--
libgit2 0.21.2