mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-22 07:00:58 -05:00
Refreshed languages menu in settings
This commit is contained in:
parent
0139a91882
commit
9581a4df92
4 changed files with 35 additions and 9 deletions
|
@ -77,7 +77,7 @@ const ServerList = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
width: 58px;
|
/*width: 58px;*/
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
|
@ -89,6 +89,11 @@ const ServerList = styled.div`
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 0px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*${isTouchscreenDevice &&
|
||||||
|
css`
|
||||||
|
width: 58px;
|
||||||
|
`}*/
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
|
const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
import { Redirect, useParams } from "react-router";
|
import { Redirect, useParams } from "react-router";
|
||||||
import styled from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
|
|
||||||
import { attachContextMenu } from "preact-context-menu";
|
import { attachContextMenu } from "preact-context-menu";
|
||||||
import { useEffect } from "preact/hooks";
|
import { useEffect } from "preact/hooks";
|
||||||
|
@ -11,6 +11,7 @@ import PaintCounter from "../../../lib/PaintCounter";
|
||||||
import { dispatch } from "../../../redux";
|
import { dispatch } from "../../../redux";
|
||||||
import { connectState } from "../../../redux/connector";
|
import { connectState } from "../../../redux/connector";
|
||||||
import { Unreads } from "../../../redux/reducers/unreads";
|
import { Unreads } from "../../../redux/reducers/unreads";
|
||||||
|
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
|
||||||
|
|
||||||
import { useClient } from "../../../context/revoltjs/RevoltClient";
|
import { useClient } from "../../../context/revoltjs/RevoltClient";
|
||||||
|
|
||||||
|
@ -37,6 +38,13 @@ const ServerBase = styled.div`
|
||||||
border-start-start-radius: 8px;
|
border-start-start-radius: 8px;
|
||||||
border-end-start-radius: 8px;
|
border-end-start-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
${isTouchscreenDevice &&
|
||||||
|
css`
|
||||||
|
padding-bottom: 50px;
|
||||||
|
border-end-start-radius: 0;
|
||||||
|
`}
|
||||||
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ServerList = styled.div`
|
const ServerList = styled.div`
|
||||||
|
|
|
@ -98,9 +98,6 @@
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
background: var(--primary-background);
|
background: var(--primary-background);
|
||||||
|
|
||||||
/* Scrollbox hides the scrollbar on the desktop app. */
|
|
||||||
/*@media (hover: hover) { .scrollbox { visibility: hidden; }}*/
|
|
||||||
|
|
||||||
.scrollbox {
|
.scrollbox {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
@ -115,6 +112,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
|
width: 4px;
|
||||||
background-clip: content-box;
|
background-clip: content-box;
|
||||||
border-top: 80px solid transparent;
|
border-top: 80px solid transparent;
|
||||||
}
|
}
|
||||||
|
@ -125,6 +123,7 @@
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
background: var(--secondary-background);
|
background: var(--secondary-background);
|
||||||
|
scrollbar-width: thin;
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
min-width: 218px;
|
min-width: 218px;
|
||||||
|
|
|
@ -467,28 +467,42 @@
|
||||||
|
|
||||||
.languages {
|
.languages {
|
||||||
.list {
|
.list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
.entry {
|
.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 {
|
.entry > span > span {
|
||||||
gap: 20px;
|
gap: 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
.flag {
|
.flag {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 2.625rem;
|
|
||||||
line-height: 48px;
|
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> img {
|
||||||
|
height: 32px !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
|
|
Loading…
Reference in a new issue