General UI Improvement (again) (#255)

* Add and fix some stuff

* Add warning when leaving to `mod/create`

* Fix mods/create not working

assets/styles/highlightjs.scss

@@ -1,10 +1,3 @@
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5rem !important;
-  background: #F0F0F0
-}
-
 .hljs,
 .hljs-subst {
   color: #444
@@ -85,7 +78,7 @@ pre {
   border-radius: 2em;
   border-color: var(--color-brand);
   overflow-x: hidden;
-  
+
   code {
     line-height: 100%;
     padding: 0.2em;
@@ -93,4 +86,4 @@ pre {
     word-break: normal;
     font-family: monospace;
   }
-}
+}

pages/mod/_id.vue

@@ -707,8 +707,6 @@ export default {
 
       svg {
         padding: 0.25rem;
-        border-radius: 50%;
-        background-color: var(--color-button-bg);
       }
     }
   }
@@ -749,6 +747,9 @@ export default {
       border-radius: 2rem;
       background-color: var(--color-button-bg);
       margin-right: var(--spacing-card-sm);
+      &:hover {
+        background-color: var(--color-button-bg-hover);
+      }
       svg {
         width: 1.25rem;
         margin: auto;

pages/mod/_id/edit.vue

@@ -394,6 +394,8 @@ export default {
       iconChanged: false,
 
       sideTypes: ['Required', 'Optional', 'Unsupported'],
+
+      isEditing: true,
     }
   },
   watch: {
@@ -412,6 +414,25 @@ export default {
       }
     },
   },
+  mounted() {
+    function preventLeave(e) {
+      e.preventDefault()
+      e.returnValue = ''
+    }
+    window.addEventListener('beforeunload', preventLeave)
+    this.$once('hook:beforeDestroy', () => {
+      window.removeEventListener('beforeunload', preventLeave)
+    })
+  },
+  beforeRouteLeave(to, from, next) {
+    if (
+      this.isEditing &&
+      !window.confirm('Are you sure that you want to leave without saving?')
+    ) {
+      return
+    }
+    next()
+  },
   created() {
     this.$emit('update:link-bar', [['Edit', 'edit']])
   },
@@ -464,6 +485,7 @@ export default {
           )
         }
 
+        this.isEditing = false
         await this.$router.replace(
           `/mod/${this.mod.slug ? this.mod.slug : this.mod.id}`
         )

pages/mod/_id/newversion.vue

@@ -154,11 +154,31 @@ export default {
   data() {
     return {
       createdVersion: {},
+      isEditing: true,
     }
   },
   created() {
     this.$emit('update:link-bar', [['New Version', 'newversion']])
   },
+  mounted() {
+    function preventLeave(e) {
+      e.preventDefault()
+      e.returnValue = ''
+    }
+    window.addEventListener('beforeunload', preventLeave)
+    this.$once('hook:beforeDestroy', () => {
+      window.removeEventListener('beforeunload', preventLeave)
+    })
+  },
+  beforeRouteLeave(to, from, next) {
+    if (
+      this.isEditing &&
+      !window.confirm('Are you sure that you want to leave without saving?')
+    ) {
+      return
+    }
+    next()
+  },
   methods: {
     async createVersion() {
       this.$nuxt.$loading.start()
@@ -192,6 +212,8 @@ export default {
             },
           })
         ).data
