#31: Starting home screen

src/main/frontend/client/about-modal.vue

@@ -26,6 +26,7 @@
                         <li>
                             <div>"molecule" icon made by <a href="http://www.freepik.com" title="Freepik">Freepik</a>
                                 from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
+                            <div>Splash screen photo by Drew Hays on Unsplash</div>
                         </li>
                     </ul>
                 </div>

src/main/frontend/client/home.vue

@@ -0,0 +1,77 @@
+<template>
+    <div>
+
+        <div class="parallax hidden">
+            <h1 class="display-3 words-in-image">We Are Open Science</h1>
+        </div>
+
+        <v-layout row wrap justify-center class="home-text-section">
+            <v-flex xs8 lg6>
+                <h1>Advancing Drug Discovery Through Open Collaboration</h1>
+                <div class="pt-3">
+                    The SGC-UNC team of scientists is dedicated to discovering and openly sharing selective, small molecule
+                    inhibitors of protein kinases. Their work aims to expand drug discovery across this important class of
+                    disease-relevant proteins and help speed the creation of new medicines for patients.
+                </div>
+                <div class="pt-3">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum.
+                </div>
+            </v-flex>
+        </v-layout>
+
+        <v-layout row wrap justify-center grey lighten-3 class="home-text-section">
+            <v-flex xs8 lg6>
+                <h1>About This Tool</h1>
+                <div class="pt-3">
+                    Random Acts of Kinase allows you to...
+                </div>
+            </v-flex>
+        </v-layout>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+@Component
+export default class Home extends Vue {
+
+    created() {
+        setTimeout(() => {
+            document.getElementsByClassName('parallax')[0].classList.remove('hidden');
+        }, 100);
+    }
+}
+</script>
+
+<style lang="less">
+
+.home-text-section {
+    padding: 4rem 0;
+}
+
+.parallax {
+    padding-top: 2rem;
+    transition: opacity 6s;
+    background-image: url(/img/drew-hays-206414-unsplash.jpg);
+    min-height: 600px;
+
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    .words-in-image {
+        color: white;
+        margin: 3rem 0 0 3rem;
+    }
+
+    &.hidden {
+        opacity: 0;
+    }
+}
+</style>

src/main/frontend/client/index.ts

@@ -31,6 +31,7 @@ import VToolbar from 'vuetify/es5/components/VToolbar';
 import VTooltip from 'vuetify/es5/components/VTooltip';
 import transitions from 'vuetify/es5/components/transitions';
 
+import Home from './home.vue';
 import Search from './search.vue';
 import Compound from './compound.vue';
 import Admin from './admin/admin.vue';
