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

View file

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

View file

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

View file

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