Themes v1

[coriander31415]

• [x] branch 'themes'
• [x] render themes
• [x] render themes images
• [x] stylize template + adaptive
• [x] translation
• [x] send theme.id by click

Get GlobalGiving Themes - get Themes

Get Themes with Project Ids - get Themes with active Project Ids

• `animals` - Animal Welfare
• `children` - Child Protection
• `climate` - Climate Action
• democ - Peace and Reconciliation
• `disaster` - Disaster Response
• ecdev - Economic Growth
• `edu` - Education
• env - Ecosystem Restoration
• gender - Gender Equality
• `health` - Physical Health
• `human` - Ending Human Trafficking
• rights - Justice and Human Rights
• `sport` - Sport
• tech - Digital Literacy
• `hunger` - Food Security
• art - Arts and Culture
• lgbtq - LGBTQIA+ Equality
• `covid-19` - COVID-19
• `water` - Clean Water
• `disability` - Disability Rights
• endabuse - Ending Abuse
• mentalhealth - Mental Health
• justice - Racial Justice
• refugee - Refugee Rights
• reproductive - Reproductive Health
• housing - Safe Housing
• `agriculture` - Sustainable Agriculture
• `wildlife` - Wildlife Conservation

[coriander31415]

EN:

"THEME": {
    "TITLE": "These projects need your urgent attention:",
    "ANIMALS": "Animal Welfare",
    "CHILDREN": "Child Protection",
    "CLIMATE": "Climate Action",
    "DISASTER": "Disaster Response",
    "EDU": "Education",
    "HEALTH": "Physical Health",
    "HUMAN": "Ending Human Trafficking",
    "SPORT": "Sport",
    "HUNGER": "Food Security",
    "COVID-19": "COVID-19",
    "WATER": "Clean Water",
    "DISABILITY": "Disability Rights",
    "AGRICULTURE": "Sustainable Agriculture",
    "WILDLIFE": "Wildlife Conservation"
  }

UA:

"THEME": {
    "TITLE": "Ці проекти потребують вашої термінової уваги:",
    "ANIMALS": "Добробут тварин",
    "CHILDREN": "Захист дітей",
    "CLIMATE": "Кліматичні дії",
    "DISASTER": "Відповідь на катастрофу",
    "EDU": "Освіта",
    "HEALTH": "Фізичне здоров'я",
    "HUMAN": "Припинення торгівлі людьми",
    "SPORT": "Спорт",
    "HUNGER": "Запобігання голоду",
    "COVID-19": "COVID-19",
    "WATER": "Чиста вода",
    "DISABILITY": "Права інваліднів",
    "AGRICULTURE": "Стале сільське господарство",
    "WILDLIFE": "Охорона дикої природи"
  }

BY:

- [ ] @kastrubait, please check the translation:

"THEME": {
    "TITLE": "Гэтыя праекты патрабуюць вашай тэрміновай увагі:",
    "ANIMALS": "Дабрабыт жывёл",
    "CHILDREN": "Захіст дзяцей",
    "CLIMATE": "Кліматычныя дзеянні",
    "DISASTER": "Адказ на катастрофу",
    "EDU": "Асвіта",
    "HEALTH": "Фізічнае здароўе",
    "HUMAN": "Прыпыненне гандлю людзьмі",  // can it be shorten?
    "SPORT": "Спорт",
    "HUNGER": "Запабіганне галаду",
    "COVID-19": "COVID-19",
    "WATER": "Чыстая вада",
    "DISABILITY": "Правы інвалідаў",
    "AGRICULTURE": "Устойлівае земляробства",
    "WILDLIFE": "Ахова дзікай прыроды" // can it be shorten?
  }

[kastrubait]

"THEME": { "TITLE": "Гэтыя праекты патрабуюць неадкладнай вашай увагі:", "ANIMALS": "Дабрабыт жывёл", "CHILDREN": "Абарона дзяцей", "CLIMATE": "Клімат", "DISASTER": "Адказ на катастрофу", "EDU": "Адукацыя", "HEALTH": "Фізічнае здароўе", "HUMAN": "Гандаль людзьмі", "SPORT": "Спорт", "HUNGER": "Харчовая бяспека", "COVID-19": "COVID-19", "WATER": "Чыстая вада", "DISABILITY": "Правы інвалідаў", "AGRICULTURE": "Устойлівае земляробства", "WILDLIFE": "Ахова наваколля" }

[coriander31415]

Screenshots: EN:

BY

UA:

[coriander31415]

send theme.id from themes-list.component by click (testing):

src/app/base/components/themes-list/themes-list.component.ts

import { ... EventEmitter ... } from '@angular/core';
...
...
  @Output()
  theme = new EventEmitter<string>();

  selectTheme(id: string): void {
    this.theme.emit(id);
    setTimeout(() => { console.log(this.theme); }, 3000);
 }
...

src/app/base/components/themes-list/themes-list.component.html

...
    <li *ngFor="let theme of themesList">
      <div (click)="selectTheme(theme.id)">
        <img class="theme-img" src="{{ theme.img }}" alt="{{ theme.id }}">
        <p class="theme-name">{{ theme.name | translate}} </p>
      </div>
    </li>
...

src/app/base/pages/main-page/main-page.component.html

...
<app-themes-list (theme)="getTheme($event)"></app-themes-list>
...

src/app/base/pages/main-page/main-page.component.ts

...
 theme = '';
public getTheme(event): void {
    this.theme = event;
    console.log(this.theme);
  }
...