From 0f392c11e58e541e300a389d886a80feb1fd3c1d Mon Sep 17 00:00:00 2001 From: hydrocodone <44106031+diracs-delta@users.noreply.github.com> Date: Fri, 30 Oct 2020 14:51:25 -0700 Subject: [PATCH 01/16] yarn: add vue-svg-loader --- package.json | 3 ++- yarn.lock | 11 ++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index bc598e5..59d8cd6 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,8 @@ }, "devDependencies": { "@quasar/app": "^2.1.6", - "@types/node": "^14.14.6" + "@types/node": "^14.14.6", + "vue-svg-loader": "^0.17.0-beta.2" }, "engines": { "node": ">= 10.18.1", diff --git a/yarn.lock b/yarn.lock index 2513c76..77b817d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8202,7 +8202,7 @@ supports-color@^7.0.0, supports-color@^7.1.0: dependencies: has-flag "^4.0.0" -svgo@^1.0.0: +svgo@^1.0.0, svgo@^1.3.2: version "1.3.2" resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167" integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw== @@ -8816,6 +8816,15 @@ vue-style-loader@4.1.2, vue-style-loader@^4.1.0: hash-sum "^1.0.2" loader-utils "^1.0.2" +vue-svg-loader@^0.17.0-beta.2: + version "0.17.0-beta.2" + resolved "https://registry.yarnpkg.com/vue-svg-loader/-/vue-svg-loader-0.17.0-beta.2.tgz#954b2a08b5488998dd81ec371ab5fb5ea4182ef7" + integrity sha512-iMUGJTKEcuNAG8VXOchjA8443IqEmEi2Aw6EVIHWma2cC4TUQ7Oet5Yry9IFfqXQXXvyzXz5EyttVvfRGTNH4Q== + dependencies: + loader-utils "^2.0.0" + semver "^7.3.2" + svgo "^1.3.2" + vue-template-compiler@2.6.12: version "2.6.12" resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz#947ed7196744c8a5285ebe1233fe960437fcc57e" From 92b08b6d73e03167042b7c2aef3d60e47229ea0a Mon Sep 17 00:00:00 2001 From: hydrocodone <44106031+diracs-delta@users.noreply.github.com> Date: Fri, 30 Oct 2020 14:51:52 -0700 Subject: [PATCH 02/16] src/types: add declaration file for SVG modules --- src/types/svg.d.ts | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/types/svg.d.ts diff --git a/src/types/svg.d.ts b/src/types/svg.d.ts new file mode 100644 index 0000000..4be6533 --- /dev/null +++ b/src/types/svg.d.ts @@ -0,0 +1,5 @@ +declare module '*.svg' { + import Vue, { VueConstructor } from 'vue'; + const content: VueConstructor; + export default content; +} From d9d714e98fe00fd48788b3c314717ed203d20d8b Mon Sep 17 00:00:00 2001 From: hydrocodone <44106031+diracs-delta@users.noreply.github.com> Date: Fri, 30 Oct 2020 15:03:03 -0700 Subject: [PATCH 03/16] tsconfig.json: source src/types for declarations --- tsconfig.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 98f94b4..cbcb858 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "@quasar/app/tsconfig-preset", "compilerOptions": { - "baseUrl": "." + "baseUrl": ".", + "typeRoots": ["node_modules", "src/types"], } -} \ No newline at end of file +} From 98a7773381c3a8555ed8e14a064aa2ce07dd0b71 Mon Sep 17 00:00:00 2001 From: hydrocodone <44106031+diracs-delta@users.noreply.github.com> Date: Fri, 30 Oct 2020 15:03:23 -0700 Subject: [PATCH 04/16] quasar.conf.js: call vue-svg-loader for svg files --- quasar.conf.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/quasar.conf.js b/quasar.conf.js index df02ee3..65d89c1 100644 --- a/quasar.conf.js +++ b/quasar.conf.js @@ -83,6 +83,30 @@ module.exports = configure(function (/* ctx */) { // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack extendWebpack (cfg) { + /* + * deletes 'svg' from old url-loader regex rule + * old: /\.(png|jpe?g|gif|svg|webp|avif)(\?.*)?$/ + * new: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/ + */ + cfg.module.rules = cfg.module.rules.map(rule => { + const regstr = rule.test.toString() + if (regstr.includes('svg')) { + const newReg = new RegExp(regstr + .replace('svg', '') // delete all svg mentions + .replace('||', '|') // delete extra '|' operators + .replace('(|', '(') + .replace('|)', ')') + .slice(1, -1) // remove surrounding '/' signs + ) + return { ...rule, test: newReg } + } else { + return rule + } + }) + cfg.module.rules.push({ + test: /\.svg$/, + use: ['vue-loader', 'vue-svg-loader'] + }) }, }, From d9f5ca125f9ccb850d978512e1fa55c9e6fce725 Mon Sep 17 00:00:00 2001 From: hydrocodone <44106031+diracs-delta@users.noreply.github.com> Date: Fri, 30 Oct 2020 15:14:52 -0700 Subject: [PATCH 05/16] move difficulty icons to separate asset files --- src/assets/difficulty_icons/advanced.svg | 15 +++++++ src/assets/difficulty_icons/basic.svg | 12 ++++++ src/assets/difficulty_icons/normal.svg | 13 ++++++ src/components/CustomizePracticeCard.vue | 55 ++++++------------------ 4 files changed, 53 insertions(+), 42 deletions(-) create mode 100644 src/assets/difficulty_icons/advanced.svg create mode 100644 src/assets/difficulty_icons/basic.svg create mode 100644 src/assets/difficulty_icons/normal.svg diff --git a/src/assets/difficulty_icons/advanced.svg b/src/assets/difficulty_icons/advanced.svg new file mode 100644 index 0000000..f842e03 --- /dev/null +++ b/src/assets/difficulty_icons/advanced.svg @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/src/assets/difficulty_icons/basic.svg b/src/assets/difficulty_icons/basic.svg new file mode 100644 index 0000000..07d9920 --- /dev/null +++ b/src/assets/difficulty_icons/basic.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/src/assets/difficulty_icons/normal.svg b/src/assets/difficulty_icons/normal.svg new file mode 100644 index 0000000..39ca318 --- /dev/null +++ b/src/assets/difficulty_icons/normal.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/src/components/CustomizePracticeCard.vue b/src/components/CustomizePracticeCard.vue index 47eab46..589b0cf 100644 --- a/src/components/CustomizePracticeCard.vue +++ b/src/components/CustomizePracticeCard.vue @@ -41,53 +41,15 @@
- - - - - - - +
Basic
- - - - - - - +
Normal
- - - - - - - - - +
Advanced
@@ -101,12 +63,21 @@ import { PracticeGetters, PracticeActions } from "../store/practice/practice"; import { mapGetters, mapActions } from "vuex"; import { PracticeMode, Difficulty } from "../engine/models/math_question"; +import BasicDiffIcon from "../assets/difficulty_icons/basic.svg" +import NormalDiffIcon from "../assets/difficulty_icons/normal.svg" +import AdvancedDiffIcon from "../assets/difficulty_icons/advanced.svg" + export default { props: { icon: { default: null } }, + components: { + BasicDiffIcon, + NormalDiffIcon, + AdvancedDiffIcon, + }, computed: { ...mapGetters({ practiceMode: PracticeGetters.PRACTICE_MODE, @@ -196,4 +167,4 @@ export default { .practice-customization { height: 116px; } - \ No newline at end of file + From 863bf81605be95270497c802bfb8e6c1793429f1 Mon Sep 17 00:00:00 2001 From: hydrocodone <44106031+diracs-delta@users.noreply.github.com> Date: Fri, 30 Oct 2020 15:33:17 -0700 Subject: [PATCH 06/16] merge and rename icon CSS class --- src/assets/difficulty_icons/advanced.svg | 2 +- src/assets/difficulty_icons/basic.svg | 2 +- src/assets/difficulty_icons/normal.svg | 2 +- src/components/CustomizePracticeCard.vue | 14 +++++++------- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/assets/difficulty_icons/advanced.svg b/src/assets/difficulty_icons/advanced.svg index f842e03..1d38288 100644 --- a/src/assets/difficulty_icons/advanced.svg +++ b/src/assets/difficulty_icons/advanced.svg @@ -1,7 +1,7 @@ diff --git a/src/assets/difficulty_icons/basic.svg b/src/assets/difficulty_icons/basic.svg index 07d9920..9aad42a 100644 --- a/src/assets/difficulty_icons/basic.svg +++ b/src/assets/difficulty_icons/basic.svg @@ -2,7 +2,7 @@ width="56" height="77" viewBox="0 0 56 32" - class="icon-display-fill-color" + class="icon" xmlns="http://www.w3.org/2000/svg" > diff --git a/src/assets/difficulty_icons/normal.svg b/src/assets/difficulty_icons/normal.svg index 39ca318..bd471de 100644 --- a/src/assets/difficulty_icons/normal.svg +++ b/src/assets/difficulty_icons/normal.svg @@ -2,7 +2,7 @@ xmlns="http://www.w3.org/2000/svg" width="75" height="77" - class="icon-display-fill-color" + class="icon" viewBox="0 0 75 31" > diff --git a/src/components/CustomizePracticeCard.vue b/src/components/CustomizePracticeCard.vue index 589b0cf..6d2f09d 100644 --- a/src/components/CustomizePracticeCard.vue +++ b/src/components/CustomizePracticeCard.vue @@ -21,8 +21,8 @@
- - + +
Timed Practice
Math Worksheet
@@ -30,11 +30,11 @@
{{timeInMins}}
{{practiceQuestionCount}}
Minutes
Questions
@@ -146,12 +146,12 @@ export default { border-radius: 32px; z-index: 2; } -.icon-display-color { + +.icon { color: #114489; -} -.icon-display-fill-color { fill: #114489; } + #customize-practice { position: relative; z-index: 3; From b8bcab31f2a3bb8b77b3cce99dd9c9432e4ca041 Mon Sep 17 00:00:00 2001 From: hydrocodone <44106031+diracs-delta@users.noreply.github.com> Date: Tue, 3 Nov 2020 14:09:51 -0800 Subject: [PATCH 07/16] PracticeCard.vue: rename and refactor extensively --- src/components/CustomizePracticeCard.vue | 170 ----------------------- src/components/PracticeCard.vue | 165 ++++++++++++++++++++++ 2 files changed, 165 insertions(+), 170 deletions(-) delete mode 100644 src/components/CustomizePracticeCard.vue create mode 100644 src/components/PracticeCard.vue diff --git a/src/components/CustomizePracticeCard.vue b/src/components/CustomizePracticeCard.vue deleted file mode 100644 index 6d2f09d..0000000 --- a/src/components/CustomizePracticeCard.vue +++ /dev/null @@ -1,170 +0,0 @@ - - - - - diff --git a/src/components/PracticeCard.vue b/src/components/PracticeCard.vue new file mode 100644 index 0000000..03eb91a --- /dev/null +++ b/src/components/PracticeCard.vue @@ -0,0 +1,165 @@ + + + + + From c3ac96973501b1054cc3640bb9ed6948a114a475 Mon Sep 17 00:00:00 2001 From: hydrocodone <44106031+diracs-delta@users.noreply.github.com> Date: Tue, 3 Nov 2020 14:10:12 -0800 Subject: [PATCH 08/16] HomePage.vue: use new practice card component --- src/pages/HomePage.vue | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue index d206c73..ce485cd 100644 --- a/src/pages/HomePage.vue +++ b/src/pages/HomePage.vue @@ -10,7 +10,7 @@ />Donate
- +
@@ -28,15 +28,15 @@ @@ -63,7 +63,7 @@ export default { } .config-customize-practice { - margin-top: 42px; + padding-top: 50px; z-index: 1; } @@ -83,6 +83,7 @@ export default { justify-content: space-between; } } + .paypal-icon { height: 28px; margin-right: 8px; From 858b2bbdfcc04cc7df457cfd25847fb38d04c048 Mon Sep 17 00:00:00 2001 From: hydrocodone <44106031+diracs-delta@users.noreply.github.com> Date: Tue, 3 Nov 2020 14:10:26 -0800 Subject: [PATCH 09/16] assets: remove extra properties from difficons --- src/assets/difficulty_icons/advanced.svg | 2 -- src/assets/difficulty_icons/basic.svg | 2 -- src/assets/difficulty_icons/normal.svg | 2 -- 3 files changed, 6 deletions(-) diff --git a/src/assets/difficulty_icons/advanced.svg b/src/assets/difficulty_icons/advanced.svg index 1d38288..69d253d 100644 --- a/src/assets/difficulty_icons/advanced.svg +++ b/src/assets/difficulty_icons/advanced.svg @@ -1,6 +1,4 @@ From 71b4e3fb999183f72b11c550ac22d54c5aedc4c0 Mon Sep 17 00:00:00 2001 From: hydrocodone <44106031+diracs-delta@users.noreply.github.com> Date: Wed, 4 Nov 2020 12:12:36 -0800 Subject: [PATCH 10/16] PracticeCard.vue: rename icon components --- src/components/PracticeCard.vue | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/PracticeCard.vue b/src/components/PracticeCard.vue index 03eb91a..2e8655d 100644 --- a/src/components/PracticeCard.vue +++ b/src/components/PracticeCard.vue @@ -42,15 +42,15 @@
@@ -63,9 +63,9 @@ import { PracticeGetters, PracticeActions } from "../store/practice/practice"; import { mapGetters, mapActions } from "vuex"; import { PracticeMode, Difficulty } from "../engine/models/math_question"; -import BasicDiffIcon from "../assets/difficulty_icons/basic.svg" -import NormalDiffIcon from "../assets/difficulty_icons/normal.svg" -import AdvancedDiffIcon from "../assets/difficulty_icons/advanced.svg" +import BasicIcon from "../assets/difficulty_icons/basic.svg" +import NormalIcon from "../assets/difficulty_icons/normal.svg" +import AdvancedIcon from "../assets/difficulty_icons/advanced.svg" export default { props: { @@ -74,9 +74,9 @@ export default { } }, components: { - BasicDiffIcon, - NormalDiffIcon, - AdvancedDiffIcon, + BasicIcon, + NormalIcon, + AdvancedIcon, }, computed: { ...mapGetters({ From 2242e3c54d0579ff4884eed551601274d5335142 Mon Sep 17 00:00:00 2001 From: hydrocodone <44106031+diracs-delta@users.noreply.github.com> Date: Thu, 5 Nov 2020 12:20:38 -0800 Subject: [PATCH 11/16] PracticeCard.vue: fix extra whitespace --- src/components/PracticeCard.vue | 91 +++++++++++++++++---------------- 1 file changed, 47 insertions(+), 44 deletions(-) diff --git a/src/components/PracticeCard.vue b/src/components/PracticeCard.vue index 2e8655d..9c3590a 100644 --- a/src/components/PracticeCard.vue +++ b/src/components/PracticeCard.vue @@ -1,5 +1,5 @@ @@ -111,19 +115,19 @@ export default {