From 267915eb40380cd105aed5ca52174f207a8b3211 Mon Sep 17 00:00:00 2001
From: Quildra <Quildra@gmail.com>
Date: Mon, 18 Nov 2024 07:18:19 +0000
Subject: [PATCH]  - Added external links to the bottom of the details panel

---
 .../pokemon-details.component.ts              | 97 +++++++++++++------
 1 file changed, 69 insertions(+), 28 deletions(-)

diff --git a/src/app/features/pokemon/pokemon-details/pokemon-details.component.ts b/src/app/features/pokemon/pokemon-details/pokemon-details.component.ts
index 31b97f0..8341933 100644
--- a/src/app/features/pokemon/pokemon-details/pokemon-details.component.ts
+++ b/src/app/features/pokemon/pokemon-details/pokemon-details.component.ts
@@ -27,40 +27,51 @@ import { Observable } from 'rxjs';
 
       <div class="details-content">
         <img 
-          [src]="'/assets/images/pokemon/' + pokemon?.Image" 
+          [src]="pokemon?.Image" 
           [alt]="pokemon?.Name"
           class="pokemon-detail-image"
         >
 
-        <div class="encounters-section">
-          <h3>Encounters</h3>
-          <ng-container *ngIf="encounters$ | async as encounters">
-            <div *ngFor="let gameGroup of groupEncountersByGame(encounters)" class="game-encounters">
-              <button 
-                class="collapsible" 
-                (click)="toggleCollapsible($event)"
-                [class.active]="isCollapsibleActive"
-              >
-                {{ gameGroup.game }}
-                <span class="toggle-icon">▼</span>
-              </button>
-              <div class="encounter-list">
-                <div *ngFor="let encounter of gameGroup.encounters" class="encounter-item">
-                  <p>
-                    {{ encounter.location }}
-                    <ng-container *ngIf="encounter.day || encounter.time">
-                      ({{ encounter.day || '' }} {{ encounter.time || '' }})
-                    </ng-container>
-                  </p>
-                  <div class="encounter-tags">
-                    <span *ngIf="encounter.static_encounter" class="tag">Static</span>
-                    <span *ngIf="encounter.fishing" class="tag">Fishing</span>
-                    <span *ngIf="encounter.starter" class="tag">Starter</span>
+        <div class="scrollable-content">
+          <div class="encounters-section">
+            <h3>Encounters</h3>
+            <ng-container *ngIf="encounters$ | async as encounters">
+              <div *ngFor="let gameGroup of groupEncountersByGame(encounters)" class="game-encounters">
+                <button 
+                  class="collapsible" 
+                  (click)="toggleCollapsible($event)"
+                  [class.active]="isCollapsibleActive"
+                >
+                  {{ gameGroup.game }}
+                  <span class="toggle-icon">▼</span>
+                </button>
+                <div class="encounter-list">
+                  <div *ngFor="let encounter of gameGroup.encounters" class="encounter-item">
+                    <p>
+                      {{ encounter.location }}
+                      <ng-container *ngIf="encounter.day || encounter.time">
+                        ({{ encounter.day || '' }} {{ encounter.time || '' }})
+                      </ng-container>
+                    </p>
+                    <div class="encounter-tags">
+                      <span *ngIf="encounter.static_encounter" class="tag">Static</span>
+                      <span *ngIf="encounter.fishing" class="tag">Fishing</span>
+                      <span *ngIf="encounter.starter" class="tag">Starter</span>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </ng-container>
+            </ng-container>
+          </div>
+        </div>
+        <div class="external-links">
+          <a 
+            [href]="'https://bulbapedia.bulbagarden.net/wiki/' + pokemon?.Name + '_(Pokémon)'" 
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            View on Bulbapedia
+          </a>
         </div>
       </div>
     </div>
@@ -76,7 +87,7 @@ import { Observable } from 'rxjs';
       right: -340px;
       bottom: 0;
       transition: right 0.3s ease-in-out;
-      overflow-y: auto;
+      overflow: hidden;
       z-index: 1000;
     }
 
@@ -102,6 +113,7 @@ import { Observable } from 'rxjs';
       object-fit: contain;
       margin: 0 auto 20px;
       display: block;
+      flex-shrink: 0; /* Prevent image from shrinking */
     }
 
     .game-encounters {
@@ -163,6 +175,35 @@ import { Observable } from 'rxjs';
       font-size: 0.8em;
       color: #666;
     }
+
+    .details-content {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    .scrollable-content {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .external-links {
+      position: sticky;
+      bottom: 0; /* Ensures it's always at the bottom of the panel */
+      padding: 15px;
+      border-top: 1px solid #eee;
+      background: white;
+      z-index: 10; /* Keeps it above the scrollable content */
+      
+      a {
+        color: #0645ad;
+        text-decoration: none;
+        
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
   `]
 })
 export class PokemonDetailsComponent {