cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 23:22:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Fix: Some header adjustments

Browse source
This commit is contained in:
nizune 2021-07-03 16:40:56 +02:00
parent 324b87b9b5
commit 1ad69b4475
4 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/navigation/SidebarBase.tsx
View file

@ -16,6 +16,7 @@ export const GenericSidebarBase = styled.div<{ padding?: boolean }>`
flex-shrink: 0; flex-shrink: 0;
flex-direction: column; flex-direction: column;
background: var(--secondary-background); background: var(--secondary-background);
border-end-start-radius: 8px;
${ props => props.padding && isTouchscreenDevice && css` ${ props => props.padding && isTouchscreenDevice && css`
padding-bottom: 50px; padding-bottom: 50px;

2
src/components/navigation/left/ServerSidebar.tsx
View file

@ -28,6 +28,8 @@ const ServerBase = styled.div`
background: var(--secondary-background); background: var(--secondary-background);
border-start-start-radius: 8px; border-start-start-radius: 8px;
border-end-start-radius: 8px;
overflow: hidden;
`; `;
const ServerList = styled.div` const ServerList = styled.div`

23
src/components/ui/Header.tsx
View file

@ -7,19 +7,15 @@ interface Props {
} }
export default styled.div<Props>` export default styled.div<Props>`
height: 56px; display: flex;
height: 48px;
font-weight: 600; font-weight: 600;
align-items: center;
user-select: none; user-select: none;
gap: 6px;
display: flex;
align-items: center;
gap: 10px;
flex: 0 auto; flex: 0 auto;
display: flex; padding: 0 16px;
padding: 0 20px;
flex-shrink: 0; flex-shrink: 0;
align-items: center;
background-color: var(--primary-header); background-color: var(--primary-header);
background-size: cover !important; background-size: cover !important;
@ -29,8 +25,12 @@ export default styled.div<Props>`
flex-shrink: 0; flex-shrink: 0;
} }
@media only screen and (max-width: 768px) { /*@media only screen and (max-width: 768px) {
padding: 0 12px; padding: 0 12px;
}*/
@media (pointer: coarse) {
height: 56px;
} }
@ -45,7 +45,6 @@ export default styled.div<Props>`
` } ` }
${ props => props.borders && css` ${ props => props.borders && css`
border-start-start-radius: 8px; /*border-start-start-radius: 8px;*/
border-end-start-radius: 8px;
` } ` }
`; `;

11
src/pages/channels/ChannelHeader.tsx
View file

@ -11,6 +11,7 @@ import { At, Hash } from "@styled-icons/boxicons-regular";
import { Notepad, Group } from "@styled-icons/boxicons-solid"; import { Notepad, Group } from "@styled-icons/boxicons-solid";
import { useStatusColour } from "../../components/common/user/UserIcon"; import { useStatusColour } from "../../components/common/user/UserIcon";
import { useIntermediate } from "../../context/intermediate/Intermediate"; import { useIntermediate } from "../../context/intermediate/Intermediate";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
export interface ChannelHeaderProps { export interface ChannelHeaderProps {
channel: Channel, channel: Channel,
@ -25,14 +26,14 @@ const Info = styled.div`
display: flex; display: flex;
gap: 8px; gap: 8px;
align-items: baseline; align-items: center;
* { * {
display: inline-block; display: inline-block;
} }
.divider { .divider {
height: 14px; height: 20px;
margin: 0 5px; margin: 0 5px;
padding-left: 1px; padding-left: 1px;
background-color: var(--tertiary-background); background-color: var(--tertiary-background);
@ -48,6 +49,7 @@ const Info = styled.div`
.desc { .desc {
cursor: pointer; cursor: pointer;
margin-top: 2px;
font-size: 0.8em; font-size: 0.8em;
font-weight: 400; font-weight: 400;
color: var(--secondary-foreground); color: var(--secondary-foreground);
@ -82,7 +84,7 @@ export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderP
{ icon } { icon }
<Info> <Info>
<span className="name">{ name }</span> <span className="name">{ name }</span>
{channel.channel_type === "DirectMessage" && ( {isTouchscreenDevice && channel.channel_type === "DirectMessage" && (
<> <>
<div className="divider" /> <div className="divider" />
<span className="desc"> <span className="desc">
@ -91,7 +93,7 @@ export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderP
</span> </span>
</> </>
)} )}
{(channel.channel_type === "Group" || channel.channel_type === "TextChannel") && channel.description && ( {!isTouchscreenDevice && (channel.channel_type === "Group" || channel.channel_type === "TextChannel") && channel.description && (
<> <>
<div className="divider" /> <div className="divider" />
<span <span
@ -102,6 +104,7 @@ export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderP
channel_id: channel._id channel_id: channel._id
}) })
}> }>
<Markdown content={channel.description.split("\n")[0] ?? ""} disallowBigEmoji /> <Markdown content={channel.description.split("\n")[0] ?? ""} disallowBigEmoji />
</span> </span>
</> </>