add paginator

templates/index.html.tera

@@ -22,7 +22,10 @@
 		<tbody>
 		{%- for card in cards %}
 			<tr>
-				<td><a href="/edit/{{card.id}}">Edit</a></td>
+				<td class="actions">
+					<a href="/edit/{{card.id}}">Edit</a>
+					<a href="/delete/{{card.id}}" onclick="return confirm('Confirm delete')">Delete</a>
+				</td>
 			{%- for field in card.fields %}
 				<td>
 				{%- if field.kind == "bool" -%}
@@ -40,4 +43,22 @@
 		{% endfor %}
 		</tbody>
 	</table>
+
+	<nav class="paginate">
+	{% if pages > 1 %}
+		{% if page > 0 %}
+		<a href="/?page={{ page - 1 }}">«</a>
+		{% else %}
+		<span class="disabled">«</span>
+		{% endif %}
+
+		<span class="num" onclick="location.href='/?page='+(prompt('Page')-1);">{{ page + 1 }} of {{ pages }}</span>
+
+		{% if page < pages - 1 %}
+		<a href="/?page={{ page + 1 }}">»</a>
+		{% else %}
+		<span class="disabled">»</span>
+		{% endif %}
+	{% endif %}
+	</nav>
 {%- endblock %}

templates/static/style.css

@@ -19,6 +19,16 @@ nav.top-nav {
 	border-bottom: 1px solid silver;
 }
 
+a {
+	color: gray;
+	text-decoration: none;
+}
+
+a:hover {
+	color: black;
+	text-decoration: underline;
+}
+
 nav.top-nav a {
 	display: inline-block;
 	padding: .75rem;
@@ -112,6 +122,10 @@ textarea:focus,
 	margin-top: 1rem;
 }
 
+.cards-table .actions {
+	font-size: 90%;
+}
+
 .cards-table td,
 .cards-table th {
 	padding: .5rem;
@@ -128,3 +142,43 @@ textarea:focus,
 .cards-table tbody tr:last-child td {
 	border-bottom: 2px solid silver;
 }
+
+.paginate {
+	margin: 1rem auto;
+	width: 300px;
+	text-align: center;
+	white-space: nowrap;
+}
+
+.paginate span,
+.paginate a {
+	padding: .5rem 1rem;
+	border-radius: .5rem;
+	border: 1px solid silver;
+	text-decoration: none;
+}
+
+.paginate span.num {
+	border: 1px solid #ccc;
+	color: gray;
+}
+
+.paginate a {
+	cursor: pointer;
+	user-select: none;
+}
+
+.paginate a:hover {
+	background: #ccc;
+	text-decoration: none;
+}
+
+.paginate .disabled {
+	opacity: .5;
+	cursor: default;
+}
+
+.paginate .disabled:hover {
+	color: gray;
+	background: transparent;
+}