#229 Spreadsheet File Interface

app/src/assets/css/base/_grid.scss

@@ -27,6 +27,19 @@
             grid-gap: 1rem;
             cursor: pointer;
         }
+        &-datasets {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            @include respond(laptop) {
+                grid-template-columns: repeat(3, 1fr);
+            }
+            @include respond(tab-land) {
+                grid-template-columns: repeat(2, 1fr);
+            }
+            @include respond(phone) {
+                grid-template-columns: repeat(1, 1fr);
+            }
+        }
     }
 
     &_gap {

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

@@ -145,4 +145,64 @@
     &__radio-input:checked ~ &__radio-label &__radio-button::after {
         opacity: 1;
     }
+
+    &__stepper {
+        .md-active, .md-done {
+            .md-button-content {
+                color: $primary !important;
+                font-size: 1.8rem;
+                font-weight: 500;
+            }
+            .md-stepper-number {
+                background-color: $primary !important;
+            }
+        }
+        .md-button-content {
+            color: $secondary-grey !important;
+            font-size: 1.8rem;
+        }
+        .md-button_next {
+            margin-top: 3rem;
+            background: $primary;
+            .md-button-content, .md-icon {
+                color: $primary-white !important;
+            }
+            .md-disabled {
+                background: $secondary-grey;
+                .md-button-content, .md-icon {
+                    color: $primary-grey !important;
+                }
+            }
+        }
+        .md-button_prev {
+            margin-top: 3rem;
+            background: $tertiary;
+            .md-button-content, .md-icon {
+                color: $primary !important;
+            }
+        }
+    }
+
+    &__drop-area {
+        max-width: 80%;
+        margin: 2.5rem;
+        padding: 3rem 1rem 0rem 1rem;
+        outline: 4px dashed $secondary-grey;
+        &[data-active=true] {
+            outline: 4px dashed $secondary;
+            color: $secondary;
+        }
+        &_label {
+            width: 100%;
+            margin: 0 auto;
+            padding: 5rem;
+            transition: .2s ease;
+            place-items: center;
+            text-align: center;
+            cursor: pointer;
+            input[type=file] {
+                visibility: hidden;
+            }
+        }
+    }
 }

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

@@ -411,8 +411,87 @@
 .curate {
     display: block;
     padding: 0 7rem;
+    @include respond(phone) {
+        padding: 0 4rem;
+    }
     display: flex;
     flex-direction: column;
+    &-actions {
+        &_lg {
+            @include respond(tab-land) {
+                visibility: hidden;
+                display: none;
+            }
+        }
+        &_sm {
+            visibility: hidden;
+            display: none;
+            @include respond(tab-land) {
+                visibility: visible;
+                display: block;
+            }
+
+        }
+    }
+    &-menu {
+        padding: 1rem 1rem 2rem 1rem;
+        align-items: center;
+        display: flex;
+        &-routes {
+            @include respond(phone) {
+                visibility: hidden;
+                display: none;
+            }
+        }
+    }
+    &-grid {
+        .md-card {
+            .md-title {
+                @include respond(phone) {
+                    font-size: 20px;
+                }
+            }
+            margin: 1.5rem;
+            padding-bottom: 1rem;
+            &-content {
+                overflow: auto;
+            }
+        };
+        &-icons {
+            max-width: 100%;
+            max-height: 28rem;
+            overflow: auto;
+            .md-button {
+                height: 10rem;
+                max-width: 10rem !important;
+                .label {
+                    font-size: 9px;
+                    color: $primary;
+                }
+                @include respond(phone){
+                    .md-ripple {
+                        justify-content: left;
+                    }
+                    height: 6rem;
+                    max-width: 100% !important;
+                    width: 40rem !important;
+                    .label {
+                        font-size: 14px;
+                        top: 2.8rem;
+                        left: 10rem;
+                        position: absolute;
+                    }
+                    .md-icon {
+                        font-size: 7rem !important;
+                        width: 7rem;
+                        height: 7rem;
+                        min-width: 7rem;
+                        max-height: 7rem;
+                    }
+                }
+            }
+        }
+    }
 }
 
 .image-detail-page {

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

@@ -107,6 +107,9 @@
         }
     }
 }
