Changeset 97 for veekun/branches

Timestamp:

04/12/07 01:08:42 (3 years ago)

Author:

eevee

Message:

Restyled move list, Pokemon list, TM list, and TM pages.

Location:

veekun/branches/layout

Files:

• lib/Vee/Controller/Dex.pm (modified) (2 diffs)
• templates/dex/common.tt (modified) (1 diff)
• templates/dex/list/moves.tt (modified) (1 diff)
• templates/dex/list/pokemon.tt (modified) (1 diff)
• templates/dex/list/tms.tt (modified) (2 diffs)
• templates/dex/page/pokemon.tt (modified) (2 diffs)
• templates/dex/page/tm.tt (modified) (1 diff)
• templates/style/dex.tt (modified) (4 diffs)
• templates/style/global.tt (modified) (1 diff)

veekun/branches/layout/lib/Vee/Controller/Dex.pm

@@ -311 +311 @@
     #   'me' is the table we are selecting from, listing Pokemon related to any from 'pokemon'
     $s->{pokemon_rs} = $c->model('DBIC::Pokemon')->search({
+        'me.id'      => { '<=', $Generations[-1]{maxid} },
         'pokemon.id' => {
             -between => [
@@ -319 +320 @@
     }, {
         join     => { evchain => 'pokemon' },
+        prefetch => { pokemon_abilities => 'ability' },
         group_by => 'me.id',
         order_by => [ 'pokemon.id ASC', "FIND_IN_SET('baby', me.flags) DESC", 'me.id ASC' ],

veekun/branches/layout/templates/dex/common.tt

@@ -56 +56 @@
 
 [% pokemon_header = BLOCK %]
- <th class="dextbl-size"> Height </th> <th class="dextbl-size"> Weight </th>
- <th class="dextbl-dualtype" colspan="2"> Type </th> <th class="dextbl-gender"> <img src="/dex-images/gender/x.png" alt="Gender" title="Gender"/> </th>
- <th class="dextbl-breeds"> Egg groups </th> <th class="dextbl-abilities"> Abilities </th>
- <th class="dextbl-stat"> Atk </th> <th class="dextbl-stat"> Def </th> <th class="dextbl-stat"> Sp Atk </th>
- <th class="dextbl-stat"> Sp Def </th> <th class="dextbl-stat"> Speed </th> <th class="dextbl-stat"> HP </th> <th class="dextbl-stat"> Avg </th>
+ <th class="size"> Height </th> <th class="size"> Weight </th>
+ <th colspan="2"> Type </th> <th class="gender"> <img src="/dex-images/gender/x.png" alt="Gender" title="Gender"/> </th>
+ <th class="breeds"> Egg groups </th> <th class="abilities"> Abilities </th>
+ <th class="stat"> Atk </th> <th class="stat"> Def </th> <th class="stat"> Sp Atk </th>
+ <th class="stat"> Sp Def </th> <th class="stat"> Speed </th> <th class="stat"> HP </th> <th class="stat"> Avg </th>
 [% END %]
 
 [%# same but for pokemon table; requires a full row though since we don't cache all this %]
 [% MACRO pokemon_cells(pokemon) BLOCK %]
- <td title="[% height_metric(pokemon.height) %]"> [% height_imperial(pokemon.height) %] </td> <td title="[% weight_metric(pokemon.weight) %]"> [% weight_imperial(pokemon.weight) %] </td>
- <td class="left"> <a href="[% dex_uri('types', pokemon.type1) %]"><img src="/dex-images/typeicons/[% pokemon.type1 %].png" alt="" class="middle"/> [%+ pokemon.type1 %]</a> </td>
- <td class="left"> [% IF pokemon.type2 %] <a href="[% dex_uri('types', pokemon.type2) %]"><img src="/dex-images/typeicons/[% pokemon.type2 %].png" alt="" class="middle"/> [%+ pokemon.type2 %]</a> [% END %] </td>
- </td>
- <td>[% gender_text(pokemon.gender, 1) %]</td>
- <td>
+    <td title="[% height_metric(pokemon.height) %]"> [% height_imperial(pokemon.height) %] </td> <td title="[% weight_metric(pokemon.weight) %]"> [% weight_imperial(pokemon.weight) %] </td>
+    <td class="type"> [% type_name(pokemon.type1) %] </td>
+    <td class="type"> [% type_name(pokemon.type2) IF pokemon.type2 %] </td>
+    </td>
+    <td class="gender">[% gender_text(pokemon.gender, 1) %]</td>
+    <td class="breeds">
 [%     FOREACH b IN pokemon.breeds %]
-  <a href="[% c.uri('Dex::Search', 'pokemon_search', { breed => b.breed }) %]">[% BreedingGroups.${b.breed} %]</a>
+        <a href="[% c.uri('Dex::Search', 'pokemon_search', { breed => b.breed }) %]">[% BreedingGroups.${b.breed} %]</a>
 [%         '<br/>' UNLESS loop.last %]
 [%     END %]
- </td>
- <td>
+    </td>
+    <td class="abilities">
 [%     FOREACH a IN pokemon.pokemon_abilities %]
   <a href="[% c.uri('Dex::Search', 'pokemon_search', { ability => a.ability.id }) %]">[% a.ability.name %]</a>
 [%         '<br/>' UNLESS loop.last %]
 [%     END %]
- </td>
+    </td>
 [%     stat_avg = 0 %]
 [%     FOREACH column IN StatColumns %]
-<!-- <td>[% pokemon.$column %]</td> -->
- <td><div class="dex-ministatbar"><div class="dex-ministatbar-bar" style="width: [% pokemon.$column / 255 * 100 %]%; background-color: #[% StatColors.$column %];"></div></div><small>[% pokemon.$column %]</small></td>
+    <td class="stat">[% pokemon.$column %]</td>
 [%         stat_avg = stat_avg + pokemon.$column %]
 [%     END %]
-[%     stat_avg = stat_avg / 6; stat_avg = round(stat_avg, 1) %]
- <td><div class="dex-ministatbar"><div class="dex-ministatbar-bar" style="width: [% stat_avg / 255 * 100 %]%; background-color: #[% StatColors.stat_avg %];"></div></div><small>[% stat_avg %]</small></td>
+    <td class="stat">[% stat_avg / 6 | format('%.01f') %]</td>
 [%+ END %]
-
 [% END %]

veekun/branches/layout/templates/dex/list/moves.tt

@@ -19 +19 @@
 
 <h1>[% Icons.${ Generations.$gen.abbr } %] Moves: [% Generations.$gen.games %]</h1>
-<table class="dex" cellspacing="0">
-<tr>
-  <th>ID</th>
+<table class="dex-table" cellspacing="0">
+<tr class="heading">
+    <th class="number">ID</th>
 [% move_header %]
 </tr>
 [% color = 1 %]
 [% FOREACH moveid IN [ min .. Generations.$gen.maxmoveid ] %]
-<tr class="color[% color %]"><td>[% moveid %]</td>[% move_cells(moveid) %]</tr>
+<tr class="color[% color %]">
+    <td class="number">[% moveid %]</td>
+[%         move_cells(moveid) %]
+</tr>
 [%     color = 3 - color %]
 [% END %]

veekun/branches/layout/templates/dex/list/pokemon.tt

@@ -17 +17 @@
 
 <h1>[% Icons.${ Generations.$gen.abbr } %] Pok&eacute;mon: [% Generations.$gen.games %]</h1>
-<table class="dex" cellspacing="0">
-<tr>
-  <th style="width: 15px;"><!-- pokeballs --></th>
-  <th style="width: 24px;"><!-- eggs --></th>
-  <th style="width: 192px;"> Pok&eacute;mon </th>
+<p>Dimmed rows are Pok&eacute;mon that were not introduced in this generation.
+   They are included to keep families complete even when new evolutions are added in later games.</p>
+<table class="dex-table dex-pokemon" cellspacing="0">
+<tr class="heading">
+    <th class="nametree"> Pok&eacute;mon </th>
 [% pokemon_header %]
 </tr>
-[% poke_indents = [ -1 ] %]
+[% poke_indents = {} %]
 [% last_evid = 0 %]
+[% color = 1 %]
 [% WHILE (poke = pokemon_rs.next) %]
-[%     IF last_evid AND poke.evid != last_evid %]
-<tr><th colspan="20" class="dextbl-line"></th></tr>
+[%     IF poke_indents.exists(poke.evparent) %]
+[%         poke_indents.${poke.id} = poke_indents.${poke.evparent} + 1 %]
+[%     ELSE %]
+[%         poke_indents.${poke.id} = poke.flags.match('baby') ? 0 : 1 %]
 [%     END %]
-[%     poke_indents.${poke.id} = poke_indents.${poke.evparent} + 1 %]
 [%     FOREACH poke_gen IN [ 0 .. Generations.max ]; IF Generations.$poke_gen.maxid >= poke.id; LAST; END; END %]
-<tr class="color[% 2 %]">
-  <td>[% IF gen != poke_gen; Icons.${Generations.$poke_gen.abbr}; END %]</td>
-  <td>[% IF poke.flags.matches('baby') %]<img src="/dex-images/icons/egg.png" alt="Baby"/>[% END %]</td>
-  <td style="text-align: left; padding-left: [% poke_indents.${poke.id} * 16 %]px;"><a href="[% dex_uri('pokemon', poke.name) %]">[% IF gen == poke_gen %]<img src="/dex-images/icons/[% poke.id.pad(3) %].png" alt=""/> [%+ END %][% poke.name %]</a></td>
+<tr class="color[% color %][% ' rowgroup' IF last_evid AND poke.evid != last_evid %][% ' dimmed' IF gen != poke_gen %]">
+    <td class="nametree" style="padding-left: [% poke_indents.${poke.id} %]em;"><a href="[% dex_uri('pokemon', poke.name) %]"><img src="/dex-images/icons/[% poke.id.pad(3) %].png" alt=""/> [%+ poke.name %]</a></td>
 [%     pokemon_cells(poke) %]
 </tr>
 [%     last_evid = poke.evid %]
+[%     color = 3 - color %]
 [% END %]
 </table>

veekun/branches/layout/templates/dex/list/tms.tt

@@ -14 +14 @@
 
 <h1><img src="/dex-images/balls/[% Generations.$gen.abbr %].png" alt="" style="vertical-align: baseline"/> TMs: [% Generations.$gen.games %]</h1>
-<table class="dex" cellspacing="0">
-<tr>
-  <th>TM</th>
+<table class="dex-table" cellspacing="0">
+<tr class="heading">
+    <th class="tm">TM</th>
 [% move_header %]
 </tr>
@@ -22 +22 @@
 [% FOREACH tm IN [ 1 .. TMs.$gen.max ] %]
 [%     NEXT UNLESS TMs.$gen.$tm %]
-<tr class="color[% color %]"><td><img src="/dex-images/tms/[% tm > 100 ? 'hm' : 'tm' %]-[% MoveData.${TMs.$gen.$tm}.type %].png" alt=""/> [% tm_name(tm) %]</td>[% move_cells(TMs.$gen.$tm) %]</tr>
-[% color = 3 - color %]
+<tr class="color[% color %]">
+    <td class="tm"><img src="/dex-images/tms/[% tm > 100 ? 'hm' : 'tm' %]-[% MoveData.${TMs.$gen.$tm}.type %].png" alt=""/> [% tm_name(tm) %]</td>
+[%     move_cells(TMs.$gen.$tm) %]
+</tr>
+[%     color = 3 - color %]
 [% END %]
 </table>

veekun/branches/layout/templates/dex/page/pokemon.tt

@@ -43 +43 @@
 </div>
 <div class="dex-long-box">
-    <h2>Damage Taken By [% type_name(this.type1) %][% IF this.type2; ' '; type_name(this.type2); END %]</h2>
+    <h2>Damage Taken</h2>
     <ul>
     [% FOREACH type IN TypeNames %]
@@ -378 +378 @@
     <td class="dex-locations-zone">[% location %]</td>[% IF location_columns.section %] <td class="dex-locations-zone">[% section %]</td>[% END %]
 [% IF location_columns.grass %]
-    <td>[% methods.grass.level %][% IF methods.grass.rarity %]<div class="rarity-container" title="[% methods.grass.rarity %]%"><div class="rarity-bar" style="width: [% methods.grass.rarity %]%;"></div></div>[% END %]</td>
+    <td>[% methods.grass.level %][% IF methods.grass.rarity %]<div class="minibar" title="[% methods.grass.rarity %]%"><div class="minibar-bar" style="width: [% methods.grass.rarity %]%;"></div></div>[% END %]</td>
 [% END %]
 [% IF location_columns.daytime %]
-    <td>[% IF methods.daytime %][% methods.daytime.level %][% IF methods.daytime.rarity %]<div class="rarity-container" title="[% methods.daytime.rarity %]%"><div class="rarity-bar" style="width: [% methods.daytime.rarity %]%;"></div></div>[% END %][% END %]</td>
+    <td>[% IF methods.daytime %][% methods.daytime.level %][% IF methods.daytime.rarity %]<div class="minibar" title="[% methods.daytime.rarity %]%"><div class="minibar-bar" style="width: [% methods.daytime.rarity %]%;"></div></div>[% END %][% END %]</td>
 [% END %]
 [% IF location_columns.night %]
-    <td>[% IF methods.night %][% methods.night.level %][% IF methods.night.rarity %]<div class="rarity-container" title="[% methods.night.rarity %]%"><div class="rarity-bar" style="width: [% methods.night.rarity %]%;"></div></div>[% END %][% END %]</td>
+    <td>[% IF methods.night %][% methods.night.level %][% IF methods.night.rarity %]<div class="minibar" title="[% methods.night.rarity %]%"><div class="minibar-bar" style="width: [% methods.night.rarity %]%;"></div></div>[% END %][% END %]</td>
 [% END %]
 [%         FOR m IN ['surfing', 'old-rod', 'good-rod', 'super-rod'] %]

veekun/branches/layout/templates/dex/page/tm.tt

@@ -1 +1 @@
 [% PROCESS 'dex/common.tt' -%]
 
-<table class="dex" cellspacing="0">
-<tr>
-  <th><!-- generation --></th>
-  [% move_header %]
+<h1>Moves Corresponding to [% tm_name(tm_id) %]</h1>
+<table class="dex-table" cellspacing="0">
+<tr class="heading">
+    <th class="number">Gen</th>
+    [% move_header %]
 </tr>
 [% color = 1 %]
 [% FOREACH tm IN tms %]
 <tr class="color[% color %]">
-  <td>[% dex.Icons.${Generations.${tm.generation}.abbr} %]</td>
+    <td class="number">[% Icons.${Generations.${tm.generation}.abbr} %]</td>
 [%     move_cells(tm.moveid) %]
 </tr>

veekun/branches/layout/templates/style/dex.tt

@@ -21 +21 @@
 a.dex-pokelist img { border: 1px solid transparent; -moz-border-radius: 0.33em; }
   a.dex-pokelist img:hover { border-color: #802020; background: #d89090; }
+
+.minibar { border: 1px solid #806640; }
+  .minibar .fill { background-color: #c0a680; height: 4px; }
 
 /* main layout chunks */
@@ -74 +77 @@
 .dex-table { width: 100%; }
   .dex-table td, .dex-table th { padding: 0.25em; }
+  .dex-table .number { width: 2em; text-align: center; }
+  .dex-table .tm { width: 6em; text-align: center; }
   .dex-table .level { text-align: center; }
   .dex-table th.level { width: 2em; }  /* colspan does weird things to tds with widths */
@@ -81 +86 @@
   .dex-table .power { width: 6em; text-align: center; }
   .dex-table .acc   { width: 3em; }
+  .dex-table .size  { width: 4em; text-align: center; }
+  .dex-table .stat  { width: 4em; text-align: center; }
+  .dex-table .gender { width: 16px; }
+  .dex-table .breeds { width: 6em; text-align: center; }
+  .dex-table .abilities { width: 7em; text-align: center; }
+  .dex-table .nametree { width: 10em; }
+  .dex-table td.nametree { text-align: left; }
   .dex-table td.acc { text-align: right; }
-  .dex-table td.blurb { font-size: 85%; }
+  .dex-table td.blurb,
+  .dex-table td.breeds,
+  .dex-table td.abilities { font-size: 85%; }
   .dex-table tr.heading th { background: #e6d3b8; color: #806640; border: 1px solid #c0a680; border-left: none; border-right: none; }
+  .dex-table tr.rowgroup td { border-top: 2px solid #c0a680; }
 
 /* locations table */
 .dex-locations { width: auto; }
   .dex-locations td { padding-left: 1em; padding-right: 1em; text-align: center; }
-  .dex-locations .rarity-container { border: 1px solid #806640; }
-  .dex-locations .rarity-bar { background-color: #c0a680; height: 4px; }
+
+/* pokemon table */
+.dex-pokemon { width: auto; }
 
 
@@ -95 +111 @@
 
 
+

veekun/branches/layout/templates/style/global.tt

@@ -17 +17 @@
 img { vertical-align: middle; }
 
-.color1 { /* lol nothing */ }
+.color1 { background: url(/images/bg-fade.png) #fff5e6 fixed left bottom no-repeat; /* same as #content */ }
 .color2 { background: url(/images/bg-fade.png) #f6e9d6 fixed left bottom no-repeat; }
   tr.color1:hover,
   tr.color2:hover { background: url(/images/bg-fade.png) #f2d3c9 fixed left bottom no-repeat; }
+.color1.dimmed { background-color: #f6f6f6; }
+.color2.dimmed { background-color: #eaeaea; }
 
 /* lazy alignment */