about summary refs log tree commit diff stats
path: root/app/assets
diff options
context:
space:
mode:
authorKelly Rauchenberger <fefferburbia@gmail.com>2017-10-13 10:01:44 -0400
committerKelly Rauchenberger <fefferburbia@gmail.com>2017-10-13 10:01:44 -0400
commit44a0c2e75ef577e6e847cbeb940ea936904c9d72 (patch)
tree2682fe4e131f567c2ff7e2c6f229a3fe9e6d0e6c /app/assets
parent5eab020d3db17c08050e751c155f266dd0a87c4d (diff)
downloadpokeviewer-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.gifbin0 -> 905 bytes
-rw-r--r--app/assets/stylesheets/pokeviewer/pokemon.css.scss393
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
6body {
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}