closes #23

LederCards · Apr 29, 2024 · 2eb20b5 · 2eb20b5
1 parent 1b7e57a
commit 2eb20b5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 57 deletions.
diff --git a/src/app/_shared/components/card-display/card-display.component.scss b/src/app/_shared/components/card-display/card-display.component.scss
@@ -1,4 +1,3 @@
-
 :host {
   --size-grid-small: 100px;
   --size-grid-large: 135px;
@@ -14,6 +13,9 @@
 
   --card-width: var(--size-normal-small);
   --card-height: var(--size-normal-large);
+
+  display: inline-block;
+  width: var(--card-width);
 }
 
 .card-image-container {
@@ -22,7 +24,6 @@
   justify-content: center;
 
   .card-image {
-
     width: var(--card-width);
     height: var(--card-height);
 
@@ -62,45 +63,3 @@
     }
   }
 }
-
-.card-text-container {
-
-  .card-info {
-
-    &.color-B {
-      --color-bar-color-start: #0099d9;
-      --color-bar-color-end: #00587c;
-    }
-
-    &.color-R {
-      --color-bar-color-start: #e63028;
-      --color-bar-color-end: #6a111b;
-    }
-
-    &.color-G {
-      --color-bar-color-start: #3db554;
-      --color-bar-color-end: #21613d;
-    }
-
-    &.color-Y {
-      --color-bar-color-start: #faed00;
-      --color-bar-color-end: #7d700c;
-    }
-
-    .ability, .flavortext {
-      font-size: 0.75em;
-    }
-
-    .color-bar {
-      z-index: 0;
-      min-height: 22px;
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-
-      background: linear-gradient(to right, var(--color-bar-color-start), var(--color-bar-color-end));
-    }
-  }
-}
diff --git a/src/app/_shared/components/search-cards/search-cards.component.html b/src/app/_shared/components/search-cards/search-cards.component.html
@@ -22,11 +22,13 @@ <h2>No results found</h2>
     <ion-grid class="cards">
       <ion-row>
         @for(card of searchService.visibleCards(); track card.id) {
-        <ion-col class="card-container" [sizeMd]="3" [sizeSm]="6" [sizeXs]="12">
-          <a [routerLink]="['/card', card.id]">
-            <app-card-display class="card" [cardCode]="card.id"
-              [display]="searchService.queryDisplayValue"></app-card-display>
-          </a>
+        <ion-col [sizeMd]="3" [sizeSm]="6" [sizeXs]="12">
+          <div class="card-container">
+            <a [routerLink]="['/card', card.id]">
+              <app-card-display class="card" [cardCode]="card.id"
+                [display]="searchService.queryDisplayValue"></app-card-display>
+            </a>
+          </div>
         </ion-col>
         }
       </ion-row>

diff --git a/src/app/_shared/components/search-cards/search-cards.component.scss b/src/app/_shared/components/search-cards/search-cards.component.scss
@@ -2,6 +2,9 @@
   margin-top: 1em;
   margin-bottom: 1em;
 
+  display: flex;
+  justify-content: center;
+
   .card {
     cursor: pointer;
   }
@@ -84,15 +87,7 @@ a {
   text-decoration: none;
 }
 
-.table-container {
-  margin-top: 2em;
-}
-
 .cell {
   padding-left: 10px;
   border-left: 6px solid var(--cell-border, transparent);
 }
-
-.ability:not(:last-child) {
-  margin-bottom: 1em;
-}