Change style of stall list

canteeneo/templates/stalls.html

@@ -3,32 +3,40 @@
 {% block title %}Dashboard{% endblock %}
 
 {% block content %}
-<div class="dashboard-container">
-    <div class="dashboard-row" style="justify-content: space-around; align-items: baseline;">
-        <span style="font-size: 32pt; flex-grow: 2;">Hello, {{ owner.name }}</span>
-        <a href="{{url_for('new_stall')}}"><button class="link-button" style="flex-grow: 1;">Register a Stall</button></a>
-        <a href="{{url_for('logout')}}"><button class="link-button" style="flex-grow: 1;">Logout</button></a>
+<div class="row">
+    <div class="col-sm-4 col-sm-offset-2">
+        <h1>Hello, {{ owner.name }}</h1>
     </div>
-    <div class="dashboard-row">
-        <div class="list">
-        {% if stalls|length > 0 %}
-            {% for stall in stalls %}
-                <div class="list-item" style="width: 100%;">
-                    <div class="list-info">
-                        <span class="list-name">{{stall.name}}</span>
-                    </div>
-                    <div class="dashboard-row">
-                        <a href="{{ url_for('view_stall', stall_id=stall.id) }}"><button class="list-button">Manage Stall</button></a>
-                        <form action="{{ url_for('delete_stall', stall_id=stall.id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete {{stall.name}}?');">
-                            <button type="submit" class="list-button button-delete">Delete</button>
-                        </form>
-                    </div>
-                </div>
-            {% endfor %}
-        {% else %}
-            <p>You have no stalls registered!</p>
-        {% endif %}
-        </div>        
+    <div class="col-sm-3 col-sm-offset-1">
+        <a class="btn btn-primary btn-lg" href="{{url_for('new_stall')}}">Register a Stall</a>
+    </div>
+    <div class="col-sm-2">
+        <a class="btn btn-primary btn-lg" href="{{url_for('logout')}}">Logout</a>
+    </div>    
+</div>
+<div class="row">
+    <div class="col-sm-8 col-sm-offset-2">
+    {% if stalls|length > 0 %}
+        <table class="table">
+        {% for stall in stalls %}
+            <tr>
+                <td>
+                    <h1>{{ stall.name }}</h1>
+                </td>
+                <td>
+                    <a class="btn btn-default btn-lg" href="{{ url_for('view_stall', stall_id=stall.id) }}">Manage Stall</a>
+                </td>
+                <td>
+                    <form action="{{ url_for('delete_stall', stall_id=stall.id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete {{stall.name}}?');">
+                        <button class="btn btn-danger btn-lg" type="submit" class="list-button button-delete">Delete</button>
+                    </form>
+                </td>
+            </tr>
+        {% endfor %}
+        </table>
+    {% else %}
+        <p>You have no stalls registered!</p>
+    {% endif %}
     </div>
 </div>
 {% endblock %}
\ No newline at end of file