fix(friends): fixed friends tab

* you can deny requests on mobile now
* fixed menu to work with glass header
This commit is contained in:
trashtemp 2021-12-30 14:02:00 +01:00
parent b34ed4c24c
commit fc0224562f
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
2 changed files with 123 additions and 103 deletions

View file

@ -10,17 +10,11 @@
gap: 20px;
}
/*::-webkit-scrollbar-thumb {
width: 4px;
background-clip: content-box;
border-top: 48px solid transparent;
}*/
.list {
padding: 0 10px 10px 10px;
padding-top: 48px;
user-select: none;
overflow-y: scroll;
/*overflow-y: scroll;*/
&[data-empty="true"] {
img {
@ -194,10 +188,10 @@
@media only screen and (max-width: 768px) {
.list {
padding: 0 8px 8px 8px;
}
padding: 56px 8px 8px 8px;
.remove {
display: none;
}
}
}

View file

@ -3,6 +3,7 @@ import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { RelationshipStatus, Presence } from "revolt-api/types/Users";
import { User } from "revolt.js/dist/maps/Users";
import styled, { css } from "styled-components";
import styles from "./Friend.module.scss";
import { Text } from "preact-i18n";
@ -22,6 +23,26 @@ import IconButton from "../../components/ui/IconButton";
import { Children } from "../../types/Preact";
import { Friend } from "./Friend";
const Container = styled.div`
overflow-y: scroll;
::-webkit-scrollbar-thumb {
min-height: 100px;
width: 4px;
background-clip: content-box;
border-top: 48px solid transparent;
}
${() =>
isTouchscreenDevice &&
css`
::-webkit-scrollbar-thumb {
min-height: 150px;
border-top: 56px solid transparent;
border-bottom: var(--bottom-navigation-height) solid transparent;
}
`}
`;
export default observer(() => {
const { openScreen } = useIntermediate();
@ -115,6 +136,7 @@ export default observer(() => {
*/}
</div>
</PageHeader>
<Container>
<div
className={styles.list}
data-empty={isEmpty}
@ -144,7 +166,10 @@ export default observer(() => {
size={64}
mask={
i <
Math.min(incoming.length - 1, 2)
Math.min(
incoming.length - 1,
2,
)
? "url(#overlap)"
: undefined
}
@ -209,6 +234,7 @@ export default observer(() => {
);
})}
</div>
</Container>
</>
);
});