Merge pull request #24 from JulianFP/dev

Some minor visual improvements and fixes
JulianFP · Oct 26, 2024 · 2e746bc · 2e746bc
2 parents 3025413 + 0c8db3d
commit 2e746bc
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -6,8 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Project W</title>
   </head>
-  <body>
+  <body class="bg-slate-200 dark:bg-slate-950">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
+    <noscript>
+      <p>It seems like your browser doesn't support Javascript. Please use a modern browser and make sure that you have Javascript enabled!</p>
+    </noscript>
   </body>
 </html>
diff --git a/src/App.svelte b/src/App.svelte
@@ -98,8 +98,8 @@ let dropDownOpen = false;
 </header>
 
 
-<!--flex: required for h-full of chield to work, w-screen: width to screen width min-h-dvh: dynamic viewport height -->
-<main class="flex w-full min-h-dvh bg-slate-200 dark:bg-slate-950">
+<!--flex: required for h-full of child to work, w-screen: width to screen width min-h-dvh: dynamic viewport height -->
+<main class="flex w-full min-h-dvh">
   <!--overflow-auto: adds scroll bar only if overflow happens (under navbar), w-full: width to parent width, min-h-full: height to parent width (always), px-4: padding to left/right of screen, mx-auto: center horizontally, mt-16: margin to top (this will be "under" navbar)-->
   <div class="overflow-auto w-full min-h-full px-4 mt-16">
     <Router {routes}/>

diff --git a/src/routes/JobList.svelte b/src/routes/JobList.svelte
@@ -599,7 +599,7 @@ $: {
             <TableHead>
               {#if tableEditMode}
                 <TableHeadCell class="!p-4">
-                  <Checkbox class="hover:cursor-pointer" bind:checked={headerCheckboxSelected} on:change={() => {displayItems.forEach((item) => itemsSelected[item.ID] = headerCheckboxSelected)}}/>
+                  <Checkbox id="select_all_visible_elements" class="hover:cursor-pointer" bind:checked={headerCheckboxSelected} on:change={() => {displayItems.forEach((item) => itemsSelected[item.ID] = headerCheckboxSelected)}}/>
                 </TableHeadCell>
               {/if}
               {#each keys as key}
@@ -632,7 +632,7 @@ $: {
                     <Button pill outline class="!p-2" size="xs" color="alternative" on:click={() => tableEditMode = false}>
                       <CloseOutline/>
                     </Button>
-                  {:else}
+                  {:else if sortItems.length > 0}
                     <Button pill outline class="!p-2" size="xs" color="alternative" on:click={() => {itemsSelected = {}; updateHeaderCheckbox(); tableEditMode = true;}}>
                       <EditSolid/>
                     </Button>
@@ -643,18 +643,18 @@ $: {
             <TableBody>
               {#if items.length === 0}
                 <TableBodyRow>
-                  <TableBodyCell colspan="4">You don't have any jobs yet. <Span underline>Create your first job</Span> by clicking on the <P color="text-primary-600 dark:text-primary-500" weight="bold" size="sm" class="inline">New Job</P> button.</TableBodyCell>
+                  <TableBodyCell colspan={tableEditMode ? "5" : "4"}>You don't have any jobs yet. <Span underline>Create your first job</Span> by clicking on the <P color="text-primary-600 dark:text-primary-500" weight="bold" size="sm" class="inline">New Job</P> button.</TableBodyCell>
                 </TableBodyRow>
               {:else if sortItems.length === 0}
                 <TableBodyRow>
-                  <TableBodyCell colspan="4">You don't have any current jobs. Deselect <P color="text-primary-600 dark:text-primary-500" weight="bold" size="sm" class="inline">Hide old jobs</P> or <Span underline>create a new job</Span> by clicking on the <P color="text-primary-600 dark:text-primary-500" weight="bold" size="sm" class="inline">New Job</P> button.</TableBodyCell>
+                  <TableBodyCell colspan={tableEditMode ? "5" : "4"}>You don't have any current jobs. Deselect <P color="text-primary-600 dark:text-primary-500" weight="bold" size="sm" class="inline">Hide old jobs</P> or <Span underline>create a new job</Span> by clicking on the <P color="text-primary-600 dark:text-primary-500" weight="bold" size="sm" class="inline">New Job</P> button.</TableBodyCell>
                 </TableBodyRow>
               {/if}
               {#each displayItems as item, i}
                 <TableBodyRow on:click={() => toggleRow(i)}>
                   {#if tableEditMode}
                     <TableBodyCell class="!p-4">
-                      <Checkbox class="hover:cursor-pointer" bind:checked={itemsSelected[item.ID]} on:change={() => updateHeaderCheckbox(item)} on:click={(e) => e.stopPropagation()}/>
+                      <Checkbox id="select_job_{item.ID}" class="hover:cursor-pointer" bind:checked={itemsSelected[item.ID]} on:change={() => updateHeaderCheckbox(item)} on:click={(e) => e.stopPropagation()}/>
                     </TableBodyCell>
                   {/if}
                   <TableBodyCell>{item.ID}</TableBodyCell>
@@ -750,7 +750,7 @@ $: {
 
   <div class="flex flex-col items-center justify-center gap-2">
     <div class="text-sm text-gray-700 dark:text-gray-400">
-      Showing <span class="font-semibold text-gray-900 dark:text-white">{(page-1)*10+1}</span>
+      Showing <span class="font-semibold text-gray-900 dark:text-white">{(page-1)*10+(sortItems.length === 0 ? 0 : 1)}</span>
       to
       <span class="font-semibold text-gray-900 dark:text-white">{Math.min(page*10, sortItems.length)}</span>
       of

diff --git a/src/utils/navigation.ts b/src/utils/navigation.ts
@@ -12,7 +12,6 @@ export function loginForward(): void {
 
 export function destForward(): void {
 	const destination: string | null = get(routing).querystring.get("dest");
-	console.log(`destForward called with destination ${destination}`);
 
 	if (destination)
 		routing.set({ destination: destination, removeParams: ["dest"] });

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config}*/
 const config = {
 	content: [
+		"./index.html",
 		"./src/**/*.{html,js,svelte,ts}",
 		"./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
 		"./node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}",