diff options
author | Kelly Rauchenberger <fefferburbia@gmail.com> | 2017-10-13 10:01:44 -0400 |
---|---|---|
committer | Kelly Rauchenberger <fefferburbia@gmail.com> | 2017-10-13 10:01:44 -0400 |
commit | 44a0c2e75ef577e6e847cbeb940ea936904c9d72 (patch) | |
tree | 2682fe4e131f567c2ff7e2c6f229a3fe9e6d0e6c /app/views | |
parent | 5eab020d3db17c08050e751c155f266dd0a87c4d (diff) | |
download | pokeviewer-44a0c2e75ef577e6e847cbeb940ea936904c9d72.tar.gz pokeviewer-44a0c2e75ef577e6e847cbeb940ea936904c9d72.tar.bz2 pokeviewer-44a0c2e75ef577e6e847cbeb940ea936904c9d72.zip |
Redesigned Pokémon show page
The new design is heavily inspired by the status screen from Diamond & Pearl. It's not entirely done yet, with notable missing features including sheen and gender. However, it would also be nice to show a star for shiny Pokémon, Pokérus status, possibly a mention as to what game the Pokémon is currently in, and descriptive hover bubbles for moves. It is also notable that currently, as ribbons are located all the way to the right, their hover bubbles usually go off screen. The list of Pokémon page has not been redesigned, and the main layout is still bare.
Diffstat (limited to 'app/views')
-rw-r--r-- | app/views/layouts/pokeviewer/application.html.haml | 7 | ||||
-rw-r--r-- | app/views/pokeviewer/pokemon/show.html.haml | 213 |
2 files changed, 123 insertions, 97 deletions
diff --git a/app/views/layouts/pokeviewer/application.html.haml b/app/views/layouts/pokeviewer/application.html.haml index 6bce8b9..31b19ea 100644 --- a/app/views/layouts/pokeviewer/application.html.haml +++ b/app/views/layouts/pokeviewer/application.html.haml | |||
@@ -7,9 +7,4 @@ | |||
7 | = csrf_meta_tags | 7 | = csrf_meta_tags |
8 | %body | 8 | %body |
9 | %header#banner Pokéviewer | 9 | %header#banner Pokéviewer |
10 | #container | 10 | #content= yield |
11 | #left-sidebar | ||
12 | Sidebar stuff | ||
13 | #content= yield | ||
14 | #right-sidebar | ||
15 | Sidebar stuff | ||
diff --git a/app/views/pokeviewer/pokemon/show.html.haml b/app/views/pokeviewer/pokemon/show.html.haml index e3bee11..6c478ef 100644 --- a/app/views/pokeviewer/pokemon/show.html.haml +++ b/app/views/pokeviewer/pokemon/show.html.haml | |||
@@ -1,86 +1,128 @@ | |||
1 | .pokemon{ class: (not @pokemon.trainer.nil?) && "in-#{@pokemon.trainer.game}" } | 1 | .pokemon{ class: (not @pokemon.trainer.nil?) && "in-#{@pokemon.trainer.game}" } |
2 | .pokemon-basics | 2 | .pokemon-basics |
3 | .pokemon-species-id= "No. #{@pokemon.species_id}" | 3 | .pokemon-nameline |
4 | .pokemon-species-name= @pokemon.species.name | 4 | = image_tag(@pokemon.pokeball_icon_path, class: "pokemon-ball") |
5 | .pokemon-image= image_tag @pokemon.sprite_path | 5 | %span.pokemon-name= @pokemon.revisions.last.nickname |
6 | .pokemon-name= @pokemon.revisions.last.nickname | 6 | %span.pokemon-gender N |
7 | .pokemon-ot | ||
8 | OT/ | ||
9 | %span{ class: @pokemon.ot_gender }>= @pokemon.ot_name | ||
10 | .pokemon-id= "ID/#{@pokemon.display_ot_number}" | ||
11 | .pokemon-level= "Lv. #{@pokemon.revisions.last.level}" | 7 | .pokemon-level= "Lv. #{@pokemon.revisions.last.level}" |
12 | .pokemon-column | 8 | .pokemon-image |
13 | .pokemon-stats | 9 | .pokemon-image-wrap= image_tag @pokemon.sprite_path |
14 | .pd-details Stats | 10 | - if @pokemon.revisions.last.item.nil? |
15 | %table.pd-contents | 11 | .pokemon-item-label Item |
16 | %tr | 12 | .pokemon-item None |
17 | %th HP | 13 | - else |
18 | %th | 14 | .pokemon-item-label.with-item Item |
19 | Attack | 15 | .pokemon-item.pkv-has-hover |
20 | - if @pokemon.nature_benefits?(:attack) | 16 | = image_tag(@pokemon.revisions.last.item.icon_path) |
21 | %span.nature-benefit + | 17 | = @pokemon.revisions.last.item.name |
22 | - if @pokemon.nature_hinders?(:attack) | 18 | .pkv-hover |
23 | %span.nature-hinder - | 19 | .pc-data-name= @pokemon.revisions.last.item.name |
24 | %th | 20 | - if @pokemon.revisions.last.item.tm? |
25 | Defense | 21 | .pc-move-name= @pokemon.revisions.last.item.move.name |
26 | - if @pokemon.nature_benefits?(:defense) | 22 | = @pokemon.revisions.last.item.description(@pokemon.trainer.game) |
27 | %span.nature-benefit + | 23 | .pokemon-tab.pokemon-details |
28 | - if @pokemon.nature_hinders?(:defense) | 24 | %table |
29 | %span.nature-hinder - | 25 | %tr |
30 | %th | 26 | %th Pokédex No. |
31 | Sp. Atk | 27 | %td |
32 | - if @pokemon.nature_benefits?(:special_attack) | 28 | .table-bubble.tb-top= @pokemon.species_id |
33 | %span.nature-benefit + | 29 | %tr |
34 | - if @pokemon.nature_hinders?(:special_attack) | 30 | %th Name |
35 | %span.nature-hinder - | 31 | %td |
36 | %th | 32 | .table-bubble= @pokemon.species.name |
37 | Sp. Def | 33 | %tr |
38 | - if @pokemon.nature_benefits?(:special_defense) | 34 | %th Type |
39 | %span.nature-benefit + | 35 | %td |
40 | - if @pokemon.nature_hinders?(:special_defense) | 36 | .table-bubble |
41 | %span.nature-hinder - | 37 | = image_for_type @pokemon.species.type_1 |
42 | %th | 38 | - if @pokemon.species.type_2 |
43 | Speed | 39 | = image_for_type @pokemon.species.type_2 |
44 | - if @pokemon.nature_benefits?(:speed) | 40 | %tr |
45 | %span.nature-benefit + | 41 | %th OT |
46 | - if @pokemon.nature_hinders?(:speed) | 42 | %td.ot-gender{ class: @pokemon.ot_gender } |
47 | %span.nature-hinder - | 43 | .table-bubble= @pokemon.ot_name |
48 | %tr | 44 | %tr |
49 | %td= @pokemon.revisions.last.hp | 45 | %th ID No. |
50 | %td= @pokemon.revisions.last.attack | 46 | %td |
51 | %td= @pokemon.revisions.last.defense | 47 | .table-bubble.tb-bottom= @pokemon.display_ot_number |
52 | %td= @pokemon.revisions.last.special_attack | 48 | %tr |
53 | %td= @pokemon.revisions.last.special_defense | 49 | %th |
54 | %td= @pokemon.revisions.last.speed | 50 | %td |
55 | .pokemon-row | 51 | .pokemon-met-label Trainer Memo |
56 | .pokemon-moves | 52 | .pokemon-description= display_met @pokemon |
57 | .pd-details Moves | 53 | .pokemon-tab.pokemon-stats |
58 | %ul | 54 | %table |
59 | %li= @pokemon.revisions.last.move_1.name | 55 | %tr |
60 | - if @pokemon.revisions.last.move_2 | 56 | %th HP |
61 | %li= @pokemon.revisions.last.move_2.name | 57 | %td |
62 | - else | 58 | .table-bubble.tb-top= @pokemon.revisions.last.hp |
63 | %li - | 59 | %tr |
64 | - if @pokemon.revisions.last.move_3 | 60 | %th |
65 | %li= @pokemon.revisions.last.move_3.name | 61 | Attack |
66 | - else | 62 | - if @pokemon.nature_benefits?(:attack) |
67 | %li - | 63 | %span.nature-benefit + |
68 | - if @pokemon.revisions.last.move_4 | 64 | - if @pokemon.nature_hinders?(:attack) |
69 | %li= @pokemon.revisions.last.move_4.name | 65 | %span.nature-hinder - |
70 | - else | 66 | %td |
71 | %li - | 67 | .table-bubble= @pokemon.revisions.last.attack |
72 | .pokemon-memo | 68 | %tr |
73 | .pd-details Trainer Memo | 69 | %th |
74 | .pd-contents | 70 | Defense |
75 | %p | 71 | - if @pokemon.nature_benefits?(:defense) |
76 | %span.pokemon-nature<= @pokemon.nature.titlecase | 72 | %span.nature-benefit + |
77 | nature. | 73 | - if @pokemon.nature_hinders?(:defense) |
78 | %p= @pokemon.display_met | 74 | %span.nature-hinder - |
79 | .pokemon-contest | 75 | %td |
80 | .pd-details Contest Condition | 76 | .table-bubble= @pokemon.revisions.last.defense |
81 | = condition_diagram @pokemon.revisions.last | 77 | %tr |
82 | .pokemon-ribbons | 78 | %th |
83 | .pd-details Ribbons | 79 | Sp. Atk |
80 | - if @pokemon.nature_benefits?(:special_attack) | ||
81 | %span.nature-benefit + | ||
82 | - if @pokemon.nature_hinders?(:special_attack) | ||
83 | %span.nature-hinder - | ||
84 | %td | ||
85 | .table-bubble= @pokemon.revisions.last.special_attack | ||
86 | %tr | ||
87 | %th | ||
88 | Sp. Def | ||
89 | - if @pokemon.nature_benefits?(:special_defense) | ||
90 | %span.nature-benefit + | ||
91 | - if @pokemon.nature_hinders?(:special_defense) | ||
92 | %span.nature-hinder - | ||
93 | %td | ||
94 | .table-bubble= @pokemon.revisions.last.special_defense | ||
95 | %tr | ||
96 | %th | ||
97 | Speed | ||
98 | - if @pokemon.nature_benefits?(:speed) | ||
99 | %span.nature-benefit + | ||
100 | - if @pokemon.nature_hinders?(:speed) | ||
101 | %span.nature-hinder - | ||
102 | %td | ||
103 | .table-bubble.tb-bottom= @pokemon.revisions.last.speed | ||
104 | %tr.pokemon-nature-label | ||
105 | %th{ colspan: 2 } Nature | ||
106 | %tr | ||
107 | %th | ||
108 | %td | ||
109 | .tb-only= @pokemon.nature_text | ||
110 | %tr | ||
111 | %th{ colspan: 2 } Ability | ||
112 | %tr | ||
113 | %th | ||
114 | %td | ||
115 | .tb-only.pkv-has-hover | ||
116 | = @pokemon.ability.name | ||
117 | .pkv-hover | ||
118 | .pc-data-name= @pokemon.ability.name | ||
119 | = @pokemon.ability.description | ||
120 | .pokemon-tab.pokemon-moves | ||
121 | %table | ||
122 | - (1..4).each do |i| | ||
123 | = move_details @pokemon.revisions.last, i | ||
124 | .pokemon-tab.pokemon-contest= condition_diagram @pokemon.revisions.last | ||
125 | .pokemon-tab.pokemon-ribbons | ||
84 | %ul | 126 | %ul |
85 | - @pokemon.revisions.last.ribbons.each do |ribbon| | 127 | - @pokemon.revisions.last.ribbons.each do |ribbon| |
86 | %li.pkv-has-hover | 128 | %li.pkv-has-hover |
@@ -88,14 +130,3 @@ | |||
88 | .pkv-hover | 130 | .pkv-hover |
89 | .pc-data-name= ribbon[:name] | 131 | .pc-data-name= ribbon[:name] |
90 | = ribbon[:description] | 132 | = ribbon[:description] |
91 | .pokemon-etc | ||
92 | .pd-details Misc | ||
93 | = image_tag(@pokemon.pokeball_icon_path) | ||
94 | - unless @pokemon.revisions.last.item.nil? | ||
95 | .pd-hold-item.pkv-has-hover | ||
96 | = image_tag(@pokemon.revisions.last.item.icon_path) | ||
97 | .pkv-hover | ||
98 | .pc-data-name= @pokemon.revisions.last.item.name | ||
99 | - if @pokemon.revisions.last.item.tm? | ||
100 | .pc-move-name= @pokemon.revisions.last.item.move.name | ||
101 | = @pokemon.revisions.last.item.description(@pokemon.trainer.game) | ||