From 7445f43b1bda50a9c4b2e21b2ed1afdfe8b6f850 Mon Sep 17 00:00:00 2001 From: Jai A Date: Tue, 3 Nov 2020 21:29:45 -0700 Subject: [PATCH] Tooltips, alternate ad text, better error messages --- assets/styles/components.scss | 93 +++++++++++++++++++ components/EthicalAd.vue | 60 ++++++++++-- components/ModPage.vue | 144 +++++++++++++++-------------- components/ModResult.vue | 15 ++- layouts/default.vue | 10 +- layouts/home.vue | 4 +- nuxt.config.js | 6 +- package-lock.json | 25 +++++ package.json | 2 + pages/mod/_id/version/_version.vue | 19 ++-- pages/mod/_id/versions.vue | 9 +- pages/mod/create.vue | 18 ++-- pages/user/_id.vue | 4 +- plugins/vue-notification.js | 4 + plugins/vue-tooltip.js | 4 + 15 files changed, 302 insertions(+), 115 deletions(-) create mode 100644 plugins/vue-notification.js create mode 100644 plugins/vue-tooltip.js diff --git a/assets/styles/components.scss b/assets/styles/components.scss index 7425e2272..206e629dc 100644 --- a/assets/styles/components.scss +++ b/assets/styles/components.scss @@ -112,3 +112,96 @@ color: var(--color-grey-2); } } + +.tooltip { + display: block !important; + z-index: 10000; + + .tooltip-inner { + background: var(--color-grey-2); + color: var(--color-text); + padding: 5px 10px 4px; + } + + .tooltip-arrow { + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 5px; + border-color: var(--color-grey-2); + z-index: 1; + } + + &[x-placement^="top"] { + margin-bottom: 5px; + + .tooltip-arrow { + border-width: 5px 5px 0 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + bottom: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; + } + } + + &[x-placement^="bottom"] { + margin-top: 5px; + + .tooltip-arrow { + border-width: 0 5px 5px 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-top-color: transparent !important; + top: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; + } + } + + &[x-placement^="right"] { + margin-left: 5px; + + .tooltip-arrow { + border-width: 5px 5px 5px 0; + border-left-color: transparent !important; + border-top-color: transparent !important; + border-bottom-color: transparent !important; + left: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; + } + } + + &[x-placement^="left"] { + margin-right: 5px; + + .tooltip-arrow { + border-width: 5px 0 5px 5px; + border-top-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + right: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; + } + } + + &[aria-hidden='true'] { + visibility: hidden; + opacity: 0; + transition: opacity .15s, visibility .15s; + } + + &[aria-hidden='false'] { + visibility: visible; + opacity: 1; + transition: opacity .15s; + } +} diff --git a/components/EthicalAd.vue b/components/EthicalAd.vue index 73d0b26b1..60f545f25 100644 --- a/components/EthicalAd.vue +++ b/components/EthicalAd.vue @@ -1,10 +1,19 @@ - diff --git a/components/ModPage.vue b/components/ModPage.vue index 6c412eff5..b0cb641af 100644 --- a/components/ModPage.vue +++ b/components/ModPage.vue @@ -57,78 +57,83 @@ -
-
-

Info

-

{{ mod.downloads }} Downloads

-

Created {{ $dayjs(mod.published).fromNow() }}

-

Updated {{ $dayjs(mod.updated).fromNow() }}

-
-
-

Members

-
- profile-picture -
- -

{{ member.name }}

+
+
+
+

Info

+

{{ mod.downloads }} Downloads

+

Created {{ $dayjs(mod.published).fromNow() }}

+

Updated {{ $dayjs(mod.updated).fromNow() }}

+
+
+

Members

+
+ profile-picture +
+ +

{{ member.name }}

+ +

{{ member.role }}

+
+
+
+
+

Featured Versions

+
+
+
+

+ {{ version.name }} +

+

+ Release +

+

+ Beta +

+

+ Alpha +

+
+
+

+ {{ version.version_number }} +

+ + +

+ {{ version.game_versions[0] }} +

+
+
+ + -

{{ member.role }}

+
-
-
-

Featured Versions

-
-
-
-

- {{ version.name }} -

-

- Release -

-

- Beta -

-

- Alpha -

-
-
-

- {{ version.version_number }} -

- - -

- {{ version.game_versions[0] }} -

