From 1ad69b44752b2e3bcb5bcb78e29aefd1b418a42c Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Sat, 3 Jul 2021 16:40:56 +0200
Subject: [PATCH] Fix: Some header adjustments
---
src/components/navigation/SidebarBase.tsx | 1 +
.../navigation/left/ServerSidebar.tsx | 2 ++
src/components/ui/Header.tsx | 23 +++++++++----------
src/pages/channels/ChannelHeader.tsx | 11 +++++----
4 files changed, 21 insertions(+), 16 deletions(-)
diff --git a/src/components/navigation/SidebarBase.tsx b/src/components/navigation/SidebarBase.tsx
index c751d7f..00c6f66 100644
--- a/src/components/navigation/SidebarBase.tsx
+++ b/src/components/navigation/SidebarBase.tsx
@@ -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;
diff --git a/src/components/navigation/left/ServerSidebar.tsx b/src/components/navigation/left/ServerSidebar.tsx
index 2d10ce2..49e5795 100644
--- a/src/components/navigation/left/ServerSidebar.tsx
+++ b/src/components/navigation/left/ServerSidebar.tsx
@@ -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`
diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx
index 747a24f..f3948d6 100644
--- a/src/components/ui/Header.tsx
+++ b/src/components/ui/Header.tsx
@@ -7,19 +7,15 @@ interface Props {
}
export default styled.div<Props>`
- height: 56px;
- font-weight: 600;
- user-select: none;
-
display: flex;
+ height: 48px;
+ font-weight: 600;
align-items: center;
-
- gap: 10px;
+ user-select: none;
+ 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;*/
` }
`;
diff --git a/src/pages/channels/ChannelHeader.tsx b/src/pages/channels/ChannelHeader.tsx
index a67204f..5dae6a0 100644
--- a/src/pages/channels/ChannelHeader.tsx
+++ b/src/pages/channels/ChannelHeader.tsx
@@ -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>
</>
--
GitLab