mirror of
https://github.com/revoltchat/revite.git
synced 2024-12-24 22:52:09 -05:00
Fix: Sever list was not center aligned.
This commit is contained in:
parent
6a2dd50236
commit
e09fd006a8
2 changed files with 33 additions and 42 deletions
|
@ -80,7 +80,6 @@ const ServerList = styled.div`
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
padding-bottom: 48px;
|
padding-bottom: 48px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
// border-right: 2px solid var(--accent);
|
|
||||||
|
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
|
|
||||||
|
@ -97,15 +96,12 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
|
||||||
height: 58px;
|
height: 58px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
// outline: 1px solid red;
|
|
||||||
}
|
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
width: 46px;
|
height: 42px;
|
||||||
height: 46px;
|
padding-left: 4px;
|
||||||
|
padding-right: 6px;
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
|
|
||||||
|
@ -119,49 +115,30 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
|
||||||
${(props) =>
|
${(props) =>
|
||||||
props.active &&
|
props.active &&
|
||||||
css`
|
css`
|
||||||
background: var(--sidebar-active);
|
|
||||||
&:active {
|
&:active {
|
||||||
transform: none;
|
transform: none;
|
||||||
}
|
}
|
||||||
`}
|
`}
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
> span {
|
||||||
width: 6px;
|
width: 0;
|
||||||
height: 46px;
|
display: relative;
|
||||||
|
|
||||||
${(props) =>
|
${(props) =>
|
||||||
props.active &&
|
!props.active &&
|
||||||
css`
|
css`
|
||||||
background-color: var(--sidebar-active);
|
display: none;
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
// outline: 1px solid blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
width: 31px;
|
|
||||||
height: 72px;
|
|
||||||
margin-top: -72px;
|
|
||||||
margin-left: -25px;
|
|
||||||
z-index: -1;
|
|
||||||
|
|
||||||
background-color: var(--background);
|
|
||||||
border-bottom-right-radius: 32px;
|
|
||||||
|
|
||||||
box-shadow: 0 32px 0 0 var(--sidebar-active);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
transform: scaleY(-1) translateY(-118px);
|
|
||||||
}
|
|
||||||
` }
|
` }
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 56.5px;
|
||||||
|
margin-top: 4px;
|
||||||
|
display: relative;
|
||||||
|
|
||||||
|
pointer-events: none;
|
||||||
|
// outline: 1px solid red;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
${(props) =>
|
${(props) =>
|
||||||
|
@ -171,6 +148,18 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
|
||||||
`}
|
`}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
function Swoosh() {
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
<svg width="56" height="118" viewBox="0 0 56 118" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M55.9957 0C55.6241 18.5052 31.292 28.1152 19.2904 32.1029L56 68.8124L55.9957 0Z" fill="var(--sidebar-active)"/>
|
||||||
|
<path d="M55.9963 117.633C55.8689 98.6899 31.3298 87.9423 19.2144 84.8847L55.9968 47.5654L55.9963 117.633Z" fill="var(--sidebar-active)"/>
|
||||||
|
<path d="M55.5682 58.4474C55.5682 73.7921 43.1288 86.2315 27.7841 86.2315C12.4394 86.2315 0 73.7921 0 58.4474C0 43.1026 12.4394 30.6633 27.7841 30.6633C43.1288 30.6633 55.5682 43.1026 55.5682 58.4474Z" fill="var(--sidebar-active)"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
unreads: Unreads;
|
unreads: Unreads;
|
||||||
lastOpened: LastOpened;
|
lastOpened: LastOpened;
|
||||||
|
@ -238,6 +227,7 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
|
||||||
active={homeActive}
|
active={homeActive}
|
||||||
to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}>
|
to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}>
|
||||||
<ServerEntry home active={homeActive}>
|
<ServerEntry home active={homeActive}>
|
||||||
|
<Swoosh />
|
||||||
{ isTouchscreenDevice ?
|
{ isTouchscreenDevice ?
|
||||||
<Icon size={42} unread={homeUnread}>
|
<Icon size={42} unread={homeUnread}>
|
||||||
<img style={{ width: 32, height: 32 }} src={logoSVG} />
|
<img style={{ width: 32, height: 32 }} src={logoSVG} />
|
||||||
|
@ -254,7 +244,6 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
|
||||||
</UserHover>
|
</UserHover>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
<span />
|
|
||||||
</ServerEntry>
|
</ServerEntry>
|
||||||
</ConditionalLink>
|
</ConditionalLink>
|
||||||
<LineDivider />
|
<LineDivider />
|
||||||
|
@ -274,12 +263,12 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
|
||||||
onContextMenu={attachContextMenu("Menu", {
|
onContextMenu={attachContextMenu("Menu", {
|
||||||
server: entry!._id,
|
server: entry!._id,
|
||||||
})}>
|
})}>
|
||||||
|
<Swoosh />
|
||||||
<Tooltip content={entry.name} placement="right">
|
<Tooltip content={entry.name} placement="right">
|
||||||
<Icon size={42} unread={entry.unread}>
|
<Icon size={42} unread={entry.unread}>
|
||||||
<ServerIcon size={32} target={entry} />
|
<ServerIcon size={32} target={entry} />
|
||||||
</Icon>
|
</Icon>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<span />
|
|
||||||
</ServerEntry>
|
</ServerEntry>
|
||||||
</ConditionalLink>
|
</ConditionalLink>
|
||||||
);
|
);
|
||||||
|
|
|
@ -24,6 +24,7 @@ export enum Language {
|
||||||
AZERBAIJANI = "az",
|
AZERBAIJANI = "az",
|
||||||
CZECH = "cs",
|
CZECH = "cs",
|
||||||
GERMAN = "de",
|
GERMAN = "de",
|
||||||
|
GREEK = "el",
|
||||||
SPANISH = "es",
|
SPANISH = "es",
|
||||||
FINNISH = "fi",
|
FINNISH = "fi",
|
||||||
FRENCH = "fr",
|
FRENCH = "fr",
|
||||||
|
@ -71,6 +72,7 @@ export const Languages: { [key in Language]: LanguageEntry } = {
|
||||||
az: { display: "Azərbaycan dili", emoji: "🇦🇿", i18n: "az" },
|
az: { display: "Azərbaycan dili", emoji: "🇦🇿", i18n: "az" },
|
||||||
cs: { display: "Čeština", emoji: "🇨🇿", i18n: "cs" },
|
cs: { display: "Čeština", emoji: "🇨🇿", i18n: "cs" },
|
||||||
de: { display: "Deutsch", emoji: "🇩🇪", i18n: "de" },
|
de: { display: "Deutsch", emoji: "🇩🇪", i18n: "de" },
|
||||||
|
el: { display: "Ελληνικά", emoji: "🇬🇷", i18n: "el" },
|
||||||
es: { display: "Español", emoji: "🇪🇸", i18n: "es" },
|
es: { display: "Español", emoji: "🇪🇸", i18n: "es" },
|
||||||
fi: { display: "suomi", emoji: "🇫🇮", i18n: "fi" },
|
fi: { display: "suomi", emoji: "🇫🇮", i18n: "fi" },
|
||||||
fr: { display: "Français", emoji: "🇫🇷", i18n: "fr" },
|
fr: { display: "Français", emoji: "🇫🇷", i18n: "fr" },
|
||||||
|
|
Loading…
Reference in a new issue