Skip to content
This repository was archived by the owner on Sep 9, 2024. It is now read-only.

Commit 83c9d91

Browse files
KaneFreemanKaneFreeman
authored
feat: mobile support (#831)
1 parent 7744df1 commit 83c9d91

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+2265
-1111
lines changed

‎packages/core/dev-test/config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -870,7 +870,7 @@ collections:
870870
- value: 2
871871
label: Another fancy label
872872
- value: c
873-
label: And one more fancy label
873+
label: And one more fancy label test test test test test test test
874874
- label: Value and Label With Default
875875
name: value_and_label_with_default
876876
widget: select

‎packages/core/package.json

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,9 @@
8484
"@styled-icons/material-rounded": "10.47.0",
8585
"@styled-icons/remix-editor": "10.46.0",
8686
"@styled-icons/simple-icons": "10.46.0",
87-
"@udecode/plate": "21.1.4",
88-
"@udecode/plate-juice": "21.0.0",
89-
"@udecode/plate-serializer-md": "21.0.0",
87+
"@udecode/plate": "21.3.2",
88+
"@udecode/plate-juice": "21.3.2",
89+
"@udecode/plate-serializer-md": "21.3.2",
9090
"@uiw/codemirror-extensions-langs": "4.19.16",
9191
"@uiw/react-codemirror": "4.19.16",
9292
"ajv": "8.12.0",
@@ -156,10 +156,10 @@
156156
"sanitize-filename": "1.6.3",
157157
"scheduler": "0.23.0",
158158
"semaphore": "1.1.0",
159-
"slate": "0.91.4",
160-
"slate-history": "0.86.0",
159+
"slate": "0.94.1",
160+
"slate-history": "0.93.0",
161161
"slate-hyperscript": "0.77.0",
162-
"slate-react": "0.91.10",
162+
"slate-react": "0.95.0",
163163
"stream-browserify": "3.0.0",
164164
"styled-components": "5.3.10",
165165
"symbol-observable": "4.0.0",
@@ -271,6 +271,7 @@
271271
"tailwindcss": "3.3.1",
272272
"to-string-loader": "1.2.0",
273273
"ts-jest": "29.1.0",
274+
"ts-node": "10.9.1",
274275
"tsconfig-paths-webpack-plugin": "4.0.1",
275276
"typescript": "5.0.4",
276277
"webpack": "5.80.0",

‎packages/core/src/bootstrap.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import addExtensions from './extensions';
1616
import { getPhrases } from './lib/phrases';
1717
import { selectLocale } from './reducers/selectors/config';
1818
import { store } from './store';
19+
import useMeta from './lib/hooks/useMeta';
1920

2021
import type { AnyAction } from '@reduxjs/toolkit';
2122
import type { ConnectedProps } from 'react-redux';
@@ -45,6 +46,8 @@ import ReactDOM from 'react-dom';
4546
ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = true;
4647

4748
const TranslatedApp = ({ locale, config }: AppRootProps) => {
49+
useMeta({ name: 'viewport', content: 'width=device-width, initial-scale=1.0' });
50+
4851
if (!config) {
4952
return null;
5053
}

‎packages/core/src/components/MainView.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ import React from 'react';
22
import TopBarProgress from 'react-topbar-progress-indicator';
33

44
import classNames from '../lib/util/classNames.util';
5+
import BottomNavigation from './navbar/BottomNavigation';
56
import Navbar from './navbar/Navbar';
67
import Sidebar from './navbar/Sidebar';
78

89
import type { ReactNode } from 'react';
9-
import type { Breadcrumb } from '../interface';
10+
import type { Breadcrumb, Collection } from '../interface';
1011

1112
TopBarProgress.config({
1213
barColors: {
@@ -25,6 +26,7 @@ interface MainViewProps {
2526
noMargin?: boolean;
2627
noScroll?: boolean;
2728
children: ReactNode;
29+
collection?: Collection;
2830
}
2931

3032
const MainView = ({
@@ -35,6 +37,7 @@ const MainView = ({
3537
noMargin = false,
3638
noScroll = false,
3739
navbarActions,
40+
collection,
3841
}: MainViewProps) => {
3942
return (
4043
<>
@@ -48,11 +51,12 @@ const MainView = ({
4851
<div
4952
id="main-view"
5053
className={classNames(
51-
showLeftNav ? 'w-main left-64' : 'w-full',
54+
showLeftNav ? ' w-full left-0 md:w-main' : 'w-full',
5255
!noMargin && 'px-5 py-4',
5356
noScroll ? 'overflow-hidden' : 'overflow-y-auto',
5457
`
55-
h-main
58+
h-main-mobile
59+
md:h-main
5660
relative
5761
styled-scrollbars
5862
`,
@@ -61,6 +65,7 @@ const MainView = ({
6165
{children}
6266
</div>
6367
</div>
68+
<BottomNavigation collection={collection} />
6469
</>
6570
);
6671
};

‎packages/core/src/components/collections/CollectionControls.tsx

Lines changed: 63 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import React from 'react';
1+
import React, { useMemo } from 'react';
22

3+
import ViewStyleControl from '../common/view-style/ViewStyleControl';
34
import FilterControl from './FilterControl';
45
import GroupControl from './GroupControl';
6+
import MobileCollectionControls from './mobile/MobileCollectionControls';
57
import SortControl from './SortControl';
6-
import ViewStyleControl from '../common/view-style/ViewStyleControl';
78

89
import type { ViewStyle } from '@staticcms/core/constants/views';
910
import type {
@@ -12,7 +13,6 @@ import type {
1213
SortableField,
1314
SortDirection,
1415
SortMap,
15-
TranslatedProps,
1616
ViewFilter,
1717
ViewGroup,
1818
} from '@staticcms/core/interface';
@@ -41,34 +41,69 @@ const CollectionControls = ({
4141
viewGroups,
4242
onFilterClick,
4343
onGroupClick,
44-
t,
4544
filter,
4645
group,
47-
}: TranslatedProps<CollectionControlsProps>) => {
46+
}: CollectionControlsProps) => {
47+
const showGroupControl = useMemo(
48+
() => Boolean(viewGroups && onGroupClick && group && viewGroups.length > 0),
49+
[group, onGroupClick, viewGroups],
50+
);
51+
52+
const showFilterControl = useMemo(
53+
() => Boolean(viewFilters && onFilterClick && filter && viewFilters.length > 0),
54+
[filter, onFilterClick, viewFilters],
55+
);
56+
57+
const showSortControl = useMemo(
58+
() => Boolean(sortableFields && onSortClick && sort && sortableFields.length > 0),
59+
[onSortClick, sort, sortableFields],
60+
);
61+
4862
return (
49-
<div className="flex gap-2 items-center relative z-20">
50-
<ViewStyleControl viewStyle={viewStyle} onChangeViewStyle={onChangeViewStyle} />
51-
{viewGroups && onGroupClick && group
52-
? viewGroups.length > 0 && (
53-
<GroupControl viewGroups={viewGroups} onGroupClick={onGroupClick} t={t} group={group} />
54-
)
55-
: null}
56-
{viewFilters && onFilterClick && filter
57-
? viewFilters.length > 0 && (
58-
<FilterControl
59-
viewFilters={viewFilters}
60-
onFilterClick={onFilterClick}
61-
t={t}
62-
filter={filter}
63-
/>
64-
)
65-
: null}
66-
{sortableFields && onSortClick && sort
67-
? sortableFields.length > 0 && (
68-
<SortControl fields={sortableFields} sort={sort} onSortClick={onSortClick} />
69-
)
70-
: null}
71-
</div>
63+
<>
64+
<div
65+
className="
66+
flex
67+
items-center
68+
relative
69+
z-20
70+
w-full
71+
justify-end
72+
gap-1.5
73+
sm:w-auto
74+
sm:justify-normal
75+
lg:gap-2
76+
flex-[1_0_0%]
77+
"
78+
>
79+
<ViewStyleControl viewStyle={viewStyle} onChangeViewStyle={onChangeViewStyle} />
80+
{showGroupControl || showFilterControl || showFilterControl ? (
81+
<MobileCollectionControls
82+
showFilterControl={showFilterControl}
83+
viewFilters={viewFilters}
84+
onFilterClick={onFilterClick}
85+
filter={filter}
86+
showGroupControl={showGroupControl}
87+
viewGroups={viewGroups}
88+
onGroupClick={onGroupClick}
89+
group={group}
90+
showSortControl={showSortControl}
91+
fields={sortableFields}
92+
sort={sort}
93+
onSortClick={onSortClick}
94+
/>
95+
) : null}
96+
{showGroupControl ? (
97+
<GroupControl viewGroups={viewGroups} onGroupClick={onGroupClick} group={group} />
98+
) : null}
99+
{showFilterControl ? (
100+
<FilterControl viewFilters={viewFilters} onFilterClick={onFilterClick} filter={filter} />
101+
) : null}
102+
{showSortControl ? (
103+
<SortControl fields={sortableFields} sort={sort} onSortClick={onSortClick} />
104+
) : null}
105+
</div>
106+
</>
72107
);
73108
};
74109

‎packages/core/src/components/collections/CollectionHeader.tsx

Lines changed: 34 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,25 @@ import {
1111
import { isNotEmpty } from '@staticcms/core/lib/util/string.util';
1212
import { addFileTemplateFields } from '@staticcms/core/lib/widgets/stringTemplate';
1313
import Button from '../common/button/Button';
14+
import useNewEntryUrl from '@staticcms/core/lib/hooks/useNewEntryUrl';
1415

1516
import type { Collection, Entry, TranslatedProps } from '@staticcms/core/interface';
17+
import type { FC } from 'react';
1618

1719
interface CollectionHeaderProps {
1820
collection: Collection;
19-
newEntryUrl?: string;
2021
}
2122

22-
const CollectionHeader = ({
23-
collection,
24-
newEntryUrl,
25-
t,
26-
}: TranslatedProps<CollectionHeaderProps>) => {
23+
const CollectionHeader: FC<TranslatedProps<CollectionHeaderProps>> = ({ collection, t }) => {
2724
const collectionLabel = collection.label;
2825
const collectionLabelSingular = collection.label_singular;
2926

30-
const icon = useIcon(collection.icon);
31-
3227
const params = useParams();
3328
const filterTerm = useMemo(() => params['*'], [params]);
29+
const newEntryUrl = useNewEntryUrl(collection, filterTerm);
30+
31+
const icon = useIcon(collection.icon);
32+
3433
const entries = useEntries(collection);
3534

3635
const pluralLabel = useMemo(() => {
@@ -65,7 +64,18 @@ const CollectionHeader = ({
6564

6665
return (
6766
<>
68-
<div className="flex flex-grow gap-4">
67+
<div
68+
className="
69+
flex
70+
flex-grow
71+
gap-4
72+
justify-normal
73+
xs:justify-between
74+
sm:justify-normal
75+
w-full
76+
truncate
77+
"
78+
>
6979
<h2
7080
className="
7181
text-xl
@@ -75,13 +85,25 @@ const CollectionHeader = ({
7585
text-gray-800
7686
dark:text-gray-300
7787
gap-2
88+
flex-grow
89+
w-full
90+
md:grow-0
91+
md:w-auto
7892
"
7993
>
8094
<div className="flex items-center">{icon}</div>
81-
{pluralLabel}
95+
<div
96+
className="
97+
w-collection-header
98+
flex-grow
99+
truncate
100+
"
101+
>
102+
{pluralLabel}
103+
</div>
82104
</h2>
83105
{newEntryUrl ? (
84-
<Button to={newEntryUrl}>
106+
<Button to={newEntryUrl} className="hidden md:flex">
85107
{t('collection.collectionTop.newButton', {
86108
collectionLabel: collectionLabelSingular || pluralLabel,
87109
})}
@@ -92,4 +114,4 @@ const CollectionHeader = ({
92114
);
93115
};
94116

95-
export default translate()(CollectionHeader);
117+
export default translate()(CollectionHeader) as FC<CollectionHeaderProps>;

‎packages/core/src/components/collections/CollectionPage.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,14 @@ const SingleCollectionPage: FC<SingleCollectionPageProps> = ({
4242
const breadcrumbs = useBreadcrumbs(collection, filterTerm);
4343

4444
return (
45-
<MainView breadcrumbs={breadcrumbs} showQuickCreate showLeftNav noScroll noMargin>
45+
<MainView
46+
breadcrumbs={breadcrumbs}
47+
collection={collection}
48+
showQuickCreate
49+
showLeftNav
50+
noScroll
51+
noMargin
52+
>
4653
<CollectionView
4754
name={name}
4855
searchTerm={searchTerm}

‎packages/core/src/components/collections/CollectionSearch.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,10 @@ const CollectionSearch = ({
136136
[submitSearch],
137137
);
138138

139+
const handleClick = useCallback((event: MouseEvent) => {
140+
event.stopPropagation();
141+
}, []);
142+
139143
return (
140144
<div>
141145
<div className="relative">
@@ -171,6 +175,7 @@ const CollectionSearch = ({
171175
onFocus={handleFocus}
172176
value={query}
173177
onChange={handleQueryChange}
178+
onClick={handleClick}
174179
/>
175180
</div>
176181
<PopperUnstyled
@@ -191,7 +196,7 @@ const CollectionSearch = ({
191196
ring-opacity-5
192197
focus:outline-none
193198
sm:text-sm
194-
z-40
199+
z-[1300]
195200
dark:bg-slate-700
196201
dark:shadow-lg
197202
"

0 commit comments

Comments
 (0)