ayo/yolk
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: spacing and color adjustments

Browse source 
- remove padding on results if has results
- make buttons "pop" ;)
- remove handling of up & down on search results
This commit is contained in:
Ayo Ayco 2025-04-25 20:26:47 +02:00
parent be7b76d4cb
commit faa04343e9
3 changed files with 4 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
components/list/Account.vue
View file

@ -44,6 +44,7 @@ async function edit() {
<button <button
text-sm p2 border-1 transition-colors text-sm p2 border-1 transition-colors
border-dark border-dark
bg-base
btn-action-icon btn-action-icon
@click="edit" @click="edit"
> >

2
components/search/SearchWidget.vue
View file

@ -91,7 +91,7 @@ function activate() {
</div> </div>
<!-- Results --> <!-- Results -->
<div left-0 top-11 absolute w-full z-10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none> <div left-0 top-11 absolute w-full z-10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
<div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2> <div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto :class="results.length === 0 ? 'py2' : null">
<span v-if="query.trim().length === 0" block text-center text-sm text-secondary> <span v-if="query.trim().length === 0" block text-center text-sm text-secondary>
{{ t('search.search_desc') }} {{ t('search.search_desc') }}
</span> </span>

9
pages/[[server]]/list/[list]/index/accounts.vue
View file

@ -44,10 +44,6 @@ const results = computed(() => {
// Reset index when results change // Reset index when results change
watch([results, focused], () => index.value = -1) watch([results, focused], () => index.value = -1)
function shift(delta: number) {
return index.value = (index.value + delta % results.value.length + results.value.length) % results.value.length
}
function addAccount(account: mastodon.v1.Account) { function addAccount(account: mastodon.v1.Account) {
try { try {
mastoListAccounts.create({ accountIds: [account.id] }) mastoListAccounts.create({ accountIds: [account.id] })
@ -101,8 +97,6 @@ function removeAccount(account: mastodon.v1.Account) {
w-full w-full
placeholder-text-secondary placeholder-text-secondary
:placeholder="$t('list.search_following_placeholder')" :placeholder="$t('list.search_following_placeholder')"
@keydown.down.prevent="shift(1)"
@keydown.up.prevent="shift(-1)"
@keydown.esc.prevent="inputRef?.blur()" @keydown.esc.prevent="inputRef?.blur()"
@keydown.enter.prevent @keydown.enter.prevent
> >
@ -114,7 +108,7 @@ function removeAccount(account: mastodon.v1.Account) {
<!-- Results --> <!-- Results -->
<div left-0 top-18 absolute w-full z-10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none> <div left-0 top-18 absolute w-full z-10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
<div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2> <div w-full bg-base border="~ dark" rounded-3 max-h-100 overflow-auto :class="results.length === 0 ? 'py2' : null">
<span v-if="query.trim().length === 0" block text-center text-sm text-secondary> <span v-if="query.trim().length === 0" block text-center text-sm text-secondary>
{{ $t('search.search_desc') }} {{ $t('search.search_desc') }}
</span> </span>
@ -137,6 +131,7 @@ function removeAccount(account: mastodon.v1.Account) {
text-sm p2 border-1 transition-colors text-sm p2 border-1 transition-colors
border-dark border-dark
btn-action-icon btn-action-icon
bg-base
:hover="isInCurrentList(result.id) ? 'text-red' : 'text-green'" :hover="isInCurrentList(result.id) ? 'text-red' : 'text-green'"
@click=" () => isInCurrentList(result.id) ? removeAccount(result.data) : addAccount(result.data) " @click=" () => isInCurrentList(result.id) ? removeAccount(result.data) : addAccount(result.data) "
> >