search

lifechurch / youversion-web-open-ideas

Ideas, problems, and puzzling things that are open for volunteer involvement. See the issues page for open ideas, and create a pull request if you have a solution!
https://www.youversion.com/volunteers/
Apache License 2.0
39 stars 18 forks source link

Create <TitleVideo /> Component #13

Closed michael-martin-al closed 6 years ago

michael-martin-al commented 6 years ago

Summary

Build a component for displaying a single title video card. In the attached screenshot, you can see four title video cards. Your job is to create a very similar user interface using only components from our melos component library: https://github.com/lifechurch/melos

You won't be able to recreate the exact look and feel that you see on the Bible.com videos page, but that's OK! 😄 What you see on Bible.com represents our old design style, but melos represents our newest design specs. I am sure you'll have questions, so feel free to ping me. We'll get one of our YouVersion designers to give you the final 👍 when you're done. So, you can expect there to be some back and forth work with them getting it just right.

Mock API Data

After #11 has been completed, there should be some mock data available to use while building your component. Instead of hard-coding the strings and images, you want to grab those from the mock api data. If you have questions about this, just make a comment here and we'll do our best to answer quickly.

This is what you're building

image

This is a screenshot with four title video components on the same page

image

FottyM commented 6 years ago

Will be doing this today

michael-martin-al commented 6 years ago

@FottyM It's all yours sir!

FottyM commented 6 years ago

@michael-martin-al 

import Card from '@youversion/melos/dist/components/containers/Card'
import LazyImage from '@youversion/melos/dist/components/images/LazyImage'

Is it possible to import all the needed components in one single implot instead of separated ones? Something like.

import {Card, LazyImage} from '@youversion/melos'

or maybe for separated components like typography

import {Heading1, etc...}  form '@youversion/melos/dist/components/typography/'

The documentation isn't really detailed about it or maybe I just couldn't find it 😅

michael-martin-al commented 6 years ago

We built it to handle single import only so that bundlers wouldn't bundle the whole library when you import one component. So, you'll have to import one component per line. Sorry about the inadequate documentation. Feel free to drop us a PR with some better docs where you think it would help on our melos repo.