cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 07:02:10 -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-direction: column;
background: var(--secondary-background);
border-end-start-radius: 8px;
${ props => props.padding && isTouchscreenDevice && css`
padding-bottom: 50px;

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

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

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

@ -7,19 +7,15 @@ interface Props {
}
export default styled.div<Props>`
height: 56px;
display: flex;
height: 48px;
font-weight: 600;
align-items: center;
user-select: none;
display: flex;
align-items: center;
gap: 10px;
gap: 6px;
flex: 0 auto;
display: flex;
padding: 0 20px;
padding: 0 16px;
flex-shrink: 0;
align-items: center;
background-color: var(--primary-header);
background-size: cover !important;
@ -29,8 +25,12 @@ export default styled.div<Props>`
flex-shrink: 0;
}
@media only screen and (max-width: 768px) {
/*@media only screen and (max-width: 768px) {
padding: 0 12px;
}*/
@media (pointer: coarse) {
height: 56px;
}
@ -45,7 +45,6 @@ export default styled.div<Props>`
` }
${ props => props.borders && css`
border-start-start-radius: 8px;
border-end-start-radius: 8px;
/*border-start-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 { useStatusColour } from "../../components/common/user/UserIcon";
import { useIntermediate } from "../../context/intermediate/Intermediate";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
export interface ChannelHeaderProps {
channel: Channel,
@ -25,14 +26,14 @@ const Info = styled.div`
display: flex;
gap: 8px;
align-items: baseline;
align-items: center;
* {
display: inline-block;
}
.divider {
height: 14px;
height: 20px;
margin: 0 5px;
padding-left: 1px;
background-color: var(--tertiary-background);
@ -48,6 +49,7 @@ const Info = styled.div`
.desc {
cursor: pointer;
margin-top: 2px;
font-size: 0.8em;
font-weight: 400;
color: var(--secondary-foreground);
@ -82,7 +84,7 @@ export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderP
{ icon }
<Info>
<span className="name">{ name }</span>
{channel.channel_type === "DirectMessage" && (
{isTouchscreenDevice && channel.channel_type === "DirectMessage" && (
<>
<div className="divider" />
<span className="desc">
@ -91,7 +93,7 @@ export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderP
</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" />
<span
@ -102,6 +104,7 @@ export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderP
channel_id: channel._id
})
}>
<Markdown content={channel.description.split("\n")[0] ?? ""} disallowBigEmoji />
</span>
</>