Form styling

web/app/templates/base.html

@@ -31,11 +31,11 @@
       <!-- Fixed navbar -->
       <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
         <div class="container-fluid">
-        <a class="navbar-brand" href="{{ url_for('main.index')}}">COPIM online toolkit</a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarNav">
+          <a class="navbar-brand" href="{{ url_for('main.index')}}">COPIM online toolkit</a>
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarNav">
             <ul class="navbar-nav">
             <li class="nav-item">
                 <a href="{{ url_for('main.index') }}" class="nav-link">
@@ -81,7 +81,7 @@
             </li>
             {% endif %}
             </ul>
-        </div>
+          </div>
         </div>
     </nav>
     </header>
@@ -102,9 +102,9 @@
     </main>
 
 
-    <footer class="footer mt-auto py-3 bg-light fixed-bottom">
+    <footer class="footer py-3 bg-light fixed-bottom">
         <div class="container">
-            <span class="text-muted">© {{ moment().format('YYYY') }} COPIM and licensed under a Creative Commons Attribution 4.0 International License (CC BY 4.0).</span>
+            <span class="text-muted">© {{ moment().format('YYYY') }} <a href="https://copim.ac.uk/">COPIM</a> and licensed under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License (CC BY 4.0)</a>.</span>
         </div>
     </footer>
     <!-- Optional JavaScript -->

web/app/templates/create.html

@@ -3,22 +3,22 @@
 {% block content %}
 <h1>{% block title %} Add a New Tool, Example, or Practice {% endblock %}</h1>
         <form method="POST" action="/create" id="resource">
-            <div class="form-group">
+            <div class="mb-3 mt-3">
               <label for="cars">Type</label>
-              <select id="type" name="type" form="resource">
+              <select class="form-select" id="type" name="type" form="resource">
                   <option value="tool">Tool</option>
                   <option value="example">Example</option>
                   <option value="practice">Practice</option>
               </select>
             </div>
-            <div class="form-group">
+            <div class="mb-3 mt-3">
                 <label for="name">Name</label>
                 <input class="form-control" type="text" name="name" placeholder="Name" autofocus="">
             </div>
 
-            <div class="form-group">
+            <div class="mb-3 mt-3">
                 <label for="description">Description</label>
-                <textarea class="form-control" type="text" name="description" placeholder="Description" autofocus=""></textarea>
+                <textarea class="form-control" rows="4" type="text" name="description" placeholder="Description" autofocus=""></textarea>
             </div>
 
             <button type="submit" class="btn btn-primary">Submit</button>

web/app/templates/login.html

@@ -3,14 +3,14 @@
 {% block content %}
 <h1>{% block title %} Login {% endblock %}</h1>
         <form method="POST" action="/login">
-            <div class="form-group">
+            <div class="mb-3 mt-3">
                 <input class="form-control" type="email" name="email" placeholder="Your Email" autofocus="">
             </div>
 
-            <div class="form-group">
+            <div class="mb-3 mt-3">
                 <input class="form-control" type="password" name="password" placeholder="Your Password">
             </div>
-            <div class="form-group">
+            <div class="mb-3 mt-3">
                 <label class="checkbox">
                     <input type="checkbox">
                     Remember me