From 212d70f382f246791b388fb656031fd592bb304c Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Fri, 2 Jul 2021 11:39:07 +0200
Subject: [PATCH] Fix: small fixes for mobile
---
src/components/ui/Header.tsx | 5 +++++
src/pages/friends/Friend.module.scss | 7 +++++++
src/pages/friends/Friends.tsx | 4 +++-
src/pages/settings/GenericSettings.tsx | 2 +-
4 files changed, 16 insertions(+), 2 deletions(-)
diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx
index 05b941a..747a24f 100644
--- a/src/components/ui/Header.tsx
+++ b/src/components/ui/Header.tsx
@@ -29,6 +29,11 @@ export default styled.div<Props>`
flex-shrink: 0;
}
+ @media only screen and (max-width: 768px) {
+ padding: 0 12px;
+ }
+
+
${ props => props.background && css`
height: 120px;
align-items: flex-end;
diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index 1db3b2d..ab28639 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -87,6 +87,13 @@
}
}
+@media only screen and (max-width: 768px) {
+ .list {
+ padding: 0 12px 12px 12px;
+ }
+}
+
+
//! FIXME: Move this to the Header component, do this:
// 1. Check if header has topic, if yes, flex-grow: 0 on the title.
// 2. If header has no topic (example: friends page), flex-grow 1 on the header title.
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index c59bb9c..343a9fc 100644
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -1,5 +1,5 @@
import styles from "./Friend.module.scss";
-import { Conversation, UserPlus } from "@styled-icons/boxicons-solid";
+import { UserDetail, Conversation, UserPlus } from "@styled-icons/boxicons-solid";
import { Friend } from "./Friend";
import { Text } from "preact-i18n";
@@ -8,6 +8,7 @@ import Overline from "../../components/ui/Overline";
import IconButton from "../../components/ui/IconButton";
import { useUsers } from "../../context/revoltjs/hooks";
import { User, Users } from "revolt.js/dist/api/objects";
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { useIntermediate } from "../../context/intermediate/Intermediate";
export default function Friends() {
@@ -31,6 +32,7 @@ export default function Friends() {
return (
<>
<Header placement="primary">
+ { !isTouchscreenDevice && <UserDetail size={24} /> }
<div className={styles.title}>
<Text id="app.navigation.tabs.friends" />
</div>
diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index e32c793..151a6ad 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/src/pages/settings/GenericSettings.tsx
@@ -65,7 +65,7 @@ export function GenericSettings({ pages, switchPage, category, custom, children,
) : (
<>
<IconButton onClick={() => switchPage()}>
- <LeftArrowAlt size={24} />
+ <LeftArrowAlt size={30} />
</IconButton>
<Text
id={`app.settings.${category}.${page}.title`}
--
GitLab