mirror of
https://github.com/C4illin/ConvertX.git
synced 2025-10-23 04:52:18 +00:00
fix: mobile view overflow
This commit is contained in:
C4illin
189
src/index.tsx
189
src/index.tsx
@@ -153,7 +153,12 @@ const app = new Elysia({
|
||||
|
||||
return (
|
||||
<BaseHtml title="ConvertX | Setup" webroot={WEBROOT}>
|
||||
<main class="mx-auto w-full max-w-4xl px-4">
|
||||
<main
|
||||
class={`
|
||||
mx-auto w-full max-w-4xl px-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
<h1 class="my-8 text-3xl">Welcome to ConvertX!</h1>
|
||||
<article class="article p-0">
|
||||
<header class="w-full bg-neutral-800 p-4">
|
||||
@@ -217,7 +222,12 @@ const app = new Elysia({
|
||||
accountRegistration={ACCOUNT_REGISTRATION}
|
||||
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
|
||||
/>
|
||||
<main class="w-full px-4">
|
||||
<main
|
||||
class={`
|
||||
w-full px-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
<article class="article">
|
||||
<form method="post" class="flex flex-col gap-4">
|
||||
<fieldset class="mb-4 flex flex-col gap-4">
|
||||
@@ -343,7 +353,12 @@ const app = new Elysia({
|
||||
accountRegistration={ACCOUNT_REGISTRATION}
|
||||
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
|
||||
/>
|
||||
<main class="w-full px-4">
|
||||
<main
|
||||
class={`
|
||||
w-full px-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
<article class="article">
|
||||
<form method="post" class="flex flex-col gap-4">
|
||||
<fieldset class="mb-4 flex flex-col gap-4">
|
||||
@@ -556,7 +571,12 @@ const app = new Elysia({
|
||||
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
|
||||
loggedIn
|
||||
/>
|
||||
<main class="w-full px-4">
|
||||
<main
|
||||
class={`
|
||||
w-full px-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
<article class="article">
|
||||
<h1 class="mb-4 text-xl">Convert</h1>
|
||||
<div class="mb-4 max-h-[50vh] overflow-y-auto scrollbar-thin">
|
||||
@@ -564,7 +584,7 @@ const app = new Elysia({
|
||||
id="file-list"
|
||||
class={`
|
||||
w-full table-auto rounded bg-neutral-900
|
||||
[&_td]:p-4
|
||||
[&_td]:p-4 [&_td]:first:max-w-[30vw] [&_td]:first:truncate
|
||||
[&_tr]:rounded-sm [&_tr]:border-b [&_tr]:border-neutral-800
|
||||
`}
|
||||
/>
|
||||
@@ -942,7 +962,8 @@ const app = new Elysia({
|
||||
let userJobs = db
|
||||
.query("SELECT * FROM jobs WHERE user_id = ?")
|
||||
.as(Jobs)
|
||||
.all(user.id);
|
||||
.all(user.id)
|
||||
.reverse();
|
||||
|
||||
for (const job of userJobs) {
|
||||
const files = db
|
||||
@@ -964,31 +985,75 @@ const app = new Elysia({
|
||||
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
|
||||
loggedIn
|
||||
/>
|
||||
<main class="w-full px-4">
|
||||
<main
|
||||
class={`
|
||||
w-full px-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
<article class="article">
|
||||
<h1 class="mb-4 text-xl">Results</h1>
|
||||
<table
|
||||
class={`
|
||||
w-full table-auto rounded bg-neutral-900 text-left
|
||||
w-full table-auto overflow-y-auto rounded bg-neutral-900 text-left
|
||||
[&_td]:p-4
|
||||
[&_tr]:rounded-sm [&_tr]:border-b [&_tr]:border-neutral-800
|
||||
`}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-4 py-2">Time</th>
|
||||
<th class="px-4 py-2">Files</th>
|
||||
<th class="px-4 py-2">Files Done</th>
|
||||
<th class="px-4 py-2">Status</th>
|
||||
<th class="px-4 py-2">View</th>
|
||||
<th
|
||||
class={`
|
||||
px-2 py-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
Time
|
||||
</th>
|
||||
<th
|
||||
class={`
|
||||
px-2 py-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
Files
|
||||
</th>
|
||||
<th
|
||||
class={`
|
||||
px-2 py-2
|
||||
max-sm:hidden
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
Files Done
|
||||
</th>
|
||||
<th
|
||||
class={`
|
||||
px-2 py-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
class={`
|
||||
px-2 py-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
View
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{userJobs.map((job) => (
|
||||
<tr>
|
||||
<td safe>{job.date_created}</td>
|
||||
<td safe>
|
||||
{job.date_created.split("T")[1]?.split(".")[0] ??
|
||||
job.date_created}
|
||||
</td>
|
||||
<td>{job.num_files}</td>
|
||||
<td>{job.finished_files}</td>
|
||||
<td class="max-sm:hidden">{job.finished_files}</td>
|
||||
<td safe>{job.status}</td>
|
||||
<td>
|
||||
<a
|
||||
@@ -1055,7 +1120,12 @@ const app = new Elysia({
|
||||
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
|
||||
loggedIn
|
||||
/>
|
||||
<main class="w-full px-4">
|
||||
<main
|
||||
class={`
|
||||
w-full px-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
<article class="article">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h1 class="text-xl">Results</h1>
|
||||
@@ -1095,16 +1165,46 @@ const app = new Elysia({
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-4 py-2">Converted File Name</th>
|
||||
<th class="px-4 py-2">Status</th>
|
||||
<th class="px-4 py-2">View</th>
|
||||
<th class="px-4 py-2">Download</th>
|
||||
<th
|
||||
class={`
|
||||
px-2 py-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
Converted File Name
|
||||
</th>
|
||||
<th
|
||||
class={`
|
||||
px-2 py-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
class={`
|
||||
px-2 py-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
View
|
||||
</th>
|
||||
<th
|
||||
class={`
|
||||
px-2 py-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
Download
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{files.map((file) => (
|
||||
<tr>
|
||||
<td safe>{file.output_file_name}</td>
|
||||
<td safe class="max-w-[20vw] truncate">
|
||||
{file.output_file_name}
|
||||
</td>
|
||||
<td safe>{file.status}</td>
|
||||
<td>
|
||||
<a
|
||||
@@ -1217,16 +1317,46 @@ const app = new Elysia({
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-4 py-2">Converted File Name</th>
|
||||
<th class="px-4 py-2">Status</th>
|
||||
<th class="px-4 py-2">View</th>
|
||||
<th class="px-4 py-2">Download</th>
|
||||
<th
|
||||
class={`
|
||||
px-2 py-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
Converted File Name
|
||||
</th>
|
||||
<th
|
||||
class={`
|
||||
px-2 py-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
class={`
|
||||
px-2 py-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
View
|
||||
</th>
|
||||
<th
|
||||
class={`
|
||||
px-2 py-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
Download
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{files.map((file) => (
|
||||
<tr>
|
||||
<td safe>{file.output_file_name}</td>
|
||||
<td safe class="max-w-[20vw] truncate">
|
||||
{file.output_file_name}
|
||||
</td>
|
||||
<td safe>{file.status}</td>
|
||||
<td>
|
||||
<a
|
||||
@@ -1305,7 +1435,12 @@ const app = new Elysia({
|
||||
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
|
||||
loggedIn
|
||||
/>
|
||||
<main class="w-full px-4">
|
||||
<main
|
||||
class={`
|
||||
w-full px-2
|
||||
sm:px-4
|
||||
`}
|
||||
>
|
||||
<article class="article">
|
||||
<h1 class="mb-4 text-xl">Converters</h1>
|
||||
<table
|
||||
|
||||
70
src/main.css
70
src/main.css
@@ -1,4 +1,4 @@
|
||||
@import 'tailwindcss';
|
||||
@import "tailwindcss";
|
||||
|
||||
@plugin 'tailwind-scrollbar';
|
||||
|
||||
@@ -37,42 +37,42 @@
|
||||
}
|
||||
|
||||
@utility article {
|
||||
@apply p-4 mb-4 bg-neutral-800/40 w-full mx-auto max-w-4xl rounded-sm;
|
||||
@apply px-2 sm:px-4 py-4 mb-4 bg-neutral-800/40 w-full mx-auto max-w-4xl rounded-sm;
|
||||
}
|
||||
|
||||
@utility btn-primary {
|
||||
@apply bg-accent-500 text-contrast rounded-sm p-4 hover:bg-accent-400 cursor-pointer transition-colors;
|
||||
@apply bg-accent-500 text-contrast rounded-sm p-2 sm:p-4 hover:bg-accent-400 cursor-pointer transition-colors;
|
||||
}
|
||||
|
||||
:root {
|
||||
--contrast: 255, 255, 255;
|
||||
--neutral-900: 243, 244, 246;
|
||||
--neutral-800: 229, 231, 235;
|
||||
--neutral-700: 209, 213, 219;
|
||||
--neutral-600: 156, 163, 175;
|
||||
--neutral-500: 180, 180, 180;
|
||||
--neutral-400: 75, 85, 99;
|
||||
--neutral-300: 55, 65, 81;
|
||||
--neutral-200: 31, 41, 55;
|
||||
--neutral-100: 17, 24, 39;
|
||||
--accent-400: 132, 204, 22;
|
||||
--accent-500: 101, 163, 13;
|
||||
--accent-600: 77, 124, 15;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--contrast: 0, 0, 0;
|
||||
--neutral-900: 17, 24, 39;
|
||||
--neutral-800: 31, 41, 55;
|
||||
--neutral-700: 55, 65, 81;
|
||||
--neutral-600: 75, 85, 99;
|
||||
--neutral-500: 107, 114, 128;
|
||||
--neutral-300: 209, 213, 219;
|
||||
--neutral-400: 156, 163, 175;
|
||||
--neutral-200: 229, 231, 235;
|
||||
--accent-600: 101, 163, 13;
|
||||
--accent-500: 132, 204, 22;
|
||||
--accent-400: 163, 230, 53;
|
||||
}
|
||||
}
|
||||
:root {
|
||||
--contrast: 255, 255, 255;
|
||||
--neutral-900: 243, 244, 246;
|
||||
--neutral-800: 229, 231, 235;
|
||||
--neutral-700: 209, 213, 219;
|
||||
--neutral-600: 156, 163, 175;
|
||||
--neutral-500: 180, 180, 180;
|
||||
--neutral-400: 75, 85, 99;
|
||||
--neutral-300: 55, 65, 81;
|
||||
--neutral-200: 31, 41, 55;
|
||||
--neutral-100: 17, 24, 39;
|
||||
--accent-400: 132, 204, 22;
|
||||
--accent-500: 101, 163, 13;
|
||||
--accent-600: 77, 124, 15;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--contrast: 0, 0, 0;
|
||||
--neutral-900: 17, 24, 39;
|
||||
--neutral-800: 31, 41, 55;
|
||||
--neutral-700: 55, 65, 81;
|
||||
--neutral-600: 75, 85, 99;
|
||||
--neutral-500: 107, 114, 128;
|
||||
--neutral-300: 209, 213, 219;
|
||||
--neutral-400: 156, 163, 175;
|
||||
--neutral-200: 229, 231, 235;
|
||||
--accent-600: 101, 163, 13;
|
||||
--accent-500: 132, 204, 22;
|
||||
--accent-400: 163, 230, 53;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user