mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-16 04:00:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

add back btn for mobile view (#1861)

Browse source
This commit is contained in:
Ajay Bura 2024-08-03 19:17:53 +05:30 • committed by GitHub
parent c62050445b
commit 9cb5c70d51
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 370 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/app/pages/client/explore/Featured.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Box, Icon, Icons, Scroll, Text } from 'folds';
import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
import { useAtomValue } from 'jotai';
import { useClientConfig } from '../../../hooks/useClientConfig';
import { RoomCard, RoomCardGrid } from '../../../components/room-card';
@ -9,21 +9,38 @@ import {
Page,
PageContent,
PageContentCenter,
PageHeader,
PageHero,
PageHeroSection,
} from '../../../components/page';
import { RoomTopicViewer } from '../../../components/room-topic-viewer';
import * as css from './style.css';
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
import { BackRouteHandler } from '../../../components/BackRouteHandler';
export function FeaturedRooms() {
const { featuredCommunities } = useClientConfig();
const { rooms, spaces } = featuredCommunities ?? {};
const allRooms = useAtomValue(allRoomsAtom);
const screenSize = useScreenSizeContext();
const { navigateSpace, navigateRoom } = useRoomNavigate();
return (
<Page>
{screenSize === ScreenSize.Mobile && (
<PageHeader>
<Box shrink="No">
<BackRouteHandler>
{(onBack) => (
<IconButton onClick={onBack}>
<Icon src={Icons.ArrowLeft} />
</IconButton>
)}
</BackRouteHandler>
</Box>
</PageHeader>
)}
<Box grow="Yes">
<Scroll hideTrack visibility="Hover">
<PageContent>

36
src/app/pages/client/explore/Server.tsx
View file

@ -13,6 +13,7 @@ import {
Button,
Chip,
Icon,
IconButton,
Icons,
Input,
Line,
@ -42,6 +43,8 @@ import { allRoomsAtom } from '../../../state/room-list/roomList';
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
import { getMxIdServer } from '../../../utils/matrix';
import { stopPropagation } from '../../../utils/keyboard';
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
import { BackRouteHandler } from '../../../components/BackRouteHandler';
const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams =>
useMemo(
@ -344,6 +347,7 @@ export function PublicRooms() {
const userServer = userId && getMxIdServer(userId);
const allRooms = useAtomValue(allRoomsAtom);
const { navigateSpace, navigateRoom } = useRoomNavigate();
const screenSize = useScreenSizeContext();
const [searchParams] = useSearchParams();
const serverSearchParams = useServerSearchParams(searchParams);
@ -466,7 +470,7 @@ export function PublicRooms() {
return (
<Page>
<PageHeader>
<PageHeader balance>
{isSearch ? (
<>
<Box grow="Yes" basis="No">
@ -482,20 +486,34 @@ export function PublicRooms() {
</Box>
<Box grow="No" justifyContent="Center" alignItems="Center" gap="200">
<Icon size="400" src={Icons.Search} />
{screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Search} />}
<Text size="H3" truncate>
Search
</Text>
</Box>
<Box grow="Yes" />
<Box grow="Yes" basis="No" />
</>
) : (
<Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
<Icon size="400" src={Icons.Category} />
<Text size="H3" truncate>
{server}
</Text>
</Box>
<>
<Box grow="Yes" basis="No">
{screenSize === ScreenSize.Mobile && (
<BackRouteHandler>
{(onBack) => (
<IconButton onClick={onBack}>
<Icon src={Icons.ArrowLeft} />
</IconButton>
)}
</BackRouteHandler>
)}
</Box>
<Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
{screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Category} />}
<Text size="H3" truncate>
{server}
</Text>
</Box>
<Box grow="Yes" basis="No" />
</>
)}
</PageHeader>
<Box grow="Yes">