From ed12d5f4f9be6e54282d7d19953d5597d471bdf2 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Mon, 5 Jul 2021 17:55:08 +0100
Subject: [PATCH] Fix: Add bottom navigation padding to settings. Fix: New
members joining don't show.
---
package.json | 2 +-
src/components/navigation/BottomNavigation.tsx | 2 +-
src/components/navigation/items/Item.module.scss | 2 +-
src/components/navigation/right/MemberSidebar.tsx | 8 +++++---
src/pages/friends/Friend.module.scss | 4 ++++
src/pages/friends/Friends.tsx | 4 +++-
src/pages/settings/Settings.module.scss | 2 +-
src/styles/_variables.scss | 2 ++
yarn.lock | 8 ++++----
9 files changed, 22 insertions(+), 12 deletions(-)
diff --git a/package.json b/package.json
index 2e298ff..aa060bc 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,7 @@
"react-router-dom": "^5.2.0",
"react-scroll": "^1.8.2",
"redux": "^4.1.0",
- "revolt.js": "4.3.3-alpha.8",
+ "revolt.js": "4.3.3-alpha.9",
"rimraf": "^3.0.2",
"sass": "^1.35.1",
"shade-blend-color": "^1.0.0",
diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx
index a34921d..5995c2f 100644
--- a/src/components/navigation/BottomNavigation.tsx
+++ b/src/components/navigation/BottomNavigation.tsx
@@ -14,8 +14,8 @@ import IconButton from "../ui/IconButton";
const NavigationBase = styled.div`
z-index: 100;
- height: 50px;
display: flex;
+ height: var(--bottom-navigation-height);
background: var(--secondary-background);
`;
diff --git a/src/components/navigation/items/Item.module.scss b/src/components/navigation/items/Item.module.scss
index d5e4ff3..4238d82 100644
--- a/src/components/navigation/items/Item.module.scss
+++ b/src/components/navigation/items/Item.module.scss
@@ -150,7 +150,7 @@
height: 40px;
&.compact {
- height: 50px;
+ height: var(--bottom-navigation-height);
> div {
gap: 20px;
diff --git a/src/components/navigation/right/MemberSidebar.tsx b/src/components/navigation/right/MemberSidebar.tsx
index 1381692..124dabe 100644
--- a/src/components/navigation/right/MemberSidebar.tsx
+++ b/src/components/navigation/right/MemberSidebar.tsx
@@ -233,7 +233,10 @@ export function ServerMemberSidebar({
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo id={channel._id} />
- <Category
+ <div>
+ {!members && <Preloader type="ring" />}
+ </div>
+ { members && <Category
variant="uniform"
text={
<span>
@@ -241,8 +244,7 @@ export function ServerMemberSidebar({
{users.length}
</span>
}
- />
- {!members && <Preloader type="ring" />}
+ /> }
{members && users.length === 0 && <img src={placeholderSVG} />}
{users.map(
(user) =>
diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index ee9c6f9..474f912 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -28,6 +28,10 @@
flex-direction: column;
justify-content: center;
}
+
+ &[data-mobile="true"] {
+ padding-bottom: var(--bottom-navigation-height);
+ }
}
.friend {
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index d87170e..cb0c85c 100644
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -121,7 +121,7 @@ export default function Friends() {
*/}
</div>
</Header>
- <div className={styles.list} data-empty={isEmpty}>
+ <div className={styles.list} data-empty={isEmpty} data-mobile={isTouchscreenDevice}>
{isEmpty && (
<>
<img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />
@@ -210,6 +210,8 @@ export default function Friends() {
</CollapsibleSection>
);
})}
+
+<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><h1>test</h1>
</div>
</>
);
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index e8648eb..aea20a6 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -41,7 +41,7 @@
}
.content {
- padding: 10px 12px 50px;
+ padding: 10px 12px var(--bottom-navigation-height);
}
}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 6f3e02a..ec7151d 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -4,4 +4,6 @@
--app-height: 100vh;
--codeblock-font: "Fira Code";
--sidebar-active: var(--secondary-background);
+
+ --bottom-navigation-height: 50px;
}
diff --git a/yarn.lock b/yarn.lock
index 6fec186..09a3cd7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3590,10 +3590,10 @@ reusify@^1.0.4:
resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
-revolt.js@4.3.3-alpha.8:
- version "4.3.3-alpha.8"
- resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.8.tgz#2a191ffa9d4c304e328b5eb8d9dc1e13e1f99d9a"
- integrity sha512-A6sjZ7cmeQuqS9otzANv+Rg4CfvpsTMoDARBwQuez4O7NPRopdWNHylUPo20UutAPzW9xoqVbF8673VlTu5Jag==
+revolt.js@4.3.3-alpha.9:
+ version "4.3.3-alpha.9"
+ resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.9.tgz#7015793e465438a78b7e6e57a688be4e75f9c934"
+ integrity sha512-RIFexFJMInTeEvOGx+l0VPtzoFIcl3ruQN0NA2UFYiz1zoQ4J3KGmmt5ig/OK/mZTbTysyQx1LSIdmMs2yZBFw==
dependencies:
"@insertish/mutable" "1.1.0"
axios "^0.19.2"
--
GitLab