From dc24b2fabfd2fc78a77e1fb50ae9c21cac4aabac Mon Sep 17 00:00:00 2001
From: JcLecha <jc.lechalier@gmail.com>
Date: Fri, 16 Jun 2017 20:06:35 +0200
Subject: [PATCH 1/6] style(navigation): add icons for previous/next button

---
 .../Sidebar/ElementProfileOptions.vue         | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/Sidebar/ElementProfileOptions.vue b/src/components/Sidebar/ElementProfileOptions.vue
index 60fd053..a61f8ee 100644
--- a/src/components/Sidebar/ElementProfileOptions.vue
+++ b/src/components/Sidebar/ElementProfileOptions.vue
@@ -1,9 +1,23 @@
 <template>
   <div class="c-element-profile-options">
-    <div class="btn-group w-100" role="group" aria-label="Navigation">
-      <router-link :to="'/element/' + previousElementId" tag="button" type="button" class="btn btn-primary w-100" :disabled="previousElementId === 0">{{ $t("sidebar.elementProfile.previous") }}</router-link>
-      <router-link :to="'/element/' + nextElementId" tag="button" type="button" class="btn btn-primary w-100" :disabled="nextElementId === numberOfElements + 1">{{ $t("sidebar.elementProfile.next") }}</router-link>
-    </div>
+  <div class="btn-group w-100" role="group" aria-label="Navigation">
+    <router-link
+      :to="'/element/' + previousElementId"
+      tag="button"
+      type="button"
+      class="btn btn-primary w-100"
+      :disabled="previousElementId === 0">
+      <i class="material-icons">chevron_left</i>
+    </router-link>
+    <router-link
+      :to="'/element/' + nextElementId"
+      tag="button"
+      type="button"
+      class="btn btn-primary w-100"
+      :disabled="nextElementId === numberOfElements + 1">
+        <i class="material-icons">chevron_right</i>
+    </router-link>
+  </div>
 
     <p class="text-muted mt-3">Debug</p>
     <mdc-switch v-model="debug"></mdc-switch>

From a099b9f5a6475b0cdd35e7cdf1220c8e1236f760 Mon Sep 17 00:00:00 2001
From: Jc LECHALIER <jc.lechalier@gmail.com>
Date: Wed, 28 Feb 2018 23:55:32 +0100
Subject: [PATCH 2/6] style(groups): add highlight on hover on lanthanoid or
 actinoid items

---
 src/components/PeriodicTable.vue | 46 +++++++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/src/components/PeriodicTable.vue b/src/components/PeriodicTable.vue
index 2570d80..e01bb94 100644
--- a/src/components/PeriodicTable.vue
+++ b/src/components/PeriodicTable.vue
@@ -1,23 +1,50 @@
 <template>
   <div class="c-periodic-table">
-    <element-general-properties v-show="Object.keys(selectedElement).length > 0" class="c-information" :element="selectedElement" :preview="true"></element-general-properties>
+    <element-general-properties
+      v-show="Object.keys(selectedElement).length > 0"
+      class="c-information"
+      :element="selectedElement"
+      :preview="true">
+    </element-general-properties>
 
     <div v-for="element in elements"
-         :data-element-group='element.elementGroup' :data-group='element.group' :data-period='element.period'
+         :data-element-group='element.elementGroup'
+         :data-group='element.group'
+         :data-period='element.period'
          class='element' :class="element.symbol && element.symbol.toLowerCase()"
          :style="{ opacity: filteredElements.includes(element.atomicNumber) ? 1 : 0.25 }">
-      <router-link :to="'/element/' + element.atomicNumber" @mouseover.native="showElement(element)" @mouseout.native="hideElement()">
-        <element-definition class="u-aspect-ratio" :element="element" :detailed="true"></element-definition>
+      <router-link
+        :to="'/element/' + element.atomicNumber"
+        @mouseover.native="showElement(element)"
+        @mouseout.native="hideElement()"
+        >
+          <element-definition class="u-aspect-ratio" :element="element" :detailed="true">
+          </element-definition>
       </router-link>
     </div>
 
-    <div class="element lanthanoid" data-element-group="lanthanoid" :style="{ opacity: filteredElementsContainElementsOfGroup('lanthanoid') ? 1 : 0.25 }"></div>
-    <div class="element actinoid" data-element-group="actinoid" :style="{ opacity: filteredElementsContainElementsOfGroup('actinoid') ? 1 : 0.25 }"></div>
+    <div
+      class="element lanthanoid"
+      data-element-group="lanthanoid"
+      :style="{ opacity: filteredElementsContainElementsOfGroup('lanthanoid') ? 1 : 0.25 }"
+      @mouseover="showGroup('lanthanoid')"
+      @mouseout="hideGroup('lanthanoid')"
+    >
+    </div>
+    <div
+      class="element actinoid"
+      data-element-group="actinoid"
+      :style="{ opacity: filteredElementsContainElementsOfGroup('actinoid') ? 1 : 0.25 }"
+      @mouseover="showGroup('actinoid')"
+      @mouseout="hideGroup('actinoid')"
+    >
+    </div>
   </div>
 </template>
 
 <script>
   import { mapGetters } from 'vuex'
+  import * as types from '@/store/mutation-types'
   import ElementBadge from './ElementBadge'
   import ElementDefinition from './ElementDefinition'
   import ElementGeneralProperties from './ElementProfile/ElementGeneralProperties'