+.md-menu-content {
+    z-index: 14;
+}
 
 .search-dropdown-menu {
     width: 100% !important;

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

@@ -1,4 +1,3 @@
-@import '@/assets/css/abstract/_variables.scss';
 .wrapper {
     padding-left: 1.1875rem;
     padding-right: 1.1875rem;

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

@@ -61,6 +61,20 @@
                 margin: 4rem 0 1.4rem 0;
             }
 
+            @include respond(phone){
+                font-size: 2.8rem;
+                margin: 1rem 0 1rem 0;
+            }
+        }
+        &-h2 {
+            font-size: 3.4rem;
+            font-weight: 300;
+            line-height: 1.2;
+            background-image: linear-gradient(to right bottom, $primary, rgba($primary-light, 0.4));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+
             @include respond(phone){
                 font-size: 2.8rem;
                 margin-bottom: 1rem;

app/src/components/Dialog.vue

@@ -8,7 +8,7 @@
           <slot name="title">
           </slot>
         </md-dialog-title>
-        <md-button class="md-icon-button dialog-box_close" @click="toggleDialogBox()">
+        <md-button v-if="!disableClose" class="md-icon-button dialog-box_close" @click="toggleDialogBox()">
           <md-icon class="utility-navfonticon">close</md-icon>
         </md-button>
       </div>
@@ -40,6 +40,10 @@ export default {
     minWidth: {
       type: Number,
       default: 60
+    },
+    disableClose: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

app/src/components/LoginRequired.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="page-not-found">
+    <i class="material-icons page-not-found-header u--padding-zero" >lock_person</i>
+    <h2 class="u_margin-bottom-small">Login required</h2>
+    <p>The page you are trying to access requires authentication.
+      Would you like to <a>log in</a> or return to the
+      <router-link to=""><a @click="$router.go(-1)">previous page</a></router-link>?
+    </p>
+  </div>
+</template>

app/src/components/curate/CurateNavBar.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="curate-menu">
+      <md-button
+        class="md-icon-button"
+        @click.native.prevent="navBack"
+      >
+        <md-tooltip md-direction="bottom">
+          Go Back
+        </md-tooltip>
+      <md-icon>arrow_back</md-icon>
+      </md-button>
+        <div v-for="(route, index) in navRoutes"
+          :key="index"
+          class="curate-menu-routes"
+        >
+          <router-link :to="route.path" v-slot="{navigate, href}" custom>
+            <a :href="href" @click="navigate">
+              {{route.label}}
+            </a>
+          </router-link>
+          <span class="md-icon-button"> > </span>
+        </div>
+        <span class="curate-menu-routes"> {{active}} </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CurateNavBar',
+  props: {
+    navRoutes: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    active: {
+      type: String,
+      required: true,
+      default: ''
+    }
+  },
+  methods: {
+    navBack () {
+      this.$router.back()
+    }
+  }
+}
+</script>

app/src/components/curate/FileDrop.vue

@@ -0,0 +1,48 @@
+<template>
+	<div :data-active="active" @dragenter.prevent="setActive" @dragover.prevent="setActive" @dragleave.prevent="setInactive" @drop.prevent="onDrop">
+		<slot :dropZoneActive="active"></slot>
+	</div>
+</template>
+
+<script>
+const events = ['dragenter', 'dragover', 'dragleave', 'drop']
+export default {
+  name: 'FileDrop',
+  emits: ['files-dropped'],
+  data () {
+    return {
+      active: false,
+      inActiveTimeout: null
+    }
+  },
+  methods: {
+    setActive () {
+      this.active = true
+      clearTimeout(this.inActiveTimeout)
+    },
+    // Timeout avoids style flickering
+    setInactive () {
+      this.inActiveTimeout = setTimeout(() => {
+        this.active = false
+      }, 50)
+    },
+    onDrop (e) {
+      this.setInactive()
+      this.$emit('files-dropped', [...e.dataTransfer.files])
+    },
+    preventDefaults (e) {
+      e.preventDefault()
+    }
+  },
+  mounted () {
+    events.forEach((eventName) => {
+      document.body.addEventListener(eventName, this.preventDefaults)
+    })
+  },
+  unmounted () {
+    events.forEach((eventName) => {
+      document.body.removeEventListener(eventName, this.preventDefaults)
+    })
+  }
+}
+</script>

app/src/components/curate/FilePreview.vue

@@ -0,0 +1,35 @@
+<template>
+  <component :is="tag" :class="classname">
+    <md-list-item>
+      <div class="md-layout-item md-size-60 display-text" style="height:2rem">{{file.file.name}}</div>
+      <div class="md-layout-item">
+        <md-button id="removeFile" class="md-icon-button" @click.native.prevent="$emit('remove', file)">
+          <md-tooltip> Remove file </md-tooltip>
+          <md-icon>cancel</md-icon>
+        </md-button>
+      </div>
+    </md-list-item>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'FilePreview',
+  emits: ['remove'],
+  props: {
+    file: {
+      type: Object,
+      required: true
+    },
+    tag: {
+      type: String,
+      default: 'li'
+    },
+    classname: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  }
+}
+</script>