- improved looks of navbar, checkboxes and radio option list

Miguel Barão
1 parent fd2f53ea
Showing 4 changed files with 26 additions and 15 deletions Show diff stats
templates/maintopics.html
templates/question-checkbox.html
templates/question-radio.html
templates/topic.html
@@ -28,9 +28,9 @@
 <!-- ===================================================================== -->
 <body>
 <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-primary">
-  <a class="navbar-brand" href="#">
-    <img src="/static/logo_horizontal.png" height="30" alt="">
-  </a>
+  <!-- <a class="navbar-brand" href="#"> -->
+    <img src="/static/logo_horizontal.png" class="navbar-brand" height="48" alt="UEvora">
+  <!-- </a> -->
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
@@ -5,10 +5,16 @@
 <fieldset data-role="controlgroup">
     <div class="list-group">
     {% for n,opt in enumerate(question['options']) %}
-            <a class="list-group-item">
-                <input type="checkbox" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
-                <label for="{{ n }}">{{ md(opt) }}</label>
-            </a>
+        <a class="list-group-item">
+            <div class="d-flex flex-row align-items-stretch">
+                <div class="p-1">
+                    <input type="checkbox" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
+                </div>
+                <div class="p-1">
+                    <label for="{{ n }}">{{ md(opt) }}</label>
+                </div>
+            </div>
+        </a>
     {% end %}
     </div>
 </fieldset>
@@ -5,10 +5,16 @@
 <fieldset data-role="controlgroup">
     <div class="list-group">
     {% for n,opt in enumerate(question['options']) %}
-            <a class="list-group-item">
-                <input type="radio" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
-                <label for="{{ n }}">{{ md(opt) }}</label>
-            </a>
+        <a class="list-group-item">
+            <div class="d-flex flex-row">
+                <div class="p-1">
+                    <input type="radio" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
+                </div>
+                <div class="p-1">
+                    <label for="{{ n }}">{{ md(opt) }}</label>
+                </div>
+            </div>
+        </a>
     {% end %}
     </div>
 </fieldset>
@@ -28,7 +28,6 @@
     <!-- <link rel="stylesheet" href="/static/css/learn.css"> -->
     <style>
-        /* progress bars have height of 4 pixels */
         .progress {
             height: 20px;
             border-radius: 0px;
@@ -59,9 +58,9 @@
 <!-- Navbar -->
 <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-primary">
-    <a class="navbar-brand" href="#">
-    <img src="/static/logo_horizontal.png" height="30" alt="">
-    </a>
+    <!-- <a class="navbar-brand" href="#"> -->
+    <img src="/static/logo_horizontal.png" class="navbar-brand" height="48" alt="UEvora">
+    <!-- </a> -->
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
     </button>