@@ -43,6 +70,13 @@
       }
     },
     methods: {
+      showGroup (group) {
+        this.$store.commit(types.ADD_GROUP, group)
+        this.selectedElementId = null
+      },
+      hideGroup (group) {
+        setTimeout(() => this.$store.commit(types.REMOVE_GROUP, group), 125)
+      },
       showElement (element) {
         this.showInfo = true
         this.selectedElementId = element.atomicNumber

From 8ee36ef1f26094f7a00a11f0a865c24685a5322e Mon Sep 17 00:00:00 2001
From: Jc LECHALIER <jc.lechalier@gmail.com>
Date: Thu, 1 Mar 2018 19:14:43 +0100
Subject: [PATCH 3/6] feat(navigation): add keyboard navigation on element
 details page

---
 .../Sidebar/ElementProfileOptions.vue         | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/components/Sidebar/ElementProfileOptions.vue b/src/components/Sidebar/ElementProfileOptions.vue
index a61f8ee..a0c2f60 100644
--- a/src/components/Sidebar/ElementProfileOptions.vue
+++ b/src/components/Sidebar/ElementProfileOptions.vue
@@ -28,12 +28,37 @@
   import { mapState } from 'vuex'
   import * as types from '@/store/mutation-types'
   import MdcSwitch from '../shared/MaterialComponents/MdcSwitch'
+  import router from '../../router'
 
   export default {
     name: 'element-profile-options',
     components: {
       MdcSwitch
     },
+    methods: {
+      performRedirect: function (e) {
+        switch (e.keyCode) {
+          case 37: // left
+            if (this.previousElementId > 0) {
+              router.push('/element/' + this.previousElementId)
+            }
+            break
+          case 39: // right
+            if (this.nextElementId < this.numberOfElements + 1) {
+              router.push('/element/' + this.nextElementId)
+            }
+            break
+          default:
+          // nothing
+        }
+      }
+    },
+    created: function () {
+      document.addEventListener('keyup', this.performRedirect)
+    },
+    beforeDestroy: function () {
+      document.removeEventListener('keyup', this.performRedirect)
+    },
     computed: {
       ...mapState({
         numberOfElements: state => Object.keys(state.elements.default).length

From b3133bacf96ee3bba39123be1e001dcdde8a3b16 Mon Sep 17 00:00:00 2001
From: Jc LECHALIER <jc.lechalier@gmail.com>
Date: Sat, 3 Mar 2018 15:10:58 +0100
Subject: [PATCH 4/6] fix(game): disable redirect to element on game page

---
 src/components/GameMode.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/GameMode.vue b/src/components/GameMode.vue
index 5c0d773..85fd4ad 100644
--- a/src/components/GameMode.vue
+++ b/src/components/GameMode.vue
@@ -12,9 +12,9 @@
          :data-element-group='element.elementGroup' :data-group='element.group' :data-period='element.period'
          class='element' :class="element.symbol && element.symbol.toLowerCase()"
          :style="{ opacity: filteredElements.includes(element.atomicNumber) ? 1 : 0.25 }">
-      <router-link :to="'/element/' + element.atomicNumber">
+      <a :to="'/element/' + element.atomicNumber" disabled="disabled">
         <element-definition v-if="filteredElements.includes(element.atomicNumber)" class="u-aspect-ratio" :element="element" :detailed="true"></element-definition>
-      </router-link>
+      </a>
     </div>
 
     <div class="element lanthanoid" data-element-group="lanthanoid" :style="{ opacity: filteredElementsContainElementsOfGroup('lanthanoid') ? 1 : 0.25 }"></div>

From a52554b13a342793b2a8862bd4ab85442c375e4b Mon Sep 17 00:00:00 2001
From: Jc LECHALIER <jc.lechalier@gmail.com>
Date: Tue, 6 Mar 2018 22:28:03 +0100
Subject: [PATCH 5/6] style(element card): add some gradient to suggest scroll
 on element general property view

---
 src/assets/scss/components/periodic-table.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/assets/scss/components/periodic-table.scss b/src/assets/scss/components/periodic-table.scss
index 3517d41..6a80553 100644
--- a/src/assets/scss/components/periodic-table.scss
+++ b/src/assets/scss/components/periodic-table.scss
@@ -14,6 +14,14 @@ $grid-gutter: 0.25vw;
   }
 }
 
+.element-general-properties {
+  background:
+    linear-gradient($gray-light, $gray-light),
+    radial-gradient(farthest-side at 50% 100%, rgba(255, 255, 255 , .3), transparent) 0 100%;
+  background-repeat: no-repeat;
+  background-size: 100% 98%, 100% 4%;
+}
+
 .c-information {
   margin: $grid-gutter;
   overflow: auto;

From 53d34f8124d424bae3d1cfde81b876b90ce8fbfa Mon Sep 17 00:00:00 2001
From: Jc LECHALIER <jc.lechalier@gmail.com>
Date: Tue, 6 Mar 2018 22:29:51 +0100
Subject: [PATCH 6/6] style(grid): disable grid resize on general element view
 set or delete

---
 src/assets/scss/components/periodic-table.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/scss/components/periodic-table.scss b/src/assets/scss/components/periodic-table.scss
index 6a80553..b5e4990 100644
--- a/src/assets/scss/components/periodic-table.scss
+++ b/src/assets/scss/components/periodic-table.scss
@@ -25,7 +25,7 @@ $grid-gutter: 0.25vw;
 .c-information {
   margin: $grid-gutter;
   overflow: auto;
-  max-height: 14.1vw;
+  max-height: 13.5vw;
 
   @media (max-width: map-get($grid-breakpoints, lg)) {
     margin: $spacer / 2;