From a7cadefc32164206da12140f802f8fb9e66f2d69 Mon Sep 17 00:00:00 2001 From: semmatti <144159881+semmatti@users.noreply.github.com> Date: Thu, 5 Oct 2023 13:21:32 -0700 Subject: [PATCH] 17673 responsive navbar (#1400) * add .vscode to gitignore * make home page layout responsive * modularize toggle and improve app header * add HeadlessUI * add dropdown for app header * fix landing page tests * use tailwind theme colors for search button * revert navbar to original layout * fix app header image path * change nuxt version --- .gitignore | 3 + .nuxt/tsconfig.json | 56 +- __tests__/LandingPage.specs.ts | 6 +- components/AppHeader.vue | 190 +- components/AppHeaderNavLink.vue | 22 + components/SearchInput.vue | 26 + components/StatsBox.vue | 2 +- components/ToggleSwitch.vue | 32 + enums/dropdownEnums.ts | 7 +- package-lock.json | 21675 ++++++++++++++++++------------ package.json | 3 +- pages/Examine.vue | 3 + pages/HomePage.vue | 40 +- store/ExamineOptions.ts | 7 + tailwind.config.ts | 7 +- 15 files changed, 12908 insertions(+), 9171 deletions(-) create mode 100644 components/AppHeaderNavLink.vue create mode 100644 components/SearchInput.vue create mode 100644 components/ToggleSwitch.vue create mode 100644 pages/Examine.vue create mode 100644 store/ExamineOptions.ts diff --git a/.gitignore b/.gitignore index 43171fa2..b66a020e 100644 --- a/.gitignore +++ b/.gitignore @@ -148,3 +148,6 @@ dist #firebase hosting .firebase .firebaserc + +# IDEs +.vscode diff --git a/.nuxt/tsconfig.json b/.nuxt/tsconfig.json index 82ae756d..6057dfb4 100644 --- a/.nuxt/tsconfig.json +++ b/.nuxt/tsconfig.json @@ -7,86 +7,90 @@ "module": "ESNext", "moduleResolution": "Node", "skipLibCheck": true, + "isolatedModules": true, + "useDefineForClassFields": true, "strict": true, "allowJs": true, "noEmit": true, "resolveJsonModule": true, "allowSyntheticDefaultImports": true, - "types": [ - "node" - ], - "baseUrl": "..", "paths": { "~": [ - "." + ".." ], "~/*": [ - "./*" + "../*" ], "@": [ - "." + ".." ], "@/*": [ - "./*" + "../*" ], "~~": [ - "." + ".." ], "~~/*": [ - "./*" + "../*" ], "@@": [ - "." + ".." ], "@@/*": [ - "./*" + "../*" ], "assets": [ - "assets" + "../assets" ], "assets/*": [ - "assets/*" + "../assets/*" ], "public": [ - "public" + "../public" ], "public/*": [ - "public/*" + "../public/*" ], "#app": [ - "node_modules/nuxt/dist/app" + "../node_modules/nuxt/dist/app" ], "#app/*": [ - "node_modules/nuxt/dist/app/*" + "../node_modules/nuxt/dist/app/*" ], "vue-demi": [ - "node_modules/nuxt/dist/app/compat/vue-demi" + "../node_modules/nuxt/dist/app/compat/vue-demi" + ], + "#mdc-imports": [ + "./mdc-imports" ], "pinia": [ - "node_modules/pinia/dist/pinia" + "../node_modules/pinia/dist/pinia" ], "#vue-router": [ - ".nuxt/vue-router" + "./vue-router" ], "#imports": [ - ".nuxt/imports" + "./imports" ], "#build": [ - ".nuxt" + "." ], "#build/*": [ - ".nuxt/*" + "./*" ], "#components": [ - ".nuxt/components" + "./components" ] } }, "include": [ "./nuxt.d.ts", - "../**/*" + "../**/*", + ".." ], "exclude": [ + "../node_modules", + "../node_modules/nuxt/node_modules", "../dist", "../.output" ] diff --git a/__tests__/LandingPage.specs.ts b/__tests__/LandingPage.specs.ts index 380469e4..35c75a01 100644 --- a/__tests__/LandingPage.specs.ts +++ b/__tests__/LandingPage.specs.ts @@ -1,6 +1,6 @@ import { beforeEach, describe, it, expect, vitest } from 'vitest' import LandingPage from '../pages/index.vue' -import { mount } from '@vue/test-utils' +import { DOMWrapper, mount } from '@vue/test-utils' import { createTestingPinia } from '@pinia/testing' import { useAuthStore } from '../store/auth' import flushPromises from 'flush-promises' @@ -43,7 +43,7 @@ describe('Welcome Message', () => { authModule.isAuthenticated = false // simulate not being logged in await flushPromises()// wait for updates // At this point, the 'p' element should exist in the DOM. - expect(wrapper.find('p').text()).toBe('Your authorization is missing or has expired. Please login.') + expect(wrapper.findAll('p').filter((node: DOMWrapper) => node.text().match(/Please login/)).length).toBe(1) // And the 'header' should not. expect(wrapper.find('header').exists()).toBe(false) }) @@ -54,6 +54,6 @@ describe('Welcome Message', () => { // At this point, the 'header' element should exist in the DOM. expect(wrapper.find('header').text()).toBe('Welcome to Name X!') // And the 'p' should not. - expect(wrapper.find('p').exists()).toBe(false) + expect(wrapper.findAll('p').filter((node: DOMWrapper) => node.text().match(/Please login/)).length).toBe(0) }) }) diff --git a/components/AppHeader.vue b/components/AppHeader.vue index b12f6d8c..522712c2 100644 --- a/components/AppHeader.vue +++ b/components/AppHeader.vue @@ -1,150 +1,53 @@