Some styling changes particularly to footer

web/app/__init__.py

@@ -14,9 +14,10 @@ from flask_login import LoginManager
 from flask_moment import Moment
 import os
 
-# init SQLAlchemy so we can use it later in our models
+# initiate SQLAlchemy so we can use it later in our models
 db = SQLAlchemy()
 
+# initiate Moment for datetime functions
 moment = Moment()
 
 def create_app():
@@ -45,7 +46,7 @@ def create_app():
     from .auth import auth as auth_blueprint
     app.register_blueprint(auth_blueprint)
 
-    # blueprint for non-auth parts of app
+    # blueprint for main parts of app
     from .main import main as main_blueprint
     app.register_blueprint(main_blueprint)
 

web/app/static/styles/custom.css

@@ -11,6 +11,9 @@
 
 body {
   font-family: 'Lato', sans-serif !important;
+  min-height: 400px;
+  margin-bottom: 100px;
+  clear: both;
 }
 
 main > .container {

web/app/templates/base.html

@@ -103,17 +103,25 @@
       </div>
     </main>
 
-
+    <!-- Sticky footer-->
     <footer class="footer py-3 bg-light fixed-bottom">
         <div class="container">
             <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 -->
-    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <!-- JavaScript -->
+    <!-- jQuery first, then Popper JS, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
+    <script>
+        $("#resource_type").change(function() {
+            var resource_type = $(this).val();
+            $(".resource_type_input").hide("fast", function() {
+                $("#resource_type_" + resource_type).show("slow");
+            });
+        });
+    </script>
 </body>
 
 </html>

web/app/templates/create.html

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

web/app/templates/index.html

@@ -1,15 +1,15 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1 class="mt-5">
-  Vestibulum leo ligula
+<h1>
+  Heading
 </h1>
 <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius, justo a iaculis porta, ipsum nibh suscipit orci, at lobortis quam orci ac orci. In non consectetur ipsum. Suspendisse sodales tempor ullamcorper. Fusce placerat magna a nulla scelerisque, cursus accumsan quam tempus. Integer ac nulla sit amet nibh pulvinar porttitor non non leo. Nam a leo erat. Aliquam erat volutpat. Vestibulum quis diam sem.
 </p>
 
 <!-- Carousel -->
-<div id="tool_carousel" class="carousel slide" data-bs-ride="carousel">
+<div id="tool_carousel" class="carousel slide mt-5" data-bs-ride="carousel">
 
   <!-- Indicators/dots -->
   <div class="carousel-indicators">

web/app/templates/tool.html

@@ -2,6 +2,6 @@
 
 {% block content %}
     <h2>{% block title %} {{ tool['name'] }} {% endblock %}</h2>
-    <span class="badge bg-primary">{{ tool['created'] }}</span>
+    <span class="badge bg-secondary">{{ tool['created'] }}</span>
     <p>{{ tool['description'] }}</p>
 {% endblock %}

web/app/templates/tools.html

@@ -6,7 +6,7 @@
         <a href="{{ url_for('tool.show_tool', tool_id=tool['id']) }}">
             <h2>{{ tool['name'] }}</h2>
         </a>
-        <span class="badge bg-primary">{{ tool['created'] }}</span>
+        <span class="badge bg-secondary">{{ tool['created'] }}</span>
         {% if current_user.is_authenticated %}
         <a href="{{ url_for('tool.edit_tool', tool_id=tool['id']) }}">
             <span class="badge bg-warning">Edit</span>