Skip to content

Commit c708c01

Browse files
riofrizriofriz
committed
fix modal on mobile and add proper screenshots
1 parent fb6531d commit c708c01

11 files changed

Lines changed: 113 additions & 22 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<img src="public/heading.png" width="400px">
33
</p>
44

5-
## Table of Contents
5+
## Quick links
66

77
- [Features](#features)
88
- [Quick Start](#quick-start)
@@ -18,7 +18,6 @@
1818
- [Managing Cron Jobs](#managing-cron-jobs)
1919
- [Job Execution Logging](#job-execution-logging)
2020
- [Managing Scripts](#managing-scripts)
21-
- [Technologies Used](#technologies-used)
2221

2322
---
2423

‎app/_components/FeatureComponents/Layout/TabbedInterface.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const TabbedInterface = ({
2828
<div className="flex gap-2">
2929
<button
3030
onClick={() => setActiveTab("cronjobs")}
31-
className={`flex items-center gap-2 px-4 py-2 text-sm font-medium flex-1 justify-center terminal-font ${activeTab === "cronjobs"
31+
className={`flex items-center gap-2 px-4 py-2 border border-transparent text-sm font-medium flex-1 justify-center terminal-font ${activeTab === "cronjobs"
3232
? "bg-background0 ascii-border"
3333
: "hover:ascii-border"
3434
}`}
@@ -41,7 +41,7 @@ export const TabbedInterface = ({
4141
</button>
4242
<button
4343
onClick={() => setActiveTab("scripts")}
44-
className={`flex items-center gap-2 px-4 py-2 text-sm font-medium flex-1 justify-center terminal-font ${activeTab === "scripts"
44+
className={`flex items-center gap-2 px-4 py-2 border border-transparent text-sm font-medium flex-1 justify-center terminal-font ${activeTab === "scripts"
4545
? "bg-background0 ascii-border"
4646
: "hover:ascii-border"
4747
}`}

‎app/_components/FeatureComponents/Modals/LiveLogModal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -348,8 +348,8 @@ export const LiveLogModal = ({
348348
</div>
349349
)}
350350

351-
<div className="bg-black/90 dark:bg-black/60 p-4 max-h-[60vh] overflow-auto terminal-font ascii-border">
352-
<pre className="text-xs font-mono text-status-success whitespace-pre-wrap break-words">
351+
<div className="bg-background0 p-4 max-h-[60vh] overflow-auto terminal-font ascii-border">
352+
<pre className="text-xs text-status-success whitespace-pre-wrap break-words">
353353
{logContent || t("cronjobs.waitingForJobToStart")}
354354
<div ref={logEndRef} />
355355
</pre>

‎app/_components/FeatureComponents/Modals/RestoreBackupModal.tsx‎

Lines changed: 78 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -86,32 +86,35 @@ export const RestoreBackupModal = ({
8686
size="xl"
8787
>
8888
<div className="space-y-4">
89-
<div className="flex gap-2">
89+
<div className="flex flex-col sm:flex-row gap-2">
9090
<Button
9191
variant="outline"
9292
onClick={onBackupAll}
9393
className="btn-outline flex-1"
9494
>
95-
<DownloadIcon className="h-4 w-4 mr-2" />
96-
{t("cronjobs.backupAll")}
95+
<DownloadIcon className="h-4 w-4 sm:mr-2" />
96+
<span className="hidden sm:inline">{t("cronjobs.backupAll")}</span>
97+
<span className="sm:hidden">Backup</span>
9798
</Button>
9899
{backups.length > 0 && (
99100
<Button
100101
variant="outline"
101102
onClick={handleRestoreAll}
102103
className="btn-primary flex-1"
103104
>
104-
<UploadIcon className="h-4 w-4 mr-2" />
105-
{t("cronjobs.restoreAll")}
105+
<UploadIcon className="h-4 w-4 sm:mr-2" />
106+
<span className="hidden sm:inline">{t("cronjobs.restoreAll")}</span>
107+
<span className="sm:hidden">Restore</span>
106108
</Button>
107109
)}
108110
<Button
109111
variant="outline"
110112
onClick={onRefresh}
111-
className="btn-outline"
113+
className="btn-outline sm:w-auto"
112114
title={t("common.refresh")}
113115
>
114116
<ArrowsClockwiseIcon className="h-4 w-4" />
117+
<span className="sm:hidden ml-2">Refresh</span>
115118
</Button>
116119
</div>
117120

@@ -126,7 +129,72 @@ export const RestoreBackupModal = ({
126129
key={backup.filename}
127130
className="tui-card p-3 terminal-font"
128131
>
129-
<div className="flex items-center gap-3">
132+
<div className="flex flex-col gap-3 lg:hidden">
133+
<div className="flex items-center justify-between">
134+
<code className="text-xs bg-background0 text-status-warning px-1.5 py-0.5 terminal-font ascii-border">
135+
{backup.job.schedule}
136+
</code>
137+
<div className="flex items-center gap-2">
138+
<Button
139+
variant="outline"
140+
size="sm"
141+
onClick={() => {
142+
onRestore(backup.filename);
143+
onClose();
144+
}}
145+
className="btn-outline h-8 px-3"
146+
title={t("cronjobs.restoreThisBackup")}
147+
>
148+
<UploadIcon className="h-3 w-3" />
149+
</Button>
150+
<Button
151+
variant="destructive"
152+
size="sm"
153+
onClick={() => handleDelete(backup.filename)}
154+
disabled={deletingFilename === backup.filename}
155+
className="h-8 px-3"
156+
title={t("cronjobs.deleteBackup")}
157+
>
158+
{deletingFilename === backup.filename ? (
159+
<div className="h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent" />
160+
) : (
161+
<TrashIcon className="h-3 w-3" />
162+
)}
163+
</Button>
164+
</div>
165+
</div>
166+
167+
<div className="flex items-center gap-2">
168+
{commandCopied === backup.filename && (
169+
<CheckIcon className="h-3 w-3 text-status-success flex-shrink-0" />
170+
)}
171+
<pre
172+
onClick={(e) => {
173+
e.stopPropagation();
174+
copyToClipboard(unwrapCommand(backup.job.command));
175+
setCommandCopied(backup.filename);
176+
setTimeout(() => setCommandCopied(null), 3000);
177+
}}
178+
className="max-w-full overflow-x-auto flex-1 cursor-pointer text-sm font-medium terminal-font bg-background1 px-2 py-1 ascii-border break-all"
179+
title={unwrapCommand(backup.job.command)}
180+
>
181+
{unwrapCommand(backup.job.command)}
182+
</pre>
183+
</div>
184+
185+
<div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
186+
<div className="flex items-center gap-1">
187+
<UserIcon className="h-3 w-3" />
188+
<span>{backup.job.user}</span>
189+
</div>
190+
<div className="flex items-center gap-1">
191+
<CalendarIcon className="h-3 w-3" />
192+
<span>{formatDate(backup.backedUpAt)}</span>
193+
</div>
194+
</div>
195+
</div>
196+
197+
<div className="hidden lg:flex items-center gap-3">
130198
<div className="flex-shrink-0">
131199
<code className="text-xs bg-background0 text-status-warning px-1.5 py-0.5 terminal-font ascii-border">
132200
{backup.job.schedule}
@@ -204,11 +272,11 @@ export const RestoreBackupModal = ({
204272
</div>
205273
)}
206274

207-
<div className="flex justify-between gap-2 pt-4 border-t border-border">
208-
<p className="text-sm text-muted-foreground">
275+
<div className="flex flex-col sm:flex-row sm:justify-between gap-2 pt-4 border-t border-border">
276+
<p className="text-sm text-muted-foreground text-center sm:text-left">
209277
{t("cronjobs.availableBackups")}: {backups.length}
210278
</p>
211-
<Button variant="outline" onClick={onClose} className="btn-outline">
279+
<Button variant="outline" onClick={onClose} className="btn-outline w-full sm:w-auto">
212280
{t("common.close")}
213281
</Button>
214282
</div>

‎app/_components/FeatureComponents/Scripts/BashSnippetHelper.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -180,8 +180,8 @@ export const BashSnippetHelper = ({
180180
{snippet.title}
181181
</h4>
182182
{snippet.source === "user" && (
183-
<span className="inline-block px-1.5 py-0.5 text-xs bg-green-100 text-green-700 rounded border border-green-200">
184-
UserIcon
183+
<span className="inline-block px-1.5 py-0.5 text-xs text-status-success border border-border">
184+
User
185185
</span>
186186
)}
187187
</div>

‎app/_components/GlobalComponents/UIElements/Button.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
77

88
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
99
({ className = '', variant = 'default', size = 'default', children, ...props }, ref) => {
10-
const baseClasses = 'terminal-font ascii-border px-4 py-2 cursor-pointer inline-flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed';
10+
const baseClasses = 'terminal-font border border-border px-4 py-2 cursor-pointer inline-flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed';
1111
const variantClasses = {
1212
default: 'bg-background1 hover:bg-background2',
13-
destructive: 'bg-status-error text-white hover:bg-status-error',
13+
destructive: 'text-status-error hover:bg-status-error hover:text-white',
1414
outline: 'bg-background0 hover:bg-background1',
1515
secondary: 'bg-background2 hover:bg-background1',
1616
ghost: 'border-0 bg-transparent hover:bg-background1',

‎app/_components/GlobalComponents/UIElements/Modal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const Modal = ({
5252
return (
5353
<dialog
5454
ref={dialogRef}
55-
className={`ascii-border terminal-font bg-background0 ${sizeClasses[size]} max-w-[95vw] ${className}`}
55+
className={`ascii-border terminal-font bg-background0 mobile-modal ${sizeClasses[size]} max-w-[95vw] ${className}`}
5656
onClick={(e) => {
5757
if (e.target === dialogRef.current && !preventCloseOnClickOutside) {
5858
onClose();

‎app/globals.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,18 @@ option {
5757
font-weight: 500 !important;
5858
}
5959

60+
pre {
61+
scrollbar-width: none !important;
62+
-ms-overflow-style: none !important;
63+
}
64+
65+
pre::-webkit-scrollbar {
66+
display: none !important;
67+
width: 0 !important;
68+
height: 0 !important;
69+
}
70+
71+
6072
@layer utilities {
6173
.ascii-border {
6274
border: 1px solid var(--box-border-color, var(--foreground2));
@@ -236,4 +248,16 @@ option {
236248
margin-left: 0 !important;
237249
}
238250
}
251+
}
252+
253+
@media (max-width: 992px) {
254+
.mobile-modal {
255+
position: fixed;
256+
bottom: 0;
257+
top: auto;
258+
width: 100% !important;
259+
max-height: 90vh;
260+
max-width: 100%;
261+
margin: inherit;
262+
}
239263
}

‎howto/TRANSLATIONS.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
CronMaster supports internationalization (i18n) with both **unofficial custom translations** and **official translations** that can be contributed to the project.
44

5-
## Table of Contents
5+
## Quick links
66

77
- [Custom User Translations (Unofficial)](#custom-user-translations-unofficial)
88
- [Official Translations via Pull Request](#official-translations-via-pull-request)

‎screenshots/home-dark.png‎

-380 KB
Loading

0 commit comments

Comments
 (0)