Skip to content

Commit 5dd6c80

Browse files
ProspectorProspector
authored
fix padding issues (#4604)
1 parent ab886a5 commit 5dd6c80

File tree

5 files changed

+86
-45
lines changed

5 files changed

+86
-45
lines changed

‎apps/app-frontend/src/App.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -990,18 +990,24 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
990990
>
991991
<div id="sidebar-teleport-target" class="sidebar-teleport-content"></div>
992992
<div class="sidebar-default-content" :class="{ 'sidebar-enabled': sidebarVisible }">
993-
<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
993+
<div
994+
class="p-4 pr-1 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
995+
>
994996
<h3 class="text-base text-primary font-medium m-0">Playing as</h3>
995997
<suspense>
996998
<AccountsCard ref="accounts" mode="small" />
997999
</suspense>
9981000
</div>
9991001
<div class="py-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
10001002
<suspense>
1001-
<FriendsList :credentials="credentials" :sign-in="() => signIn()" />
1003+
<FriendsList
1004+
:credentials="credentials"
1005+
:sign-in="() => signIn()"
1006+
:refresh-credentials="fetchCredentials"
1007+
/>
10021008
</suspense>
10031009
</div>
1004-
<div v-if="news && news.length > 0" class="p-4 flex flex-col items-center">
1010+
<div v-if="news && news.length > 0" class="p-4 pr-1 flex flex-col items-center">
10051011
<h3 class="text-base mb-4 text-primary font-medium m-0 text-left w-full">News</h3>
10061012
<div class="space-y-4 flex flex-col items-center w-full">
10071013
<NewsArticleCard

‎apps/app-frontend/src/components/ui/friends/FriendsList.vue‎

Lines changed: 67 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
useRelativeTime,
99
} from '@modrinth/ui'
1010
import { defineMessages, useVIntl } from '@vintl/vintl'
11+
import { IntlFormatted } from '@vintl/vintl/components'
1112
import { computed, onUnmounted, ref, watch } from 'vue'
1213
1314
import FriendsSection from '@/components/ui/friends/FriendsSection.vue'
@@ -127,6 +128,7 @@ watch(
127128
() => {
128129
if (userCredentials.value === undefined) {
129130
userFriends.value = []
131+
loading.value = false
130132
} else if (userCredentials.value === null) {
131133
userFriends.value = []
132134
loading.value = false
@@ -199,6 +201,15 @@ const messages = defineMessages({
199201
id: 'friends.no-friends-match',
200202
defaultMessage: `No friends matching ''{query}''`,
201203
},
204+
signInToAddFriends: {
205+
id: 'friends.sign-in-to-add-friends',
206+
defaultMessage:
207+
"<link>Sign in to a Modrinth account</link> to add friends and see what they're playing!",
208+
},
209+
addFriendsToShare: {
210+
id: 'friends.add-friends-to-share',
211+
defaultMessage: "<link>Add friends</link> to see what they're playing!",
212+
},
202213
})
203214
</script>
204215

@@ -211,7 +222,7 @@ const messages = defineMessages({
211222
<div class="grid grid-cols-[1fr_auto] w-full gap-4">
212223
<div>
213224
<p class="m-0">
214-
<template v-if="friend.id === userCredentials.user_id">
225+
<template v-if="friend.id === userCredentials?.user_id">
215226
<span class="text-contrast">{{ friend.username }}</span> sent you a friend request
216227
</template>
217228
<template v-else>
@@ -223,7 +234,7 @@ const messages = defineMessages({
223234
</p>
224235
</div>
225236
<div class="flex gap-2">
226-
<template v-if="friend.id === userCredentials.user_id">
237+
<template v-if="friend.id === userCredentials?.user_id">
227238
<ButtonStyled color="brand">
228239
<button @click="addFriend(friend)">
229240
<UserPlusIcon />
@@ -277,33 +288,38 @@ const messages = defineMessages({
277288
</div>
278289
</div>
279290
</ModalWrapper>
280-
<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 ml-2 mr-2">
281-
<ButtonStyled circular type="transparent">
282-
<button
283-
v-tooltip="formatMessage(messages.addFriend)"
284-
:aria-label="formatMessage(messages.addFriend)"
285-
@click="addFriendModal.show"
286-
>
287-
<UserPlusIcon />
288-
</button>
289-
</ButtonStyled>
290-
<div class="iconified-input flex-1">
291-
<input
292-
v-model="search"
293-
type="text"
294-
class="friends-search-bar flex w-full"
295-
:placeholder="formatMessage(messages.searchFriends)"
296-
@keyup.esc="search = ''"
297-
/>
298-
<button
299-
v-if="search"
300-
v-tooltip="formatMessage(commonMessages.clearButton)"
301-
class="r-btn flex items-center justify-center bg-transparent button-animation p-2 cursor-pointer appearance-none border-none"
302-
@click="search = ''"
303-
>
304-
<XIcon />
305-
</button>
306-
</div>
291+
<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 ml-2 mr-1">
292+
<template v-if="sortedFriends.length > 0">
293+
<ButtonStyled circular type="transparent">
294+
<button
295+
v-tooltip="formatMessage(messages.addFriend)"
296+
:aria-label="formatMessage(messages.addFriend)"
297+
@click="addFriendModal.show"
298+
>
299+
<UserPlusIcon />
300+
</button>
301+
</ButtonStyled>
302+
<div class="iconified-input flex-1">
303+
<input
304+
v-model="search"
305+
type="text"
306+
class="friends-search-bar flex w-full"
307+
:placeholder="formatMessage(messages.searchFriends)"
308+
@keyup.esc="search = ''"
309+
/>
310+
<button
311+
v-if="search"
312+
v-tooltip="formatMessage(commonMessages.clearButton)"
313+
class="r-btn flex items-center justify-center bg-transparent button-animation p-2 cursor-pointer appearance-none border-none"
314+
@click="search = ''"
315+
>
316+
<XIcon />
317+
</button>
318+
</div>
319+
</template>
320+
<h3 v-else class="ml-2 w-full text-base text-primary font-medium m-0">
321+
{{ formatMessage(messages.friends) }}
322+
</h3>
307323
<ButtonStyled v-if="incomingRequests.length > 0" circular type="transparent">
308324
<button
309325
v-tooltip="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
@@ -323,9 +339,14 @@ const messages = defineMessages({
323339
</ButtonStyled>
324340
</div>
325341
<div class="flex flex-col gap-3">
342+
<h3
343+
v-if="sortedFriends.length === 0 || loading"
344+
class="ml-4 mr-1 text-base text-primary font-medium m-0"
345+
>
346+
{{ formatMessage(messages.friends) }}
347+
</h3>
326348
<template v-if="loading">
327-
<h3 class="text-base text-primary font-medium m-0">{{ formatMessage(messages.friends) }}</h3>
328-
<div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse">
349+
<div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse ml-4 mr-1">
329350
<div class="min-w-9 min-h-9 bg-button-bg rounded-full"></div>
330351
<div class="flex flex-col w-full">
331352
<div class="h-3 bg-button-bg rounded-full w-1/2 mb-1"></div>
@@ -334,16 +355,24 @@ const messages = defineMessages({
334355
</div>
335356
</template>
336357
<template v-else-if="sortedFriends.length === 0">
337-
<div class="text-sm mx-4">
358+
<div class="text-sm ml-4 mr-1">
338359
<div v-if="!userCredentials">
339-
<span class="font-semibold text-brand cursor-pointer" @click="signIn"
340-
>Sign in to a Modrinth account</span
341-
>
342-
to add friends and see what they're playing!
360+
<IntlFormatted :message-id="messages.signInToAddFriends">
361+
<template #link="{ children }">
362+
<span class="font-semibold text-brand cursor-pointer" @click="signIn">
363+
<component :is="() => children" />
364+
</span>
365+
</template>
366+
</IntlFormatted>
343367
</div>
344368
<div v-else>
345-
<span class="text-link cursor-pointer" @click="addFriendModal.show()">Add friends</span>
346-
to share what you're playing!
369+
<IntlFormatted :message-id="messages.addFriendsToShare">
370+
<template #link="{ children }">
371+
<span class="font-semibold text-brand cursor-pointer" @click="signIn">
372+
<component :is="() => children" />
373+
</span>
374+
</template>
375+
</IntlFormatted>
347376
</div>
348377
</div>
349378
</template>

‎apps/app-frontend/src/components/ui/friends/FriendsSection.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ const messages = defineMessages({
100100
:open-by-default="openByDefault"
101101
:force-open="isSearching"
102102
:button-class="
103-
'px-4 flex w-full items-center bg-transparent border-0 p-0' +
103+
'pl-4 pr-3 flex w-full items-center bg-transparent border-0 p-0' +
104104
(isSearching
105105
? ''
106106
: ' cursor-pointer hover:brightness-[--hover-brightness] active:scale-[0.98] transition-all')
@@ -116,7 +116,7 @@ const messages = defineMessages({
116116
<div
117117
v-for="friend in friends"
118118
:key="friend.username"
119-
class="group grid items-center grid-cols-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full ml-4 mr-2"
119+
class="group grid items-center grid-cols-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full ml-4 mr-1"
120120
@contextmenu.prevent.stop="
121121
(event) => friendOptions?.showMenu(event, friend, createContextMenuOptions(friend))
122122
"

‎apps/app-frontend/src/helpers/friends.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,13 @@ export async function transformFriends(
5050
friends: UserFriend[],
5151
credentials: ModrinthCredentials | null,
5252
): Promise<FriendWithUserData[]> {
53-
if (friends.length === 0) {
53+
if (friends.length === 0 || !credentials) {
5454
return []
5555
}
5656

5757
const friendStatuses = await friend_statuses()
5858
const users = await get_user_many(
59-
friends.map((x) => (x.id === credentials?.user_id ? x.friend_id : x.id)),
59+
friends.map((x) => (x.id === credentials.user_id ? x.friend_id : x.id)),
6060
)
6161

6262
return friends.map((friend) => {

‎apps/app-frontend/src/locales/en-US/index.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,9 @@
8686
"friends.add-friend.username.title": {
8787
"message": "What's your friend's Modrinth username?"
8888
},
89+
"friends.add-friends-to-share": {
90+
"message": "<link>Add friends</link> to see what they're playing!"
91+
},
8992
"friends.friend.cancel-request": {
9093
"message": "Cancel request"
9194
},
@@ -122,6 +125,9 @@
122125
"friends.section.heading": {
123126
"message": "{title} - {count}"
124127
},
128+
"friends.sign-in-to-add-friends": {
129+
"message": "<link>Sign in to a Modrinth account</link> to add friends and see what they're playing!"
130+
},
125131
"instance.add-server.add-and-play": {
126132
"message": "Add and play"
127133
},

0 commit comments

Comments
 (0)