diff --git a/docs/components/card/playlist.md b/docs/components/card/playlist.md
index 5bc64d5da9b42a105d2b78ab0ee312a465fc4644..738fee60c18c865d5a1322bdb0703f1a03dccf03 100644
--- a/docs/components/card/playlist.md
+++ b/docs/components/card/playlist.md
@@ -3,7 +3,7 @@ const playlist = {
name: 'Incredible Playlist',
user: {
full_username: '@username:example.com',
- username: '@username'
+ username: 'username'
},
tracks_count: 27,
album_covers: [
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index 239d9ae9a46a8bc65f145dd32367199c6f2c7795..71899f5cece7eadb8e23832a37816686c04a5bcf 100644
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -44,7 +44,7 @@ const click = async (...args: any[]) => {
<template>
<button
- class="funkwhale input button"
+ class="funkwhale is-colored button"
:class="[type, { 'is-active': isActive, 'is-outline': outline, 'is-loading': isLoading, 'icon-only': iconOnly, 'is-round': round, 'is-shadow': shadow }]"
@click="click"
>
diff --git a/src/components/button/play/style.scss b/src/components/button/play/style.scss
index 0b6e9cefd129db2bf09c72b391ec759bea3f19f5..91acfef3fd4d895f08a9a9a079f690967feda692 100644
--- a/src/components/button/play/style.scss
+++ b/src/components/button/play/style.scss
@@ -13,6 +13,7 @@
&::before {
transform: translateX(1px);
+ backface-visibility: hidden;
}
}
diff --git a/src/components/input/Input.vue b/src/components/input/Input.vue
index 7af83038c2ae5a36d744327aedbb27658f8473c7..78597f7cd361a1b3846caa570f874806995702fb 100644
--- a/src/components/input/Input.vue
+++ b/src/components/input/Input.vue
@@ -12,11 +12,18 @@ defineProps<Props>()
<div
:class="{ 'has-icon': !!icon }"
class="funkwhale input"
+ @click="$refs.input.focus()"
>
<div v-if="icon" class="prefix">
<i :class="['bi', icon]" />
</div>
- <input v-bind="$attrs" v-model="modelValue" :placeholder="placeholder" />
+ <input
+ v-bind="$attrs"
+ v-model="modelValue"
+ ref="input"
+ :placeholder="placeholder"
+ @click.stop
+ />
<div v-if="$slots.suffix" class="suffix">
<slot name="suffix" />
</div>
diff --git a/src/components/input/style.scss b/src/components/input/style.scss
index 300b260d512e3642eefee25e8a5b901b3537c399..96d5f8ff8cc7ba44245c1713ff29cadbefbf28a6 100644
--- a/src/components/input/style.scss
+++ b/src/components/input/style.scss
@@ -8,6 +8,18 @@
}
position: relative;
+ display: flex;
+ align-items: center;
+ background-color: var(--fw-bg-color);
+ border-radius: var(--fw-border-radius);
+ box-shadow: inset 0 0 0 4px var(--fw-border-color);
+ overflow: hidden;
+ cursor: text;
+
+ &:focus-within {
+ --fw-border-color: var(--fw-primary);
+ --fw-bg-color: var(--fw-blue-010);
+ }
&.has-icon {
input {
@@ -19,10 +31,9 @@
display: block;
width: 100%;
padding: 8px 12px;
+ font-size: 14px;
font-family: $font-main;
- background-color: var(--fw-bg-color);
- border-radius: var(--fw-border-radius);
- box-shadow: inset 0 0 0 4px var(--fw-border-color);
+ background-color: transparent;
&::placeholder {
color: var(--fw-grey-600);
@@ -31,32 +42,28 @@
&:hover {
--fw-border-color: var(--fw-grey-300);
}
-
- &:active,
- &:focus {
- --fw-border-color: var(--fw-primary);
- --fw-bg-color: var(--fw-blue-010);
- }
}
.prefix,
.suffix {
- position: absolute;
- top: 0;
- bottom: 0;
display: flex;
align-items: center;
color: var(--fw-grey-600);
+ font-size: 14px;
+ pointer-events: none;
}
.prefix {
+ position: absolute;
+ top: 0;
left: 4px;
+ bottom: 0;
width: 32px;
justify-content: center;
}
.suffix {
- right: 12px;
+ padding-right: 12px;
}
}
}
diff --git a/src/components/loader/style.scss b/src/components/loader/style.scss
index 766cff8f20d8a1c044b08d924c304cba75c1ce2c..6570880841d155bf0a4534d0239c105309a3591f 100644
--- a/src/components/loader/style.scss
+++ b/src/components/loader/style.scss
@@ -29,7 +29,7 @@
content: '';
position: absolute;
display: block;
- border: .11em solid var(--fw-text-color);
+ border: .11em solid currentColor;
opacity: 0.2;
margin-left: -0.11em;
margin-top: -0.11em;
@@ -44,7 +44,7 @@
border-top: .11em solid transparent;
border-right: .11em solid transparent;
border-bottom: .11em solid transparent;
- border-left: .11em solid var(--fw-text-color);
+ border-left: .11em solid currentColor;
will-change: transform;
transform: rotate(0deg);
diff --git a/src/components/pagination/Pagination.vue b/src/components/pagination/Pagination.vue
index 0cea8ecb64199bae84410cb20facc43c79324b35..7cd6b7353c1ffa425bf2d9467277dfb0308c548d 100644
--- a/src/components/pagination/Pagination.vue
+++ b/src/components/pagination/Pagination.vue
@@ -47,10 +47,11 @@ 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 = ''
+ if (!isNaN(+goTo.value) && goTo.value !== '') {
+ page.value = Math.min(props.pages, Math.max(1, +goTo.value))
}
+
+ goTo.value = ''
}
</script>
diff --git a/src/components/pill/Pill.vue b/src/components/pill/Pill.vue
index c9fd63d94c4d67499256937f23f92745be3c5229..074cebb11fd3050643668196d0c83dee8462b0ec 100644
--- a/src/components/pill/Pill.vue
+++ b/src/components/pill/Pill.vue
@@ -22,7 +22,7 @@ const color = usePastel(props, '')
<template>
<button
- class="funkwhale input pill"
+ class="funkwhale is-colored pill"
:class="[type, color]"
>
<div v-if="!!$slots.image" class="pill-image">
diff --git a/src/components/popover/style.scss b/src/components/popover/style.scss
index c2fe924251486e55f0e5b00b1adc5da899618daf..17d87ea9b6ac39b10a8b7a48f36a5b1d53699c69 100644
--- a/src/components/popover/style.scss
+++ b/src/components/popover/style.scss
@@ -72,6 +72,8 @@
}
.funkwhale.pill {
+ font-size: 13px;
+
> .pill-content > .bi {
display: inline-block;
transition: transform .2s ease;
diff --git a/src/components/textarea/Textarea.vue b/src/components/textarea/Textarea.vue
index cea9016dd566bd477e839c0c3a6bb8a9bb726b28..00324598f17ffaf6cb172e0345af420b3fd14a48 100644
--- a/src/components/textarea/Textarea.vue
+++ b/src/components/textarea/Textarea.vue
@@ -17,8 +17,14 @@ const emit = defineEmits<Events>()
const props = withDefaults(defineProps<Props>(), { max: Infinity, placeholder: '' })
const value = useVModel(props, 'modelValue', emit)
-const { undo, redo, commit, last } = useManualRefHistory(value)
-const { textarea } = useTextareaAutosize({ input: value })
+const { undo, redo, commit: commitHistory, last } = useManualRefHistory(value)
+const { textarea, triggerResize } = useTextareaAutosize({ input: value })
+
+const commit = () => {
+ triggerResize()
+ commitHistory()
+}
+
const preview = ref(false)
watchDebounced(value, (value) => {
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 9d37f6f4946ecbb92fa2ed258c387b0b5eb0b7b0..e2b5b0bc3a83face468ffa30dc189b04a58a786e 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -75,7 +75,7 @@ html.dark {
--fw-bg-color: var(--fw-blue-500);
--fw-text-color: var(--fw-grey-100);
- &.input {
+ &.is-colored {
&[disabled] {
--fw-bg-color: var(--fw-blue-100) !important;
--fw-text-color: var(--fw-blue-900) !important;
@@ -101,7 +101,7 @@ html.dark {
--fw-text-color: var(--fw-grey-300);
}
- &.input {
+ &.is-colored {
&[disabled] {
--fw-bg-color: var(--fw-grey-100) !important;
}
@@ -125,7 +125,7 @@ html.dark {
--fw-bg-color: var(--fw-destructive);
--fw-text-color: var(--fw-grey-100);
- &.input {
+ &.is-colored {
&[disabled] {
--fw-bg-color: var(--fw-red-100) !important;
--fw-text-color: var(--fw-blue-900) !important;