diff options
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/pokeviewer/application.js | 1 | ||||
-rw-r--r-- | app/assets/javascripts/pokeviewer/pokemon.js | 2 | ||||
-rw-r--r-- | app/assets/javascripts/pokeviewer/pokemon.js.coffee | 7 | ||||
-rw-r--r-- | app/assets/stylesheets/pokeviewer/pokemon.css.scss | 132 |
4 files changed, 137 insertions, 5 deletions
diff --git a/app/assets/javascripts/pokeviewer/application.js b/app/assets/javascripts/pokeviewer/application.js index e54c646..52d2214 100644 --- a/app/assets/javascripts/pokeviewer/application.js +++ b/app/assets/javascripts/pokeviewer/application.js | |||
@@ -10,4 +10,5 @@ | |||
10 | // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details | 10 | // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details |
11 | // about supported directives. | 11 | // about supported directives. |
12 | // | 12 | // |
13 | //= require jquery3 | ||
13 | //= require_tree . | 14 | //= require_tree . |
diff --git a/app/assets/javascripts/pokeviewer/pokemon.js b/app/assets/javascripts/pokeviewer/pokemon.js deleted file mode 100644 index dee720f..0000000 --- a/app/assets/javascripts/pokeviewer/pokemon.js +++ /dev/null | |||
@@ -1,2 +0,0 @@ | |||
1 | // Place all the behaviors and hooks related to the matching controller here. | ||
2 | // All this logic will automatically be available in application.js. | ||
diff --git a/app/assets/javascripts/pokeviewer/pokemon.js.coffee b/app/assets/javascripts/pokeviewer/pokemon.js.coffee new file mode 100644 index 0000000..f82f196 --- /dev/null +++ b/app/assets/javascripts/pokeviewer/pokemon.js.coffee | |||
@@ -0,0 +1,7 @@ | |||
1 | $ -> | ||
2 | $(".pc-pokemon").mouseover -> | ||
3 | $(this).children(".pc-data").show() | ||
4 | $(".pc-pokemon").mouseout -> | ||
5 | $(this).children(".pc-data").hide() | ||
6 | $(".pc-pokemon").mousemove (event) -> | ||
7 | $(this).children(".pc-data").offset({left: event.pageX + 16, top: event.pageY - 16}) | ||
diff --git a/app/assets/stylesheets/pokeviewer/pokemon.css.scss b/app/assets/stylesheets/pokeviewer/pokemon.css.scss index 1f4c068..6dbb6c8 100644 --- a/app/assets/stylesheets/pokeviewer/pokemon.css.scss +++ b/app/assets/stylesheets/pokeviewer/pokemon.css.scss | |||
@@ -3,6 +3,132 @@ | |||
3 | They will automatically be included in application.css. | 3 | They will automatically be included in application.css. |
4 | */ | 4 | */ |
5 | 5 | ||
6 | .trainer { | ||
7 | margin: 1em; | ||
8 | font-family: 'Power Green'; | ||
9 | width: 758px; | ||
10 | box-sizing: border-box; | ||
11 | background-color: #f7f7f7; | ||
12 | border: 1px solid #999; | ||
13 | -webkit-border-top-left-radius: 6px; | ||
14 | -webkit-border-top-right-radius: 6px; | ||
15 | -moz-border-radius-topleft: 6px; | ||
16 | -moz-border-radius-topright: 6px; | ||
17 | border-top-left-radius: 6px; | ||
18 | border-top-right-radius: 6px; | ||
19 | |||
20 | .trainer-info { | ||
21 | padding: .5em .75em .25em .75em; | ||
22 | -webkit-border-top-left-radius: 6px; | ||
23 | -webkit-border-top-right-radius: 6px; | ||
24 | -moz-border-radius-topleft: 6px; | ||
25 | -moz-border-radius-topright: 6px; | ||
26 | border-top-left-radius: 6px; | ||
27 | border-top-right-radius: 6px; | ||
28 | border-bottom: 1px solid #888; | ||
29 | |||
30 | &.ruby { | ||
31 | background-color: #D67873; | ||
32 | } | ||
33 | |||
34 | &.sapphire { | ||
35 | background-color: #445E9C; | ||
36 | } | ||
37 | |||
38 | &.firered { | ||
39 | background-color: #F5AC78; | ||
40 | } | ||
41 | |||
42 | &.leafgreen { | ||
43 | background-color: #A7DB8D; | ||
44 | } | ||
45 | |||
46 | &.emerald { | ||
47 | background-color: #4E8234; | ||
48 | } | ||
49 | |||
50 | h2 { | ||
51 | margin: 0; | ||
52 | display: inline-block; | ||
53 | font-size: 24px; | ||
54 | } | ||
55 | |||
56 | .tid { | ||
57 | display: inline-block; | ||
58 | font-size: 13px; | ||
59 | } | ||
60 | } | ||
61 | |||
62 | .pc-boxes { | ||
63 | display: flex; | ||
64 | flex-wrap: wrap; | ||
65 | |||
66 | .party { | ||
67 | margin: 0; | ||
68 | |||
69 | li { | ||
70 | display: block; | ||
71 | margin: -5px 0; | ||
72 | |||
73 | .party-icon { | ||
74 | display: inline-block; | ||
75 | vertical-align: middle; | ||
76 | } | ||
77 | |||
78 | .party-name { | ||
79 | vertical-align: sub; | ||
80 | display: inline-block; | ||
81 | margin-left: .25em; | ||
82 | } | ||
83 | |||
84 | a { | ||
85 | color: black; | ||
86 | text-decoration: none; | ||
87 | |||
88 | &:hover { | ||
89 | text-decoration: underline; | ||
90 | } | ||
91 | } | ||
92 | } | ||
93 | } | ||
94 | |||
95 | .pc-box { | ||
96 | margin: .5em; | ||
97 | padding: .5em; | ||
98 | border: 1px solid #ccc; | ||
99 | border-radius: 4px; | ||
100 | width: 236px; | ||
101 | box-sizing: border-box; | ||
102 | |||
103 | h3 { | ||
104 | margin: 0; | ||
105 | text-align: center; | ||
106 | } | ||
107 | |||
108 | .pc-contents { | ||
109 | margin: 0; | ||
110 | |||
111 | .pc-pokemon { | ||
112 | .pc-data { | ||
113 | display: none; | ||
114 | background-color: #111; | ||
115 | color: #fff; | ||
116 | z-index: 1; | ||
117 | padding: .5em; | ||
118 | box-shadow: 0px 0px 2px 1px #B3B3B3; | ||
119 | border-radius: 4px; | ||
120 | position: absolute; | ||
121 | |||
122 | .pc-data-name { | ||
123 | font-weight: bold; | ||
124 | } | ||
125 | } | ||
126 | } | ||
127 | } | ||
128 | } | ||
129 | } | ||
130 | } | ||
131 | |||
6 | .pokemon { | 132 | .pokemon { |
7 | font-family: 'Power Green'; | 133 | font-family: 'Power Green'; |
8 | display: flex; | 134 | display: flex; |
@@ -15,19 +141,19 @@ | |||
15 | .female { | 141 | .female { |
16 | color: red; | 142 | color: red; |
17 | } | 143 | } |
18 | 144 | ||
19 | .pokemon-name { | 145 | .pokemon-name { |
20 | font-weight: bold; | 146 | font-weight: bold; |
21 | } | 147 | } |
22 | 148 | ||
23 | .pokemon-ivs { | 149 | .pokemon-ivs { |
24 | margin: 0 1em; | 150 | margin: 0 1em; |
25 | 151 | ||
26 | th { | 152 | th { |
27 | text-align: center; | 153 | text-align: center; |
28 | padding-right: .5em; | 154 | padding-right: .5em; |
29 | } | 155 | } |
30 | 156 | ||
31 | td { | 157 | td { |
32 | text-align: right; | 158 | text-align: right; |
33 | } | 159 | } |