spacelabdev / spacelab-react Goto Github PK

Should dynamically create the proper SQL query based on user input. Return should be JSON. Ticket #7 should be completed first.

Helpful links:
https://exoplanetarchive.ipac.caltech.edu/docs/program_interfaces.html

https://exoplanetarchive.ipac.caltech.edu/docs/TAP/usingTAP.html

https://exoplanetarchive.ipac.caltech.edu/TAP/tables

Include text from UX team, as well as images from figme

This should not change any of the styling, although changes to the css may be necessary to maintain current styling.

Currently this style sheet is written desktop first with media queries for tablet and mobile. After completion it should be mobile first with media queries for tablet and desktop.

Tablet:
@media (min-width: 767px) and (max-width: 1023px) {}

Desktop:
@media (min-width: 1024px) {}

Basic layout based on the UX/UI team figma. Functional components are not within the scope of this ticket. Should include "{component name} Coming Soon" return wherever a functional component will be.

Adds alphabet group filters as seen in UX wireframes. Updates glossary terms to be clickable links. Clicking the term reveals the description.

This is the text that should be added:

As diversity fuels creativity and innovation, we here at SpaceLab strongly value the voices and perspectives of those underrepresented in the community. One of our goals is to create paid fellowships, internships, scholarship opportunities, and debt relief for those who are underrepresented, including but not limited to women, members of the LGBTQ+ community, and people of color. Helping members of the community who struggle economically will provide them with the liberty and flexibility necessary to explore new career paths in science and technology. To help us grow these opportunities, please consider making a tax-deductible donation to SpaceLab today.

Basic layout based on the UX/UI team figma. Functional components are not within the scope of this ticket. Should include "{component name} Coming Soon" return wherever a functional component will be.

Create the hero image title component for use on each page. Should include the space background image and all other stylings from the UX/UI team. Should dynamically grab the page name from the url so that the page title in the image automatically updates on changing to a new page. Most likely will be where the nav bat is imported.

Create landing page

It should be green

Nav Bar component based on UX/UI team Figma designs. This ticket should not be assigned until #5
has been completed.

Implements dynamic search bar. As the user enters characters, list of potential options should adjust to include only terms matching the characters which have been entered so far.

Create media queries for mobile and tablet screen sizes.

@media (min-width: 767px) and (max-width: 1023px) {}

@media (max-width: 766px) {}

Hero Image, Nav Bar, and Footer are not inclusive in this task.

Should be self standing component that can be dropped into any page. This does not need to be built from scratch. There are a number of companies that provide drop in contact forms. Formspree is a good example of one.

Create media queries for mobile and tablet screen sizes.

@media (min-width: 767px) and (max-width: 1023px) {}

@media (max-width: 766px) {}

Hero Image, Nav Bar, and Footer are not inclusive in this task.

Should display a basic list of all glossary terms. Basic CSS formatting.

Create media queries for mobile and tablet screen sizes.

@media (min-width: 767px) and (max-width: 1023px) {}

@media (max-width: 766px) {}

See Figma for details on Hamburger Nav

Create media queries for mobile and tablet screen sizes.

@media (min-width: 767px) and (max-width: 1023px) {}

@media (max-width: 766px) {}

Hero Image, Nav Bar, and Footer are not inclusive in this task.

Create Projects page based on Wireframes. Should be created mobile first with @media queries for tablet and desktop

Create media queries for mobile and tablet screen sizes.

@media (min-width: 767px) and (max-width: 1023px) {}

@media (max-width: 766px) {}

Hero Image, Nav Bar, and Footer are not inclusive in this task.

Should be completed after tickets #96, https://github.com/spacelabdev/spacelab-react/issues/97 and #99

Update footer with new page links and Social Media icons. See figma page:
https://www.figma.com/file/qiv8wfcRSUdNxd5oVWTBh1/SPACELAB?node-id=1192%3A47202

Tickets #4 and #11 should be completed first

We need a blogging client for our writer. Shouldn't be too hard to build out in house, and could be an interesting project. Once it is up and running, we can implement a hidden page with a login and password that our bloggers can use to add content.

Doesn't need to be too fancy to start. Blog should be able to support one image at the top, a title, and properly formatted text.

Optionally, we could look for a plug and play blogging component that we could drop in. Bootstrap? Material-UI?

History wireframes are available in the Figma file under Developers About Page - Production
https://www.figma.com/file/qiv8wfcRSUdNxd5oVWTBh1/SPACELAB?node-id=1192%3A44369

This ticket does not include any additional changes to the About page.