@@ -70,6 +71,11 @@ window.onload = () => {
         {
             path: '/',
             name: 'home',
+            component: Home
+        },
+        {
+            path: '/search',
+            name: 'search',
             component: Search
         },
         {

src/main/frontend/client/lazy-dropdown.vue

@@ -7,6 +7,7 @@
             :placeholder="placeholder"
             :loading="loading"
             :prepend-icon="icon"
+            :clearable="true"
             autocomplete
             browser-autocomplete="off"
             :items="items"
@@ -128,7 +129,6 @@ export default class LazyDropdown extends Vue {
      * Fires an "input" event stating our value has changed.  Part of implementing v-model for this component.
      */
     fireUpdateEvent(newValue: any) {
-        console.log('Value updated to: ' + JSON.stringify(newValue));
         this.$emit('input', newValue);
     }
 

src/main/frontend/client/navbar-pill.vue

@@ -36,49 +36,48 @@ export default class NavbarPill extends Vue {
 </script>
 
 <style lang="less">
+@close-icon-color: gray;
+@transition-time: .5s;
 
-    @close-icon-color: gray;
-    @transition-time: .5s;
-
-    .navbar-pill-parent {
-        position: relative;
-        margin-right: 1rem;
-    }
+.navbar-pill-parent {
+    position: relative;
+    margin-right: 1rem;
+}
 
-    /* pill styles are essentially copied from ui inverted menu */
-    .navbar-pill {
+/* pill styles are essentially copied from ui inverted menu */
+.navbar-pill {
 
-        background: rgba(255, 255, 255, 0.08);
-        color: rgba(255,255,255,.9);
-        padding: 0.25rem 1rem;
-        border-radius: 1rem;
-        transition: color @transition-time ease,
-                    background-color @transition-time ease;
-        cursor: pointer;
+    background: rgba(255, 255, 255, 0.08);
+    color: rgba(255,255,255,.9);
+    padding: 0.25rem 1rem;
+    border-radius: 1rem;
+    transition: color @transition-time ease,
+                background-color @transition-time ease;
+    cursor: pointer;
 
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
 
-        &:hover, &.active {
-            background: rgba(255, 255, 255, 0.15);
-            color: #fff;
+    &:hover, &.active {
+        background: rgba(255, 255, 255, 0.15);
+        color: #fff;
 
-            .close-icon {
-                color: lighten(@close-icon-color, 25%);
-            }
+        .close-icon {
+            color: lighten(@close-icon-color, 25%);
         }
+    }
 
-        .close-icon {
-            color: @close-icon-color;
-            font-size: 1.3rem;
-            position: absolute;
-            top: -6px;
-            right: 0;
-            transition: color @transition-time ease;
-            &:hover {
-                color: white;
-            }
+    .close-icon {
+        color: @close-icon-color;
+        font-size: 1.3rem;
+        position: absolute;
+        top: -6px;
+        right: 0;
+        transition: color @transition-time ease;
+        &:hover {
+            color: white;
         }
     }
+}
 </style>

src/main/frontend/client/navbar.vue

@@ -2,16 +2,16 @@
 
     <v-toolbar app dark>
 
-        <v-toolbar-title @click="onReset()" class="toolbar-title-fix">
-            <img src="/img/molecule-white.svg" width="50" height="50"> <!--KIANSE-->
+        <v-toolbar-title class="toolbar-title-fix" @click="setActiveTab('home')">
+            <img src="/img/molecule-white.svg" width="50" height="50" class="navbar-image"> <!--KIANSE-->
         </v-toolbar-title>
 
         <v-toolbar-items>
-            <v-btn flat v-bind:class="{ active: isActiveTab('/') }" @click="setActiveTab('home')">
+            <v-btn flat v-bind:class="{ 'active-toolbar-item': isActiveTab('/search') }" @click="setActiveTab('search')">
                 Search
             </v-btn>
 
-            <v-btn flat v-bind:class="{ active: isActiveTab('/admin') }"
+            <v-btn flat v-bind:class="{ 'active-toolbar-item': isActiveTab('/admin') }"
                    @click="setActiveTab('admin')" v-if="$store.getters.loggedIn">
                 Admin
             </v-btn>
@@ -71,18 +71,7 @@ export default class Navbar extends Vue {
     }
 
     private setActiveTab(tabName: string) {
-
-        switch (tabName) {
-
-            case 'home':
-            default:
-                this.$router.push({ name: 'home' });
-                break;
-
-            case 'admin':
-                this.$router.push({ name: 'admin' });
-                break;
-        }
+        this.$router.push({ name: tabName });
     }
 
     private close($event: string) {
@@ -129,8 +118,20 @@ export default class Navbar extends Vue {
 <style lang="less">
 .toolbar-title-fix {
     margin-right: 16px;
+    cursor: pointer;
 }
+
+.navbar-image {
+    vertical-align: middle;
+}
+
+.active-toolbar-item {
+    background: rgba(255, 255, 255, 0.15) !important;
+    color: #fff;
+}
+
 .button-section {
+    margin-left: 1rem;
     display: flex;
 }
 </style>

src/main/frontend/client/search-filters.vue

@@ -22,7 +22,7 @@
                 </v-flex>
 
                 <v-flex sm4>
-                    <v-text-field type="number" placeholder="Remaining activity %" class="search-field right-aligned"
+                    <v-text-field type="number" label="Remaining activity %" class="search-field right-aligned"
                                   :rules="numericValidationRules" v-model="filters.activity"
                                   step="0.1" min="0.1" max="100"></v-text-field>
                 </v-flex>
@@ -73,7 +73,7 @@ export default class SearchFilters extends Vue {
             const discoverx: string = kinase.discoverxGeneSymbol;
             return { discoverxGeneSymbol: discoverx, responseValueField: discoverx };
         });
-        choices.unshift({ discoverxGeneSymbol: '', responseValueField: null });
+        //choices.unshift({ discoverxGeneSymbol: '', responseValueField: '' });
         return choices;
     }
 }