Form: Avatar

<form id="-form" class="fw__wrapper" onsubmit="window.ga && ga( 'send', 'event', 'Community');" method="post" novalidate>
    <fieldset data-toggle="avatar-fw__step" class="fw__inputs o-divider avatar-fw__step u-pl-none u-pr-none u-pt-large u-pb-large">
        <div class=" u-text-center">

            <div class="c-form-avatar u-relative u-m-auto">
                <svg class="u-absolute u-overflow-hidden" style="width: 0; height: 0;">
                    <defs>
                        <clipPath id="mask" clipPathUnits="objectBoundingBox">
                            <path d="M0.5,1 C0.856900994,1 1,0.856900994 1,0.5 C1,0.143099006 0.856900994,0 0.5,0 C0.143099006,0 0,0.143099006 0,0.5 C0,0.856900994 0.143099006,1 0.5,1 Z" />
                        </clipPath>
                    </defs>
                </svg>
                <input class="u-none" type="file" name="image" accept="image/*" />
                <div class="c-form-avatar__mask u-size-full"></div>
                <div class="c-form-avatar__uploader u-absolute u-cursor-pointer u-p-xsmall u-radius-circle u-border-none" aria-labelledby="image" aria-describedby="image">
                    <svg class="o-icon o-icon--md o-link-text">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-upload-cloud"></use>
                    </svg>
                </div>
            </div>

            <script>
                const UPLOAD_BUTTON = document.querySelector(".c-form-avatar__uploader");
                const FILE_INPUT = document.querySelector("input[type=file]");
                const AVATAR = document.querySelector(".c-form-avatar__mask");
                UPLOAD_BUTTON.addEventListener("click", () => FILE_INPUT.click());
                FILE_INPUT.addEventListener("change", event => {
                    const file = event.target.files[0];
                    const reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onloadend = () => {
                        AVATAR.setAttribute("aria-label", file.name);
                        AVATAR.style.background = `url(${reader.result}) center center/cover`;
                    };
                });
            </script>

        </div>
    </fieldset>
</form>
<form id="{{item.slug}}-form" class="fw__wrapper" onsubmit="window.ga && ga( 'send', 'event', 'Community');" method="post"novalidate>
	<fieldset data-toggle="{{type}}-fw__step" class="fw__inputs o-divider {{type}}-fw__step u-pl-none u-pr-none u-pt-large u-pb-large">
		<div class="{% if error %}c-form-error{% endif %} u-text-center">
			{% render "@input--avatar",{
				margin: 'u-m-auto',
        label: 'FALSE'
			},true %}
		</div>
	</fieldset>
</form>
{
  "limit": 9,
  "stories": [
    {
      "index": 1,
      "title": "Coronavirus, la fase 2 tra sicurezza e libertà: tutte le idee per ripartire",
      "label": "Emergenza Coronavirus",
      "date": "ieri pomeriggio, 15:51",
      "author": "Violetto Gorrasi",
      "number": 1,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/51380415156697/coronavirus-ansa-4-2-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/51380415156697/coronavirus-ansa-4-2-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 2,
      "title": "Casa di riposo degli orrori: anziani legati e bastonati. Le immagini shock",
      "label": "Sei arresti",
      "date": "ieri pomeriggio, 15:51",
      "author": "Matteo Scarlino",
      "number": 2,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/19878683460037/casa-di-riposo-palermo-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/19878683460037/casa-di-riposo-palermo-ansa-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 3,
      "title": "Coronavirus, negli Usa 2.500 morti in un giorno ma Trump \"ha fretta\" di riaprire",
      "label": "Esteri",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 3,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/31908412136750/donald-trump-coronavirus-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/31908412136750/donald-trump-coronavirus-ansa-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 4,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Ginevra Nozzoli",
      "number": 4,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 5,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Veronica Altimari",
      "number": 5,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 6,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Alberto Berlini",
      "number": 6,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 7,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Ginevra Nozzoli",
      "number": 7,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 8,
      "title": "Muore annegato nella piscina comunale il giorno prima di compiere 7 anni",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 8,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/65846868204321/pisicina-comunale-ansa-archivio-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/65846868204321/pisicina-comunale-ansa-archivio-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 9,
      "title": "Riceve il reddito di cittadinanza, ma ha 40 case e percepisce 120mila euro d'affitto",
      "label": "Economia",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 9,
      "summary": "L'uomo è stato denunciato dalla Guardia di finanza a Lanciano, in provincia di Chieti. Gli immobili affittati, oltre quindici, secondo le Fiamme Gialle rendevano alla famiglia del beneficiario del sussidio oltre 120mila euro all'anno",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    }
  ],
  "opinions": [
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "17 luglio, 2020",
      "author": "Carlo Sala"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "12 luglio, 2020",
      "author": "Massimiliano Dona"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "30 giugno, 2020",
      "author": "Luciano Lanna"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "05 giugno, 2020",
      "author": "Marilia Parente"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "27 maggio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "13 aprile, 2020",
      "author": "Rossella Lamina"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "11 aprile, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "04 marzo, 2020",
      "author": "Luciano Lanna"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "18 febbraio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "01 febbraio, 2020",
      "author": "Rossella Lamina"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "25 gennaio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "05 gennaio, 2020",
      "author": "Luciano Lanna"
    }
  ],
  "googlePlayStoreImg": "/assets/images/site/app/google_play_store.svg",
  "iosAppStoreImg": "/assets/images/site/app/ios_app_store.svg",
  "type": "avatar"
}

Forms templates

Items templates are used to display forms.

Parameters

  • type - toggle input email/phone, accepted values: login, logout, recovery, delete, activate, signup, edit, lead
  • mode - toggle input email/phone, accepted values: email, phone, social, user,
  • zoneRequired - toggle required zone fieldset, accepted values: bolean

Variants

  1. Default - Unused
  2. Login - Used for login form
  3. Logout - Used for logout form
  4. Delete - Used for delete account
  5. Recovery - Used for recovery credentials
  6. Activate - Used for activate account
  7. Signup - Used for new account registration
  8. Edit - Used for edit user profile
  9. Lead - Used for marketing lead generation