#362 countdown page and drawer fix

app/src/App.vue

@@ -12,6 +12,9 @@ export default {
     Snackbar
   },
   async created () {
+    if (this.$store.getters.countDownDate - new Date().getTime() > 0) {
+      return this.$router.push('/countdown')
+    }
     await this.$store.dispatch('auth/tryLogin')
   }
 }

app/src/assets/css/modules/_pages.scss

@@ -533,16 +533,54 @@
 
 .countdown-page {
     & > .section_banner {
-        width: 100vw;
         height: 100vh;
     }
 
+    .header-logo {
+        @include respond(tab-land){
+            width: 21rem;
+        }
+    }
+
+    .form__input--adjust{
+        border: 0.15rem solid rgba($primary-white, .5);;
+    }
+
+    .visualize_header-h1 {
+        @include respond(phone){
+            font-size: 3.8rem;
+            font-weight: 400;
+            margin: 1rem 0 0rem 0;
+        }
+    }
+
+    button.submit_button {
+        @include respond(laptop){
+            padding: 1.6rem 3.5rem !important;
+            margin-left: -1rem !important;
+        }
+        @include respond(tab-land){
+            padding: 1.85rem 3.5rem !important;
+            margin-left: -1rem !important;
+        }
+        @include respond(tab-port){
+            padding: 1.86rem 3.5rem !important;
+        }
+        @include respond(phone){
+            padding: 1.65rem 3.5rem !important;
+        }
+    }
+
     .clock__box{
         background-color: rgba(0, 0, 0, 0.3);
         padding: 12px 16px;
         width: 12rem;
         max-width: 23%;
         border-bottom: .3rem solid #d7df71;
+
+        @include respond(phone){
+            padding: 4px 12px;
+        }
     }
 
         .p{

app/src/assets/css/modules/_utility.scss

@@ -146,6 +146,12 @@
         &-width {
             width: 99% !important;
         }
+        &-flex{
+            display: flex;
+            &-column{
+                flex-direction: column;
+            }
+        }
         &-flex-justify-se {
             justify-content: space-evenly;
         }

app/src/components/Drawer.vue

@@ -1,7 +1,12 @@
 <template>
-  <div>
-    <md-toolbar class="md-transparent" md-elevation="0">Welcome {{ name }}</md-toolbar>
+  <div class="md-app-internal-drawer u--layout-flex u--layout-flex-column u--layout-flex-justify-sb">
     <md-list md-expand-single=true class="utility-transparentbg">
+      <md-toolbar class="md-transparent u--font-emph-l u_toggle-display-off" md-elevation="0"><small>App Navigation</small></md-toolbar>
+      <div class="visualize-pagination-width-mod footer_content-mobile u_margin-none">
+        <md-toolbar class="md-transparent u--font-emph-l" md-elevation="0"><small>Welcome {{ name }}</small></md-toolbar>
+      </div>
+      <md-divider></md-divider>
+
       <md-list-item md-expand>
         <md-icon class="utility-navfonticon">home</md-icon>
         <span class="md-list-item-text utility-navfont">Home</span>
@@ -32,6 +37,10 @@
           </router-link>
         </md-list>
       </md-list-item>
+
+      <md-toolbar class="md-transparent u--font-emph-l u_margin-top-small" md-elevation="0"><small>Explore</small></md-toolbar>
+      <md-divider></md-divider>
+
       <md-list-item md-expand>
         <md-icon class="utility-navfonticon">view_comfy</md-icon>
         <span class="md-list-item-text utility-navfont">Visualize</span>
@@ -47,30 +56,6 @@
           </router-link>
         </md-list>
       </md-list-item>
-      <md-list-item md-expand v-if="isAuth">
-        <md-icon class="utility-navfonticon">upload</md-icon>
-        <span class="md-list-item-text utility-navfont">Curate</span>
-        <md-list slot="md-expand">
-          <!-- <md-list-item class="md-inset" href="https://materialsmine.org/nm#/XMLCONV">
-            Upload a Spreadsheet
-          </md-list-item> -->
-          <router-link :to="'/explorer/curate/spreadsheet'" v-slot="{navigate, href}" custom>
-            <md-list-item :href="href" @click="navigate"  class="md-inset">Upload a Spreadsheet</md-list-item>
-          </router-link>
-          <router-link :to="''" v-slot="{navigate, href}" custom>
-            <md-list-item :href="href" @click="navigate"  class="md-inset">Fill a Form</md-list-item>
-          </router-link>
-          <router-link :to="''" v-slot="{navigate, href}" custom>
-            <md-list-item :href="href" @click="navigate"  class="md-inset">Submit SDD</md-list-item>
-          </router-link>
-          <router-link :to="''" v-slot="{navigate, href}" custom>
-            <md-list-item :href="href" @click="navigate"  class="md-inset">Create New Chart</md-list-item>
-          </router-link>
-          <router-link :to="'/explorer/curate/validlist'" v-slot="{navigate, href}" custom>
-            <md-list-item :href="href" @click="navigate"  class="md-inset">Add Xlsx List Entry</md-list-item>
-          </router-link>
-        </md-list>
-      </md-list-item>
       <md-list-item md-expand>
         <md-icon class="utility-navfonticon">handyman</md-icon>
         <span class="md-list-item-text utility-navfont">Tools</span>
@@ -92,24 +77,36 @@
           </router-link>
         </md-list>
       </md-list-item>
-      <md-list-item v-if="isAuth && isAdmin" md-expand>
-        <md-icon class="utility-navfonticon">edit</md-icon>
-        <span class="md-list-item-text utility-navfont">Admin</span>
+
+      <md-toolbar class="md-transparent u--font-emph-l u_margin-top-small" md-elevation="0" v-if="isAuth" ><small>User Dashboard</small></md-toolbar>
+      <md-divider v-if="isAuth" ></md-divider>
+      <md-list-item md-expand v-if="isAuth">
+        <md-icon class="utility-navfonticon">upload</md-icon>
+        <span class="md-list-item-text utility-navfont">Curate</span>
         <md-list slot="md-expand">
-          <router-link :to="'/nm/contact-inquiry'" v-slot="{navigate, href}" custom>
-            <md-list-item :href="href" @click="navigate"  class="md-inset">Contact Inquiry</md-list-item>
+          <!-- <md-list-item class="md-inset" href="https://materialsmine.org/nm#/XMLCONV">
+            Upload a Spreadsheet
+          </md-list-item> -->
+          <router-link :to="'/explorer/curate/spreadsheet'" v-slot="{navigate, href}" custom>
+            <md-list-item :href="href" @click="navigate"  class="md-inset">Upload a Spreadsheet</md-list-item>
           </router-link>
-          <router-link :to="'/deploy'" v-slot="{navigate, href}" custom>
-            <md-list-item :href="href" @click="navigate"  class="md-inset">Deploy</md-list-item>
+          <router-link :to="''" v-slot="{navigate, href}" custom>
+            <md-list-item :href="href" @click="navigate"  class="md-inset">Fill a Form</md-list-item>
+          </router-link>
+          <router-link :to="''" v-slot="{navigate, href}" custom>
+            <md-list-item :href="href" @click="navigate"  class="md-inset">Submit SDD</md-list-item>
           </router-link>
-          <router-link :to="'/nm'" v-slot="{navigate, href}" custom>
-            <md-list-item :href="href" @click="navigate"  class="md-inset">User Management</md-list-item>
+          <router-link :to="''" v-slot="{navigate, href}" custom>
+            <md-list-item :href="href" @click="navigate"  class="md-inset">Create New Chart</md-list-item>
           </router-link>
-          <router-link :to="'/nm'" v-slot="{navigate, href}" custom>
-            <md-list-item :href="href" @click="navigate"  class="md-inset">Curations</md-list-item>
+          <router-link :to="'/explorer/curate/validlist'" v-slot="{navigate, href}" custom>
+            <md-list-item :href="href" @click="navigate"  class="md-inset">Add Xlsx List Entry</md-list-item>
           </router-link>
         </md-list>
       </md-list-item>
+    </md-list>
+
+    <md-list class="utility-transparentbg">
       <md-list-item v-if="isAuth" @click="$store.dispatch('auth/logout')">
         <md-icon class="utility-navfonticon">logout</md-icon>
         <span class="md-list-item-text utility-navfont">Log out</span>
@@ -119,6 +116,7 @@
         <span class="md-list-item-text utility-navfont">Login</span>
       </md-list-item>
     </md-list>
+
   </div>
 </template>
 <script>

app/src/components/explorer/Pagination.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="explorer_page-nav u_margin-top-med viz-pagination-width-mod u_margin-bottom-small">
+  <div>
+    <div v-if="tpages > 1" class="explorer_page-nav u_margin-top-med viz-pagination-width-mod u_margin-bottom-small">
       <button
         @click.prevent="goToBeginning"
         v-if="rowNumber > 1" :disabled="rowNumber < 1"
@@ -18,8 +19,9 @@
         <md-icon class="u--default-size">more_horiz</md-icon>
       </button>
       <button @click.prevent="goToEnd" v-if="rowNumber < factor" class="md-button md-icon-button md-dense md-primary u--color-primary"> {{ tpages }} </button>
-
     </div>
+  </div>
+
 </template>
 <script>
 export default {

app/src/pages/CountDown.vue

@@ -3,34 +3,34 @@
     <div class="section_banner">
       <div class="editImage_modal">
         <div class="metamine_intro-content">
-          <p class="search_box_header u_centralize_text u_color_white u_margin-top-med">We Are Coming Very Soon!</p>
+          <p class="search_box_header u_centralize_text u_color_white u_margin-top-small">We Are Coming Very Soon!</p>
           <br>
           <div class="header-logo u--margin-none u_margin-top-med">
             <span class="md-title"><img id="logo" src="@/assets/img/materialsmine_logo_sm.png"></span>
           </div>
 
           <div class="md-layout md-alignment-center-center visualize_accordion u_margin-top-med">
             <div class="clock__box u_margin-right-small">
-              <h1 class="visualize_header-h1 article_title u_centralize_text u_margin-bottom-small">{{days}}</h1>
+              <h1 class="visualize_header-h1 article_title u_centralize_text">{{days}}</h1>
               <p class="u_centralize_text p_mobile_small">DAYS</p>
             </div>
 
             <div class="clock__box u_margin-right-small">
-              <h1 class="visualize_header-h1 article_title u_centralize_text u_margin-bottom-small">{{hours}}</h1>
+              <h1 class="visualize_header-h1 article_title u_centralize_text">{{hours}}</h1>
               <p class="u_centralize_text p_mobile_small">HOURS</p>
             </div>
 
             <div class="clock__box u_margin-right-small">
-              <h1 class="visualize_header-h1 article_title u_centralize_text u_margin-bottom-small">{{minutes}}</h1>
+              <h1 class="visualize_header-h1 article_title u_centralize_text ">{{minutes}}</h1>
               <p class="u_centralize_text p_mobile_small">MINUTES</p>
             </div>
 
             <div class="clock__box u_margin-right-small">
-              <h1 class="visualize_header-h1 article_title u_centralize_text u_margin-bottom-small">{{seconds}}</h1>
+              <h1 class="visualize_header-h1 article_title u_centralize_text ">{{seconds}}</h1>
               <p class="u_centralize_text p_mobile_small">SECONDS</p>
             </div>
           </div>
-          <p class="u_color_white u_margin-top-med u--margin-toplg">Notify me when it's ready</p>
+          <p class="u_color_white u--margin-toplg">Notify me when it's ready</p>
 
           <form class="form" @submit.prevent="onSubmit">
             <div class="search_box_form">
@@ -39,7 +39,7 @@
                     <label htmlFor="email" class="form__label search_box_form_label">Search</label>
                 </div>
                 <div class="form__group search_box_form-item-2">
-                    <button type="submit" class="btn btn--primary btn--tertiary btn--noradius search_box_form_btn">Submit</button>
+                    <button type="submit" class="btn btn--primary btn--tertiary btn--noradius search_box_form_btn submit_button">Submit</button>
                 </div>
             </div>
           </form>

app/src/pages/explorer/curate/validlist/UpdateXlsList.vue

@@ -19,7 +19,7 @@
                         <md-table-row slot="md-table-row" slot-scope="{ item}" md-selectable="single">
                           <md-table-cell md-label="Field Name">{{ item.field }}</md-table-cell>
                           <md-table-cell md-label="Value">
-                            <md-chip v-for="(element, i) in item['values']" :key="`C${i}`">{{ element }}</md-chip>
+                            <md-chip class="u_margin-bottom-small" v-for="(element, i) in item['values']" :key="`C${i}`">{{ element }}</md-chip>
                           </md-table-cell>
                           <md-table-cell md-label="User">{{ item.user ?? ''}}</md-table-cell>
                         </md-table-row>
@@ -35,7 +35,7 @@
                         <md-table-row>
                           <md-table-cell>{{ fieldName }}</md-table-cell>
                           <md-table-cell>
-                            <md-chip v-for="(element, i) in value" @md-delete="deleteValue(value, i)" md-deletable :key="`${i}`">{{ element }}</md-chip>
+                            <md-chip class="u_margin-bottom-small" v-for="(element, i) in value" @md-delete="deleteValue(value, i)" md-deletable :key="`${i}`">{{ element }}</md-chip>
                           </md-table-cell>
                         </md-table-row>
 
@@ -53,7 +53,7 @@
                         <md-table-row>
                           <md-table-cell>{{ uploadedData.field }}</md-table-cell>
                           <md-table-cell>
-                            <md-chip v-for="(element, i) in uploadedData['values']" :key="`${i}`">{{ element }}</md-chip>
+                            <md-chip class="u_margin-bottom-small" v-for="(element, i) in uploadedData['values']" :key="`${i}`">{{ element }}</md-chip>
                           </md-table-cell>
                           <md-table-cell>{{ uploadedData.user ?? '' }}</md-table-cell>
                         </md-table-row>

app/src/pages/explorer/curate/validlist/XlsList.vue

@@ -23,14 +23,14 @@
                       <md-table-row v-for="item in tableData" :key="item.field">
                         <md-table-cell>{{ item.field }}</md-table-cell>
                         <md-table-cell>
-                          <md-chip v-for="(element, i) in item['values']" @md-delete="deleteValue(item['values'], i)" md-deletable :key="`B${i}`">{{ element }}</md-chip>
+                          <md-chip class="u_margin-bottom-small" v-for="(element, i) in item['values']" @md-delete="deleteValue(item['values'], i)" md-deletable :key="`B${i}`">{{ element }}</md-chip>
                         </md-table-cell>
                       </md-table-row>
 
                       <md-table-row>
                         <md-table-cell>{{ fieldName.split(" ").join("_")}}</md-table-cell>
                         <md-table-cell>
-                          <md-chip v-for="(item, i) in value" @md-delete="deleteValue(value, i)" md-deletable :key="`C${i}`" class="u--color-primary">{{ item }}</md-chip>
+                          <md-chip v-for="(item, i) in value" @md-delete="deleteValue(value, i)" md-deletable :key="`C${i}`" class="u--color-primary u_margin-bottom-small">{{ item }}</md-chip>
                         </md-table-cell>
                       </md-table-row>
                     </md-table>
@@ -42,7 +42,7 @@
                         <md-table-cell md-label=""><md-icon class="u--color-success">check</md-icon></md-table-cell>
                         <md-table-cell md-label="FieldName">{{ item.field }}</md-table-cell>
                         <md-table-cell md-label="Value">
-                          <md-chip v-for="(element, i) in item['values']" :key="`C${i}`">{{ element }}</md-chip>
+                          <md-chip class="u_margin-bottom-small" v-for="(element, i) in item['values']" :key="`C${i}`">{{ element }}</md-chip>
                         </md-table-cell>
                       </md-table-row>
                     </md-table>
@@ -57,7 +57,7 @@
                         <md-table-cell md-label=""><md-icon class="u--color-error">close</md-icon></md-table-cell>
                         <md-table-cell md-label="FieldName">{{ item.field }}</md-table-cell>
                         <md-table-cell md-label="Value">
-                          <md-chip v-for="(element, i) in item['values']" :key="`D${i}`">{{ element }}</md-chip>
+                          <md-chip class="u_margin-bottom-small" v-for="(element, i) in item['values']" :key="`D${i}`">{{ element }}</md-chip>
                         </md-table-cell>
                       </md-table-row>
                     </md-table>

app/src/pages/explorer/curate/validlist/XlsListAll.vue

@@ -34,7 +34,7 @@
                 <md-table-row slot="md-table-row" slot-scope="{ item }">
                   <md-table-cell md-label="Field Name" md-sort-by="field">{{ item.field }}</md-table-cell>
                   <md-table-cell md-label="Value">
-                    <md-chip v-for="(element, i) in item['values']" :key="`C${i}`">{{ element }}</md-chip>
+                    <md-chip class="u_margin-bottom-small" v-for="(element, i) in item['values']" :key="`C${i}`">{{ element }}</md-chip>
                   </md-table-cell>
                   <md-table-cell md-label="User" md-sort-by="user">{{ item.user ?? ''}}</md-table-cell>
                   <md-table-cell md-label="Actions">
@@ -67,7 +67,7 @@
             with values:
         </span>
         <div class="md-layout md-gutter md-alignment-bottom-center" style="margin-top:1rem">
-            <md-chip v-for="(value, index) in dialog['values']" :key="`value_${index}`">{{ value }}</md-chip>
+            <md-chip class="u_margin-bottom-small" v-for="(value, index) in dialog['values']" :key="`value_${index}`">{{ value }}</md-chip>
         </div>
       </template>
       <template v-slot:actions>

app/src/pages/nanomine/Home/Home.vue

@@ -101,11 +101,6 @@ export default {
     }
   },
   created () {
-    // Trigger count down page if date is still in the future
-    if (this.$store.getters.countDownDate - new Date().getTime() > 0) {
-      return this.$router.push('/countdown')
-    }
-
     this.$store.commit('setAppHeaderInfo', {
       icon: '',
       pagetype: 'home',

app/tests/unit/app.spec.js

@@ -0,0 +1,28 @@
+import createWrapper from '../jest/script/wrapper'
+import { enableAutoDestroy } from '@vue/test-utils'
+import App from '@/App.vue'
+import router from '@/router'
+import store from '@/store/index.js'
+
+// Spy on created method early
+const route = jest.spyOn(router, 'push').mockImplementation(() => {})
+const dispatch = jest.spyOn(store, 'dispatch').mockImplementation(() => {})
+
+describe('App.vue', () => {
+  let wrapper
+  beforeEach(async () => {
+    wrapper = await createWrapper(App, { }, false)
+  })
+
+  enableAutoDestroy(afterEach)
+
+  it('mounts properly', () => {
+    expect(wrapper.find('.page-container').exists()).toBe(true)
+    expect(wrapper.find('#app').exists()).toBe(true)
+    if (wrapper.vm.$store.getters.countDownDate - new Date().getTime() > 0) {
+      expect(route).toHaveBeenCalledWith('/countdown')
+    } else {
+      expect(dispatch).toHaveBeenCalledWith('auth/tryLogin')
+    }
+  })
+})