From 5738b1da60475d48a172aa393b73777fb14b3966 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 23 Feb 2025 21:14:56 +0100
Subject: [PATCH] Common button styles + added filter pagination UI.
---
frontend/src/components/filter/Form.vue | 81 +++++++++++++------
.../src/components/filter/ToggleButton.vue | 9 +--
frontend/src/styles/common.scss | 27 +++++++
3 files changed, 85 insertions(+), 32 deletions(-)
diff --git a/frontend/src/components/filter/Form.vue b/frontend/src/components/filter/Form.vue
index 0b1d5c3..d8989ab 100644
--- a/frontend/src/components/filter/Form.vue
+++ b/frontend/src/components/filter/Form.vue
@@ -74,15 +74,34 @@
</div>
</div>
- <div class="limit-container input-text-container">
- <label for="limit">Limit</label>
- <input type="number"
- id="limit"
- name="limit"
- @input="newFilter.limit = Number($event.target.value)"
- @change="newFilter.limit = Number($event.target.value)"
- :value="newFilter.limit"
- min="1" />
+ <div class="pagination-container">
+ <div class="page-button-container">
+ <button type="button"
+ @click="$emit('prev-page')"
+ title="Previous Results"
+ :disabled="!hasPrev">
+ <font-awesome-icon icon="fas fa-chevron-left" />
+ </button>
+ </div>
+ <div class="limit-container">
+ <label for="limit">Max Results</label>
+ <input type="number"
+ id="limit"
+ name="limit"
+ @input="newFilter.limit = Number($event.target.value)"
+ @change="newFilter.limit = Number($event.target.value)"
+ :value="newFilter.limit"
+ min="1" />
+ </div>
+
+ <div class="page-button-container">
+ <button type="button"
+ @click="$emit('next-page')"
+ title="Next Results"
+ :disabled="!hasNext">
+ <font-awesome-icon icon="fas fa-chevron-right" />
+ </button>
+ </div>
</div>
<div class="footer">
@@ -95,9 +114,21 @@
import _ from 'lodash'
export default {
- emit: ['refresh'],
+ emit: [
+ 'next-page',
+ 'prev-page',
+ 'refresh',
+ ],
props: {
value: Object,
+ hasPrev: {
+ type: Boolean,
+ default: true,
+ },
+ hasNext: {
+ type: Boolean,
+ default: true,
+ },
},
computed: {
@@ -269,33 +300,31 @@ export default {
margin-top: 0.5em;
button {
- padding: 0.25em 0.5em;
margin-right: 0.25em;
- border: 1px solid var(--color-border);
- border-radius: 0.25em;
- background: var(--color-background);
font-size: 0.75em;
- cursor: pointer;
-
- &:disabled {
- opacity: 0.5;
- cursor: not-allowed;
- }
-
- &:hover {
- color: var(--color-hover);
- }
}
}
}
}
- .input-text-container {
+ .pagination-container {
display: flex;
- flex-direction: column;
+ flex-direction: row;
+ justify-content: space-between;
align-items: center;
margin: 0.5em;
+ .limit-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .page-button-container {
+ display: flex;
+ justify-content: center;
+ }
+
label {
margin-bottom: 0.25em;
}
diff --git a/frontend/src/components/filter/ToggleButton.vue b/frontend/src/components/filter/ToggleButton.vue
index 0233c02..dc59578 100644
--- a/frontend/src/components/filter/ToggleButton.vue
+++ b/frontend/src/components/filter/ToggleButton.vue
@@ -1,5 +1,5 @@
<template>
- <button :class="{ 'selected': value }"
+ <button class="toggle-button" :class="{ 'selected': value }"
@click="$emit('input')"
:title="title"
:aria-pressed="value"
@@ -24,11 +24,12 @@ export default {
</script>
<style lang="scss" scoped>
-button {
+button.toggle-button {
background: var(--color-background);
color: var(--color-text);
width: 4em;
height: 4em;
+ font-size: 1em;
padding: 1.5em;
outline: none;
border: none;
@@ -36,10 +37,6 @@ button {
box-shadow: 1px 1px 2px 2px var(--color-border);
cursor: pointer;
- &:hover {
- color: var(--color-accent) !important;
- }
-
&.selected {
background: var(--color-accent);
color: var(--color-background);
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 71446d3..df11811 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -22,3 +22,30 @@ $screen-lg: 1200px;
@content;
}
}
+
+// Common element styles
+
+button {
+ margin: 0 0.5em;
+ padding: 0.25em 0.5em;
+ border: 1px solid var(--color-border);
+ border-radius: 0.25em;
+ background: var(--color-background);
+ font-size: 1.25em;
+ cursor: pointer;
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ &:hover {
+ color: var(--color-hover);
+ }
+}
+
+button[type=submit] {
+ margin: 0.5em;
+ font-size: 1.15em;
+ padding: 0.5em;
+}