From 63fdb4627ae594fa83daad90031c96a5f40d6413 Mon Sep 17 00:00:00 2001 From: Daniel Pan <57362494+daniel-panhead@users.noreply.github.com> Date: Wed, 6 Sep 2023 17:47:41 -0700 Subject: [PATCH 01/20] Initial page setup --- src/components/NavBar.vue | 4 ++-- src/router/index.ts | 8 ++++++++ src/views/ELSIView.vue | 19 +++++++++++++++++++ 3 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 src/views/ELSIView.vue diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue index 244a6b3..77a80d7 100644 --- a/src/components/NavBar.vue +++ b/src/components/NavBar.vue @@ -20,7 +20,7 @@ let transitionAnimation = 'transition duration-100 ease-in' Biomod Logo
- ELSI + ELSI Teams Sponsors
@@ -70,7 +70,7 @@ let transitionAnimation = 'transition duration-100 ease-in' Home Ideas Notebook - ELSI + ELSI Teams Sponsors diff --git a/src/router/index.ts b/src/router/index.ts index 4ec1925..03e5cb5 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -2,6 +2,8 @@ import { createRouter, createWebHistory } from 'vue-router' import HomeView from '@/views/HomeView.vue' import IdeasView from '@/views/IdeasView.vue' import TeamView from '@/views/TeamView.vue' +import ELSIView from '@/views/ELSIView.vue' + const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), @@ -18,6 +20,12 @@ const router = createRouter({ component: IdeasView }, + { + path: '/elsi', + name: 'elsi', + component: ELSIView + }, + { path: '/team', name: 'team', diff --git a/src/views/ELSIView.vue b/src/views/ELSIView.vue new file mode 100644 index 0000000..9969777 --- /dev/null +++ b/src/views/ELSIView.vue @@ -0,0 +1,19 @@ + + + \ No newline at end of file From 4962b15caef38965d6aadeacf0c428586c89b41c Mon Sep 17 00:00:00 2001 From: Daniel Pan <57362494+daniel-panhead@users.noreply.github.com> Date: Mon, 11 Sep 2023 17:36:16 -0700 Subject: [PATCH 02/20] Create elsi card gallery --- src/App.vue | 2 +- src/assets/main.css | 2 +- src/components/ELSICard.vue | 11 +++ src/components/ELSICardGallery.vue | 134 +++++++++++++++++++++++++++++ src/router/index.ts | 1 - src/views/ELSIView.vue | 55 +++++++++--- src/views/HomeView.vue | 9 +- 7 files changed, 190 insertions(+), 24 deletions(-) create mode 100644 src/components/ELSICard.vue create mode 100644 src/components/ELSICardGallery.vue diff --git a/src/App.vue b/src/App.vue index 1e3d692..e89724b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,7 +6,7 @@ import Footer from '@/components/Footer.vue' diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 0e54c94..a2b8f3e 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -110,9 +110,7 @@ const scrollToTop = () => { @apply w-full bg-no-repeat; background-image: url('../assets/homepage_bg_rot_mobile.png'), url('../assets/homepage_bg_top_mobile.png'); - background-position: - -2% 5%, - right 6%; + background-position: -2% 5%, right 6%; } @media only screen and (min-width: 1024px) { @@ -120,10 +118,7 @@ const scrollToTop = () => { @apply w-full bg-no-repeat; background-image: url('../assets/homepage_bg_rot.png'), url('../assets/homepage_bg_top.png'), url('../assets/homepage_bg.png'); - background-position: - -2% 5%, - right 5%, - right 25%; + background-position: -2% 5%, right 5%, right 25%; } } From 737764aab99d54cc4712da67692372a327d17422 Mon Sep 17 00:00:00 2001 From: Daniel Pan <57362494+daniel-panhead@users.noreply.github.com> Date: Fri, 15 Sep 2023 23:15:13 -0700 Subject: [PATCH 03/20] Implement card selection logic --- src/components/ELSI/Doctors.vue | 34 +++++++++++++ src/components/ELSI/ELSICard.vue | 16 ++++++ src/components/{ => ELSI}/ELSICardGallery.vue | 50 +++++++++++++------ src/components/ELSICard.vue | 11 ---- src/views/ELSIView.vue | 37 +++----------- 5 files changed, 91 insertions(+), 57 deletions(-) create mode 100644 src/components/ELSI/Doctors.vue create mode 100644 src/components/ELSI/ELSICard.vue rename src/components/{ => ELSI}/ELSICardGallery.vue (84%) delete mode 100644 src/components/ELSICard.vue diff --git a/src/components/ELSI/Doctors.vue b/src/components/ELSI/Doctors.vue new file mode 100644 index 0000000..55632e7 --- /dev/null +++ b/src/components/ELSI/Doctors.vue @@ -0,0 +1,34 @@ + + + \ No newline at end of file diff --git a/src/components/ELSI/ELSICard.vue b/src/components/ELSI/ELSICard.vue new file mode 100644 index 0000000..a4df828 --- /dev/null +++ b/src/components/ELSI/ELSICard.vue @@ -0,0 +1,16 @@ + + + diff --git a/src/components/ELSICardGallery.vue b/src/components/ELSI/ELSICardGallery.vue similarity index 84% rename from src/components/ELSICardGallery.vue rename to src/components/ELSI/ELSICardGallery.vue index c2486ee..5166735 100644 --- a/src/components/ELSICardGallery.vue +++ b/src/components/ELSI/ELSICardGallery.vue @@ -1,13 +1,24 @@ \ No newline at end of file diff --git a/src/components/ELSI/categories/Hospitals.vue b/src/components/ELSI/categories/Hospitals.vue index fdaa228..0b914f7 100644 --- a/src/components/ELSI/categories/Hospitals.vue +++ b/src/components/ELSI/categories/Hospitals.vue @@ -12,19 +12,10 @@ clinically but there may still be ethical considerations and differences between different medical practitioners willingness to administer a new drug to patients with little known long-term effects.

-

Concerns

+

Potential Non-Researcher Response

- This includes the ethical implications of using a new drug that has not been tested for long-term side effects on patients. - In order to be able to use the enzymosomes to degrade bacterial biofilms in patients, there will be testing prior to application - clinically but there may still be ethical considerations and differences between different medical practitioners willingness to - administer a new drug to patients with little known long-term effects. -

-

Concerns

-

- This includes the ethical implications of using a new drug that has not been tested for long-term side effects on patients. - In order to be able to use the enzymosomes to degrade bacterial biofilms in patients, there will be testing prior to application - clinically but there may still be ethical considerations and differences between different medical practitioners willingness to - administer a new drug to patients with little known long-term effects. + A negative connotation amongst doctors and medical practitioners could lead to reduced willingness for patients to use the drug + in addition to it not being administered to patients that could potentially benefit from the treatment.

\ No newline at end of file diff --git a/src/components/ELSI/categories/ResearchFacilities.vue b/src/components/ELSI/categories/ResearchFacilities.vue index 02005df..12fa934 100644 --- a/src/components/ELSI/categories/ResearchFacilities.vue +++ b/src/components/ELSI/categories/ResearchFacilities.vue @@ -7,24 +7,13 @@

Issues for Researchers

Concerns

- This includes the ethical implications of using a new drug that has not been tested for long-term side effects on patients. - In order to be able to use the enzymosomes to degrade bacterial biofilms in patients, there will be testing prior to application - clinically but there may still be ethical considerations and differences between different medical practitioners willingness to - administer a new drug to patients with little known long-term effects. + The concern with research facilities will be the impact of the waste products both on the people working with the enzymosomes in research facilities and for the environment as well. + The waste products that are produced must be monitored for potential health impacts on researchers as well as harmful effects they could have during disposal both to the facility and to the environment.

-

Concerns

+

Potential Non-Researcher Response

- This includes the ethical implications of using a new drug that has not been tested for long-term side effects on patients. - In order to be able to use the enzymosomes to degrade bacterial biofilms in patients, there will be testing prior to application - clinically but there may still be ethical considerations and differences between different medical practitioners willingness to - administer a new drug to patients with little known long-term effects. -

-

Concerns

-

- This includes the ethical implications of using a new drug that has not been tested for long-term side effects on patients. - In order to be able to use the enzymosomes to degrade bacterial biofilms in patients, there will be testing prior to application - clinically but there may still be ethical considerations and differences between different medical practitioners willingness to - administer a new drug to patients with little known long-term effects. + There may be reluctance for labs in general to take on projects relating to enzymosomes if there are huge concerns for ethical implications of the product as a whole and on the environment. + If these concerns are made public then it would have an impact on the users of the product as well as they will be more reluctant to use a product that is ethically ambiguous.

\ No newline at end of file diff --git a/src/components/ELSI/categories/Universities.vue b/src/components/ELSI/categories/Universities.vue index 02005df..0e93a1f 100644 --- a/src/components/ELSI/categories/Universities.vue +++ b/src/components/ELSI/categories/Universities.vue @@ -7,24 +7,18 @@

Issues for Researchers

Concerns

- This includes the ethical implications of using a new drug that has not been tested for long-term side effects on patients. - In order to be able to use the enzymosomes to degrade bacterial biofilms in patients, there will be testing prior to application - clinically but there may still be ethical considerations and differences between different medical practitioners willingness to - administer a new drug to patients with little known long-term effects. + In order to create enzymosomes, universities and research facilities must obtain materials from various sources, which are usually chemical suppliers. + Some of these suppliers may obtain these materials in a way that is considered unethical, such as through harming humans or other organisms. + Alternatively, the company itself may support unethical practices, meaning that purchasing their products would be indirectly supporting these practices.

-

Concerns

+

Potential Non-Researcher Response

- This includes the ethical implications of using a new drug that has not been tested for long-term side effects on patients. - In order to be able to use the enzymosomes to degrade bacterial biofilms in patients, there will be testing prior to application - clinically but there may still be ethical considerations and differences between different medical practitioners willingness to - administer a new drug to patients with little known long-term effects. + People dislike supporting unethically produced innovations, which may lead to backlash regardless of how beneficial the technology could be. + This may lead to boycotts and wariness of the product, lessening its positive impact.

-

Concerns

+

- This includes the ethical implications of using a new drug that has not been tested for long-term side effects on patients. - In order to be able to use the enzymosomes to degrade bacterial biofilms in patients, there will be testing prior to application - clinically but there may still be ethical considerations and differences between different medical practitioners willingness to - administer a new drug to patients with little known long-term effects. + Rebuttal: A background check on material sources and suppliers can be easily performed to ensure that any materials used are ethically sound.

\ No newline at end of file From 22801fa478efd11ca5dd870d01b5bb40c237669a Mon Sep 17 00:00:00 2001 From: Daniel Pan <57362494+daniel-panhead@users.noreply.github.com> Date: Tue, 26 Sep 2023 15:08:49 -0700 Subject: [PATCH 08/20] Add citation for agriculture content --- src/components/ELSI/categories/Agriculture.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/ELSI/categories/Agriculture.vue b/src/components/ELSI/categories/Agriculture.vue index 76192c5..6e61f47 100644 --- a/src/components/ELSI/categories/Agriculture.vue +++ b/src/components/ELSI/categories/Agriculture.vue @@ -21,5 +21,8 @@ Rebuttal: It is not difficult to ensure that the production and use of enzymosomes remains far from key biofilms of the food industry. A protocol for enzymosome “spills” or “leaks” can also be developed to minimize the impact of any enzymosomes on these biofilms.

+ +
+ Olanbiwoninu, A., & Popoola, B. (2022). Biofilms and their impact on the food industry. Saudi Journal of Biological Sciences, 103523. \ No newline at end of file From 4e6d374827560ef642fd5497475965e019f44dce Mon Sep 17 00:00:00 2001 From: daniel-panhead Date: Tue, 26 Sep 2023 22:09:59 +0000 Subject: [PATCH 09/20] Prettified Code! --- .../ELSI/categories/Agriculture.vue | 56 ++++++++++--------- 1 file changed, 31 insertions(+), 25 deletions(-) diff --git a/src/components/ELSI/categories/Agriculture.vue b/src/components/ELSI/categories/Agriculture.vue index 6e61f47..d1e6498 100644 --- a/src/components/ELSI/categories/Agriculture.vue +++ b/src/components/ELSI/categories/Agriculture.vue @@ -1,28 +1,34 @@ - + \ No newline at end of file +
+ Olanbiwoninu, A., & Popoola, B. (2022). Biofilms and their impact on the food industry. Saudi + Journal of Biological Sciences, 103523. + + From a1038a958c42a67d6b4063f3be056e0302df5790 Mon Sep 17 00:00:00 2001 From: Daniel Pan <57362494+daniel-panhead@users.noreply.github.com> Date: Tue, 26 Sep 2023 15:11:05 -0700 Subject: [PATCH 10/20] Prettify all the code --- src/components/ELSI/ELSICard.vue | 15 +- src/components/ELSI/ELSICardGallery.vue | 119 +++++++------- src/components/ELSI/categories/Businesses.vue | 38 ++--- src/components/ELSI/categories/Home.vue | 68 ++++---- .../ELSI/categories/HospitalLab.vue | 68 ++++---- src/components/ELSI/categories/Hospitals.vue | 39 ++--- .../ELSI/categories/ResearchFacilities.vue | 38 +++-- .../ELSI/categories/Universities.vue | 46 +++--- .../ELSI/graphics/AgricultureGraphic.vue | 153 ++++++++++++------ .../ELSI/graphics/BusinessesGraphic.vue | 33 ++-- src/components/ELSI/graphics/HomesGraphic.vue | 41 +++-- .../ELSI/graphics/HospitalLabsGraphic.vue | 62 ++++--- .../ELSI/graphics/HospitalsGraphic.vue | 22 ++- .../graphics/ResearchFacilitiesGraphic.vue | 57 ++++--- .../ELSI/graphics/UniversitiesGraphic.vue | 61 +++++-- src/views/ELSIView.vue | 33 ++-- 16 files changed, 535 insertions(+), 358 deletions(-) diff --git a/src/components/ELSI/ELSICard.vue b/src/components/ELSI/ELSICard.vue index a4df828..04f4bfa 100644 --- a/src/components/ELSI/ELSICard.vue +++ b/src/components/ELSI/ELSICard.vue @@ -1,12 +1,17 @@ diff --git a/src/components/ELSI/categories/Businesses.vue b/src/components/ELSI/categories/Businesses.vue index c779153..47d779d 100644 --- a/src/components/ELSI/categories/Businesses.vue +++ b/src/components/ELSI/categories/Businesses.vue @@ -1,20 +1,22 @@ - + \ No newline at end of file +
+

Issues for Marketers

+

Concerns

+

+ Because there is potential for this project to be commercialized and it is based on a + combination of pre-existing concepts, there is a concern over whether doing so will violate + any intellectual property over the concepts involved. Intellectual property is important + because it helps to ensure that those involved in creating these concepts receive the credit + for and benefits of their efforts. Thus, it is important that any intellectual property + involved is respected when commercializing any application of these concepts. +

+

Potential Non-Researcher Response

+

+ If existing intellectual property is not properly respected, the resulting commercial product + may face public backlash in addition to legal and ethical issues, as it would be seen as + trying to unfairly profit from the work of others. +

+
+ diff --git a/src/components/ELSI/categories/Home.vue b/src/components/ELSI/categories/Home.vue index 2afb1ff..e3571c7 100644 --- a/src/components/ELSI/categories/Home.vue +++ b/src/components/ELSI/categories/Home.vue @@ -1,30 +1,42 @@ - + \ No newline at end of file +
+

Issues for General Public

+

Concerns

+

+ One possible application of the enzymosome is in healthcare to treat biofilms in patients, + such as those with cystic fibrosis. With the development of a new treatment, it is natural + that the general public–both those receiving treatment and not–may have concerns about the + possible short-term and long-term risks the project may pose, and how safe it is for everyone + that may directly or indirectly come in contact with it. Particularly since our enzyme has a + very general target of DNA, which is present everywhere and not just in affected patients, + even individuals or things not intended to receive the treatment may also be affected. So, it + is necessary to consider how we can mitigate possible risks, and all possible groups that + could be affected. +

+

Potential Non-Researcher Response

+

+ Patients could be worried about the risks of receiving a treatment involving our project and + whether there are risks for individuals around them as well. This apprehension could + discourage individuals affected by cystic fibrosis from receiving treatment due to the + potential risks outweighing the benefits, and other members of the general public may + disapprove if they are worried they themselves may be affected by secondhand effects. +

+
+

+ Rebuttal: To mitigate concerns, we could regularly monitor patients after they have + received treatment to see if any of the common symptoms of cystic fibrosis worsen (ie. severe + cough, lung infections, etc.) during trials to ensure the safety of our product. The + monitoring would need to occur over a long period of time to also study possible long-term + effects of treatment. We should also take care to monitor the effects on individuals in + regular contact with patients (ie. family, friends, staff administering treatment, etc.) to + ensure there is no negative effect on them as well. Additionally, experimentation for how our + enzymosomes perform in the presence of other non-target DNA to imitate how it functions in + non-controlled conditions could be attempted to develop an idea of how our project may + indirectly affect the environment. If any side effects posing significant health concerns do + arise, we would have to develop a treatment plan for patients and those around them before + continuing to test or distribute our enzymosomes. +

+
+ diff --git a/src/components/ELSI/categories/HospitalLab.vue b/src/components/ELSI/categories/HospitalLab.vue index fe56df1..0746140 100644 --- a/src/components/ELSI/categories/HospitalLab.vue +++ b/src/components/ELSI/categories/HospitalLab.vue @@ -1,30 +1,42 @@ - + \ No newline at end of file +
+

Issues for Patients

+

Concerns

+

+ As we prepare treatment for testing, it raises questions focused on the ethics of who should + receive initial trials and treatment involving our enzymosomes. Should we try to make it + useful for as many people as possible or focus on treating certain demographics more + effectively? If we are targeting certain groups, who and why? What groups are disadvantaged + during testing stages? +

+

Potential Non-Reseracher Response

+

+ Patients may be dissatisfied that some people are able to receive the test treatments and + benefit first, and become frustrated with us and our research. There could also be negative + reactions from regions that would struggle to receive treatment, either they are too rural to + be regularly monitored or low income and lack the necessary equipment. +

+
+

+ Rebuttal: If we have to target certain demographics due to cost restraints for example, + we can base our target demographic on the groups of people and regions most affected by + bacterial biofilms. This would allow us to immediately distribute our treatment to and assist + as many people as possible who are the most impacted. This would also have the additional + benefit of allowing us to conduct more trials and collect data studying the effectiveness of + treatment. We should also consider the ability of the community to benefit from treatment when + considering which demographic to target for trials, so we should research whether there are + certain demographics that are better suited for receiving initial trial stages of treatment, + or if there are others that are at a higher risk and more susceptible to being affected by + negative side effects. To combat the possibility of certain demographics perhaps being unable + to receive the treatment we can also try to reach out to rural communities or low-income + regions that are likely to have more difficulties accessing the treatment but would greatly + benefit (due to how long hospital stays and cost of treatment currently are for cystic + fibrosis treatments). Also, during testing, we can still try to run trials on members of other + groups outside our target demographic to see what adjustments should be made to ensure a + diverse range of people can benefit, and if any risks do arise we can investigate if all + demographics are equally affected. +

+
+ diff --git a/src/components/ELSI/categories/Hospitals.vue b/src/components/ELSI/categories/Hospitals.vue index 0b914f7..e42aeb5 100644 --- a/src/components/ELSI/categories/Hospitals.vue +++ b/src/components/ELSI/categories/Hospitals.vue @@ -1,21 +1,22 @@ - + \ No newline at end of file +
+

Issues for Doctors

+

Concerns

+

+ This includes the ethical implications of using a new drug that has not been tested for + long-term side effects on patients. In order to be able to use the enzymosomes to degrade + bacterial biofilms in patients, there will be testing prior to application clinically but + there may still be ethical considerations and differences between different medical + practitioners willingness to administer a new drug to patients with little known long-term + effects. +

+

Potential Non-Researcher Response

+

+ A negative connotation amongst doctors and medical practitioners could lead to reduced + willingness for patients to use the drug in addition to it not being administered to patients + that could potentially benefit from the treatment. +

+
+ diff --git a/src/components/ELSI/categories/ResearchFacilities.vue b/src/components/ELSI/categories/ResearchFacilities.vue index 12fa934..da911b6 100644 --- a/src/components/ELSI/categories/ResearchFacilities.vue +++ b/src/components/ELSI/categories/ResearchFacilities.vue @@ -1,19 +1,23 @@ - + \ No newline at end of file +
+

Issues for Researchers

+

Concerns

+

+ The concern with research facilities will be the impact of the waste products both on the + people working with the enzymosomes in research facilities and for the environment as well. + The waste products that are produced must be monitored for potential health impacts on + researchers as well as harmful effects they could have during disposal both to the facility + and to the environment. +

+

Potential Non-Researcher Response

+

+ There may be reluctance for labs in general to take on projects relating to enzymosomes if + there are huge concerns for ethical implications of the product as a whole and on the + environment. If these concerns are made public then it would have an impact on the users of + the product as well as they will be more reluctant to use a product that is ethically + ambiguous. +

+
+ diff --git a/src/components/ELSI/categories/Universities.vue b/src/components/ELSI/categories/Universities.vue index 0e93a1f..bc67796 100644 --- a/src/components/ELSI/categories/Universities.vue +++ b/src/components/ELSI/categories/Universities.vue @@ -1,24 +1,26 @@ - + \ No newline at end of file +
+

Issues for Researchers

+

Concerns

+

+ In order to create enzymosomes, universities and research facilities must obtain materials + from various sources, which are usually chemical suppliers. Some of these suppliers may obtain + these materials in a way that is considered unethical, such as through harming humans or other + organisms. Alternatively, the company itself may support unethical practices, meaning that + purchasing their products would be indirectly supporting these practices. +

+

Potential Non-Researcher Response

+

+ People dislike supporting unethically produced innovations, which may lead to backlash + regardless of how beneficial the technology could be. This may lead to boycotts and wariness + of the product, lessening its positive impact. +

+
+

+ Rebuttal: A background check on material sources and suppliers can be easily performed + to ensure that any materials used are ethically sound. +

+
+ diff --git a/src/components/ELSI/graphics/AgricultureGraphic.vue b/src/components/ELSI/graphics/AgricultureGraphic.vue index 1012f91..f67975d 100644 --- a/src/components/ELSI/graphics/AgricultureGraphic.vue +++ b/src/components/ELSI/graphics/AgricultureGraphic.vue @@ -1,57 +1,108 @@ \ No newline at end of file + + + + + + + + + + + + + + + + + + diff --git a/src/components/ELSI/graphics/BusinessesGraphic.vue b/src/components/ELSI/graphics/BusinessesGraphic.vue index 175402e..c2deeb2 100644 --- a/src/components/ELSI/graphics/BusinessesGraphic.vue +++ b/src/components/ELSI/graphics/BusinessesGraphic.vue @@ -1,18 +1,27 @@ \ No newline at end of file + + + + + diff --git a/src/components/ELSI/graphics/HomesGraphic.vue b/src/components/ELSI/graphics/HomesGraphic.vue index 30dd368..f68c6e9 100644 --- a/src/components/ELSI/graphics/HomesGraphic.vue +++ b/src/components/ELSI/graphics/HomesGraphic.vue @@ -1,21 +1,32 @@ \ No newline at end of file + + + + + + diff --git a/src/components/ELSI/graphics/HospitalLabsGraphic.vue b/src/components/ELSI/graphics/HospitalLabsGraphic.vue index f5f9e80..ab21032 100644 --- a/src/components/ELSI/graphics/HospitalLabsGraphic.vue +++ b/src/components/ELSI/graphics/HospitalLabsGraphic.vue @@ -1,30 +1,44 @@ \ No newline at end of file + + + + + + + + + + + diff --git a/src/components/ELSI/graphics/HospitalsGraphic.vue b/src/components/ELSI/graphics/HospitalsGraphic.vue index 7eca8e5..00cfd19 100644 --- a/src/components/ELSI/graphics/HospitalsGraphic.vue +++ b/src/components/ELSI/graphics/HospitalsGraphic.vue @@ -1,14 +1,20 @@ \ No newline at end of file + + + + diff --git a/src/components/ELSI/graphics/ResearchFacilitiesGraphic.vue b/src/components/ELSI/graphics/ResearchFacilitiesGraphic.vue index 6bd29d8..741aa3c 100644 --- a/src/components/ELSI/graphics/ResearchFacilitiesGraphic.vue +++ b/src/components/ELSI/graphics/ResearchFacilitiesGraphic.vue @@ -1,27 +1,42 @@ \ No newline at end of file + + + + + + + + + + + + + + + diff --git a/src/components/ELSI/graphics/UniversitiesGraphic.vue b/src/components/ELSI/graphics/UniversitiesGraphic.vue index 4e82edf..24204be 100644 --- a/src/components/ELSI/graphics/UniversitiesGraphic.vue +++ b/src/components/ELSI/graphics/UniversitiesGraphic.vue @@ -1,22 +1,51 @@ \ No newline at end of file + + + + + + + + + diff --git a/src/views/ELSIView.vue b/src/views/ELSIView.vue index dce3ef4..fded86a 100644 --- a/src/views/ELSIView.vue +++ b/src/views/ELSIView.vue @@ -11,41 +11,41 @@ import Businesses from '@/components/ELSI/categories/Businesses.vue' const categories = [ { - name: "Hospitals", + name: 'Hospitals', component: Hospitals }, { - name: "Universities", + name: 'Universities', component: Universities }, { - name: "Agriculture", + name: 'Agriculture', component: Agriculture }, { - name: "Home", + name: 'Home', component: Home }, { - name: "Research Facilities", + name: 'Research Facilities', component: ResearchFacilities }, { - name: "Hospital Lab", + name: 'Hospital Lab', component: HospitalLab }, { - name: "Businesses", + name: 'Businesses', component: Businesses } ] -let currentSelection = ref(0); +let currentSelection = ref(0) let increasing = ref(true) -const fromRightAnim = "translate-x-1/4 opacity-0" -const fromLeftAnim = "-translate-x-1/4 opacity-0" -const activeAnim="transition duration-200 ease-in-out" +const fromRightAnim = 'translate-x-1/4 opacity-0' +const fromLeftAnim = '-translate-x-1/4 opacity-0' +const activeAnim = 'transition duration-200 ease-in-out' const setSelection = (num: number) => { if (num >= currentSelection.value) increasing.value = true @@ -71,10 +71,14 @@ const setSelection = (num: number) => { :enter-active-class="activeAnim" :leave-active-class="activeAnim" > -

{{ categories[currentSelection].name }}

+

+ {{ categories[currentSelection].name }} +

- -
+ +
{
- From d021cf7eefa0275a85f484a0f51f6320224b05d7 Mon Sep 17 00:00:00 2001 From: Daniel Pan <57362494+daniel-panhead@users.noreply.github.com> Date: Fri, 29 Sep 2023 00:24:12 -0700 Subject: [PATCH 11/20] Fix ELSI content header center on mobile --- src/views/ELSIView.vue | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/views/ELSIView.vue b/src/views/ELSIView.vue index fded86a..09000f5 100644 --- a/src/views/ELSIView.vue +++ b/src/views/ELSIView.vue @@ -71,9 +71,11 @@ const setSelection = (num: number) => { :enter-active-class="activeAnim" :leave-active-class="activeAnim" > -

- {{ categories[currentSelection].name }} -

+ +

+ {{ categories[currentSelection].name }} +

+
Date: Fri, 29 Sep 2023 00:24:20 -0700 Subject: [PATCH 12/20] Fix ELSI content header center on mobile --- src/views/ELSIView.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/ELSIView.vue b/src/views/ELSIView.vue index 09000f5..5dd64c1 100644 --- a/src/views/ELSIView.vue +++ b/src/views/ELSIView.vue @@ -45,7 +45,7 @@ let increasing = ref(true) const fromRightAnim = 'translate-x-1/4 opacity-0' const fromLeftAnim = '-translate-x-1/4 opacity-0' -const activeAnim = 'transition duration-200 ease-in-out' +const activeAnim = 'transition duration-150 ease-in-out' const setSelection = (num: number) => { if (num >= currentSelection.value) increasing.value = true @@ -71,8 +71,8 @@ const setSelection = (num: number) => { :enter-active-class="activeAnim" :leave-active-class="activeAnim" > - -

+ +

{{ categories[currentSelection].name }}

From 230c548bd96341bf32cdecee46bf2c6a7444fadb Mon Sep 17 00:00:00 2001 From: daniel-panhead Date: Fri, 29 Sep 2023 07:25:40 +0000 Subject: [PATCH 13/20] Prettified Code! --- src/views/ELSIView.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/views/ELSIView.vue b/src/views/ELSIView.vue index 5dd64c1..ee73f3a 100644 --- a/src/views/ELSIView.vue +++ b/src/views/ELSIView.vue @@ -72,7 +72,9 @@ const setSelection = (num: number) => { :leave-active-class="activeAnim" > -

+

{{ categories[currentSelection].name }}

From 3ba04fcc849cc58ecef5065943e331f3fa6725cb Mon Sep 17 00:00:00 2001 From: Daniel Pan <57362494+daniel-panhead@users.noreply.github.com> Date: Fri, 29 Sep 2023 00:33:19 -0700 Subject: [PATCH 14/20] Improve gallery content spacing responsiveness --- src/views/ELSIView.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/ELSIView.vue b/src/views/ELSIView.vue index 5dd64c1..3c40210 100644 --- a/src/views/ELSIView.vue +++ b/src/views/ELSIView.vue @@ -63,7 +63,7 @@ const setSelection = (num: number) => { -
+
Date: Sun, 1 Oct 2023 22:45:20 -0700 Subject: [PATCH 15/20] Break title text when screen too small --- src/views/ELSIView.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/ELSIView.vue b/src/views/ELSIView.vue index f152f49..bd360af 100644 --- a/src/views/ELSIView.vue +++ b/src/views/ELSIView.vue @@ -71,7 +71,7 @@ const setSelection = (num: number) => { :enter-active-class="activeAnim" :leave-active-class="activeAnim" > - +

From d13ad81adb1e77a6d35dce3bf5cacee6c34f1a87 Mon Sep 17 00:00:00 2001 From: daniel-panhead Date: Mon, 2 Oct 2023 05:54:19 +0000 Subject: [PATCH 16/20] Prettified Code! --- THEME.md | 17 ++++++++++------- src/views/HomeView.vue | 9 +++++++-- tailwind.config.js | 4 ++-- 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/THEME.md b/THEME.md index 86414f9..73d5077 100644 --- a/THEME.md +++ b/THEME.md @@ -8,11 +8,11 @@ The slate grey color, dark homepage color, and gold color can be accessed with t ```html
-

Title

+

Title

-

Body

+

Body

``` @@ -20,7 +20,7 @@ The notebook text and bubble background colors can be accessed with the `noteboo ```html
-

Body

+

Body

``` @@ -31,9 +31,12 @@ The Montserrat and Fira Sans fonts have been added to the project. Montserrat ha The `text-title` and `text-title-sm` classes will give the text a large title font size and semibold font weight. The `text-subtitle` and `text-subtitle-sm` classes will give the text a medium font size and normal font weight. Use the `-sm` version as the default and the non `-sm` version on the `lg:` breakpoint. ```html -

Title

-

Subtitle

-

Body

+

Title

+ +

Subtitle

+ +

Body

+ ``` -Note that the default font color has been set to `text-grey-50`. \ No newline at end of file +Note that the default font color has been set to `text-grey-50`. diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index ccd1f19..805dc52 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -110,7 +110,9 @@ const scrollToTop = () => { @apply w-full bg-no-repeat; background-image: url('../assets/homepage_bg_rot_mobile.png'), url('../assets/homepage_bg_top_mobile.png'); - background-position: -2% 5%, right 6%; + background-position: + -2% 5%, + right 6%; } @media only screen and (min-width: 1024px) { @@ -118,7 +120,10 @@ const scrollToTop = () => { @apply w-full bg-no-repeat; background-image: url('../assets/homepage_bg_rot.png'), url('../assets/homepage_bg_top.png'), url('../assets/homepage_bg.png'); - background-position: -2% 5%, right 5%, right 25%; + background-position: + -2% 5%, + right 5%, + right 25%; } } diff --git a/tailwind.config.js b/tailwind.config.js index b56b85c..c1875cd 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -22,14 +22,14 @@ module.exports = { fontWeight: '600' } ], - 'title': [ + title: [ '5rem', { fontWeight: '600' } ], 'subtitle-sm': ['1.2rem'], - 'subtitle': ['1.35rem'] + subtitle: ['1.35rem'] } } }, From b57f7925837376394639a52d663d9fd006c2d422 Mon Sep 17 00:00:00 2001 From: Daniel Pan <57362494+daniel-panhead@users.noreply.github.com> Date: Sat, 7 Oct 2023 14:39:58 -0700 Subject: [PATCH 17/20] Add hand graphic to elsi --- src/components/ELSI/HandSVG.vue | 359 ++++++++++++++++++++++++++++++++ src/views/ELSIView.vue | 6 +- 2 files changed, 364 insertions(+), 1 deletion(-) create mode 100644 src/components/ELSI/HandSVG.vue diff --git a/src/components/ELSI/HandSVG.vue b/src/components/ELSI/HandSVG.vue new file mode 100644 index 0000000..3bdbeff --- /dev/null +++ b/src/components/ELSI/HandSVG.vue @@ -0,0 +1,359 @@ + + + \ No newline at end of file diff --git a/src/views/ELSIView.vue b/src/views/ELSIView.vue index bd360af..b94023a 100644 --- a/src/views/ELSIView.vue +++ b/src/views/ELSIView.vue @@ -8,6 +8,7 @@ import Home from '@/components/ELSI/categories/Home.vue' import ResearchFacilities from '@/components/ELSI/categories/ResearchFacilities.vue' import HospitalLab from '@/components/ELSI/categories/HospitalLab.vue' import Businesses from '@/components/ELSI/categories/Businesses.vue' +import HandSVG from '@/components/ELSI/HandSVG.vue' const categories = [ { @@ -56,7 +57,7 @@ const setSelection = (num: number) => { From df7fb3f9aae46d8f58cba6f23707a6dcd6d94521 Mon Sep 17 00:00:00 2001 From: Daniel Pan <57362494+daniel-panhead@users.noreply.github.com> Date: Mon, 9 Oct 2023 00:16:26 -0700 Subject: [PATCH 18/20] Make ELSI background gradient --- src/views/ELSIView.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/ELSIView.vue b/src/views/ELSIView.vue index b94023a..6611b2c 100644 --- a/src/views/ELSIView.vue +++ b/src/views/ELSIView.vue @@ -56,9 +56,9 @@ const setSelection = (num: number) => {