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/assets | |
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/assets')
-rw-r--r-- | app/assets/images/pokeviewer/types/mystery.gif | bin | 0 -> 905 bytes | |||
-rw-r--r-- | app/assets/stylesheets/pokeviewer/pokemon.css.scss | 393 |
2 files changed, 267 insertions, 126 deletions
diff --git a/app/assets/images/pokeviewer/types/mystery.gif b/app/assets/images/pokeviewer/types/mystery.gif new file mode 100644 index 0000000..566a2f2 --- /dev/null +++ b/app/assets/images/pokeviewer/types/mystery.gif | |||
Binary files differ | |||
diff --git a/app/assets/stylesheets/pokeviewer/pokemon.css.scss b/app/assets/stylesheets/pokeviewer/pokemon.css.scss index ca6ae9c..4c1fc2c 100644 --- a/app/assets/stylesheets/pokeviewer/pokemon.css.scss +++ b/app/assets/stylesheets/pokeviewer/pokemon.css.scss | |||
@@ -3,34 +3,20 @@ | |||
3 | They will automatically be included in application.css. | 3 | They will automatically be included in application.css. |
4 | */ | 4 | */ |
5 | 5 | ||
6 | body { | ||
7 | |||
8 | } | ||
9 | |||
10 | #left-sidebar, #right-sidebar { | ||
11 | flex: 3 0px; | ||
12 | } | ||
13 | |||
14 | #container { | ||
15 | display: flex; | ||
16 | |||
17 | } | ||
18 | |||
19 | #banner { | 6 | #banner { |
20 | box-sizing: border-box; | 7 | box-sizing: border-box; |
21 | height: 10em; | 8 | height: 2em; |
22 | margin: 0 auto; | 9 | margin: 0 auto; |
23 | width: 60%; | 10 | width: 60%; |
24 | } | 11 | } |
25 | 12 | ||
26 | #content { | 13 | #content { |
27 | flex: 10 0px; | 14 | margin: 2em; |
28 | } | 15 | } |
29 | 16 | ||
30 | .trainer { | 17 | .trainer { |
31 | margin: 1em; | 18 | margin: 1em; |
32 | font-family: 'Power Green'; | 19 | font-family: 'Power Green'; |
33 | /* width: 758px;*/ | ||
34 | box-sizing: border-box; | 20 | box-sizing: border-box; |
35 | background-color: #f7f7f7; | 21 | background-color: #f7f7f7; |
36 | border: 1px solid #999; | 22 | border: 1px solid #999; |
@@ -162,6 +148,7 @@ body { | |||
162 | border-radius: 4px; | 148 | border-radius: 4px; |
163 | position: absolute; | 149 | position: absolute; |
164 | max-width: 45ch; | 150 | max-width: 45ch; |
151 | text-align: left; | ||
165 | 152 | ||
166 | .pc-data-name { | 153 | .pc-data-name { |
167 | font-weight: bold; | 154 | font-weight: bold; |
@@ -182,10 +169,10 @@ body { | |||
182 | .pokemon { | 169 | .pokemon { |
183 | font-family: 'Power Green'; | 170 | font-family: 'Power Green'; |
184 | display: flex; | 171 | display: flex; |
185 | margin: 1em; | 172 | margin: 1em 0; |
186 | border: 1px solid #777; | 173 | background-color: #c0c8c4; |
187 | border-radius: 5px; | 174 | border: 1px solid #888; |
188 | background-color: #fafafa; | 175 | overflow: hidden; |
189 | 176 | ||
190 | .male { | 177 | .male { |
191 | color: blue; | 178 | color: blue; |
@@ -200,164 +187,256 @@ body { | |||
200 | white-space: pre; | 187 | white-space: pre; |
201 | } | 188 | } |
202 | 189 | ||
203 | .pd-details { | 190 | &.in-emerald { |
204 | color: white; | 191 | .pokemon-image { |
205 | padding: .25em .5em; | 192 | img { |
206 | } | 193 | margin: -14px; |
207 | 194 | } | |
208 | .pd-contents { | ||
209 | p { | ||
210 | margin: .25em; | ||
211 | } | 195 | } |
212 | } | 196 | } |
213 | 197 | ||
214 | .pokemon-basics { | 198 | .pokemon-basics { |
215 | margin: .5em; | 199 | width: 8.5em; |
216 | min-width: 5em; | 200 | |
217 | } | 201 | .pokemon-nameline { |
202 | background-color: #dcb880; | ||
203 | padding: 6px 6px 0 6px; | ||
204 | border-top: 1px solid #d8a878; | ||
205 | border-left: 1px solid #d8a878; | ||
206 | border-right: 1px solid #d8a878; | ||
207 | border-top-left-radius: 6px; | ||
208 | border-top-right-radius: 6px; | ||
209 | margin: .25em .25em 0; | ||
210 | } | ||
218 | 211 | ||
219 | .pokemon-column { | 212 | .pokemon-ball { |
220 | border-left: 1px solid #aaa; | 213 | margin: -8px; |
214 | } | ||
221 | 215 | ||
222 | &>div + div { | 216 | .pokemon-name { |
223 | border-top: 1px solid #aaa; | 217 | margin-left: 3px; |
224 | } | 218 | } |
225 | } | ||
226 | 219 | ||
227 | .pokemon-row { | 220 | .pokemon-gender { |
228 | display: flex; | 221 | float: right; |
229 | flex: 1 0px; | 222 | } |
230 | 223 | ||
231 | &>div + div { | 224 | .pokemon-level { |
232 | border-left: 1px solid #aaa; | 225 | padding: 4px 8px 0px; |
226 | border-bottom-left-radius: 6px; | ||
227 | border-bottom-right-radius: 6px; | ||
228 | background-color: white; | ||
229 | margin: 0 .25em; | ||
233 | } | 230 | } |
234 | } | ||
235 | 231 | ||
236 | .pokemon-memo { | 232 | .pokemon-image { |
237 | background-color: #e7e8ff; | 233 | text-align: center; |
238 | flex-grow: 1; | ||
239 | 234 | ||
240 | .pd-details { | 235 | .pokemon-image-wrap { |
241 | background-color: #be3ff8; /*#d078f8;*/ | 236 | margin: 1em auto; |
237 | border: 10px solid #e0e0c8; | ||
238 | background-color: white; | ||
239 | border-radius: 10px; | ||
240 | display: inline-block; | ||
241 | padding: 4px; | ||
242 | } | ||
242 | } | 243 | } |
243 | } | ||
244 | 244 | ||
245 | .pokemon-moves { | 245 | .pokemon-item-label { |
246 | flex-grow: 1; | 246 | background-color: #dcb880; |
247 | color: white; | ||
248 | border-top: 1px solid #d8a878; | ||
249 | padding: .25em .25em 0 0.5em; | ||
250 | |||
251 | &.with-item { | ||
252 | padding-left: 30px; | ||
253 | } | ||
247 | 254 | ||
248 | .pd-details { | 255 | &:not(.with-item) { |
249 | background-color: #3fb5f8; | 256 | margin-top: .25em; |
257 | } | ||
250 | } | 258 | } |
251 | 259 | ||
252 | ul { | 260 | .pokemon-item { |
253 | display: flex; | 261 | background-color: white; |
254 | flex-direction: column; | 262 | padding: .25em .25em .25em .5em; |
255 | justify-content: space-between; | ||
256 | margin: 0; | ||
257 | padding: 0; | ||
258 | 263 | ||
259 | li { | 264 | img { |
260 | display: block; | 265 | vertical-align: bottom; |
261 | padding: 0.25em; | 266 | margin: -4px -4px -4px -8px; |
262 | box-sizing: border-box; | ||
263 | } | 267 | } |
264 | } | 268 | } |
265 | } | 269 | } |
266 | 270 | ||
267 | .pokemon-stats { | 271 | table { |
268 | background-color: #d7f4f6; | 272 | border-spacing: 0; |
273 | width: 100%; | ||
274 | |||
275 | th { | ||
276 | text-align: left; | ||
277 | color: white; | ||
278 | font-weight: normal; | ||
279 | white-space: nowrap; | ||
280 | } | ||
281 | |||
282 | .table-bubble { | ||
283 | background-color: #e4f0f0; | ||
284 | text-align: center; | ||
285 | padding: 4px 1em 0 1em; | ||
286 | height: 100%; | ||
287 | |||
288 | &.tb-top { | ||
289 | border-top-left-radius: 8px; | ||
290 | border-top-right-radius: 8px; | ||
291 | } | ||
269 | 292 | ||
270 | .pd-details { | 293 | &.tb-bottom { |
271 | background-color: #2068e0; | 294 | border-bottom-left-radius: 8px; |
272 | border-bottom: 1px solid #A9C6C8; | 295 | border-bottom-right-radius: 8px; |
296 | } | ||
273 | } | 297 | } |
274 | 298 | ||
275 | .nature-benefit { | 299 | .tb-only { |
276 | color: green; | 300 | text-align: center; |
301 | background-color: #e4f0f0; | ||
302 | border-radius: 6px; | ||
303 | padding: 3px 3px 0 3px; | ||
304 | height: 100%; | ||
277 | } | 305 | } |
278 | 306 | ||
279 | .nature-hinder { | 307 | tr:nth-child(odd) { |
280 | color: red; | 308 | .table-bubble { |
309 | background-color: #e4e8d0; | ||
310 | } | ||
281 | } | 311 | } |
312 | } | ||
313 | |||
314 | .pokemon-tab { | ||
315 | border-left: 1px solid #585450; | ||
316 | flex: 1 0px; | ||
317 | } | ||
318 | |||
319 | .pokemon-details { | ||
320 | background-color: #94c49c; | ||
282 | 321 | ||
283 | table { | 322 | table { |
284 | border-collapse: collapse; | 323 | padding-top: .75em; |
285 | border-style: hidden; | ||
286 | table-layout: fixed; | ||
287 | 324 | ||
288 | th, td { | 325 | th { |
289 | text-align: center; | 326 | padding: .25em 1em 0 .5em; |
290 | border: 1px solid #A9C6C8; | ||
291 | padding: 0.25em 0.25em; | ||
292 | width: 16.67%; | ||
293 | } | 327 | } |
294 | 328 | ||
295 | th { | 329 | td { |
296 | background-color: #bfdfff; | 330 | padding: 0 .5em 0 0; |
331 | } | ||
332 | |||
333 | tr:nth-child(odd) { | ||
334 | background-color: #84ac88; | ||
297 | } | 335 | } |
298 | } | 336 | } |
299 | } | 337 | } |
300 | 338 | ||
301 | .pokemon-condition { | 339 | .pokemon-stats { |
302 | background-color: #b9d7f2; | 340 | background-color: #6870d8; |
303 | border-left: 1px solid #aaa; | ||
304 | flex: 1 0px; | ||
305 | 341 | ||
306 | .pkcv-cool-circle { | 342 | table { |
307 | fill: #f59a55; | 343 | padding-top: .5em; |
308 | } | ||
309 | 344 | ||
310 | .pkcv-beauty-circle { | 345 | tr:nth-child(even) { |
311 | fill: #8095ff; | 346 | background-color: #8890f8; |
312 | } | 347 | } |
313 | 348 | ||
314 | .pkcv-cute-circle { | 349 | th { |
315 | fill: #f5a8d3; | 350 | padding: .25em .5em 0 1.5em; |
316 | } | 351 | } |
317 | 352 | ||
318 | .pkcv-smart-circle { | 353 | td { |
319 | fill: #79e15c; | 354 | padding: 0 1em 0 0; |
320 | } | 355 | } |
321 | 356 | ||
322 | .pkcv-tough-circle { | 357 | .pokemon-nature-label th { |
323 | fill: #f7f100; | 358 | padding-top: .75em; |
324 | } | 359 | } |
325 | 360 | ||
326 | .pkcv-outline { | 361 | .nature-benefit { |
327 | stroke: gray; | 362 | color: #99ff00; |
328 | stroke-width: 5; | 363 | } |
329 | stroke-linejoin: round; | ||
330 | fill: white; | ||
331 | fill-opacity: 0.3; | ||
332 | } | ||
333 | 364 | ||
334 | .pkcv-line { | 365 | .nature-hinder { |
335 | stroke: gray; | 366 | color: red; |
336 | stroke-width: 2; | 367 | } |
337 | } | 368 | } |
369 | } | ||
338 | 370 | ||
339 | .pkcv-data { | 371 | .pokemon-moves { |
340 | fill: #4ee100; | 372 | background-color: #ff847c; |
341 | fill-opacity: 0.9; | ||
342 | } | ||
343 | 373 | ||
344 | .pkcv-label, .pkcv-label-outline { | 374 | table { |
345 | font-family: "Power Green"; | 375 | padding-top: .75em; |
346 | font-size: 50px; | 376 | |
347 | text-anchor: middle; | 377 | tr:nth-child(even) { |
348 | } | 378 | background-color: #f7aca6; |
379 | |||
380 | .tb-only { | ||
381 | color: black; | ||
382 | } | ||
383 | } | ||
384 | |||
385 | tr:nth-child(odd) { | ||
386 | td { | ||
387 | padding-top: .25em; | ||
388 | color: white; | ||
389 | } | ||
390 | } | ||
391 | |||
392 | th { | ||
393 | padding: .25em 0.25em 0 .25em; | ||
394 | text-align: right; | ||
395 | } | ||
396 | |||
397 | td { | ||
398 | padding-right: .5em; | ||
399 | } | ||
400 | |||
401 | .pp-label { | ||
402 | display: block; | ||
403 | position: absolute; | ||
404 | padding-left: .125em; | ||
405 | } | ||
349 | 406 | ||
350 | .pkcv-label-outline { | 407 | .pp-value { |
351 | stroke: #f0f8f8; | 408 | display: block; |
352 | stroke-width: 6; | 409 | margin-left: 2em; |
353 | stroke-linejoin: butt; | 410 | text-align: right; |
411 | } | ||
354 | } | 412 | } |
355 | } | 413 | } |
356 | 414 | ||
415 | .pokemon-met-label { | ||
416 | background-color: #84ac88; | ||
417 | padding: .75em 0 0 .5em; | ||
418 | overflow: hidden; | ||
419 | color: white; | ||
420 | } | ||
421 | |||
422 | .pokemon-description { | ||
423 | background: linear-gradient( | ||
424 | to bottom, | ||
425 | #e4f0f0, | ||
426 | #e4f0f0 50%, | ||
427 | #e4e8d0 50%, | ||
428 | #e4e8d0 | ||
429 | ); | ||
430 | |||
431 | background-size: 100% 3em; | ||
432 | padding: 0 .5em; | ||
433 | height: 100%; | ||
434 | line-height: 1.5em; | ||
435 | border-top: 1px solid #888; | ||
436 | } | ||
437 | |||
357 | .pokemon-ribbons { | 438 | .pokemon-ribbons { |
358 | .pd-details { | 439 | background-color: #f8d8f8; |
359 | background-color: #ffc8c8; | ||
360 | } | ||
361 | 440 | ||
362 | ul { | 441 | ul { |
363 | display: flex; | 442 | display: flex; |
@@ -370,4 +449,66 @@ body { | |||
370 | } | 449 | } |
371 | } | 450 | } |
372 | } | 451 | } |
452 | |||
453 | .pokemon-contest { | ||
454 | background-color: #b9d7f2; | ||
455 | |||
456 | .pokemon-condition { | ||
457 | display: block; | ||
458 | |||
459 | .pkcv-cool-circle { | ||
460 | fill: #f59a55; | ||
461 | } | ||
462 | |||
463 | .pkcv-beauty-circle { | ||
464 | fill: #8095ff; | ||
465 | } | ||
466 | |||
467 | .pkcv-cute-circle { | ||
468 | fill: #f5a8d3; | ||
469 | } | ||
470 | |||
471 | .pkcv-smart-circle { | ||
472 | fill: #79e15c; | ||
473 | } | ||
474 | |||
475 | .pkcv-tough-circle { | ||
476 | fill: #f7f100; | ||
477 | } | ||
478 | |||
479 | .pkcv-outline { | ||
480 | stroke: gray; | ||
481 | stroke-width: 5; | ||
482 | stroke-linejoin: round; | ||
483 | fill: white; | ||
484 | fill-opacity: 0.3; | ||
485 | } | ||
486 | |||
487 | .pkcv-line { | ||
488 | stroke: gray; | ||
489 | stroke-width: 2; | ||
490 | } | ||
491 | |||
492 | .pkcv-data { | ||
493 | fill: #4ee100; | ||
494 | fill-opacity: 0.9; | ||
495 | } | ||
496 | |||
497 | .pkcv-label, .pkcv-label-outline { | ||
498 | font-family: "Power Green"; | ||
499 | font-size: 50px; | ||
500 | text-anchor: middle; | ||
501 | } | ||
502 | |||
503 | .pkcv-label-outline { | ||
504 | stroke: #f0f8f8; | ||
505 | stroke-width: 6; | ||
506 | stroke-linejoin: butt; | ||
507 | } | ||
508 | } | ||
509 | } | ||
510 | } | ||
511 | |||
512 | .clear { | ||
513 | clear: both; | ||
373 | } | 514 | } |