Cards notizie

Cards per le notizie

Tutti gli elementi di tipo notizia vengono presentati con delle card. Questi elementi sono:

• gli articoli (accessibile dalla collezione Dato.articles)
• comunicati stampa (Dato.press_releases)
• interventi (Dato.participations)
• interviste (Dato.interviews)
• articoli medium (Dato.medium_articles)
• avvisi pubblici (Dato.announcements)

Ci sono dei partial sia per le singole card che contengono questi elementi che per i diversi layout con cui vengono presentati. I tre layout principali sono:

1. Lista di 3 elementi orizontale con swiper in mobile
2. Lista di 3 elementi verticali
3. Elementi "in evidenza" in alto alla homepage e alla pagina inistro

1. Layout orizzontale

Per inserire un layout con 3 card horizzontali occorre inserire il partial cards-horizontal-list passando la collezioni di elementi da mostrare come valore per la variabile items. Per ogni elemento il partial applica il card appropriato al tipo di elemento in maniera automatica.

Variabili (locals)

Le variabili items e btn_url sono necessarie, mentre tutte le altre sono opzionali. Come spiegato sopra, items corresponde alla collezione di elementi presi da Dato, mentre btn_url è l'url per il bottone che verrà mostrato sopra la lista di card (vedere la sezione "Bottone" in fondo). Per esemptio, questo partial ha il minimo di variabili necessarie:

= partial "partials/cards-horizontal-list",
  locals: {items: Dato.news,
  btn_url: dato.news_page}

Se si vuole mostrare un titolo per la sezione di card, è possibile assegnare una stringa alla variabille title in questo modo:

= partial "partials/cards-horizontal-list",
  locals: {items: Dato.news,
  btn_url: dato.news_page,
  title: "Sample Title"}

Per tutti gli elementi, compresi queli di tipo announcement è possibile passare un booleano per la variabile hide_shadow che di default ha il valore false.

= partial "partials/cards-horizontal-list",
  locals: {items: Dato.announcements,
  btn_url: Dato.announcements_page,
  hide_shadow: true}

Invece per gli elementi di tipoarticle, press_release, interview e participation è possibile pasare dei valore specifici per le seguenti variabili:

• large_title (boolean, default `nil')
• medium_title (boolean, default `nil')
• special_subtitle (stringa, default nil, se viene passata come true viene mostrata la fonte (source) per gli elementi di tipo interview)
• hide_image (boolean, default nil)
• unequal_height (boolean, default nil, passare true per avere card di altezza diversa)
• show_item_type (boolean, default nil, passare true per mostrare il tipo di elemento in alto a sinistra, e.g. articolo o comunicato stampa, ecc.)
• hide_shadow(boolean, default nil, passare true per togliere l'ombreggiatura della card)
• hide_tags (boolean, default false, passare true per nascondere i tags in fondo allineati a destra).

Mobile view

Il layout orizontale a 3 colonne viene mostrato con le card inserite dentro uno swiper in mobile con 3 puntini sotto per la paginazione. Lo swiper è inserito con il partial text-gallery-card e viene nascosto in desktop.

Bottone Scopri di più

Centrato sotto la lista orizontale a 3 colonne viene mostrato un bottone con label Scopri di più. Quando si inserisce il partial cards-horizontal-list è necessario passare un valore per la variabile btb_url in modo tale che questo valore venga a sua volta passato al partial responsabile di inserire l'url giusto nel bottone.

2. Layout verticale

Per inserire un layout con 3 card verticali occorre inserire il partial cards-vertical-list passando la collezioni di elementi alla variabile items. Come nel caso del layout orizontale, il partial chiama il card appropriato ad ogni tipo di elemento in maniera automatica.

Variabili locali (locals)

E' possibile pasare dei valori specific per le stesse variabili del layout orizzontale.

Mobile view

A differenza del layout orizzontale, il layout verticale non inserisce le card in uno swiper. Invece, le card vengono mostrate una sopra l'altra con una larghezza del 100%.

Bottone Scopri di più

In centro sotto la colonna di card viene mostrato un bottone con label Scopri di più. Come per il layout orizzontale, anche nel caso del layout verticale è necessario passare un valore per la variabile btb_url quando viene chiamato il partial cards-vertical-list in modo tale che questo valore venga a sua volta passato al partial che gestisce il bottone.

3. Layout degli elementi in evidenza

Questi elementi si trovano in alto alla homepage e alla pagina ministro. In questo caso il layout è definito nel partial featured-news che ha un control flow per 3 possibilità:

La prima è che ci sia un solo elemento nella sezione featured. In questo caso, l'elemento viene inserito in una card a tutta lunghezza usando il parziale card-featured.

La seconda possibilità è che ci siano più di un elemento e che il primo dei due nella collezione abbia un'immagine (image_cover). In questo caso, l'elemento con l'immagine viene mostrato a sinistra con lunghezza di 8 colonne tramite il partial card-featured, mentre il secondo viene mostrato a destra, senza immagine, tramite il partial card.

Infine, se c'è più di un elemento nella collezione ma il primo non ha immagini, vengono mostrate due card con lunghezza di 6 colonne ciascuna usando il parziale card.

Variabili locali

Quando si inserisce il parziale featured-news è possibile passare dei valori per 2 variabili:

• title (stringa, passare se si desidera mostrare un titolo per la sezione featured)
• show_item_type (boolean, default nil, passare true per mostrare il tipo di elemento in alto a sinistra)

Card per i singoli elementi

Gli elementi di tipo article, press_release, interview e participation vengono presentati usando lo stesso partial: card.

Invece, gli elementi di tipo announcement vengono inseriti tramite il partial card-avvisi-pubblici e gli elementi di tipo medium_article tramite il partial card-medium-elements.