Print fixes

_assets/js/utils.js

@@ -70,9 +70,9 @@ function orderByPower(teamSlots) {
 function determineBestTeam(guild) {
   $.each($('body').find('.js-'+ guild +'-hero'), function () {
     var $t = $(this);
-    var name = $t.attr('data-name');
+    var id = $t.attr('data-id');
     var heroPower = parseInt( $t.attr('data-power') );
-    var $titanTeam = $('.js-'+ guild +'-titan[data-name="'+ name +'"]');
+    var $titanTeam = $('.js-'+ guild +'-titan[data-id="'+ id +'"]');
     var titanPower = parseInt( $titanTeam.attr('data-power') );
     var className = 'best-team';
 
@@ -94,9 +94,9 @@ function syncCheckboxes() {
   $('input[type="checkbox"]').on('change', function() {
     var $t = $(this),
         checkName = $t.attr('name'),
-        playerName = $t.parent().attr('data-name');
+        playerID = $t.parent().attr('data-id');
 
-    $('[data-name="'+ playerName +'"]')
+    $('[data-id="'+ playerID +'"]')
       .find('input[name="'+ checkName +'"]')
       .prop('checked', $t.is(':checked'));
   });
@@ -111,13 +111,13 @@ function highlightHovered() {
   $('.team').on({
     'mouseenter': function () {
       var $t = $(this),
-          name = $t.attr('data-name');
+          id = $t.attr('data-id');
-      $('.team[data-name="'+ name +'"]').addClass('is--hover');
+      $('.team[data-id="'+ id +'"]').addClass('is--hover');
     },
     'mouseleave': function () {
       var $t = $(this),
-          name = $t.attr('data-name');
+          id = $t.attr('data-id');
-      $('.team[data-name="'+ name +'"]').removeClass('is--hover');
+      $('.team[data-id="'+ id +'"]').removeClass('is--hover');
     }
   })
 }

_assets/sass/base/_base.scss

@@ -45,3 +45,7 @@ h3 {
   font-size: 16px;
   font-weight: 600;
 }
+
+.align-right {
+  text-align: right;
+}

_assets/sass/base/_print.scss

@@ -17,4 +17,8 @@
     color: black;
     font-weight: 400;
   }
+
+  .war .team.is--hover {
+    outline: 0;
+  }
 }

_includes/head.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0">
 
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="{{ "assets/sass/main.css" | relative_url }}">
+    <link rel="stylesheet" href="{{ "assets/sass/main.css" | relative_url }}?{{ site.time | date: '%s' }}">
 </head>
 
 <!-- / _includes/partials/head.html -->

_includes/scripts.html

@@ -1,7 +1,7 @@
 <!-- _includes/partials/scripts.html -->
 
 {% if site.is_production %}
-  <script src="{{ "/assets/js/main.min.js" | relative_url }}"></script>
+  <script src="{{ "/assets/js/main.min.js" | relative_url }}?{{ site.time | date: '%s' }}"></script>
 {% else %}
   <script src="{{ "/assets/js/lib/vue.min.js" | relative_url }}"></script>
   <script src="{{ "/assets/js/lib/jquery-3.4.1.min.js" | relative_url }}"></script>

_layouts/war-planner.html

@@ -21,8 +21,8 @@ layout: default
 
     <div class="row">
       <div class="col col-3">
-        <h4>HEROES - Allies</h4>
+        <h4>Allied HEROES</h4>
-        <div class="team team--hero ally-team js-ally-hero" :data-name="ally.user.name" :data-power="ally.power"
+        <div class="team team--hero ally-team js-ally-hero" :data-id="ally.user.id" :data-power="ally.power"
           v-if="ally.location.type == 'Hero' && ally.user.name != 'Empty'" v-for="ally in orderedAllies">
           <input name="attack_first" type="checkbox" />
           <input name="attack_second" type="checkbox" />
@@ -36,8 +36,8 @@ layout: default
       </div>
 
       <div class="col col-3">
-        <h4>HEROES - Enemies</h4>
+        <h4>Enemy HEROES</h4>
-        <label class="team team--hero enemy-team js-enemy-hero" :data-name="enemy.user.name" :data-power="enemy.power"
+        <label class="team team--hero enemy-team js-enemy-hero" :data-id="enemy.user.id" :data-power="enemy.power"
           v-if="enemy.location.type == 'Hero' && enemy.user.name != 'Empty'" v-for="enemy in orderedEnemies">
           <input type="checkbox" />
           <img v-if="character.type != 'pet'" v-for="character in enemy.team[0]" :src="'assets/img/Heroes/00'+ character.id + '.png'" />
@@ -50,8 +50,8 @@ layout: default
       </div>
 
       <div class="col col-3">
-        <h4>Titans - Allies</h4>
+        <h4>Allied Titans</h4>
-        <div class="team team--titan ally-team js-ally-titan" :data-name="ally.user.name" :data-power="ally.power"
+        <div class="team team--titan ally-team js-ally-titan" :data-id="ally.user.id" :data-power="ally.power"
           v-if="ally.location.type == 'Titan' && ally.user.name != 'Empty'" v-for="ally in orderedAllies">
           <input name="attack_first" type="checkbox" />
           <input name="attack_second" type="checkbox" />
@@ -64,8 +64,8 @@ layout: default
       </div>
 
       <div class="col col-3">
-        <h4>Titans - Enemies</h4>
+        <h4>Enemy Titans</h4>
-        <label class="team team--titan enemy-team js-enemy-titan" :data-name="enemy.user.name" :data-power="enemy.power"
+        <label class="team team--titan enemy-team js-enemy-titan" :data-id="enemy.user.id" :data-power="enemy.power"
           v-if="enemy.location.type == 'Titan' && enemy.user.name != 'Empty'" v-for="enemy in orderedEnemies">
           <input type="checkbox" />
           <img v-for="character in enemy.team[0]" :src="'assets/img/Titans/'+ character.id + '.png'" />
@@ -78,13 +78,13 @@ layout: default
     </div>
 
     <div class="row">
-      <div class="col col-3">
+      <div class="col col-6 align-right">
-        <h4>Allies Stats</h4>
+        <h4>Allied Stats</h4>
         Allies Hero Power: <strong>{{ getAllyPower.heroPower | formatNumber }}</strong> <br />
         Allies Titan Power: <strong>{{ getAllyPower.titanPower | formatNumber }}</strong> <br />
         Allies Total Power: <strong>{{ getAllyPower.totalPower | formatNumber }}</strong> <br />
       </div>
-      <div class="col col-3">
+      <div class="col col-6">
         <h4>Enemy Stats</h4>
         Enemy Hero Power: <strong>{{ getEnemyPower.heroPower | formatNumber }}</strong> <br />
         Enemy Titan Power: <strong>{{ getEnemyPower.titanPower | formatNumber }}</strong> <br />

_site/index.html

@@ -11,7 +11,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0">
 
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/hero-wars-planner/assets/sass/main.css">
+    <link rel="stylesheet" href="/hero-wars-planner/assets/sass/main.css?1575154750">
 </head>
 
 <!-- / _includes/partials/head.html -->
@@ -66,8 +66,8 @@
 
     <div class="row">
       <div class="col col-3">
-        <h4>HEROES - Allies</h4>
+        <h4>Allied HEROES</h4>
-        <div class="team team--hero ally-team js-ally-hero" :data-name="ally.user.name" :data-power="ally.power"
+        <div class="team team--hero ally-team js-ally-hero" :data-id="ally.user.id" :data-power="ally.power"
           v-if="ally.location.type == 'Hero' && ally.user.name != 'Empty'" v-for="ally in orderedAllies">
           <input name="attack_first" type="checkbox" />
           <input name="attack_second" type="checkbox" />
@@ -81,8 +81,8 @@
       </div>
 
       <div class="col col-3">
-        <h4>HEROES - Enemies</h4>
+        <h4>Enemy HEROES</h4>
-        <label class="team team--hero enemy-team js-enemy-hero" :data-name="enemy.user.name" :data-power="enemy.power"
+        <label class="team team--hero enemy-team js-enemy-hero" :data-id="enemy.user.id" :data-power="enemy.power"
           v-if="enemy.location.type == 'Hero' && enemy.user.name != 'Empty'" v-for="enemy in orderedEnemies">
           <input type="checkbox" />
           <img v-if="character.type != 'pet'" v-for="character in enemy.team[0]" :src="'assets/img/Heroes/00'+ character.id + '.png'" />
@@ -95,8 +95,8 @@
       </div>
 
       <div class="col col-3">
-        <h4>Titans - Allies</h4>
+        <h4>Allied Titans</h4>
-        <div class="team team--titan ally-team js-ally-titan" :data-name="ally.user.name" :data-power="ally.power"
+        <div class="team team--titan ally-team js-ally-titan" :data-id="ally.user.id" :data-power="ally.power"
           v-if="ally.location.type == 'Titan' && ally.user.name != 'Empty'" v-for="ally in orderedAllies">
           <input name="attack_first" type="checkbox" />
           <input name="attack_second" type="checkbox" />
@@ -109,8 +109,8 @@
       </div>
 
       <div class="col col-3">
-        <h4>Titans - Enemies</h4>
+        <h4>Enemy Titans</h4>
-        <label class="team team--titan enemy-team js-enemy-titan" :data-name="enemy.user.name" :data-power="enemy.power"
+        <label class="team team--titan enemy-team js-enemy-titan" :data-id="enemy.user.id" :data-power="enemy.power"
           v-if="enemy.location.type == 'Titan' && enemy.user.name != 'Empty'" v-for="enemy in orderedEnemies">
           <input type="checkbox" />
           <img v-for="character in enemy.team[0]" :src="'assets/img/Titans/'+ character.id + '.png'" />
@@ -123,13 +123,13 @@
     </div>
 
     <div class="row">
-      <div class="col col-3">
+      <div class="col col-6 align-right">
-        <h4>Allies Stats</h4>
+        <h4>Allied Stats</h4>
         Allies Hero Power: <strong>{{ getAllyPower.heroPower | formatNumber }}</strong> <br />
         Allies Titan Power: <strong>{{ getAllyPower.titanPower | formatNumber }}</strong> <br />
         Allies Total Power: <strong>{{ getAllyPower.totalPower | formatNumber }}</strong> <br />
       </div>
-      <div class="col col-3">
+      <div class="col col-6">
         <h4>Enemy Stats</h4>
         Enemy Hero Power: <strong>{{ getEnemyPower.heroPower | formatNumber }}</strong> <br />
         Enemy Titan Power: <strong>{{ getEnemyPower.titanPower | formatNumber }}</strong> <br />
@@ -153,7 +153,7 @@
         <!-- _includes/partials/scripts.html -->
 
 
-  <script src="/hero-wars-planner/assets/js/main.min.js"></script>
+  <script src="/hero-wars-planner/assets/js/main.min.js?1575154750"></script>
 
 
 <!-- / _includes/partials/scripts.html -->