search

IATI / IATI-Pattern-Library

Web style components built in conjunction with the new IATI brand
https://iati.github.io/IATI-Pattern-Library/
MIT License
1 stars 2 forks source link

T00 Homepage updates #122

Closed benjamincoleman closed 2 years ago

benjamincoleman commented 5 years ago

Designs:

http://iati.surge.sh/page-templates/0-home

Video variation: http://iati.surge.sh/page-templates/0b-home-video

In general there is a desire to make it more dynamic, by which I mean don't show the same things all of the time.

Sketches: https://marvelapp.com/4cfjg52/screen/61443821 ← updated

Also a variant where we pull the About IATI video up to the hero: https://marvelapp.com/4cfjg52/screen/61316619

benjamincoleman commented 5 years ago

For twitter - https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/profile-timeline

BenDarby commented 5 years ago

@benjamincoleman I've updated the homepage design, it seemed like the design changes were towards the bottom as the elements towards the top were around content? You can see it here: http://iati.surge.sh/page-templates/0-home

Video variation: http://iati.surge.sh/page-templates/0b-home-video

benjamincoleman commented 5 years ago

@BenDarby on the homepage video variant, can we have the .hero__caption more around 50% width, and the .hero__media around 50% too, so the video is larger.

Would also be worth balancing it vertically with some negative margin so it's vertically centred in the hero.

benjamincoleman commented 5 years ago

@BenDarby Also have an updated sketch of the hompage with different configuration for news - https://marvelapp.com/4cfjg52/screen/61443821

benjamincoleman commented 5 years ago

UNDP Ideas:

  1. Rotating quotes with a carousel - I've pushed back on this

  2. IATI in action section - to be discussed

  3. Remove partner section - pushed back on this

  4. Add Tools section - to be discussed

https://docs.google.com/document/d/1xQ-h3NCoz9WyQUY-IoTVISQOfuFIVe82RkfQkZkdGoY/edit#bookmark=id.a9xt1po5plab

benjamincoleman commented 4 years ago

Changes:

benjamincoleman commented 4 years ago

@BenDarby can you make the changes above to the homepage. I've updated the sketch here: https://marvelapp.com/4cfjg52/screen/61443821

BenDarby commented 4 years ago

Updated both homepage templates on PL

urlsangel commented 4 years ago

Home page data model additions

Header module
    header_video: urlfield, optional, translated

Stats module
    testimonial: foreignkey, required
        Testimonial snippet
            image: foreignkey, optional
            quote: textfield, required, translated
            quotee: charfield, required, translated

    activities_description: textfield, required, translated
    organisations_description: textfield, required, translated

Getting started module
    getting_started_title: charfield, required, translated, default: 'Getting started'

    getting_started_items: inlinepanel (poss streamfield if not working with WTM), max_num: 3
        image: foreignkey, required
        title: charfield, required, translated
        description: textfield, required, translated
        page: foreignkey, required
        link_label: charfield, required, translated

About IATI module
    about_iati_title: charfield, required, translated, default: 'About IATI'
    about_iati_description: textfield, required, translated
    about_iati_video: urlfield, required, translated
    about_iati_page: foreignkey, required
    about_iati_link_label: charfield, required, translated, default: 'Find out more about IATI'

IATI in action module
    iati_in_action_title: charfield, required, translated, default: 'IATI in action'
    iati_in_action_description: textfield, optional, translated

    iati_in_action_featured_item: inlinepanel (poss streamfield if not working with WTM), max_num: 1
        page: foreignkey, required
        title: charfield, optional, translated (fallback to page title)
        description: textfield, optional, translated (fallback to page excerpt)
        image: foreignkey, optional (fallback to page image)
        quote:  textfield, optional, translated
        quoteee:  charfield, optional, translated

    iati_in_action_items: inlinepanel (poss streamfield if not working with WTM), max_num: 2
        page: foreignkey, required
        title: charfield, optional, translated (fallback to page title)
        description: textfield, optional, translated (fallback to page excerpt)

IATI tools module
    iati_tools_title: charfield, required, translated, default: 'Iati tools'
    iati_tools_title_description: textfield, optional, translated

    iati_tools_items: inlinepanel, max_num: 2
        page: foreignkey, required

Latest news module (lists the 3 most recent news items, embeds tweet timeline based on TWITTER_HANDLE in base.py) 
    latest_news_title: charfield, required, translated, default: 'Latest news'
    latest_news_link_label: charfield, required, translated, default: 'View all news'
    latest_news_tweets_title: charfield, required, translated, default: 'Tweets'