cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-22 15:10:57 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(header): header rewrite complete

Browse source
This commit is contained in:
trashtemp 2021-12-27 15:38:49 +01:00
parent a396e511ec
commit 93925834cc
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
1 changed files with 91 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/common/ServerHeader.tsx
View file

@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { ServerPermission } from "revolt.js/dist/api/permissions"; import { ServerPermission } from "revolt.js/dist/api/permissions";
import { Server } from "revolt.js/dist/maps/Servers"; import { Server } from "revolt.js/dist/maps/Servers";
import styled from "styled-components"; import styled, { css } from "styled-components";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
@ -17,14 +17,30 @@ interface Props {
server: Server; server: Server;
} }
const ServerBanner = styled.div` interface Props {
background?: boolean;
}
const ServerBanner = styled.div<Props>`
background-color: var(--secondary-header); background-color: var(--secondary-header);
//height: 120px; //USE IF SERVER BANNER IS APPLIED
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: end; justify-content: end;
${(props) =>
props.background &&
css`
height: 120px;
.container {
background: linear-gradient(
0deg,
var(--secondary-background),
transparent
);
}
`}
.container { .container {
height: 48px; height: 48px;
display: flex; display: flex;
@ -49,8 +65,14 @@ export default observer(({ server }: Props) => {
const bannerURL = server.generateBannerURL({ width: 480 }); const bannerURL = server.generateBannerURL({ width: 480 });
return ( return (
<div> <ServerBanner
<ServerBanner> background={typeof bannerURL !== "undefined"}
style={{
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
background: bannerURL ? `url('${bannerURL}')` : undefined,
}}>
<div className="container"> <div className="container">
<div> <div>
{server.flags && server.flags & 1 ? ( {server.flags && server.flags & 1 ? (
@ -106,8 +128,7 @@ export default observer(({ server }: Props) => {
) : undefined} ) : undefined}
</div> </div>
<div className="title">{server.name}</div> <div className="title">{server.name}</div>
{(server.permission & ServerPermission.ManageServer) > {(server.permission & ServerPermission.ManageServer) > 0 && (
0 && (
<div className="actions"> <div className="actions">
<Link to={`/server/${server._id}/settings`}> <Link to={`/server/${server._id}/settings`}>
<IconButton> <IconButton>
@ -118,7 +139,6 @@ export default observer(({ server }: Props) => {
)} )}
</div> </div>
</ServerBanner> </ServerBanner>
</div>
/*<Header /*<Header
borders borders
placement="secondary" placement="secondary"