Styled contact table

htmx_contact/main.py

@@ -45,3 +45,8 @@ def contacts():
         results = session.scalars(stmt).all()
 
     return render_template("contacts.html", contacts=results)
+
+
+@bp.route("/contacts/new", methods=["GET"])
+def new_contact():
+    return render_template("new_contact.html")

htmx_contact/static/css/main.css

@@ -1,3 +1,9 @@
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
 .toast-basic {
     padding: 12px 20px;
     color: #ffffff;
@@ -17,3 +23,97 @@
 .toastify.on {
     opacity: 1;
 }
+
+input[type=text] {
+    width: 300px;
+    padding: 10px 5px;
+    border-radius: .25rem;
+    border: 2px solid black;
+    font-size: 16px;
+}
+
+
+body {
+    font-family: 'Roboto', "Helvetica Neue";
+    font-size: 16px;
+}
+
+a {
+    text-decoration: none;
+}
+
+table a {
+    color: cadetblue;
+}
+
+table a:hover {
+    color: #5477f5;
+    transition: all 0.2s ease-in-out;
+    cursor: pointer;
+    border-bottom: 2.5px solid;
+}
+
+.button {
+    padding: 12px 15px;
+    color: #ffffff;
+    background-color: cadetblue;
+    border: none;
+    border-radius: .25rem;
+    font-size: 16px;
+}
+
+.button:hover {
+    background-color: #5477f5;
+    transition: all 0.2s ease-in-out;
+    color: #ffffff;
+}
+
+.button a:hover {
+    color: #ffffff;
+}
+
+.container {
+    width: 100%;
+    text-align: center;
+}
+
+.width-60 table {
+    margin-top: 30px;
+    width: 100%;
+    text-align: left;
+    margin-left: auto;
+    margin-right: auto;
+    border-collapse: collapse;
+    border-bottom: 2px solid black;
+}
+
+th,
+td {
+    padding: 5px;
+}
+
+table {
+    margin-bottom: 20px;
+}
+
+
+.width-60 {
+    width: 60%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.width-60 form {
+    text-align: left;
+}
+
+.width-60 table thead {
+    border-bottom: 2px solid black;
+}
+
+.form-container {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}

htmx_contact/templates/contacts.html

@@ -1,12 +1,16 @@
 {% extends 'base.html' %}
 
 {% block content %}
-    <form action="/contacts" method="get">
+<div class="container">
-        <label for="search">Search Term</label>
+    <div class="width-60">
-        <input id="search" type="text" name="q", value="{{ request.args.get('q') or '' }}">
+        <div class="form-container">
-        <input type="submit", value="Search">
+            <form action="/contacts" method="get">
-    </form>
+                <label for="search">Search Term</label>
-
+                <input id="search" type="text" name="q", value="{{ request.args.get('q') or '' }}">
+                <input class="button" type="submit", value="Search">
+            </form>
+            <span><a class="button" href="/contacts/new">Add Contact</a></span>
+        </div>
     <table>
         <thead>
             <th>First</th>
@@ -21,8 +25,13 @@
                 <td>{{ contact.last_name }}</td>
                 <td>{{ contact.phone }}</td>
                 <td>{{ contact.email }}</td>
+                <td><a href="/contacts/{{ contact.id }}/edit">Edit</a></td>
+                <td><a href="/contacts/{{ contact.id }}">View</a></td>
+
             </tr>
             {% endfor %}
         </tbody>
     </table>
+    </div>
+</div>
 {% endblock %}

htmx_contact/templates/new_contact.html

@@ -0,0 +1,5 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<h1>New Contact</h1>
+{% endblock %}