From f0d994074d4a4509eb84c50740f658bab5caaa6d Mon Sep 17 00:00:00 2001 From: bunker-admin Date: Thu, 9 Apr 2026 11:43:23 -0600 Subject: [PATCH] Update admin modals and page components for mobile responsiveness Bunker Admin --- .env.example | 1 + .../components/calendar/CalendarItemModal.tsx | 45 ++- .../canvass/ExportContactsModal.tsx | 54 ++-- .../docs/AuthorsManagementModal.tsx | 38 +-- admin/src/components/docs/MoveToModal.tsx | 14 +- .../src/components/docs/NewBlogPostModal.tsx | 21 +- .../components/docs/WikiLinkPickerModal.tsx | 14 +- .../email-templates/TestEmailModal.tsx | 22 +- .../components/media/AddToPlaylistModal.tsx | 20 +- .../components/media/BulkAccessLevelModal.tsx | 20 +- .../media/BulkAddToPlaylistModal.tsx | 21 +- .../src/components/media/CreateAlbumModal.tsx | 20 +- .../components/media/CreatePlaylistModal.tsx | 17 +- .../components/media/EditPlaylistModal.tsx | 3 +- .../components/media/SchedulePublishModal.tsx | 23 +- .../components/payments/DonateInsertModal.tsx | 23 +- .../payments/ProductInsertModal.tsx | 19 +- .../people/CreateUserFromContactModal.tsx | 32 +- .../components/people/MergeContactModal.tsx | 21 +- .../components/scheduling/PollInsertModal.tsx | 12 +- .../components/social/RecommendVideoModal.tsx | 21 +- .../influence/CampaignModerationPage.tsx | 52 +++- .../src/pages/influence/ImpactStoriesPage.tsx | 107 ++++--- .../influence/PetitionModerationPage.tsx | 45 ++- admin/src/pages/influence/PetitionsPage.tsx | 17 +- admin/src/pages/media/GalleryAdsPage.tsx | 14 + .../src/pages/payments/DonationPagesPage.tsx | 16 +- admin/src/pages/payments/DonationsPage.tsx | 117 ++++---- admin/src/pages/payments/PlansPage.tsx | 16 +- admin/src/pages/sms/NewConversationModal.tsx | 12 +- admin/src/pages/sms/SmsContactsPage.tsx | 23 +- .../src/pages/social/ChallengesAdminPage.tsx | 86 +++--- .../src/pages/social/SocialModerationPage.tsx | 41 ++- admin/src/pages/social/SpotlightAdminPage.tsx | 145 +++++---- admin/src/pages/volunteer/ReferralsPage.tsx | 21 +- .../pages/volunteer/SharedCalendarsPage.tsx | 20 +- configs/code-server/data/coder.json | 4 + .../social/docs/getting-started/index.png | Bin 25750 -> 29560 bytes mkdocs/.cache/plugin/social/manifest.json | 2 +- .../repo-data/admin-changemaker.lite.json | 4 +- .../repo-data/anthropics-claude-code.json | 8 +- .../assets/repo-data/coder-code-server.json | 4 +- .../repo-data/gethomepage-homepage.json | 4 +- .../docs/assets/repo-data/go-gitea-gitea.json | 2 +- .../docs/assets/repo-data/knadh-listmonk.json | 4 +- mkdocs/docs/assets/repo-data/n8n-io-n8n.json | 10 +- .../docs/assets/repo-data/nocodb-nocodb.json | 6 +- .../docs/assets/repo-data/ollama-ollama.json | 10 +- .../repo-data/squidfunk-mkdocs-material.json | 4 +- .../docs/getting-started/control-panel.md | 3 + .../getting-started/environment-variables.md | 3 + mkdocs/docs/docs/getting-started/features.md | 3 + .../docs/docs/getting-started/first-steps.md | 3 + mkdocs/docs/docs/getting-started/index.md | 199 ++++++++++-- .../docs/docs/getting-started/installation.md | 3 + .../docs/getting-started/prerequisites.md | 5 +- mkdocs/docs/docs/getting-started/services.md | 3 + mkdocs/docs/docs/getting-started/upgrades.md | 3 + .../social/docs/getting-started/index.png | Bin 25750 -> 29560 bytes .../repo-data/admin-changemaker.lite.json | 4 +- .../repo-data/anthropics-claude-code.json | 8 +- .../assets/repo-data/coder-code-server.json | 4 +- .../repo-data/gethomepage-homepage.json | 4 +- .../site/assets/repo-data/go-gitea-gitea.json | 2 +- .../site/assets/repo-data/knadh-listmonk.json | 4 +- mkdocs/site/assets/repo-data/n8n-io-n8n.json | 10 +- .../site/assets/repo-data/nocodb-nocodb.json | 6 +- .../site/assets/repo-data/ollama-ollama.json | 10 +- .../repo-data/squidfunk-mkdocs-material.json | 4 +- .../getting-started/control-panel/index.html | 4 + .../environment-variables/index.html | 4 + .../docs/getting-started/features/index.html | 4 + .../getting-started/first-steps/index.html | 4 + mkdocs/site/docs/getting-started/index.html | 284 +++++++++++++++--- .../getting-started/installation/index.html | 4 + .../getting-started/prerequisites/index.html | 6 +- .../docs/getting-started/services/index.html | 4 + .../docs/getting-started/upgrades/index.html | 4 + mkdocs/site/search/search_index.json | 2 +- mkdocs/site/tags.json | 2 +- mkdocs/site/test/index.html | 1 + 81 files changed, 1271 insertions(+), 588 deletions(-) diff --git a/.env.example b/.env.example index 99421177..3d29ab5a 100644 --- a/.env.example +++ b/.env.example @@ -269,6 +269,7 @@ MKDOCS_DOCS_PATH=/mkdocs/docs # --- Code Server --- CODE_SERVER_PORT=8888 CODE_SERVER_URL=http://code-server-changemaker:8443 +USER_NAME=coder # --- Homepage --- HOMEPAGE_PORT=3010 diff --git a/admin/src/components/calendar/CalendarItemModal.tsx b/admin/src/components/calendar/CalendarItemModal.tsx index a400d455..ae9c8791 100644 --- a/admin/src/components/calendar/CalendarItemModal.tsx +++ b/admin/src/components/calendar/CalendarItemModal.tsx @@ -1,6 +1,6 @@ import { useState, useEffect, useMemo } from 'react'; import { - Modal, + Drawer, Form, Input, DatePicker, @@ -169,13 +169,20 @@ export default function CalendarItemModal({ }; return ( - form.submit()} loading={loading}> + {isEditing ? 'Save Changes' : 'Create'} + + } >
-
- {isEditing && onDelete && ( - - )} -
- - - - - + + )}
-
+ ); } diff --git a/admin/src/components/canvass/ExportContactsModal.tsx b/admin/src/components/canvass/ExportContactsModal.tsx index b6c5fc4d..63fd349b 100644 --- a/admin/src/components/canvass/ExportContactsModal.tsx +++ b/admin/src/components/canvass/ExportContactsModal.tsx @@ -1,7 +1,7 @@ import { useState, useEffect, useCallback } from 'react'; import { - Modal, Form, Select, Checkbox, Slider, DatePicker, Switch, - Button, Statistic, Row, Col, Descriptions, Alert, Spin, App, Grid, + Drawer, Form, Select, Checkbox, Slider, DatePicker, Switch, + Button, Statistic, Row, Col, Descriptions, Alert, Spin, App, Grid, Space, } from 'antd'; import { ExportOutlined, EyeOutlined } from '@ant-design/icons'; import { api } from '@/lib/api'; @@ -152,32 +152,34 @@ export default function ExportContactsModal({ }; return ( - Cancel, - , - , - ]} + placement="right" + mask={false} + rootStyle={{ position: 'absolute', top: 64, height: 'calc(100vh - 64px)' }} + extra={ + + + + + } >
)} - + ); } diff --git a/admin/src/components/docs/AuthorsManagementModal.tsx b/admin/src/components/docs/AuthorsManagementModal.tsx index fa2944b9..a31bd2a5 100644 --- a/admin/src/components/docs/AuthorsManagementModal.tsx +++ b/admin/src/components/docs/AuthorsManagementModal.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; import { - Modal, + Drawer, Button, Input, Space, @@ -150,7 +150,7 @@ export function AuthorsManagementModal({ const authorEntries = Object.entries(localAuthors); return ( - @@ -158,23 +158,23 @@ export function AuthorsManagementModal({ } open={open} - onCancel={onClose} - footer={ - - - - - } - destroyOnHidden + onClose={onClose} width={560} + placement="right" + mask={false} + rootStyle={{ position: 'absolute', top: 64, height: 'calc(100vh - 64px)' }} + destroyOnClose + extra={ + + } > {contextHolder} @@ -236,7 +236,7 @@ export function AuthorsManagementModal({ )} - + ); } diff --git a/admin/src/components/docs/MoveToModal.tsx b/admin/src/components/docs/MoveToModal.tsx index 86c3261a..295039b1 100644 --- a/admin/src/components/docs/MoveToModal.tsx +++ b/admin/src/components/docs/MoveToModal.tsx @@ -1,5 +1,5 @@ import { useState, useMemo } from 'react'; -import { Modal, Input, List, theme, Typography } from 'antd'; +import { Drawer, Input, List, theme, Typography } from 'antd'; import { FolderOutlined, HomeOutlined } from '@ant-design/icons'; import type { FileNode } from '@/types/api'; @@ -71,13 +71,15 @@ export function MoveToModal({ open, fileTree, sourcePath, onMove, onClose }: Mov const fileName = sourcePath.split('/').pop() || sourcePath; return ( - - + ); } diff --git a/admin/src/components/docs/NewBlogPostModal.tsx b/admin/src/components/docs/NewBlogPostModal.tsx index c1c00a3b..884378ac 100644 --- a/admin/src/components/docs/NewBlogPostModal.tsx +++ b/admin/src/components/docs/NewBlogPostModal.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { Modal, Form, Input, DatePicker, Select, Switch, message, theme } from 'antd'; +import { Drawer, Form, Input, DatePicker, Select, Switch, Button, message, theme } from 'antd'; import { FileMarkdownOutlined } from '@ant-design/icons'; import dayjs from 'dayjs'; import { api } from '@/lib/api'; @@ -84,7 +84,7 @@ export function NewBlogPostModal({ }; return ( - @@ -92,12 +92,17 @@ export function NewBlogPostModal({ } open={open} - onCancel={handleClose} - onOk={handleSubmit} - okText="Create" - confirmLoading={submitting} - destroyOnHidden + onClose={handleClose} width={480} + placement="right" + mask={false} + rootStyle={{ position: 'absolute', top: 64, height: 'calc(100vh - 64px)' }} + destroyOnClose + extra={ + + } > {contextHolder}
-
+ ); } diff --git a/admin/src/components/docs/WikiLinkPickerModal.tsx b/admin/src/components/docs/WikiLinkPickerModal.tsx index 6c2a875a..bc60ed2d 100644 --- a/admin/src/components/docs/WikiLinkPickerModal.tsx +++ b/admin/src/components/docs/WikiLinkPickerModal.tsx @@ -1,5 +1,5 @@ import { useState, useMemo } from 'react'; -import { Modal, Input, List, theme, Typography, Tag } from 'antd'; +import { Drawer, Input, List, theme, Typography, Tag } from 'antd'; import { FileOutlined, PictureOutlined } from '@ant-design/icons'; import type { FileNode } from '@/types/api'; @@ -62,13 +62,15 @@ export function WikiLinkPickerModal({ open, fileTree, onSelect, onClose }: WikiL }; return ( - { onClose(); setSearch(''); }} - footer={null} - destroyOnHidden + onClose={() => { onClose(); setSearch(''); }} width={420} + placement="right" + mask={false} + rootStyle={{ position: 'absolute', top: 64, height: 'calc(100vh - 64px)' }} + destroyOnClose > )} - + ); } diff --git a/admin/src/components/email-templates/TestEmailModal.tsx b/admin/src/components/email-templates/TestEmailModal.tsx index f00a99f8..b1242564 100644 --- a/admin/src/components/email-templates/TestEmailModal.tsx +++ b/admin/src/components/email-templates/TestEmailModal.tsx @@ -1,5 +1,5 @@ import { useState, useEffect } from 'react'; -import { Modal, Form, Input, Button, Tabs, Space, message, Table, Tag, Typography, Grid } from 'antd'; +import { Drawer, Form, Input, Button, Tabs, Space, message, Table, Tag, Typography, Grid } from 'antd'; import type { ColumnsType } from 'antd/es/table'; import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; @@ -118,19 +118,19 @@ export default function TestEmailModal({ open, template, onClose, onSuccess }: T ]; return ( - - Cancel - , - , - ]} + + } >
@@ -244,6 +244,6 @@ export default function TestEmailModal({ open, template, onClose, onSuccess }: T ]} /> - + ); } diff --git a/admin/src/components/media/AddToPlaylistModal.tsx b/admin/src/components/media/AddToPlaylistModal.tsx index 7fc3057d..325f5153 100644 --- a/admin/src/components/media/AddToPlaylistModal.tsx +++ b/admin/src/components/media/AddToPlaylistModal.tsx @@ -1,5 +1,5 @@ import { useState, useEffect } from 'react'; -import { Modal, Checkbox, Button, Input, Space, Typography, Spin, Divider, message, theme } from 'antd'; +import { Drawer, Checkbox, Button, Input, Space, Typography, Spin, Divider, message, theme } from 'antd'; import { PlusOutlined, UnorderedListOutlined } from '@ant-design/icons'; import { mediaApi } from '@/lib/media-api'; import { mediaPublicApi } from '@/lib/media-public-api'; @@ -152,13 +152,19 @@ export default function AddToPlaylistModal({ }; return ( - + Save + + } > {loading ? (
@@ -238,6 +244,6 @@ export default function AddToPlaylistModal({ )} )} - + ); } diff --git a/admin/src/components/media/BulkAccessLevelModal.tsx b/admin/src/components/media/BulkAccessLevelModal.tsx index 55fb3b69..82337545 100644 --- a/admin/src/components/media/BulkAccessLevelModal.tsx +++ b/admin/src/components/media/BulkAccessLevelModal.tsx @@ -1,4 +1,4 @@ -import { Modal, Select, message } from 'antd'; +import { Drawer, Select, Button, message } from 'antd'; import { useState } from 'react'; import { mediaApi } from '@/lib/media-api'; import { getErrorMessage } from '@/utils/getErrorMessage'; @@ -37,13 +37,19 @@ export default function BulkAccessLevelModal({ open, videoIds, onClose, onSucces }; return ( - + Apply + + } >
setSelectedCampaignId(val)} - options={campaigns.map((c) => ({ value: c.id, label: c.title }))} - /> - - + <> +
+
+ +