Merge pull request #20 from sergio222-dev/develop

Develop
sergio222-dev · Aug 13, 2024 · eac1930 · eac1930
2 parents d6e75af + 70c2977
commit eac1930
Show file tree

Hide file tree

Showing 13 changed files with 50 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "build.server": "vite build -c adapters/fastify/vite.config.ts",
     "build.types": "tsc --incremental --noEmit",
     "deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'",
-    "dev": "vite --mode ssr | npx pino-pretty",
+    "dev": "vite --mode ssr --host | npx pino-pretty",
     "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
     "fmt": "prettier --write .",
     "fmt.check": "prettier --check .",

diff --git a/src/features/appbar/Appbar.tsx b/src/features/appbar/Appbar.tsx
@@ -57,7 +57,7 @@ export const Appbar = component$(() => {
           </ul>
         </div>
       </header>
-      <div class={`h-1 w-full ${location.isNavigating ? ` bg-secondary animate-pulse` : ''}`}></div>
+      <div class={`fixed top-0 left-0 h-1 w-full ${location.isNavigating ? ` bg-secondary animate-pulse` : ''}`}></div>
     </>
   );
 });
diff --git a/src/features/cards/components/Pagination.tsx b/src/features/cards/components/Pagination.tsx
@@ -21,7 +21,11 @@ export const Pagination = component$(() => {
           <a
             href="#"
             preventdefault:click
-            class={`relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 ${isFirstPage.value ? 'bg-gray-400 pointer-events-none' : ''}`}
+            class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+            style={{
+              backgroundColor: isFirstPage.value ? 'gray' : '',
+              pointerEvents: isFirstPage.value ? 'none' : undefined
+            }}
             onClick$={async () => {
               if (!isFirstPage.value) {
                 void c.setPage(c.page - 1);
@@ -33,7 +37,11 @@ export const Pagination = component$(() => {
           <a
             preventdefault:click
             href="#"
-            class={`relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 ${isLastPage.value ? 'text-gray-400 pointer-events-none' : ''}`}
+            class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+            style={{
+              backgroundColor: isLastPage.value ? 'gray' : '',
+              pointerEvents: isLastPage.value ? 'none' : undefined
+            }}
             onClick$={async () => {
               if (!isLastPage.value) {
                 void c.setPage(c.page + 1);

diff --git a/src/features/createDeck/components/CardDeck.tsx b/src/features/createDeck/components/CardDeck.tsx
@@ -49,24 +49,24 @@ export const CardDeck = component$<CardDeckProps>(({ card }) => {
 
       </div>
 
-      <div class="flex justify-between overflow-hidden"
+      <div class="flex justify-between overflow-x-auto"
       >
-        <div class="flex gap-1 p-[4px]">
+        <div class="flex gap-1 p-[4px] items-center">
           <div
-            class="bg-pink-800 select-none w-[1.5rem] h-[1.5rem] border-2 border-black rounded flex justify-center items-center hover:cursor-pointer"
+            class="bg-pink-800 select-none w-[calc(1rem+1vw)] h-[calc(1rem+1vw)] border-2 border-black rounded flex justify-center items-center hover:cursor-pointer"
             style={sideQuantity.value === 0 ? { backgroundColor: 'gray' } : {}}
             onClick$={() => d.removeCard(card, true)}
           >
             -
           </div>
           <div
-            class="text-white w-[1.5rem] h-[1.5rem] flex items-center justify-center bg-pink-800 px-2 rounded-[50%] border-2 border-black"
+            class="text-white w-[calc(1rem+1vw)] h-[calc(1rem+1vw)] flex items-center justify-center bg-pink-800 px-2 rounded-[50%] border-2 border-black"
             style={sideQuantity.value === 0 ? { backgroundColor: 'gray' } : {}}
           >
             <span>{sideQuantity.value}</span>
           </div>
           <div
-            class="flex select-none items-center bg-pink-800 w-[1.5rem] h-[1.5rem] border-2 border-black rounded justify-center hover:cursor-pointer"
+            class="flex select-none items-center bg-pink-800 w-[calc(1rem+1vw)] h-[calc(1rem+1vw)] border-2 border-black rounded justify-center hover:cursor-pointer"
             style={sideQuantity.value === 0 ? { backgroundColor: 'gray' } : {}}
             onClick$={() => d.addCard(card, true)}
           >
@@ -102,20 +102,20 @@ export const CardDeck = component$<CardDeckProps>(({ card }) => {
         {/*</div>*/}
         <div class="flex gap-1 p-[4px]">
           <div
-            class="bg-orange-600 select-none w-[1.5rem] h-[1.5rem] border-2 border-black rounded flex justify-center items-center hover:cursor-pointer"
+            class="bg-orange-600 select-none w-[calc(1rem+1vw)] h-[calc(1rem+1vw)] border-2 border-black rounded flex justify-center items-center hover:cursor-pointer"
             style={deckQuantity.value === 0 ? { backgroundColor: 'gray' } : {}}
             onClick$={() => d.removeCard(card, false)}
           >
             -
           </div>
           <div
-            class="text-white w-[1.5rem] h-[1.5rem] flex items-center justify-center bg-orange-600 px-2 rounded-[50%] border-2 border-black"
+            class="text-white w-[calc(1rem+1vw)] h-[calc(1rem+1vw)] flex items-center justify-center bg-orange-600 px-2 rounded-[50%] border-2 border-black"
             style={deckQuantity.value === 0 ? { backgroundColor: 'gray' } : {}}
           >
             <span>{deckQuantity.value}</span>
           </div>
           <div
-            class="flex select-none items-center bg-orange-600 w-[1.5rem] h-[1.5rem] border-2 border-black rounded justify-center hover:cursor-pointer"
+            class="flex select-none items-center bg-orange-600 w-[calc(1rem+1vw)] h-[calc(1rem+1vw)] border-2 border-black rounded justify-center hover:cursor-pointer"
             style={deckQuantity.value === 0 ? { backgroundColor: 'gray' } : {}}
             onClick$={() => d.addCard(card, false)}
           >

diff --git a/src/features/deckList/DeckList.tsx b/src/features/deckList/DeckList.tsx
@@ -6,7 +6,7 @@ export const DeckList = component$(() => {
   const decks = useListPublicDeckLoader();
 
   return (
-    <div class="flex px-2 flex-wrap gap-[0.5rem]">
+    <div class="flex p-2 flex-wrap gap-[0.5rem]">
       {decks.value.decks.map(d => {
         return (
           <DeckCard id={d.id} name={d.name} splashArt={d.splashArt} key={d.id}/>

diff --git a/src/features/myDecks/MyDecks.tsx b/src/features/myDecks/MyDecks.tsx
@@ -6,7 +6,7 @@ export const MyDecks = component$(() => {
   const decks = useListMyDeckLoader();
 
   return (
-    <div class="flex px-2 flex-wrap gap-[0.5rem]">
+    <div class="flex p-2 flex-wrap gap-[0.5rem]">
       {decks.value.decks.map(d => {
         return (
           <DeckCard path="/decks/create" id={d.id} name={d.name} splashArt={d.splashArt} key={d.id}/>

diff --git a/src/global.css b/src/global.css
@@ -6,6 +6,15 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+    height: 100%;
+}
+
+body {
+    overflow: hidden;
+    height: 100%;
+}
+
 * {
     box-sizing: border-box;
 }

diff --git a/src/root.tsx b/src/root.tsx
@@ -1,9 +1,9 @@
-import { component$ } from "@builder.io/qwik";
+import { component$, useVisibleTask$ } from "@builder.io/qwik";
 import {
   QwikCityProvider,
   RouterOutlet,
   ServiceWorkerRegister,
-} from "@builder.io/qwik-city";
+}                                      from "@builder.io/qwik-city";
 import { RouterHead } from "./components/router-head/router-head";
 
 import "./global.css";
@@ -16,6 +16,13 @@ export default component$(() => {
    * Don't remove the `<head>` and `<body>` elements.
    */
 
+  // eslint-disable-next-line qwik/no-use-visible-task
+  useVisibleTask$(() => {
+    const vh = window.innerHeight * 0.01;
+
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+  });
+
   return (
     <QwikCityProvider>
       <head>
@@ -25,7 +32,7 @@ export default component$(() => {
         <RouterHead />
         <ServiceWorkerRegister />
       </head>
-      <body lang="en" class="theme-dark overflow-hidden">
+      <body lang="en" class="theme-dark">
         <RouterOutlet />
       </body>
     </QwikCityProvider>

diff --git a/src/routes/decks/index.tsx b/src/routes/decks/index.tsx
@@ -11,7 +11,7 @@ export default component$(() => {
   const user = useContext(UserContext);
 
   return (
-    <div>
+    <div class="overflow-y-auto w-full">
       <div class="flex w-full justify-between py-4 px-2">
         <h1 class="text-2xl font-bold">Decks List</h1>
         {user.value && (

diff --git a/src/routes/decks/preview/[...id]/index.tsx b/src/routes/decks/preview/[...id]/index.tsx
@@ -1,14 +1,13 @@
 import { component$ }  from "@builder.io/qwik";
-import { Container }   from "~/components/container/Container";
 import { PreviewDeck } from "~/features/preview";
 
 export { usePublicDeckLoader } from "~/providers/loaders/decks";
 
 export default component$(() => {
 
   return (
-    <Container>
-      <PreviewDeck />
-    </Container>
+    <div class="flex-auto overflow-y-auto">
+    <PreviewDeck/>
+    </div>
   )
 });
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -12,7 +12,7 @@ export default component$(() => {
   const login  = useLogin();
 
   return (
-    <>
+    <div class="p-4">
       {!isLoggedIn.value && (
         <div class="shadow-md w-fit hover:shadow-xl transition-shadow duration-300">
           <a onClick$={async () => {
@@ -45,6 +45,6 @@ export default component$(() => {
         logout.submit();
 
       }}>Logout</button>}
-    </>
+    </div>
   );
 });
diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx
@@ -43,9 +43,9 @@ export default component$(() => {
   })
 
   return (
-    <div class="flex flex-col h-screen overflow-hidden">
+    <div class="flex flex-col h-full overflow-hidden">
       <Appbar/>
-      <main class="flex-auto overflow-hidden">
+      <main class="flex flex-auto overflow-hidden">
         <Slot/>
       </main>
     </div>

diff --git a/src/routes/mydecks/index.tsx b/src/routes/mydecks/index.tsx
@@ -7,7 +7,7 @@ export { useListMyDeckLoader } from "~/providers/loaders/decks";
 
 export default component$(() => {
   return (
-    <div>
+    <div class="overflow-y-auto w-full">
       <div class="flex w-full justify-between py-4 px-2">
         <h1 class="text-2xl font-bold">My Decks</h1>
         <Link href="/decks/create/">