Merge branch 'master' into feat/build-lists

# Conflicts:
#	package-lock.json

components/fullscreen-file-drop.vue

@@ -0,0 +1,148 @@
+<template>
+    <div
+        :class="[
+            'vue-full-screen-file-drop',
+            'fixed inset-0',
+            classes
+        ]"
+        :style="{
+            'z-index': 10000
+        }"
+    >
+        <slot>
+            <div
+                class="vue-full-screen-file-drop__content"
+            >
+                {{ text }}
+            </div>
+        </slot>
+        <input
+            ref="file-selector"
+            :style="{
+                //'z-index': 10001
+            }"
+            type="file"
+            accept="application/**"
+            multiple
+            class="absolute inset-0 w-screen h-screen"
+            @change="fileInputChanged"
+        >
+    </div>
+</template>
+
+<script>
+export default {
+//   name: 'VueFullScreenFileDrop',
+    props: {
+        formFieldName: {
+            type: String,
+            default: 'upload',
+        },
+        text: {
+            type: String,
+            default: 'Upload Files',
+        },
+    },
+    data() {
+        return {
+            visible: false,
+            lastTarget: null,
+        };
+    },
+    computed: {
+        classes() {
+            return {
+                'vue-full-screen-file-drop--visible': true //this.visible,
+            };
+        },
+    },
+    mounted () {
+        window.addEventListener('dragenter', this.onDragEnter);
+        window.addEventListener('dragleave', this.onDragLeave);
+        window.addEventListener('dragover', this.onDragOver);
+        // window.addEventListener('drop', this.onDrop);
+    },
+    beforeDestroy () {
+        window.removeEventListener('dragenter', this.onDragEnter);
+        window.removeEventListener('dragleave', this.onDragLeave);
+        window.removeEventListener('dragover', this.onDragOver);
+        // window.removeEventListener('drop', this.onDrop);
+    },
+    methods: {
+        onDragEnter(e) {
+            this.lastTarget = e.target;
+            this.visible = true;
+        },
+        onDragLeave(e) {
+            if (e.target === this.lastTarget) {
+                this.visible = false;
+            }
+        },
+        onDragOver(e) {
+            e.preventDefault();
+        },
+        onDrop(e) {
+            e.preventDefault();
+            // this.visible = false;
+            // const files = e.dataTransfer.files;
+            // const formData = this.getFormData(files);
+            // this.$emit('drop', formData, files);
+        },
+        async fileInputChanged () {
+            console.log('file-selector', this.$refs['file-selector'])
+            const files = this.$refs['file-selector'].files
+
+            console.log('fileInputChanged files', files)
+
+            this.visible = false;
+            // const files = e.dataTransfer.files;
+            const formData = this.getFormData(files);
+            this.$emit('drop', formData, files);
+        },
+        getFormData(files) {
+            const formData = new FormData();
+            Array.prototype.forEach.call(files, file => {
+                formData.append(this.formFieldName, file, file.name);
+            });
+            return formData;
+        },
+    },
+}
+</script>
+
+<style lang='css'>
+  .vue-full-screen-file-drop {
+    /* position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10000;
+    width: 100%;
+    height: 100%; */
+    background-color: rgba(0,0,0,0.4);
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 200ms, opacity 200ms;
+  }
+  .vue-full-screen-file-drop--visible {
+    opacity: 1;
+    visibility: visible;
+  }
+  .vue-full-screen-file-drop__content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    font-size: 4em;
+  }
+  .vue-full-screen-file-drop__content:before {
+    border: 5px dashed #fff;
+    content: "";
+    bottom: 60px;
+    left: 60px;
+    position: absolute;
+    right: 60px;
+    top: 60px;
+  }
+</style>

components/navbar.vue

@@ -6,7 +6,7 @@
             isOpen ? 'bg-blur' : ''
         ]"
     >
-        <div class="max-w-7xl mx-auto px-4 lg:px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto px-4 lg:px-6">
             <div class="flex justify-between h-16">
                 <div class="flex">
                     <div class="-ml-2 mr-2 flex items-center lg:hidden">
@@ -83,13 +83,15 @@
                             </LinkButton>
 
                         </span> -->
+
                         <a
-                            href="https://www.producthunt.com/posts/does-it-arm-benchmarks?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-does-it-arm-benchmarks"
+                            href="https://www.producthunt.com/posts/apple-silicon-app-test?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-apple-silicon-app-test"
+                            rel="noopener"
                             target="_blank"
                         >
                             <img
-                                src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=279410&theme=light"
-                                alt="Does It ARM Benchmarks - Curated App Benchmark Videos for Apple Silicon and Apple M1 | Product Hunt"
+                                src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=285320&theme=light"
+                                alt="Apple Silicon App Test - Test your apps for compatibility before you buy an M1 Mac | Product Hunt"
                                 style="width: 200px; height: 43px;"
                                 width="200"
                                 height="43"
@@ -161,6 +163,10 @@ export default {
                     label: 'Games',
                     url: '/games',
                 },
+                {
+                    label: 'Apple Silicon App Test',
+                    url: '/apple-silicon-app-test',
+                },
             ])
         }
     },