test screen orientations

src/components/Battleground.vue

@@ -1,16 +1,14 @@
 <template>
   <div class="battleground" v-if="battleground">
     <div class="battleground-background" :style="backgroundCss"/>
-    <div class="battleground-content">
-      <div id="objectives" class="objectives">
-        <div class="objectives-row" v-for="objectiveRow in battleground.objectives">
-          <template v-for="objective in objectiveRow">
-            <Objective :objective="objective"></Objective>
-          </template>
-        </div>
+    <div class="battleground-objectives">
+      <div class="battleground-objectives-row" v-for="objectiveRow in battleground.objectives">
+        <template v-for="objective in objectiveRow">
+          <Objective :objective="objective"></Objective>
+        </template>
       </div>
-      <router-link to="/battlegrounds">Back to selector</router-link>
     </div>
+    <router-link to="/battlegrounds">Back to selector</router-link>
   </div>
 </template>
 
@@ -18,7 +16,7 @@
   $border-style: 1px solid $blizzard-font-color
 
   .battleground
-    &-background, &-content
+    &-background, &-objectives
       height: 100vh
       width: 100vw
 
@@ -29,18 +27,18 @@
       filter: blur(2px) brightness(70%)
       z-index: -10
 
-  .objectives
-    display: flex
-    flex-direction: column
-    height: 100%
-
-    &-row
+    &-objectives
       display: flex
-      justify-content: space-between
-      flex-grow: 1
-      &:first-child
-        border-top: $border-style
-      border-bottom: $border-style
+      flex-direction: column
+
+      &-row
+        display: flex
+        justify-content: space-between
+        flex-grow: 1
+        &:first-child
+          border-top: $border-style
+        border-bottom: $border-style
+
   .objective
     &:first-child
       border-left: $border-style
@@ -76,6 +74,14 @@
         this.battlegroundId = to.params.battlegroundId
       }
     },
+    mounted: function () {
+      console.log('Mounted : lock landscape orientation')
+      screen.orientation.lock('landscape')
+    },
+    destroyed: function () {
+      console.log('Destroyed : unlock orientation')
+      screen.orientation.unlock()
+    },
     components: {
       Timer,
       Objective