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; +}