Merge pull request #23 from funkyFangs/more-qol-improvements

💄 improve styling, add dates to history

Author: funkyFangs

src/app.less

@@ -6,27 +6,6 @@
 @import 'style/palette';
 @import 'style/positioning';
 
-:root {
-  /* Palette */
-  --primary-darkest: black;
-  --primary-darker: #17252b;
-  --primary-dark: #25353d;
-  --primary-medium: #2f4550;
-  --primary-light: #3f606e;
-  --primary-lighter: #586f7c;
-  --font-color: #f4f4f9;
-  --accent: #b8d8d9;
-
-  --error: #a84432;
-  --info: #4a6af7;
-  --warning: #fcc81c;
-  --success: #38c750;
-
-  /* Positioning */
-  --border-radius: 8px;
-  --padding-length: 5px;
-}
-
 body {
   background-color: @indigo;
 
@@ -68,6 +47,10 @@ tr {
   user-select: none;
 }
 
+.invisible {
+  display: none;
+}
+
 /* ============================================================================================ *\
  *  Buttons                                                                                     *
 \* ============================================================================================ */
@@ -85,38 +68,20 @@ button {
 
 input,
 select,
-button,
-input:hover,
-select:hover,
-button:hover {
-  /* Transitions */
-  transition-property: background-color;
-  transition-duration: @transition-duration;
-  transition-timing-function: @transition-timing-function;
-}
-
-input:disabled,
-select:disabled,
-button:disabled,
-input:active,
-select:active,
-button:active {
-  /* Transitions */
-  transition: none;
-}
-
-a,
-a:hover {
-  /* Transitions */
-  transition-property: color;
-  transition-duration: @transition-duration;
-  transition-timing-function: @transition-timing-function;
-}
+button {
+  &,
+  &:hover {
+    /* Transitions */
+    transition-property: background-color;
+    transition-duration: @transition-duration;
+    transition-timing-function: @transition-timing-function;
+  }
 
-a:active,
-a:disabled {
-  /* Transitions */
-  transition: none;
+  &:active,
+  &:disabled {
+    /* Transitions */
+    transition: none;
+  }
 }
 
 /* ============================================================================================ *\
@@ -157,22 +122,20 @@ a {
 
   /* Decoration */
   text-decoration: none;
-}
-
-/* ============================================================================================ *\
- *  Help                                                                                        *
-\* ============================================================================================ */
 
-.help {
-  /* Cursor */
-  cursor: help;
-}
+  &,
+  &:hover {
+    /* Transitions */
+    transition-property: color;
+    transition-duration: @transition-duration;
+    transition-timing-function: @transition-timing-function;
+  }
 
-.help:hover {
-  /* Transition */
-  transition-property: color;
-  transition-duration: @transition-duration;
-  transition-timing-function: @transition-timing-function;
+  &:active,
+  &:disabled {
+    /* Transitions */
+    transition: none;
+  }
 }
 
 /* ============================================================================================ *\
@@ -187,21 +150,31 @@ table {
   border-radius: @border-radius;
   overflow: hidden;
   table-layout: fixed;
-}
-
-thead > tr {
-  background-color: @shark;
-  color: contrast($background-color);
-}
-
-tbody > tr:nth-of-type(odd) {
-  background-color: @darkest-indigo;
-  color: contrast($background-color);
-}
 
-tbody > tr:nth-of-type(even) {
-  background-color: @darker-indigo;
-  color: contrast($background-color);
+  > thead > tr {
+    background-color: @shark;
+    color: contrast($background-color);
+
+    > th {
+      font-weight: bold;
+    }
+  }
+
+  > tbody {
+    > tr > th {
+      font-weight: bold;
+    }
+
+    > tr:nth-of-type(odd) {
+      background-color: @darkest-indigo;
+      color: contrast($background-color);
+    }
+
+    > tr:nth-of-type(even) {
+      background-color: @darker-indigo;
+      color: contrast($background-color);
+    }
+  }
 }
 
 th,

src/lib/api/HuntTracker.ts

@@ -15,6 +15,8 @@ export interface HuntTracker {
     max: number
   }
   complete: boolean
+  startDate?: string
+  endDate?: string
 
   // Shiny Rates
   method: HuntingMethod
@@ -25,7 +27,7 @@ export interface HuntTracker {
   versionGroup?: string
   version: string
 
-  // Pokemon Details
+  // Pokémon Details
   pokemonSpecies: string
   pokemon?: string
   pokemonForm?: string

src/lib/api/HuntingMethod.ts

@@ -64,29 +64,6 @@ export function getSupportedHuntingMethods(
   return [HuntingMethod.FULL_ODDS, HuntingMethod.MASUDA_METHOD]
 }
 
-export function getToolTip(huntingMethod: HuntingMethod) {
-  switch (huntingMethod) {
-    case HuntingMethod.FULL_ODDS:
-      return 'This is the default method of shiny hunting with the default odds of finding a shiny Pokémon.'
-    case HuntingMethod.ODD_EGG:
-      return 'The Odd Egg in Pokémon Crystal has a 14% chance of hatching as a shiny Pokémon as opposed to the default odds.'
-    case HuntingMethod.MASUDA_METHOD:
-      return 'Eggs produced by two Pokémon from different regions have a significantly increased chance of being shiny.'
-    case HuntingMethod.POKE_RADAR:
-      return 'The Poké Radar provides an increased chance of a shiny Pokémon with consecutive encounters of the same species.'
-    case HuntingMethod.FRIEND_SAFARI:
-      return 'Pokémon found in the Friend Safari have an increased chance of being shiny.'
-    case HuntingMethod.CONSECUTIVE_FISHING:
-      return 'When fishing in the same area, reeling in the same Pokémon consecutively increases the likelihood of it being shiny.'
-    case HuntingMethod.HIDDEN_POKEMON:
-      return 'In Omega Ruby and Alpha Sapphire, Pokémon will partially reveal themselves in certain tiles. These Pokémon will have an increased chance of being shiny depending on their Search Level in the Pokédex.'
-    case HuntingMethod.SOS_BATTLE:
-      return 'In an SOS battle, the chance of an ally Pokémon being shiny increases with each consecutive ally called in.'
-    case HuntingMethod.ULTRA_WARP_RIDE:
-      return 'In the Ultra Warp Ride in Ultra Sun and Ultra Moon, the chance of finding a shiny Pokémon increases with the distance travelled and the rarity of the ring.'
-  }
-}
-
 export const CHAIN_HUNTING_METHODS = new Set([
   HuntingMethod.POKE_RADAR,
   HuntingMethod.CONSECUTIVE_FISHING,

src/lib/menu/FooterMenu.svelte

@@ -24,7 +24,7 @@
   @import '../../style/positioning';
 
   footer {
-    position: absolute;
+    position: fixed;
     width: 100%;
     height: @top-bar-height;
     bottom: 0;

src/lib/menu/HeaderMenu.svelte

@@ -64,7 +64,7 @@ If you wanted to display a header menu titled "My Application" with an anchor ca
 
   header {
     /* Positioning */
-    position: absolute;
+    position: fixed;
     width: 100%;
     height: @top-bar-height;
     top: 0;

src/lib/menu/controls/ToolTip.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { getSupportedHuntingMethods, getToolTip, HuntingMethod } from '$lib/api/HuntingMethod.js'
-  import ToolTip from '$lib/menu/controls/ToolTip.svelte'
+  import { getSupportedHuntingMethods, HuntingMethod } from '$lib/api/HuntingMethod.js'
   import type { Generation } from '$lib/api/GenerationResource'
   import type { VersionGroup } from '$lib/api/VersionGroupResource'
   import type { Version } from '$lib/api/VersionResource'
@@ -46,12 +45,6 @@
       {/each}
     </select>
   {/if}
-
-  {#if selectedHuntingMethod}
-    <ToolTip title={getToolTip(selectedHuntingMethod)}>
-      <span class="info">i</span>
-    </ToolTip>
-  {/if}
 </div>
 
 <style lang="less">
@@ -71,15 +64,20 @@
     text-align: center;
     background-color: @indigo;
     color: contrast($background-color);
-  }
 
-  select:hover {
-    background-color: lighten(@indigo, 5%);
-    color: contrast($background-color);
-  }
+    &:hover {
+      background-color: lighten(@indigo, 5%);
+      color: contrast($background-color);
+    }
 
-  select:active {
-    background-color: lighten(@indigo, 10%);
-    color: contrast($background-color);
+    &:active {
+      background-color: lighten(@indigo, 10%);
+      color: contrast($background-color);
+    }
+
+    &:disabled {
+      background-color: desaturate(@indigo, 25%);
+      color: contrast($background-color);
+    }
   }
 </style>