Increase size of iv display in gym details

RocketMap · Mar 12, 2018 · 15460be · 15460be
1 parent 0b1d225
commit 15460be
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 22 deletions.
diff --git a/static/js/map.js b/static/js/map.js
@@ -2347,27 +2347,19 @@ function getSidebarGymMember(pokemon) {
                             <div class="ivs">
                                 <div class="iv">
                                     <div class="type">ATK</div>
-                                    <div class="value">
-                                        ${pokemon.iv_attack}
-                                    </div>
+                                    <div class="value">${pokemon.iv_attack}</div>
                                 </div>
                                 <div class="iv">
                                     <div class="type">DEF</div>
-                                    <div class="value">
-                                        ${pokemon.iv_defense}
-                                    </div>
+                                    <div class="value">${pokemon.iv_defense}</div>
                                 </div>
                                 <div class="iv">
                                     <div class="type">STA</div>
-                                    <div class="value">
-                                        ${pokemon.iv_stamina}
-                                    </div>
+                                    <div class="value">${pokemon.iv_stamina}</div>
                                 </div>
-                                <div class="iv" style="width: 36px;"">
+                                <div class="iv" style="width:3em;"">
                                     <div class="type">PERFECT</div>
-                                    <div class="value">
-                                        ${perfectPercent.toFixed(0)}<span style="font-size: .6em;">%</span>
-                                    </div>
+                                    <div class="value">${perfectPercent.toFixed(0)}<span style="font-size:.7em">%</span></div>
                                 </div>
                             </div>
                         </td>

diff --git a/static/sass/layout/_gym-details.scss b/static/sass/layout/_gym-details.scss
@@ -112,31 +112,40 @@
     }
 
     .ivs {
+      @media screen and (max-width: 480px) {
+        font-size: 14px !important;
+      }
+
       color: rgb(93,109,126);
       float: left;
       min-width: 110px;
+      font-size: 16px;
 
       .iv {
         text-align: center;
-        width: 20px;
+        width: 1.3em;
         display: inline-block;
       }
 
       .type {
-        font-size: .5em;
+        font-size: .65em;
         line-height: 1em;
       }
 
       .value {
-        font-size: .75em;
-        font-weight: bold;
+        font-size: .8em;
+        font-weight: 700;
       }
     }
 
     .moves {
-      line-height: 1em;
+      @media screen and (max-width: 400px) {
+        font-size: .6em;
+      }
+
+      line-height: 1.65em;
       color: rgb(93,109,126);
-      font-size: .6em;
+      font-size: .75em;
 
       .move-bar-sprite {
         margin-bottom: 7px;
@@ -154,7 +163,7 @@
         }
 
         .type {
-          margin-top: 2px;
+          margin-bottom: 2px;
           font-size: 8px;
           display: inline-block;
           text-transform: uppercase;
@@ -163,6 +172,7 @@
           color: white;
           font-weight: 300;
           line-height: 1em;
+          vertical-align: middle;
 
           &.fairy {
               background-color: #e898e8;
@@ -258,11 +268,10 @@
         @media screen and (max-width: 480px) {
           margin-right: 2px !important;
         }
-        @media screen and (max-width: 360px) {
+        @media screen and (max-width: 400px) {
           display: none;
         }
         float: right;
-        margin-top: 5px;
       }
     }