From 44a0c2e75ef577e6e847cbeb940ea936904c9d72 Mon Sep 17 00:00:00 2001 From: Kelly Rauchenberger Date: Fri, 13 Oct 2017 10:01:44 -0400 Subject: Redesigned Pokémon show page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- app/views/layouts/pokeviewer/application.html.haml | 7 +- app/views/pokeviewer/pokemon/show.html.haml | 213 ++++++++++++--------- 2 files changed, 123 insertions(+), 97 deletions(-) (limited to 'app/views') 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 @@ = csrf_meta_tags %body %header#banner Pokéviewer - #container - #left-sidebar - Sidebar stuff - #content= yield - #right-sidebar - Sidebar stuff + #content= yield 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 @@ .pokemon{ class: (not @pokemon.trainer.nil?) && "in-#{@pokemon.trainer.game}" } .pokemon-basics - .pokemon-species-id= "No. #{@pokemon.species_id}" - .pokemon-species-name= @pokemon.species.name - .pokemon-image= image_tag @pokemon.sprite_path - .pokemon-name= @pokemon.revisions.last.nickname - .pokemon-ot - OT/ - %span{ class: @pokemon.ot_gender }>= @pokemon.ot_name - .pokemon-id= "ID/#{@pokemon.display_ot_number}" + .pokemon-nameline + = image_tag(@pokemon.pokeball_icon_path, class: "pokemon-ball") + %span.pokemon-name= @pokemon.revisions.last.nickname + %span.pokemon-gender N .pokemon-level= "Lv. #{@pokemon.revisions.last.level}" - .pokemon-column - .pokemon-stats - .pd-details Stats - %table.pd-contents - %tr - %th HP - %th - Attack - - if @pokemon.nature_benefits?(:attack) - %span.nature-benefit + - - if @pokemon.nature_hinders?(:attack) - %span.nature-hinder - - %th - Defense - - if @pokemon.nature_benefits?(:defense) - %span.nature-benefit + - - if @pokemon.nature_hinders?(:defense) - %span.nature-hinder - - %th - Sp. Atk - - if @pokemon.nature_benefits?(:special_attack) - %span.nature-benefit + - - if @pokemon.nature_hinders?(:special_attack) - %span.nature-hinder - - %th - Sp. Def - - if @pokemon.nature_benefits?(:special_defense) - %span.nature-benefit + - - if @pokemon.nature_hinders?(:special_defense) - %span.nature-hinder - - %th - Speed - - if @pokemon.nature_benefits?(:speed) - %span.nature-benefit + - - if @pokemon.nature_hinders?(:speed) - %span.nature-hinder - - %tr - %td= @pokemon.revisions.last.hp - %td= @pokemon.revisions.last.attack - %td= @pokemon.revisions.last.defense - %td= @pokemon.revisions.last.special_attack - %td= @pokemon.revisions.last.special_defense - %td= @pokemon.revisions.last.speed - .pokemon-row - .pokemon-moves - .pd-details Moves - %ul - %li= @pokemon.revisions.last.move_1.name - - if @pokemon.revisions.last.move_2 - %li= @pokemon.revisions.last.move_2.name - - else - %li - - - if @pokemon.revisions.last.move_3 - %li= @pokemon.revisions.last.move_3.name - - else - %li - - - if @pokemon.revisions.last.move_4 - %li= @pokemon.revisions.last.move_4.name - - else - %li - - .pokemon-memo - .pd-details Trainer Memo - .pd-contents - %p - %span.pokemon-nature<= @pokemon.nature.titlecase - nature. - %p= @pokemon.display_met - .pokemon-contest - .pd-details Contest Condition - = condition_diagram @pokemon.revisions.last - .pokemon-ribbons - .pd-details Ribbons + .pokemon-image + .pokemon-image-wrap= image_tag @pokemon.sprite_path + - if @pokemon.revisions.last.item.nil? + .pokemon-item-label Item + .pokemon-item None + - else + .pokemon-item-label.with-item Item + .pokemon-item.pkv-has-hover + = image_tag(@pokemon.revisions.last.item.icon_path) + = @pokemon.revisions.last.item.name + .pkv-hover + .pc-data-name= @pokemon.revisions.last.item.name + - if @pokemon.revisions.last.item.tm? + .pc-move-name= @pokemon.revisions.last.item.move.name + = @pokemon.revisions.last.item.description(@pokemon.trainer.game) + .pokemon-tab.pokemon-details + %table + %tr + %th Pokédex No. + %td + .table-bubble.tb-top= @pokemon.species_id + %tr + %th Name + %td + .table-bubble= @pokemon.species.name + %tr + %th Type + %td + .table-bubble + = image_for_type @pokemon.species.type_1 + - if @pokemon.species.type_2 + = image_for_type @pokemon.species.type_2 + %tr + %th OT + %td.ot-gender{ class: @pokemon.ot_gender } + .table-bubble= @pokemon.ot_name + %tr + %th ID No. + %td + .table-bubble.tb-bottom= @pokemon.display_ot_number + %tr + %th   + %td + .pokemon-met-label Trainer Memo + .pokemon-description= display_met @pokemon + .pokemon-tab.pokemon-stats + %table + %tr + %th HP + %td + .table-bubble.tb-top= @pokemon.revisions.last.hp + %tr + %th + Attack + - if @pokemon.nature_benefits?(:attack) + %span.nature-benefit + + - if @pokemon.nature_hinders?(:attack) + %span.nature-hinder - + %td + .table-bubble= @pokemon.revisions.last.attack + %tr + %th + Defense + - if @pokemon.nature_benefits?(:defense) + %span.nature-benefit + + - if @pokemon.nature_hinders?(:defense) + %span.nature-hinder - + %td + .table-bubble= @pokemon.revisions.last.defense + %tr + %th + Sp. Atk + - if @pokemon.nature_benefits?(:special_attack) + %span.nature-benefit + + - if @pokemon.nature_hinders?(:special_attack) + %span.nature-hinder - + %td + .table-bubble= @pokemon.revisions.last.special_attack + %tr + %th + Sp. Def + - if @pokemon.nature_benefits?(:special_defense) + %span.nature-benefit + + - if @pokemon.nature_hinders?(:special_defense) + %span.nature-hinder - + %td + .table-bubble= @pokemon.revisions.last.special_defense + %tr + %th + Speed + - if @pokemon.nature_benefits?(:speed) + %span.nature-benefit + + - if @pokemon.nature_hinders?(:speed) + %span.nature-hinder - + %td + .table-bubble.tb-bottom= @pokemon.revisions.last.speed + %tr.pokemon-nature-label + %th{ colspan: 2 } Nature + %tr + %th + %td + .tb-only= @pokemon.nature_text + %tr + %th{ colspan: 2 } Ability + %tr + %th + %td + .tb-only.pkv-has-hover + = @pokemon.ability.name + .pkv-hover + .pc-data-name= @pokemon.ability.name + = @pokemon.ability.description + .pokemon-tab.pokemon-moves + %table + - (1..4).each do |i| + = move_details @pokemon.revisions.last, i + .pokemon-tab.pokemon-contest= condition_diagram @pokemon.revisions.last + .pokemon-tab.pokemon-ribbons %ul - @pokemon.revisions.last.ribbons.each do |ribbon| %li.pkv-has-hover @@ -88,14 +130,3 @@ .pkv-hover .pc-data-name= ribbon[:name] = ribbon[:description] - .pokemon-etc - .pd-details Misc - = image_tag(@pokemon.pokeball_icon_path) - - unless @pokemon.revisions.last.item.nil? - .pd-hold-item.pkv-has-hover - = image_tag(@pokemon.revisions.last.item.icon_path) - .pkv-hover - .pc-data-name= @pokemon.revisions.last.item.name - - if @pokemon.revisions.last.item.tm? - .pc-move-name= @pokemon.revisions.last.item.move.name - = @pokemon.revisions.last.item.description(@pokemon.trainer.game) -- cgit 1.4.1