mirror of
https://github.com/myfatemi04/wheelshare-frontend.git
synced 2025-04-16 00:50:18 -04:00
wonderful two column layouts
This commit is contained in:
Michael Fatemi
parent
99ed5fe2b9
commit
8ad8726780
|
|
@ -7,7 +7,7 @@ import UISecondaryBox from '../UI/UISecondaryBox';
|
|||
function ActiveCarpoolListItem({ carpool }: { carpool: ICarpool }) {
|
||||
return (
|
||||
<div>
|
||||
<h2>{carpool.name}</h2>
|
||||
<h4>{carpool.name}</h4>
|
||||
<UILink href={`/carpools/${carpool.id}`}>View carpool</UILink>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -25,6 +25,7 @@ export default function ActiveCarpools() {
|
|||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '19rem',
|
||||
}}
|
||||
>
|
||||
<h1 style={{ textAlign: 'center' }}>Carpools</h1>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import WheelShareLoggedOut from './WheelShareLoggedOut';
|
|||
const Authenticator = lazy(() => import('./Authentication/Authenticator'));
|
||||
const CarpoolPage = lazy(() => import('./Carpool/CarpoolPage'));
|
||||
const EventPage = lazy(() => import('./Event/EventPage'));
|
||||
const Group = lazy(() => import('./Group/GroupPage'));
|
||||
const GroupPage = lazy(() => import('./Group/GroupPage'));
|
||||
|
||||
const style: CSSProperties = {
|
||||
display: 'flex',
|
||||
|
|
@ -53,7 +53,7 @@ export default function App() {
|
|||
<Route path="/" exact component={WheelShare} />
|
||||
<Route path="/carpools/:id" component={CarpoolPage} />
|
||||
<Route path="/events/:id" component={EventPage} />
|
||||
<Route path="/groups/:id" component={Group} />
|
||||
<Route path="/groups/:id" component={GroupPage} />
|
||||
</NotificationsProvider>
|
||||
) : (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export default function Event({
|
|||
tentativeInvites,
|
||||
}}
|
||||
>
|
||||
<UISecondaryBox style={{}}>
|
||||
<UISecondaryBox style={{ minWidth: '15rem' }}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<UISecondaryHeader>{name}</UISecondaryHeader>
|
||||
{group && <GroupName group={group} />}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import UISecondaryBox from '../UI/UISecondaryBox';
|
|||
|
||||
export default function EventPlaceholder() {
|
||||
return (
|
||||
<UISecondaryBox style={{ height: '10rem' }}>Loading...</UISecondaryBox>
|
||||
<UISecondaryBox style={{ height: '10rem', width: '15rem' }}>
|
||||
Loading...
|
||||
</UISecondaryBox>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ export default function EventCreator({ group }: { group: IGroup }) {
|
|||
]);
|
||||
|
||||
return (
|
||||
<UISecondaryBox style={{ width: '100%', textAlign: 'center' }}>
|
||||
<UISecondaryBox style={{ textAlign: 'center' }}>
|
||||
<h1 style={{ textAlign: 'center', marginBottom: '0.5rem' }}>
|
||||
Create Event
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import EventStream from '../EventStream';
|
|||
import { useMe } from '../hooks';
|
||||
import { IGroup } from '../types';
|
||||
import UILink from '../UI/UILink';
|
||||
import UITwoColumns from '../UI/UITwoColumns';
|
||||
import useImmutable from '../useImmutable';
|
||||
import GroupMembersLink from './GroupMembersLink';
|
||||
import GroupSettingsLink from './GroupSettingsLink';
|
||||
|
|
@ -47,36 +48,41 @@ export default function Group({ id }: { id: number }) {
|
|||
|
||||
return group ? (
|
||||
<GroupContext.Provider value={{ group }}>
|
||||
<h1>{group.name}</h1>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<UILink href="/">Home</UILink>
|
||||
<br />
|
||||
<GroupMembersLink />
|
||||
<br />
|
||||
{isAdmin && (
|
||||
<>
|
||||
<GroupSettingsLink />
|
||||
<UITwoColumns
|
||||
first={
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
minWidth: '10rem',
|
||||
}}
|
||||
>
|
||||
<h1>{group.name}</h1>
|
||||
<UILink href="/">Home</UILink>
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
<EventCreatorLink />
|
||||
</div>
|
||||
<br />
|
||||
|
||||
{group.events?.length > 0 ? (
|
||||
<EventStream events={group.events} />
|
||||
) : (
|
||||
<span>
|
||||
There are no events yet. Click 'create event' above to add one!
|
||||
</span>
|
||||
)}
|
||||
<GroupMembersLink />
|
||||
<br />
|
||||
{isAdmin && (
|
||||
<>
|
||||
<GroupSettingsLink />
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
<EventCreatorLink />
|
||||
</div>
|
||||
}
|
||||
firstFlex={1}
|
||||
second={
|
||||
group.events?.length > 0 ? (
|
||||
<EventStream events={group.events} />
|
||||
) : (
|
||||
<span>
|
||||
There are no events yet. Click 'create event' above to add one!
|
||||
</span>
|
||||
)
|
||||
}
|
||||
secondFlex={2}
|
||||
/>
|
||||
</GroupContext.Provider>
|
||||
) : (
|
||||
<h1>Group not found</h1>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export default function GroupMembersLink() {
|
|||
<>
|
||||
<br />
|
||||
<UISecondaryBox style={{ width: '100%', textAlign: 'center' }}>
|
||||
<h1>Members</h1>
|
||||
<h3>Members</h3>
|
||||
|
||||
{group.users.map(({ name, id }) => (
|
||||
<span key={id}>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default function GroupCreator() {
|
|||
|
||||
return (
|
||||
<UISecondaryBox style={{ width: '100%', boxSizing: 'border-box' }}>
|
||||
<h1 style={{ textAlign: 'center' }}>Create Group</h1>
|
||||
<h3 style={{ textAlign: 'center' }}>Create Group</h3>
|
||||
Name
|
||||
<UITextInput onChangeText={setName} value={name} />
|
||||
<UIButton
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ function GroupJoiner() {
|
|||
|
||||
return (
|
||||
<UISecondaryBox style={{ width: '100%', textAlign: 'center' }}>
|
||||
<h1>Join Group</h1>
|
||||
<h3>Join Group</h3>
|
||||
Code
|
||||
<UITextInput value={code} onChangeText={setCode} />
|
||||
{group && (
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import UISecondaryBox from '../UI/UISecondaryBox';
|
|||
function GroupListItem({ group }: { group: IGroup }) {
|
||||
return (
|
||||
<div>
|
||||
<h2>{group.name}</h2>
|
||||
<h4>{group.name}</h4>
|
||||
<UILink href={`/groups/${group.id}`}>View group</UILink>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ export default function Groups() {
|
|||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '19rem',
|
||||
}}
|
||||
>
|
||||
<h1 style={{ textAlign: 'center' }}>Groups</h1>
|
||||
|
|
|
|||
47
src/components/UI/UITwoColumns.tsx
Normal file
47
src/components/UI/UITwoColumns.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import { ReactNode } from 'react';
|
||||
|
||||
export default function UITwoColumns({
|
||||
first,
|
||||
second,
|
||||
firstFlex,
|
||||
secondFlex,
|
||||
}: {
|
||||
first: ReactNode;
|
||||
second: ReactNode;
|
||||
firstFlex: number;
|
||||
secondFlex: number;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '60rem',
|
||||
maxWidth: '100vw',
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flex: firstFlex,
|
||||
padding: '1rem',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{first}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flex: secondFlex,
|
||||
padding: '1rem',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{second}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,42 +1,20 @@
|
|||
import ActiveCarpools from './ActiveCarpools/ActiveCarpools';
|
||||
import ActiveEvents from './ActiveEvents/Events';
|
||||
import Groups from './Groups/Groups';
|
||||
import UITwoColumns from './UI/UITwoColumns';
|
||||
|
||||
export default function WheelShare() {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '60rem',
|
||||
maxWidth: '100vw',
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flex: 1,
|
||||
padding: '1rem',
|
||||
minWidth: '20rem',
|
||||
}}
|
||||
>
|
||||
<UITwoColumns
|
||||
firstFlex={1}
|
||||
first={
|
||||
<>
|
||||
<ActiveCarpools />
|
||||
<Groups />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flex: 1,
|
||||
padding: '1rem',
|
||||
minWidth: '20rem',
|
||||
}}
|
||||
>
|
||||
<ActiveEvents />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</>
|
||||
}
|
||||
secondFlex={2}
|
||||
second={<ActiveEvents />}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user