History should be a stand alone section within the About directory, and should be built mobile first with scss media queries added for tablet and desktop sizes.

Create media queries for mobile and tablet screen sizes.

@media (min-width: 767px) and (max-width: 1023px) {}

@media (max-width: 766px) {}

New image is in Figma file. Should be added in place of Discovery table, and in center of blog page.

Do not delete faqSection.js as this will be used later when we actually have FAQ content to add. Simply remove this file from being rendered by about.js

The most recent blog, A Beginner's Guide to the Cosmos is pushing the tile to be wider than it should be. Title text should wrap to second line.

Basic layout based on the UX/UI team figma. Functional components are not within the scope of this ticket. Should include "{component name} Coming Soon" return wherever a functional component will be.

See wireframe in Figma:
https://www.figma.com/file/qiv8wfcRSUdNxd5oVWTBh1/SPACELAB?node-id=1223%3A45108

The under construction has already been created as a component that can be quickly dropped into the page.

Create table to display discovery page search results.

Do not delete exploreSection.js or featuredArticlesSection.js from the project. Simply remove them from being rendered by home.js

Update We're Spacelab section to include 5 collapsable sections.

1. Board of Directors
2. Operation
3. Software engineering
4. Ux Design
5. Marketing

Board of Directors should default to open. The rest should be closed by default. See new figma wireframes:
https://www.figma.com/file/qiv8wfcRSUdNxd5oVWTBh1/SPACELAB?node-id=1192%3A44369

This will also require updating/adding arrays of objects in aboutHelper.js to reflect the new distribution of team member images.

Should be built mobile first and optimized for tablet and desktop as well using sass media queries.

This ticket requires the completion of tickets #96 and https://github.com/spacelabdev/spacelab-react/issues/97 first.

This should be created as its own file and then imported to home.js. Lorem Ipsem content is fine for now.

We do not currently have the ability to accept donations, but hope to have that soon. Donate button should be clickable, however when clicked a message should appear below it that says we are unable to accept donations at this time. Please contact us for more information.

The words 'contact us' should be a clickable link to our contact page.

See Figma wireframes:
https://www.figma.com/file/qiv8wfcRSUdNxd5oVWTBh1/SPACELAB?node-id=1192%3A52417

Indicators are the dots or dashes at the bottom of a slider that show which image in the set you are currently viewing. This is present in the HTML, but not currently displaying for some reason.

Implement React-router for app routing.

Basic layout based on the UX/UI team figma. Functional components are not within the scope of this ticket. Should include "{component name} Coming Soon" return wherever a functional component will be.

This should be component and live in the components directory as we may want to use it in other places in the future.

Image can be found in figma:
https://www.figma.com/file/qiv8wfcRSUdNxd5oVWTBh1/SPACELAB?node-id=1192%3A51877

Should be a self standing component that can easily be dropped in to any page. The About Navigation link should be functional, but News Letter subscription field and additional links that we do not currently have pages or wireframes for do not need to function.

There are a few different ways that you could do this, TLDR: we should do the second one.

1. The placeholder image will need to be added to each element in the glossaryTermsArray within glossaryHelper.js. glossaryListItem.js will then need to be updated to display the image.

2. Instead of adding the placeholder image to glossaryTermsArray, within glossaryListItem.js you could check to see if glossaryTerm[2] exists. If so, display that image. If not, default to the placeholder image.

My preference is for the second method. It is cleaner and means that we don't need to update the terms array. It also means that any future terms we add without images will automatically be assigned the placeholder image when the term is rendered.

Create functional Introduction component for home page. Ticket #1 should be completed first. This should include a carousel with each element containing an image as well as verbiage about what/who spacelab is, our mission, and our motivations. See this example: https://www.bluesquad.co/about

Create media queries for mobile and tablet screen sizes.

@media (min-width: 767px) and (max-width: 1023px) {}

@media (max-width: 766px) {}

This includes the creation of the log in form, as well as the logic for verifying the login and passwords. Ticket #4 should be completed first

Should mirror UX wireframes. Reach out to UX team for background image, planet with moons graphic, and content verbiage.

Remove contact form from About page. Create new page for Contact form. Update successful submission response to match Figma wireframes:
https://www.figma.com/file/qiv8wfcRSUdNxd5oVWTBh1/SPACELAB?node-id=1192%3A46047

Basic layout based on the UX/UI team figma. Functional components are not within the scope of this ticket. Should include "{component name} Coming Soon" return wherever a functional component will be.

Add Contact page

Create Discovery Page Table #62 Should be completed first