Kieran/snort
5
14
Fork 14
Code Issues 54 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

hide right column in some views
Some checks failed
continuous-integration/drone/pr Build is failing
Details

Browse Source
This commit is contained in:
Martti Malmi 2023-11-26 16:50:05 +02:00
parent 8bc323489e
commit 0434ae43d8
3 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/app/src/Pages/Layout/RightColumn.tsx
View File

@ -3,10 +3,14 @@ import TrendingUsers from "@/Element/TrendingUsers";
import TrendingHashtags from "@/Element/TrendingHashtags";
import TrendingNotes from "@/Element/TrendingPosts";
import { FormattedMessage } from "react-intl";
import classNames from "classnames";
export default function RightColumn() {
export default function RightColumn({ show = true }) {
return (
<div className="flex-col hidden lg:flex lg:w-1/3 sticky top-0 h-screen p-2 border-l border-neutral-900">
<div
className={classNames("flex-col hidden lg:w-1/3 sticky top-0 h-screen p-2 border-l border-neutral-900", {
"lg:flex": show,
})}>
<div>
<SearchBox />
</div>

4
packages/app/src/Pages/Layout/index.tsx
View File

@ -29,7 +29,9 @@ export default function Index() {
useLoginFeed();
const hideHeaderPaths = ["/login", "/new"];
const hideRightColumnPaths = ["/login", "/new", "/messages", "/settings"];
const shouldHideHeader = hideHeaderPaths.some(path => location.pathname.startsWith(path));
const shouldHideRightColumn = hideRightColumnPaths.some(path => location.pathname.startsWith(path));
const pageClassPaths = useMemo(
() => ({
@ -67,7 +69,7 @@ export default function Index() {
<Outlet />
</ErrorBoundary>
</div>
<RightColumn />
<RightColumn show={!shouldHideRightColumn} />
</div>
<div className="md:hidden">
<NoteCreatorButton className="note-create-button" />

4
packages/app/src/Pages/Messages/MessagesPage.css
View File

@ -1,8 +1,7 @@
.dm-page {
--full-height: calc(100vh - 42px - var(--header-padding-tb) - var(--header-padding-tb) - 16px);
display: grid;
grid-template-columns: 350px auto;
height: var(--full-height);
height: 100vh;
/* 100vh - header - padding */
overflow: hidden;
padding: 4px;
@ -16,6 +15,7 @@
@media (max-width: 768px) {
.dm-page {
grid-template-columns: 100vw;
height: calc(100vh - 62px);
}
.dm-page > div:nth-child(1) {