+
+        this.isEditing = false
         await this.$router.push(
           `/mod/${this.mod.slug ? this.mod.slug : data.mod_id}/version/${
             data.id

pages/mod/_id/version/_version/edit.vue

@@ -165,6 +165,7 @@ export default {
   data() {
     return {
       version: {},
+      isEditing: true,
     }
   },
   mounted() {
@@ -173,6 +174,23 @@ export default {
       [this.version.name, 'versions/' + this.version.id],
       ['Edit Version', 'versions/' + this.version.id + '/edit'],
     ])
+    function preventLeave(e) {
+      e.preventDefault()
+      e.returnValue = ''
+    }
+    window.addEventListener('beforeunload', preventLeave)
+    this.$once('hook:beforeDestroy', () => {
+      window.removeEventListener('beforeunload', preventLeave)
+    })
+  },
+  beforeRouteLeave(to, from, next) {
+    if (
+      this.isEditing &&
+      !window.confirm('Are you sure that you want to leave without saving?')
+    ) {
+      return
+    }
+    next()
   },
   methods: {
     async saveVersion() {
@@ -184,6 +202,7 @@ export default {
           this.version,
           this.$auth.headers
         )
+        this.isEditing = false
         await this.$router.replace(
           `/mod/${this.mod.slug ? this.mod.slug : this.mod.id}/version/${
             this.version.id

pages/mod/_id/version/_version/index.vue

@@ -60,7 +60,7 @@
           <a
             v-if="primaryFile"
             :href="primaryFile.url"
-            class="action iconified-button"
+            class="action iconified-button download"
             @click.prevent="
               $parent.downloadFile(primaryFile.hashes.sha1, primaryFile.url)
             "
@@ -333,6 +333,13 @@ export default {
         margin: 0 0 0 0.5rem;
       }
     }
+    .download {
+      background-color: var(--color-brand);
+      color: white;
+      &:hover {
+        background-color: var(--color-brand-hover);
+      }
+    }
   }
 
   .markdown-body {
@@ -408,8 +415,6 @@ export default {
 
     svg {
       padding: 0.25rem;
-      border-radius: 50%;
-      background-color: var(--color-button-bg);
     }
   }
 }

pages/mod/_id/versions.vue

@@ -145,13 +145,20 @@ table {
     &:first-child {
       text-align: center;
       width: 7%;
-
+      .download {
-      svg {
+        display: flex;
-        color: var(--color-text);
+        align-items: center;
-
+        height: 2.25rem;
-        &:hover,
+        width: 2.25rem;
-        &:focus {
+        border-radius: 2rem;
-          color: var(--color-text-hover);
+        background-color: var(--color-button-bg);
+        margin-right: var(--spacing-card-sm);
+        &:hover {
+          background-color: var(--color-button-bg-hover);
+        }
+        svg {
+          width: 1.25rem;
+          margin: auto;
         }
       }
     }

pages/mod/create.vue

@@ -577,6 +577,8 @@ export default {
 
       donationLinks: [],
       donationPlatforms: [],
+
+      isEditing: true,
     }
   },
   watch: {
@@ -595,6 +597,25 @@ export default {
       }
     },
   },
+  mounted() {
+    function preventLeave(e) {
+      e.preventDefault()
+      e.returnValue = ''
+    }
+    window.addEventListener('beforeunload', preventLeave)
+    this.$once('hook:beforeDestroy', () => {
+      window.removeEventListener('beforeunload', preventLeave)
+    })
+  },
+  beforeRouteLeave(to, from, next) {
+    if (
+      this.isEditing &&
+      !window.confirm('Are you sure that you want to leave without saving?')
+    ) {
+      return
+    }
+    next()
+  },
   methods: {
     async createDraft() {
       this.draft = true
@@ -672,6 +693,7 @@ export default {
           },
         })
 
+        this.isEditing = false
         await this.$router.replace('/dashboard/projects')
       } catch (err) {
         let description = err.response.data.description

pages/mods.vue

@@ -70,7 +70,7 @@
             ethical-ads-small
             ethical-ads-big
           />
-          <div v-if="results === null" class="no-results">
+          <div v-if="$fetchState.pending" class="no-results">
             <LogoAnimated />
             <p>Loading...</p>
           </div>
@@ -376,6 +376,7 @@ export default {
     ExitIcon,
     LogoAnimated,
   },
+  fetchOnServer: false,
   async fetch() {
     if (this.$route.query.q) this.query = this.$route.query.q
     if (this.$route.query.f) {