cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-23 22:22:07 -05:00
Code Issues Projects Releases Packages Wiki Activity

Fix: Fixed pending requests menu sizing

Browse source
This commit is contained in:
nizune 2021-07-02 19:48:11 +02:00
parent d8e23aea12
commit c15a2f1968
3 changed files with 49 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/pages/friends/Friend.module.scss
View file

@ -1,5 +1,5 @@
.list {
padding: 0 20px 20px 20px;
padding: 0 10px 10px 10px;
user-select: none;
overflow-y: scroll;
@ -22,17 +22,23 @@
summary {
outline: none;
list-style: none;
transition: .2s opacity;
&::marker, &::-webkit-details-marker {
display: none;
}
svg {
flex-shrink: 0;
transition: .2s ease transform;
}
}
&:not([open]) {
summary {
opacity: .7;
}
summary svg {
transform: rotateZ(-90deg);
}
@ -127,17 +133,23 @@
}
.pending {
gap: 12px;
padding: 1em;
display: flex;
cursor: pointer;
margin-top: 1em;
border-radius: 7px;
align-items: center;
flex-direction: row;
background: var(--secondary-background);
svg {
flex-shrink: 0;
}
.avatars {
display: flex;
flex-shrink: 0;
margin-inline-end: 15px;
}
.details {
@ -145,26 +157,53 @@
display: flex;
flex-direction: column;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
> div {
font-size: 1.4em;
font-size: 16px;
font-weight: 800;
display: flex;
gap: 6px;
align-items: center;
min-width: 0;
.title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
span {
width: 1.5em;
height: 1.5em;
font-size: 0.8em;
font-size: 12px;
border-radius: 50%;
align-items: center;
display: inline-flex;
justify-content: center;
background: var(--error);
flex-shrink: 0;
}
}
.from {
.user {
font-weight: 600;
}
}
> span {
font-weight: 600;
font-weight: 400;
font-size: 12px;
color: var(--tertiary-foreground);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}

2
src/pages/friends/Friend.tsx
View file

@ -94,7 +94,7 @@ export function Friend({ user }: Props) {
<div className={styles.friend}
onClick={() => openScreen({ id: 'profile', user_id: user._id })}
onContextMenu={attachContextMenu('Menu', { user: user._id })}>
<UserIcon target={user} size={38} status />
<UserIcon target={user} size={36} status />
<div className={styles.name}>
<span>@{user.username}</span>
{subtext && (

8
src/pages/friends/Friends.tsx
View file

@ -77,14 +77,14 @@ export default function Friends() {
{ lists[0][1].length > 0 && <div className={styles.pending}
onClick={() => openScreen({ id: 'pending_requests', users: lists[0][1].map(x => x._id) })}>
<div className={styles.avatars}>
{ lists[0][1].map((x, i) => i < 3 && <UserIcon target={x} size={64} />) }
{ lists[0][1].map((x, i) => i < 3 && <UserIcon target={x} size={54} />) }
</div>
<div className={styles.details}>
{/* ! FIXME: i18n */}
<div>Pending requests <span>{ lists[0][1].length }</span></div>
<span>From { lists[0][1].map(x => x.username).join(', ') }</span>
<div className={styles.title}>Pending requests<span>{ lists[0][1].length }</span></div>
<span className={styles.from}>From <span className={styles.user}>{ lists[0][1].map(x => x.username).join(', ') }</span></span>
</div>
<ChevronRight size={48} />
<ChevronRight size={28} />
</div> }
{