Feature/jc main

src/assets/scss/components/periodic-table.scss

@@ -14,10 +14,18 @@ $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;
-  max-height: 14.1vw;
+  max-height: 13.5vw;
 
   @media (max-width: map-get($grid-breakpoints, lg)) {
     margin: $spacer / 2;

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>

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

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>
@@ -14,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