Print styles

_assets/js/app.js

@@ -32,11 +32,11 @@ function initApp (data, callback, callbackData) {
   var mapData = data.results[1].result.response;
 
   console.log('data', JSON.parse( JSON.stringify(data)) );
-
   enhanceMap(mapData.enemySlots);
   enhanceMap(mapData.ourSlots);
 
   app.map = mapData;
+  app.map.warDate = data.date;
 
   console.log('app.map', JSON.parse( JSON.stringify(mapData)) );
 
@@ -60,10 +60,8 @@ function initApp (data, callback, callbackData) {
 var app = new Vue({
   el : '#app',
   data : {
-    // the data obtained from the game
+    map: {}, //mapData,  the data obtained from the game
-    map: {}, //mapData,
+    mapSlots: mapSlots, // maps building names and types of data obtained from the game
-    // maps building names and types of data obtained from the game
-    mapSlots: mapSlots,
     storage: JSON.parse( localStorage.getItem('HeroWarsHistory') ) || []
   },
   computed: {

_assets/sass/base/_print.scss

@@ -0,0 +1,20 @@
+@media print {
+  @page {
+    margin: 0;
+  }
+
+  body {
+    padding: 0;
+  }
+
+  header,
+  [type="checkbox"] {
+    display: none;
+  }
+
+  .war .team__details {
+    margin-left: 0;
+    color: black;
+    font-weight: 400;
+  }
+}

_assets/sass/main.scss

@@ -21,5 +21,8 @@
   "modules/buttons",
   "modules/war",
   "modules/hamburger",
-  "modules/header"
+  "modules/header",
+
+  // Print
+  "base/print"
 ;

_assets/sass/modules/_header.scss

@@ -9,6 +9,8 @@ header {
   top: 0;
   left: 0;
   width: 100%;
+  background: $white;
+  z-index: 1000;
 
   .form {
     display: flex;

_assets/sass/modules/_war.scss

@@ -1,18 +1,22 @@
 .war {
+  h1 {
+    date {
+      display: block;
+      font-size: 16px;
+      color: $gray;
+    }
+  }
   .row {
     justify-content: center;
   }
 
-  h4 {
-    margin-left: 8px;
-  }
-
   .team {
     display: flex;
     align-items: center;
-    color: #666;
+    color: $gray;
     line-height: 1.2;
     padding: 2px 8px;
+    margin: 0 -8px;
 
     &.is--hover {
       outline: 2px solid gold;
@@ -44,7 +48,7 @@
     border-radius: 50%;
     vertical-align: middle;
     margin: 1px;
-    border: 1px solid grey;
+    border: 1px solid $gray;
     display: none;
   }
 

_assets/sass/variables/_colors.scss

@@ -1,2 +1,4 @@
 $black: #000;
 $white: #fff;
+
+$gray: #666;

_layouts/war-planner.html

@@ -14,7 +14,10 @@ layout: default
   </nav>
 
   <section v-if="orderedAllies.length">
-    <h1 v-if="orderedAllies.length">{{ map.ourSlots[1].user.clanTitle }} VS. {{ map.enemyClan.title }}</h1>
+    <h1 v-if="orderedAllies.length">
+      {{ map.ourSlots[1].user.clanTitle }} VS. {{ map.enemyClan.title }}
+      <date>{{ map.warDate | unixToLocale }}</date>
+    </h1>
 
     <div class="row">
       <div class="col col-3">

_site/index.html

@@ -59,7 +59,10 @@
   </nav>
 
   <section v-if="orderedAllies.length">
-    <h1 v-if="orderedAllies.length">{{ map.ourSlots[1].user.clanTitle }} VS. {{ map.enemyClan.title }}</h1>
+    <h1 v-if="orderedAllies.length">
+      {{ map.ourSlots[1].user.clanTitle }} VS. {{ map.enemyClan.title }}
+      <date>{{ map.warDate | unixToLocale }}</date>
+    </h1>
 
     <div class="row">
       <div class="col col-3">