-
-
- - - -
- -
-
+ + @@ -243,7 +248,6 @@ export default { .mod-info { top: 1rem; - max-height: calc(100vh - 3rem); position: sticky; min-width: 270px; max-width: 270px; diff --git a/components/ModResult.vue b/components/ModResult.vue index 6791fa268..c1c5421ff 100644 --- a/components/ModResult.vue +++ b/components/ModResult.vue @@ -21,11 +21,22 @@

{{ formatNumber(downloads) }}

-
+

{{ $dayjs(createdAt).fromNow() }}

-
+
+ +
Modrinth is in early alpha. You can join our discord for updates! @@ -610,7 +617,8 @@ export default { background-color: var(--color-grey-1); a { - color: var(--color-grey-3); + text-decoration: underline; + color: var(--color-grey-5); } } diff --git a/layouts/home.vue b/layouts/home.vue index 284ea7160..0539db1b0 100644 --- a/layouts/home.vue +++ b/layouts/home.vue @@ -23,13 +23,13 @@

Pages

Home Mods - Packs + Packs About Guides

Developers

- Documentation + Documentation Open Source Issues
diff --git a/nuxt.config.js b/nuxt.config.js index 9d8520674..00117efc9 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -93,7 +93,7 @@ export default { ** Plugins to load before mounting the App ** https://nuxtjs.org/guide/plugins */ - plugins: [], + plugins: ['~/plugins/vue-tooltip.js', '~/plugins/vue-notification.js'], /* ** Auto import components ** See https://nuxtjs.org/api/configuration-components @@ -159,7 +159,9 @@ export default { ** Build configuration ** See https://nuxtjs.org/api/configuration-build/ */ - build: {}, + build: { + transpile: ['vue-tooltip', 'vue-notification'], + }, loading: { color: 'green', height: '5px', diff --git a/package-lock.json b/package-lock.json index 9046c79ea..6c493fd1c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9452,6 +9452,11 @@ "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==", "dev": true }, + "popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==" + }, "posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", @@ -12680,6 +12685,16 @@ "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" }, + "v-tooltip": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.0.3.tgz", + "integrity": "sha512-KZZY3s+dcijzZmV2qoDH4rYmjMZ9YKGBVoUznZKQX0e3c2GjpJm3Sldzz8HHH2Ud87JqhZPB4+4gyKZ6m98cKQ==", + "requires": { + "lodash": "^4.17.15", + "popper.js": "^1.16.0", + "vue-resize": "^0.4.5" + } + }, "v8-compile-cache": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz", @@ -12815,6 +12830,16 @@ "resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz", "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==" }, + "vue-notification": { + "version": "1.3.20", + "resolved": "https://registry.npmjs.org/vue-notification/-/vue-notification-1.3.20.tgz", + "integrity": "sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ==" + }, + "vue-resize": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz", + "integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==" + }, "vue-router": { "version": "3.4.7", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.7.tgz", diff --git a/package.json b/package.json index 2c49097ff..014bd5c4d 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,9 @@ "@nuxtjs/sitemap": "^2.4.0", "marked": "^1.2.0", "nuxt": "^2.14.7", + "v-tooltip": "^2.0.3", "vue-multiselect": "^2.1.6", + "vue-notification": "^1.3.20", "xss": "^1.0.8" }, "devDependencies": { diff --git a/pages/mod/_id/version/_version.vue b/pages/mod/_id/version/_version.vue index 2d3a9947e..754319f1f 100644 --- a/pages/mod/_id/version/_version.vue +++ b/pages/mod/_id/version/_version.vue @@ -54,10 +54,6 @@

Upload Files

-
-

Error

-

{{ currentError }}

-
diff --git a/pages/mod/_id/versions.vue b/pages/mod/_id/versions.vue index 77948a9de..d2a0f2a7e 100644 --- a/pages/mod/_id/versions.vue +++ b/pages/mod/_id/versions.vue @@ -261,7 +261,6 @@ export default { data() { return { showPopup: false, - currentError: null, createdVersion: {}, } }, @@ -278,7 +277,6 @@ export default { }, async createVersion() { this.$nuxt.$loading.start() - this.currentError = null const formData = new FormData() @@ -310,7 +308,12 @@ export default { await this.$router.go(null) } catch (err) { - this.currentError = err.response.data.description + this.$notify({ + group: 'main', + title: 'An Error Occurred', + text: err.response.data.description, + type: 'error', + }) window.scrollTo({ top: 0, behavior: 'smooth' }) } diff --git a/pages/mod/create.vue b/pages/mod/create.vue index f571b1ef5..026fa71f7 100644 --- a/pages/mod/create.vue +++ b/pages/mod/create.vue @@ -1,10 +1,6 @@