eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

fix padding issues (#4604)

Browse Source
This commit is contained in:
Prospector
2025-10-24 11:58:20 -07:00
committed by GitHub
parent ab886a5ea8
commit 5dd6c804d0
5 changed files with 86 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/app-frontend/src/App.vue
View File

@@ -990,7 +990,9 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
> >
<div id="sidebar-teleport-target" class="sidebar-teleport-content"></div> <div id="sidebar-teleport-target" class="sidebar-teleport-content"></div>
<div class="sidebar-default-content" :class="{ 'sidebar-enabled': sidebarVisible }"> <div class="sidebar-default-content" :class="{ 'sidebar-enabled': sidebarVisible }">
<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"> <div
class="p-4 pr-1 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
>
<h3 class="text-base text-primary font-medium m-0">Playing as</h3> <h3 class="text-base text-primary font-medium m-0">Playing as</h3>
<suspense> <suspense>
<AccountsCard ref="accounts" mode="small" /> <AccountsCard ref="accounts" mode="small" />
@@ -998,10 +1000,14 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
</div> </div>
<div class="py-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"> <div class="py-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
<suspense> <suspense>
<FriendsList :credentials="credentials" :sign-in="() => signIn()" /> <FriendsList
:credentials="credentials"
:sign-in="() => signIn()"
:refresh-credentials="fetchCredentials"
/>
</suspense> </suspense>
</div> </div>
<div v-if="news && news.length > 0" class="p-4 flex flex-col items-center"> <div v-if="news && news.length > 0" class="p-4 pr-1 flex flex-col items-center">
<h3 class="text-base mb-4 text-primary font-medium m-0 text-left w-full">News</h3> <h3 class="text-base mb-4 text-primary font-medium m-0 text-left w-full">News</h3>
<div class="space-y-4 flex flex-col items-center w-full"> <div class="space-y-4 flex flex-col items-center w-full">
<NewsArticleCard <NewsArticleCard

105
apps/app-frontend/src/components/ui/friends/FriendsList.vue
View File

@@ -8,6 +8,7 @@ import {
useRelativeTime, useRelativeTime,
} from '@modrinth/ui' } from '@modrinth/ui'
import { defineMessages, useVIntl } from '@vintl/vintl' import { defineMessages, useVIntl } from '@vintl/vintl'
import { IntlFormatted } from '@vintl/vintl/components'
import { computed, onUnmounted, ref, watch } from 'vue' import { computed, onUnmounted, ref, watch } from 'vue'
import FriendsSection from '@/components/ui/friends/FriendsSection.vue' import FriendsSection from '@/components/ui/friends/FriendsSection.vue'
@@ -127,6 +128,7 @@ watch(
() => { () => {
if (userCredentials.value === undefined) { if (userCredentials.value === undefined) {
userFriends.value = [] userFriends.value = []
loading.value = false
} else if (userCredentials.value === null) { } else if (userCredentials.value === null) {
userFriends.value = [] userFriends.value = []
loading.value = false loading.value = false
@@ -199,6 +201,15 @@ const messages = defineMessages({
id: 'friends.no-friends-match', id: 'friends.no-friends-match',
defaultMessage: `No friends matching ''{query}''`, defaultMessage: `No friends matching ''{query}''`,
}, },
signInToAddFriends: {
id: 'friends.sign-in-to-add-friends',
defaultMessage:
"<link>Sign in to a Modrinth account</link> to add friends and see what they're playing!",
},
addFriendsToShare: {
id: 'friends.add-friends-to-share',
defaultMessage: "<link>Add friends</link> to see what they're playing!",
},
}) })
</script> </script>
@@ -211,7 +222,7 @@ const messages = defineMessages({
<div class="grid grid-cols-[1fr_auto] w-full gap-4"> <div class="grid grid-cols-[1fr_auto] w-full gap-4">
<div> <div>
<p class="m-0"> <p class="m-0">
<template v-if="friend.id === userCredentials.user_id"> <template v-if="friend.id === userCredentials?.user_id">
<span class="text-contrast">{{ friend.username }}</span> sent you a friend request <span class="text-contrast">{{ friend.username }}</span> sent you a friend request
</template> </template>
<template v-else> <template v-else>
@@ -223,7 +234,7 @@ const messages = defineMessages({
</p> </p>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<template v-if="friend.id === userCredentials.user_id"> <template v-if="friend.id === userCredentials?.user_id">
<ButtonStyled color="brand"> <ButtonStyled color="brand">
<button @click="addFriend(friend)"> <button @click="addFriend(friend)">
<UserPlusIcon /> <UserPlusIcon />
@@ -277,33 +288,38 @@ const messages = defineMessages({
</div> </div>
</div> </div>
</ModalWrapper> </ModalWrapper>
<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 ml-2 mr-2"> <div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 ml-2 mr-1">
<ButtonStyled circular type="transparent"> <template v-if="sortedFriends.length > 0">
<button <ButtonStyled circular type="transparent">
v-tooltip="formatMessage(messages.addFriend)" <button
:aria-label="formatMessage(messages.addFriend)" v-tooltip="formatMessage(messages.addFriend)"
@click="addFriendModal.show" :aria-label="formatMessage(messages.addFriend)"
> @click="addFriendModal.show"
<UserPlusIcon /> >
</button> <UserPlusIcon />
</ButtonStyled> </button>
<div class="iconified-input flex-1"> </ButtonStyled>
<input <div class="iconified-input flex-1">
v-model="search" <input
type="text" v-model="search"
class="friends-search-bar flex w-full" type="text"
:placeholder="formatMessage(messages.searchFriends)" class="friends-search-bar flex w-full"
@keyup.esc="search = ''" :placeholder="formatMessage(messages.searchFriends)"
/> @keyup.esc="search = ''"
<button />
v-if="search" <button
v-tooltip="formatMessage(commonMessages.clearButton)" v-if="search"
class="r-btn flex items-center justify-center bg-transparent button-animation p-2 cursor-pointer appearance-none border-none" v-tooltip="formatMessage(commonMessages.clearButton)"
@click="search = ''" class="r-btn flex items-center justify-center bg-transparent button-animation p-2 cursor-pointer appearance-none border-none"
> @click="search = ''"
<XIcon /> >
</button> <XIcon />
</div> </button>
</div>
</template>
<h3 v-else class="ml-2 w-full text-base text-primary font-medium m-0">
{{ formatMessage(messages.friends) }}
</h3>
<ButtonStyled v-if="incomingRequests.length > 0" circular type="transparent"> <ButtonStyled v-if="incomingRequests.length > 0" circular type="transparent">
<button <button
v-tooltip="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })" v-tooltip="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
@@ -323,9 +339,14 @@ const messages = defineMessages({
</ButtonStyled> </ButtonStyled>
</div> </div>
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<h3
v-if="sortedFriends.length === 0 || loading"
class="ml-4 mr-1 text-base text-primary font-medium m-0"
>
{{ formatMessage(messages.friends) }}
</h3>
<template v-if="loading"> <template v-if="loading">
<h3 class="text-base text-primary font-medium m-0">{{ formatMessage(messages.friends) }}</h3> <div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse ml-4 mr-1">
<div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse">
<div class="min-w-9 min-h-9 bg-button-bg rounded-full"></div> <div class="min-w-9 min-h-9 bg-button-bg rounded-full"></div>
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div class="h-3 bg-button-bg rounded-full w-1/2 mb-1"></div> <div class="h-3 bg-button-bg rounded-full w-1/2 mb-1"></div>
@@ -334,16 +355,24 @@ const messages = defineMessages({
</div> </div>
</template> </template>
<template v-else-if="sortedFriends.length === 0"> <template v-else-if="sortedFriends.length === 0">
<div class="text-sm mx-4"> <div class="text-sm ml-4 mr-1">
<div v-if="!userCredentials"> <div v-if="!userCredentials">
<span class="font-semibold text-brand cursor-pointer" @click="signIn" <IntlFormatted :message-id="messages.signInToAddFriends">
>Sign in to a Modrinth account</span <template #link="{ children }">
> <span class="font-semibold text-brand cursor-pointer" @click="signIn">
to add friends and see what they're playing! <component :is="() => children" />
</span>
</template>
</IntlFormatted>
</div> </div>
<div v-else> <div v-else>
<span class="text-link cursor-pointer" @click="addFriendModal.show()">Add friends</span> <IntlFormatted :message-id="messages.addFriendsToShare">
to share what you're playing! <template #link="{ children }">
<span class="font-semibold text-brand cursor-pointer" @click="signIn">
<component :is="() => children" />
</span>
</template>
</IntlFormatted>
</div> </div>
</div> </div>
</template> </template>

4
apps/app-frontend/src/components/ui/friends/FriendsSection.vue
View File

@@ -100,7 +100,7 @@ const messages = defineMessages({
:open-by-default="openByDefault" :open-by-default="openByDefault"
:force-open="isSearching" :force-open="isSearching"
:button-class=" :button-class="
'px-4 flex w-full items-center bg-transparent border-0 p-0' + 'pl-4 pr-3 flex w-full items-center bg-transparent border-0 p-0' +
(isSearching (isSearching
? '' ? ''
: ' cursor-pointer hover:brightness-[--hover-brightness] active:scale-[0.98] transition-all') : ' cursor-pointer hover:brightness-[--hover-brightness] active:scale-[0.98] transition-all')
@@ -116,7 +116,7 @@ const messages = defineMessages({
<div <div
v-for="friend in friends" v-for="friend in friends"
:key="friend.username" :key="friend.username"
class="group grid items-center grid-cols-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full ml-4 mr-2" class="group grid items-center grid-cols-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full ml-4 mr-1"
@contextmenu.prevent.stop=" @contextmenu.prevent.stop="
(event) => friendOptions?.showMenu(event, friend, createContextMenuOptions(friend)) (event) => friendOptions?.showMenu(event, friend, createContextMenuOptions(friend))
" "

4
apps/app-frontend/src/helpers/friends.ts
View File

@@ -50,13 +50,13 @@ export async function transformFriends(
friends: UserFriend[], friends: UserFriend[],
credentials: ModrinthCredentials | null, credentials: ModrinthCredentials | null,
): Promise<FriendWithUserData[]> { ): Promise<FriendWithUserData[]> {
if (friends.length === 0) { if (friends.length === 0 || !credentials) {
return [] return []
} }
const friendStatuses = await friend_statuses() const friendStatuses = await friend_statuses()
const users = await get_user_many( const users = await get_user_many(
friends.map((x) => (x.id === credentials?.user_id ? x.friend_id : x.id)), friends.map((x) => (x.id === credentials.user_id ? x.friend_id : x.id)),
) )
return friends.map((friend) => { return friends.map((friend) => {

6
apps/app-frontend/src/locales/en-US/index.json
View File

@@ -86,6 +86,9 @@
"friends.add-friend.username.title": { "friends.add-friend.username.title": {
"message": "What's your friend's Modrinth username?" "message": "What's your friend's Modrinth username?"
}, },
"friends.add-friends-to-share": {
"message": "<link>Add friends</link> to see what they're playing!"
},
"friends.friend.cancel-request": { "friends.friend.cancel-request": {
"message": "Cancel request" "message": "Cancel request"
}, },
@@ -122,6 +125,9 @@
"friends.section.heading": { "friends.section.heading": {
"message": "{title} - {count}" "message": "{title} - {count}"
}, },
"friends.sign-in-to-add-friends": {
"message": "<link>Sign in to a Modrinth account</link> to add friends and see what they're playing!"
},
"instance.add-server.add-and-play": { "instance.add-server.add-and-play": {
"message": "Add and play" "message": "Add and play"
}, },