From 9581a4df92fbce00b59ec14b3cb470a7e6ff0b14 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Tue, 3 Aug 2021 11:51:40 +0200
Subject: [PATCH] Refreshed languages menu in settings
---
.../navigation/left/ServerListSidebar.tsx | 7 +++++-
.../navigation/left/ServerSidebar.tsx | 10 ++++++++-
src/pages/settings/Settings.module.scss | 5 ++---
src/pages/settings/panes/Panes.module.scss | 22 +++++++++++++++----
4 files changed, 35 insertions(+), 9 deletions(-)
diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index 0dc69ae..df0243b 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -77,7 +77,7 @@ const ServerList = styled.div`
display: flex;
overflow-y: scroll;
padding-bottom: 20px;
- width: 58px;
+ /*width: 58px;*/
flex-direction: column;
scrollbar-width: none;
@@ -89,6 +89,11 @@ const ServerList = styled.div`
&::-webkit-scrollbar {
width: 0px;
}
+
+ /*${isTouchscreenDevice &&
+ css`
+ width: 58px;
+ `}*/
`;
const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
diff --git a/src/components/navigation/left/ServerSidebar.tsx b/src/components/navigation/left/ServerSidebar.tsx
index cd23059..a9f100e 100644
--- a/src/components/navigation/left/ServerSidebar.tsx
+++ b/src/components/navigation/left/ServerSidebar.tsx
@@ -1,6 +1,6 @@
import { observer } from "mobx-react-lite";
import { Redirect, useParams } from "react-router";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
import { attachContextMenu } from "preact-context-menu";
import { useEffect } from "preact/hooks";
@@ -11,6 +11,7 @@ import PaintCounter from "../../../lib/PaintCounter";
import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector";
import { Unreads } from "../../../redux/reducers/unreads";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useClient } from "../../../context/revoltjs/RevoltClient";
@@ -37,6 +38,13 @@ const ServerBase = styled.div`
border-start-start-radius: 8px;
border-end-start-radius: 8px;
overflow: hidden;
+
+ ${isTouchscreenDevice &&
+ css`
+ padding-bottom: 50px;
+ border-end-start-radius: 0;
+ `}
+
`;
const ServerList = styled.div`
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index 21d8b37..67bb891 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -98,9 +98,6 @@
flex-direction: row;
background: var(--primary-background);
- /* Scrollbox hides the scrollbar on the desktop app. */
- /*@media (hover: hover) { .scrollbox { visibility: hidden; }}*/
-
.scrollbox {
overflow-y: scroll;
visibility: hidden;
@@ -115,6 +112,7 @@
}
::-webkit-scrollbar-thumb {
+ width: 4px;
background-clip: content-box;
border-top: 80px solid transparent;
}
@@ -125,6 +123,7 @@
overflow-y: scroll;
justify-content: flex-end;
background: var(--secondary-background);
+ scrollbar-width: thin;
.container {
min-width: 218px;
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 9f14cac..da168cf 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -467,28 +467,42 @@
.languages {
.list {
+ display: flex;
+ flex-direction: column;
margin-bottom: 1em;
+ gap: 10px;
.entry {
- height: 50px;
+ display: flex;
+ height: 45px;
+ padding: 0 8px;
+ background: var(--tertiary-background);
+ border-radius: var(--border-radius);
+ margin-top: 0;
+
+ &:hover {
+ background: var(--secondary-background);
+ }
}
.entry > span > span {
- gap: 20px;
+ gap: 12px;
display: flex;
align-items: center;
flex-direction: row;
.flag {
display: flex;
- font-size: 2.625rem;
- line-height: 48px;
> div {
display: flex;
align-items: center;
justify-content: center;
}
+
+ > img {
+ height: 32px !important;
+ }
}
.description {
--
GitLab