Merge pull request #19 from sergio222-dev/develop

fixed bad design
sergio222-dev · Aug 13, 2024 · d6e75af · d6e75af
2 parents e650774 + c6e98b7
commit d6e75af
Show file tree

Hide file tree

Showing 12 changed files with 36 additions and 31 deletions.
diff --git a/src/components/filterField/FilterField.tsx b/src/components/filterField/FilterField.tsx
@@ -49,7 +49,7 @@ export const FilterField = component$<FilterFieldProps>(
     })
 
     return (
-      <div class="relative items-center w-full rounded-3xl px-4 h-[40px] ring-primary ring-4 focus-within:ring-secondary flex gap-2 flex-wrap">
+      <div class="relative items-center w-full rounded-3xl px-4 py-2 min-h-[40px] ring-primary ring-4 focus-within:ring-secondary flex gap-2 flex-wrap">
         <Slot/>
         <form
           ref={r}

diff --git a/src/features/appbar/Appbar.tsx b/src/features/appbar/Appbar.tsx
@@ -11,10 +11,10 @@ export const Appbar = component$(() => {
 
   return (
     <>
-      <header class="fixed top-0 w-full z-10 p-4 bg-primary text-white">
+      <header class="w-full p-4 bg-primary text-white">
         <div class="flex justify-between h-16 items-center">
           <div class="flex items-center">
-            <Link rel="noopener noreferrer" href="/" aria-label="Back to homepage" class="flex items-center p-2">
+            <Link onClick$={() => isMenuOpen.value = false} rel="noopener noreferrer" href="/" aria-label="Back to homepage" class="flex items-center p-2">
               <h2 class="font-bold text-2xl">LDB</h2>
             </Link>
           </div>
@@ -24,15 +24,15 @@ export const Appbar = component$(() => {
           <div class="hidden sm:flex">
             <ul class="items-stretch space-x-3 flex">
               <li class="flex">
-                <Link rel="noopener noreferrer" href="/cards"
+                <Link  rel="noopener noreferrer" href="/cards"
                       class="flex items-center px-4 ">Cards</Link>
               </li>
               <li class="flex">
-                <Link rel="noopener noreferrer" href="/decks"
+                <Link  rel="noopener noreferrer" href="/decks"
                       class="flex items-center px-4 ">Decks</Link>
               </li>
               {user.value && (<li class="flex">
-                  <Link rel="noopener noreferrer" href="/mydecks"
+                  <Link  rel="noopener noreferrer" href="/mydecks"
                         class="flex items-center px-4 ">My decks</Link>
                 </li>
               )}
@@ -42,15 +42,15 @@ export const Appbar = component$(() => {
         <div hidden={!isMenuOpen.value} class="container mx-auto sm:hidden" >
           <ul class="items-stretch space-y-3">
             <li class="flex">
-              <Link rel="noopener noreferrer" href="/cards"
+              <Link onClick$={() => isMenuOpen.value = false} rel="noopener noreferrer" href="/cards"
                     class="flex items-center px-2 ">Cards</Link>
             </li>
             <li class="flex">
-              <Link rel="noopener noreferrer" href="/decks"
+              <Link onClick$={() => isMenuOpen.value = false} rel="noopener noreferrer" href="/decks"
                     class="flex items-center px-2 ">Decks</Link>
             </li>
             {user.value && (<li class="flex">
-                <Link rel="noopener noreferrer" href="/mydecks"
+                <Link onClick$={() => isMenuOpen.value = false} rel="noopener noreferrer" href="/mydecks"
                       class="flex items-center px-2 ">My decks</Link>
               </li>
             )}

diff --git a/src/features/cards/components/CardFilter.tsx b/src/features/cards/components/CardFilter.tsx
@@ -31,7 +31,7 @@ const useTypeFilters = (types: string[]) => {
   const typeFilters: Filter[] = types.map(t => {
     return {
       id:         `type-${t}`,
-      label:      `Type: ${t}`,
+      label:      `${t}`,
       value:      t,
       field:      ['type'],
       filterType: FILTERS_TYPES.IN,
@@ -45,7 +45,7 @@ const useRarityFilters = (rarities: string[]) => {
   const rarityFilters: Filter[] = rarities.map(t => {
     return {
       id:         `rarity-${t}`,
-      label:      `Rarity: ${t}`,
+      label:      `${t}`,
       value:      t,
       field:      ['rarity'],
       filterType: FILTERS_TYPES.IN,
@@ -59,7 +59,7 @@ const useSetFilters = (sets: string[]) => {
   const setFilters: Filter[] = sets.map(t => {
     return {
       id:         `set-${t}`,
-      label:      `Set: ${t}`,
+      label:      `${t}`,
       value:      t,
       field:      ['set'],
       filterType: FILTERS_TYPES.IN,

diff --git a/src/features/cards/components/Pagination.tsx b/src/features/cards/components/Pagination.tsx
@@ -20,13 +20,25 @@ export const Pagination = component$(() => {
         <div class="flex flex-1 justify-between lg:hidden">
           <a
             href="#"
-            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"
+            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' : ''}`}
+            onClick$={async () => {
+              if (!isFirstPage.value) {
+                void c.setPage(c.page - 1);
+              }
+            }}
           >
             Previous
           </a>
           <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"
+            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' : ''}`}
+            onClick$={async () => {
+              if (!isLastPage.value) {
+                void c.setPage(c.page + 1);
+              }
+            }}
           >
             Next
           </a>
@@ -97,13 +109,6 @@ export const Pagination = component$(() => {
                 </a>
 
               ))}
-              {/* <a href="#" aria-current="page" class="relative z-10 inline-flex items-center bg-indigo-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">1</a>
-               <a href               = "#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">2</a>
-               <a href               = "#" class="relative hidden items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 lg:inline-flex">3</a>
-               <span class           = "relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0">...</span>
-               <a href               = "#" class="relative hidden items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 lg:inline-flex">8</a>
-               <a href               = "#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">9</a>
-               <a href               = "#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">10</a> */}
               <a
                 preventdefault:click
                 onClick$={async () => {

diff --git a/src/features/createDeck/Create.tsx b/src/features/createDeck/Create.tsx
@@ -26,7 +26,7 @@ export const Create = component$(() => {
     <div class="h-full flex flex-col md:flex-row">
       {/*<div hidden={selectedSection.value !== 0} class="p-2 md:block md:col-span-4 md:row-span-1">*/}
       {/*</div>*/}
-      <div hidden={selectedSection.value !== 0} class="h-full overflow-y-auto md:flex-1 md:block ">
+      <div hidden={selectedSection.value !== 0} class="h-full overflow-y-auto md:flex-1 md:block p-2">
         <CardFilter/>
         <CardListDeck/>
       </div>

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 flex-wrap gap-[0.5rem]">
+    <div class="flex px-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/providers/repositories/CardRepository.ts b/src/providers/repositories/CardRepository.ts
@@ -150,7 +150,6 @@ export class CardRepository {
     const mapFilters = convertFiltersToExpression(inFilters);
 
     [...mapFilters, ...containsFiltersExpression].forEach(e => {
-      console.log(e);
       query = query.or(e);
     });
   }

diff --git a/src/root.tsx b/src/root.tsx
@@ -25,7 +25,7 @@ export default component$(() => {
         <RouterHead />
         <ServiceWorkerRegister />
       </head>
-      <body lang="en" class="theme-dark">
+      <body lang="en" class="theme-dark overflow-hidden">
         <RouterOutlet />
       </body>
     </QwikCityProvider>

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

diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx
@@ -43,11 +43,11 @@ export default component$(() => {
   })
 
   return (
-    <>
+    <div class="flex flex-col h-screen overflow-hidden">
       <Appbar/>
-      <main class="mx-auto mt-[96px] h-[calc(100vh-100px)] overflow-hidden">
+      <main class="flex-auto overflow-hidden">
         <Slot/>
       </main>
-    </>
+    </div>
   );
 });
diff --git a/src/routes/mydecks/index.tsx b/src/routes/mydecks/index.tsx
@@ -7,14 +7,14 @@ export { useListMyDeckLoader } from "~/providers/loaders/decks";
 
 export default component$(() => {
   return (
-    <>
+    <div>
       <div class="flex w-full justify-between py-4 px-2">
         <h1 class="text-2xl font-bold">My Decks</h1>
         <Link href="/decks/create/">
           <Button>Create Deck</Button>
         </Link>
       </div>
       <MyDecks/>
-    </>
+    </div>
   )
 });
diff --git a/src/stores/filterContext.ts b/src/stores/filterContext.ts
@@ -61,6 +61,7 @@ export const useFilterStore = (cards: Card[] = [], count = 0, size = 20) => {
     }),
     addFilter:     $(async function (this, filter) {
       this.filters.push(filter);
+      this.page    = 1;
       const payload: FetchCardsPayload = {
         page:          this.page,
         size:          this.size,
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,7 +49,7 @@ export const FilterField = component$<FilterFieldProps>( @@
         })
         return (
-          <div class="relative items-center w-full rounded-3xl px-4 h-[40px] ring-primary ring-4 focus-within:ring-secondary flex gap-2 flex-wrap">
+          <div class="relative items-center w-full rounded-3xl px-4 py-2 min-h-[40px] ring-primary ring-4 focus-within:ring-secondary flex gap-2 flex-wrap">
             <Slot/>
             <form
               ref={r}
@@ Expand Down @@