Styling for tool pages

web/app/templates/create.html

@@ -13,26 +13,37 @@
               </select>
             </div>
             <div id="resource_type_tool" class="resource_type_input" style="display: none;">
-            <div class="mb-3 mt-3">
-                <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="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">Tool description</label>
-                <textarea class="form-control" rows="4" type="text" name="description" placeholder="Tool description" autofocus=""></textarea>
-            </div>
+                <div class="mb-3 mt-3">
+                    <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" style="display: none;">
-            <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="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 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>
+            <div id="resource_type_practice" class="resource_type_input" style="display: none;">
+                <div class="mb-3 mt-3">
+                    <label for="name">Practice name</label>
+                    <input class="form-control" type="text" name="name" placeholder="Practice name" autofocus="">
+                </div>
+
+                <div class="mb-3 mt-3">
+                    <label for="description">Practice description</label>
+                    <textarea class="form-control" rows="4" type="text" name="description" placeholder="Practice description" autofocus=""></textarea>
+                </div>
             </div>
 
             <button type="submit" class="btn btn-primary">Submit</button>

web/app/templates/edit.html

@@ -4,7 +4,7 @@
 <h1>{% block title %} Edit "{{ tool['name'] }}" {% endblock %}</h1>
 
 <form method="post">
-    <div class="form-group">
+    <div class="mb-3 mt-3">
         <label for="name">Name</label>
         <input type="text" name="name" placeholder="Tool name"
                class="form-control"
@@ -12,12 +12,12 @@
         </input>
     </div>
 
-    <div class="form-group">
+    <div class="mb-3 mt-3">
         <label for="description">Description</label>
         <textarea name="description" placeholder="Tool description"
                   class="form-control">{{ request.form['description'] or tool['description'] }}</textarea>
     </div>
-    <div class="form-group">
+    <div class="mb-3 mt-3">
         <button type="submit" class="btn btn-primary">Submit</button>
     </div>
 </form>

web/app/templates/tool.html

@@ -1,7 +1,33 @@
 {% extends 'base.html' %}
 
 {% block content %}
-    <h2>{% block title %} {{ tool['name'] }} {% endblock %}</h2>
-    <span class="badge bg-secondary">{{ tool['created'] }}</span>
-    <p>{{ tool['description'] }}</p>
+    <div class="row">
+        <div class="col">
+            <h1 class="text-center">{% block title %} {{ tool['name'] }} {% endblock %}</h1>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col">
+            <table class="table table-hover">
+                <tbody>
+                    <tr>
+                        <th>
+                            Created:
+                        </th>
+                        <td>
+                            {{ tool['created'] }}
+                        </td>
+                    </tr>
+                    <tr>
+                      <th>
+                          Description:
+                      </th>
+                      <td>
+                          {{ tool['description'] }}
+                      </td>
+                  </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
 {% endblock %}

web/app/templates/tools.html

@@ -1,17 +1,37 @@
 {% extends 'base.html' %}
 
 {% block content %}
-    <h1>{% block title %} Tools {% endblock %}</h1>
+    <div class="row">
+        <div class="col-12 text-center">
+            <h1>{% block title %} Tools {% endblock %}</h1>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12 text-center">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget viverra magna. Nam in ante ultricies purus feugiat vestibulum et ac erat. Donec in sagittis ante. Maecenas non mauris et eros commodo fringilla. Integer accumsan ullamcorper diam, non rhoncus tellus molestie ut. Maecenas finibus pretium dolor ac sagittis.
+            </p>
+        </div>
+    </div>
+    <div class="row">
     {% for tool in tools %}
-        <a href="{{ url_for('tool.show_tool', tool_id=tool['id']) }}">
-            <h2>{{ tool['name'] }}</h2>
-        </a>
-        <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>
-        </a>
-        {% endif %}
-        <hr>
+        <div class="col-md-4 col-sm-6 py-3">
+        <div class="card">
+            <div class="card-header">
+                <a href="{{ url_for('tool.show_tool', tool_id=tool['id']) }}">
+                    <h2 class="card-title">{{ tool['name'] }}</h2>
+                </a>
+            </div>
+            <div class="card-body">
+                <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>
+                </a>
+                {% endif %}
+            </div>
+        </div>
+        </div>
     {% endfor %}
+    </div>
 {% endblock %}