From e4cfd88d41018360641e76e270fe757a99017317 Mon Sep 17 00:00:00 2001 From: Liam Keegan Date: Wed, 6 Nov 2024 14:48:16 +0100 Subject: [PATCH] Add carousel with news items to front page - news items displayed in carousel which scrolls every 3 seconds - clicking on an item opens the associated url in a new window - news items are stored in the file src/assets/news.json for now - could make it editable from the admin interface in the future - uses vueperslides library - add vuesperslides.d.ts as the library has no typescript support - resolves #37 --- frontend/package.json | 3 +- frontend/pnpm-lock.yaml | 15 +++++++++ frontend/src/App.vue | 2 +- frontend/src/assets/news.json | 32 +++++++++++++++++++ frontend/src/components/CarouselComponent.vue | 24 ++++++++++++++ frontend/src/components/FooterComponent.vue | 1 - frontend/src/components/vueperslides.d.ts | 4 +++ frontend/src/views/AboutView.vue | 4 ++- 8 files changed, 81 insertions(+), 4 deletions(-) create mode 100644 frontend/src/assets/news.json create mode 100644 frontend/src/components/CarouselComponent.vue create mode 100644 frontend/src/components/vueperslides.d.ts diff --git a/frontend/package.json b/frontend/package.json index 85232ce..fdd65bb 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,7 +19,8 @@ "flowbite-vue": "^0.1.6", "pinia": "^2.2.2", "vue": "^3.5.10", - "vue-router": "^4.4.5" + "vue-router": "^4.4.5", + "vueperslides": "^3.5.1" }, "devDependencies": { "@rushstack/eslint-patch": "^1.10.4", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 1891e41..941fe14 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -28,6 +28,9 @@ importers: vue-router: specifier: ^4.4.5 version: 4.4.5(vue@3.5.10(typescript@5.5.4)) + vueperslides: + specifier: ^3.5.1 + version: 3.5.1(vue@3.5.10(typescript@5.5.4)) devDependencies: "@rushstack/eslint-patch": specifier: ^1.10.4 @@ -4645,6 +4648,14 @@ packages: typescript: optional: true + vueperslides@3.5.1: + resolution: + { + integrity: sha512-g/Lauv1svlSaERzLNeys0oeLmpDFiXkIa+lxg+lJma6m6wXqJKzKKVIi8Kvc95XPnl42n7PYYJyr0+FMV6WZGw==, + } + peerDependencies: + vue: ^2.6.14 || ^3.2.0 + w3c-xmlserializer@5.0.0: resolution: { @@ -7724,6 +7735,10 @@ snapshots: optionalDependencies: typescript: 5.5.4 + vueperslides@3.5.1(vue@3.5.10(typescript@5.5.4)): + dependencies: + vue: 3.5.10(typescript@5.5.4) + w3c-xmlserializer@5.0.0: dependencies: xml-name-validator: 5.0.0 diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 21808d3..a4e0897 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -48,5 +48,5 @@ const login_title = computed(() => {
- + diff --git a/frontend/src/assets/news.json b/frontend/src/assets/news.json new file mode 100644 index 0000000..84d4787 --- /dev/null +++ b/frontend/src/assets/news.json @@ -0,0 +1,32 @@ +[ + { + "id": 1, + "url": "https://www.dkfz.de", + "text": "News item #1: some text about a paper written that used predicTCR. Click on this text to open the associated link." + }, + { + "id": 2, + "url": "https://www.dkfz.de", + "text": "News item #2: some text about a paper written that used predicTCR." + }, + { + "id": 3, + "url": "https://www.dkfz.de", + "text": "News item #3: some text about a paper written that used predicTCR." + }, + { + "id": 4, + "url": "https://www.dkfz.de", + "text": "News item #4: some text about a paper written that used predicTCR." + }, + { + "id": 5, + "url": "https://www.dkfz.de", + "text": "News item #5: some text about a paper written that used predicTCR." + }, + { + "id": 6, + "url": "https://www.dkfz.de", + "text": "News item #6: some text about a paper written that used predicTCR." + } +] diff --git a/frontend/src/components/CarouselComponent.vue b/frontend/src/components/CarouselComponent.vue new file mode 100644 index 0000000..3d1b77c --- /dev/null +++ b/frontend/src/components/CarouselComponent.vue @@ -0,0 +1,24 @@ + + + diff --git a/frontend/src/components/FooterComponent.vue b/frontend/src/components/FooterComponent.vue index 08730fc..690d316 100644 --- a/frontend/src/components/FooterComponent.vue +++ b/frontend/src/components/FooterComponent.vue @@ -4,7 +4,6 @@ import { FwbFooterCopyright, FwbFooterLinkGroup, FwbFooterLink, - FwbFooterBrand, } from "flowbite-vue"; diff --git a/frontend/src/components/vueperslides.d.ts b/frontend/src/components/vueperslides.d.ts new file mode 100644 index 0000000..67995cf --- /dev/null +++ b/frontend/src/components/vueperslides.d.ts @@ -0,0 +1,4 @@ +declare module "vueperslides" { + class VueperSlides extends DefineComponent {} + class VueperSlide extends DefineComponent {} +} diff --git a/frontend/src/views/AboutView.vue b/frontend/src/views/AboutView.vue index 00bebca..f16fe17 100644 --- a/frontend/src/views/AboutView.vue +++ b/frontend/src/views/AboutView.vue @@ -6,6 +6,7 @@ import ListItem from "@/components/ListItem.vue"; import LoginComponent from "@/components/LoginComponent.vue"; import SignupComponent from "@/components/SignupComponent.vue"; import { RouterLink } from "vue-router"; +import CarouselComponent from "@/components/CarouselComponent.vue"; const showModalLogin = ref(false); function closeModals() { showModalSignup.value = false; @@ -29,7 +30,7 @@ function openModalSignup() { header-classes="text-slate-100" sub-text="Prediction of tumor-reactive T cells and TCRs from scRNA-seq data." sub-text-classes="text-slate-300" - class="mb-4 bg-slate-800 bg-splash bg-no-repeat bg-center bg-cover md:rounded-lg" + class="mb-4 bg-slate-800 bg-splash bg-no-repeat bg-center bg-cover md:rounded-lg py-0 lg:py-0 pt-8 lg:pt-8" >
+