Refreshed languages menu in settings

This commit is contained in:
nizune 2021-08-03 11:51:40 +02:00
parent 0139a91882
commit 9581a4df92
4 changed files with 35 additions and 9 deletions

View file

@ -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 }>`

View file

@ -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`

View file

@ -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;

View file

@ -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 {