Make pagination responsive

src/components/input/Input.vue

@@ -16,7 +16,7 @@ defineProps<Props>()
     <div v-if="icon" class="prefix">
       <i :class="['bi', icon]" />
     </div>
-    <input v-model="modelValue" :placeholder="placeholder" />
+    <input v-bind="$attrs" v-model="modelValue" :placeholder="placeholder" />
     <div v-if="$slots.suffix" class="suffix">
       <slot name="suffix" />
     </div>

src/components/pagination/Pagination.vue

 <script setup lang="ts">
-import { useVModel } from '@vueuse/core';
+import { useVModel, useElementSize } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import { ref, computed } from 'vue'
 
+const MOBILE_WIDTH = 640
+
 const { t } = useI18n()
 
 interface Events {
@@ -39,10 +41,23 @@ const pages = computed(() => {
 
   return pages.filter((page, index, pages) => pages.indexOf(page) === index)
 })
+
+const pagination = ref()
+const { width } = useElementSize(pagination)
+const isSmall = computed(() => width.value <= MOBILE_WIDTH)
+
+const setPage = () => {
+  if (!isNaN(+goTo.value) && +goTo.value > 0 && +goTo.value <= props.pages) {
+    page.value = +goTo.value
+    goTo.value = ''
+  }
+}
 </script>
 
 <template>
 	<div
+    ref="pagination"
+    :class="{ 'is-small': isSmall }"
     class="funkwhale pagination"
   >
     <div class="pages">
@@ -53,19 +68,41 @@ const pages = computed(() => {
         outline
       >
         <i class="bi bi-chevron-left" />
-        {{ t('vui.pagination.previous') }}
+        <span v-if="!isSmall">{{ t('vui.pagination.previous') }}</span>
       </fw-button>
 
-      <template v-for="(i, index) in pages" :key="i">
+      <template v-if="!isSmall">
+        <template v-for="(i, index) in pages" :key="i">
+          <fw-button
+            v-if="i <= props.pages && i > 0 && props.pages > 3"
+            @click="page = i"
+            secondary
+            :outline="page !== i"
+          >
+            {{ i }}
+          </fw-button>
+          <div v-if="i + 1 < pages[index + 1]">…</div>
+        </template>
+      </template>
+      <template v-else>
+        <fw-button
+          @click="page = 1"
+          secondary
+          :outline="page !== 1"
+        >
+          1
+        </fw-button>
+        <div v-if="page === 1 || page === props.pages">…</div>
+        <fw-button v-else secondary>
+          {{ page }}
+        </fw-button>
         <fw-button
-          v-if="i <= props.pages && i > 0"
-          @click="page = i"
+          @click="page = props.pages"
           secondary
-          :outline="page !== i"
+          :outline="page !== props.pages"
         >
-          {{ i }}
+          {{ props.pages }}
         </fw-button>
-        <div v-if="i + 1 < pages[index + 1]">…</div>
       </template>
 
       <fw-button
@@ -74,7 +111,7 @@ const pages = computed(() => {
         secondary
         outline
       >
-        {{ t('vui.pagination.next') }}
+        <span v-if="!isSmall">{{ t('vui.pagination.next') }}</span>
         <i class="bi bi-chevron-right" />
       </fw-button>
     </div>
@@ -83,6 +120,7 @@ const pages = computed(() => {
       {{ t('vui.go-to') }}
       <fw-input
         :placeholder="page.toString()"
+        @keyup.enter="setPage"
         v-model="goTo"
       />
     </div>

src/components/pagination/style.scss

@@ -3,6 +3,15 @@
     height: 34px;
     display: flex;
 
+    &.is-small {
+      > .pages {
+        width: auto;
+      }
+      > .goto {
+        margin-right: auto;
+      }
+    }
+
     > .pages {
       display: flex;
       align-items: center;
@@ -15,6 +24,12 @@
         padding-top: 0;
         padding-bottom: 0;
       }
+
+      > div {
+        width: 34px;
+        text-align: center;
+        margin: 0 0.5ch;
+      }
     }
 
     > .goto {