GDL - Global Design Language

Arguments 

<div class="c-tab c-tab--desktop u-p-none">

    <label for="nav-form-radio" class="u-flex u-column u-items-center o-link-text u-cursor-pointer u-none">nav</label>
    <label for="content-form-radio" class="u-flex u-column u-items-center o-link-text u-cursor-pointer u-none">content</label>

    <!-- tabs module -->
    <div class="u-size-full u-border-none">
        <div class="l-double l-double--reverse u-grid">
            <input checked type="radio" value="mail" id="nav-form-radio" class="u-none" name="c-page__choice">
            <div class="l-double__aside u-relative c-tab__content">
                <ul class="u-list-none u-list-reset l-list-border u-label-07">

                </ul>
            </div>
            <input type="radio" value="mail" id="content-form-radio" class="u-none" name="c-page__choice">
            <div class="form-body l-double__main c-tab__content">
                <!-- user edit form -->

                <!-- form -->

                <script async defer src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"></script>
                <script>
                    let map, infoWindow;

                    function initMap() {
                        // map = new google.maps.Map(document.querySelector('data-map="mapLocation"'), {
                        map = new google.maps.Map(document.getElementById("mapCanvas"), {
                            center: {
                                lat: 41.9028,
                                lng: 12.4964
                            },
                            zoom: 5,
                        });
                        // infoWindow = new google.maps.InfoWindow();
                    }

                    function getLocation() {
                        if (navigator.geolocation) {
                            navigator.geolocation.getCurrentPosition(
                                (position) => {
                                    const pos = {
                                        lat: position.coords.latitude,
                                        lng: position.coords.longitude,
                                    };

                                    function HTMLMarker(lat, lng) {
                                        this.lat = lat;
                                        this.lng = lng;
                                        this.pos = new google.maps.LatLng(lat, lng);
                                    }
                                    HTMLMarker.prototype = new google.maps.OverlayView();
                                    HTMLMarker.prototype.onRemove = function() {}
                                    //init your html element here
                                    HTMLMarker.prototype.onAdd = function() {
                                        div = document.createElement('DIV');
                                        div.className = "marker-pin";
                                        // div.innerHTML = "<img src='' alt=''>";
                                        var panes = this.getPanes();
                                        panes.overlayImage.appendChild(div);
                                    }
                                    HTMLMarker.prototype.draw = function() {
                                        var overlayProjection = this.getProjection();
                                        var position = overlayProjection.fromLatLngToDivPixel(this.pos);
                                        var panes = this.getPanes();
                                        panes.overlayImage.style.left = position.x + 'px';
                                        panes.overlayImage.style.top = position.y - 30 + 'px';
                                    }
                                    var htmlMarker = new HTMLMarker(this.lat, this.lng);
                                    htmlMarker.setMap(map);
                                    map.setCenter(pos);
                                    map.setZoom(16);
                                },
                                () => {
                                    handleLocationError(true, infoWindow, map.getCenter());
                                }
                            );
                        } else {
                            handleLocationError(false, infoWindow, map.getCenter());
                        }
                    }

                    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
                        infoWindow.setPosition(pos);
                        infoWindow.setContent(
                            browserHasGeolocation ?
                            "Error: The Geolocation service failed." :
                            "Error: Your browser doesn't support geolocation."
                        );
                        infoWindow.open(map);
                    }
                    var toggleLocation = document.getElementById("findLocation");
                    if (toggleLocation.addEventListener) toggleLocation.addEventListener("click", getLocation, false);
                    else if (el.attachEvent) toggleLocation.attachEvent('onclick', getLocation);
                </script>

                <!-- user edit form -->
            </div>
        </div>
    </div>
    <!-- end tabs module -->
</div>
 
{% set prevStepForLabel = 'nav-form-radio' %}

<div class="c-tab c-tab--desktop u-p-none">

	<label for="nav-form-radio" class="u-flex u-column u-items-center o-link-text u-cursor-pointer u-none">nav</label>
	<label for="content-form-radio" class="u-flex u-column u-items-center o-link-text u-cursor-pointer u-none">content</label>
	
	<!-- tabs module -->
	<div class="u-size-full u-border-none">
		<div class="l-double l-double--reverse u-grid">
			<input checked type="radio" value="mail" id="nav-form-radio" class="u-none" name="c-page__choice">
			<div class="l-double__aside u-relative c-tab__content">
				<ul class="u-list-none u-list-reset l-list-border u-label-07">
					{% for item in userSettingsSections %}
					<li class="u-py-small">
						{% if item.label == "Scegli argomenti" %}
							<label for="content-form-radio" class="o-link-text-active u-label-04 u-no-underline u-cursor-pointer u-cursor-auto@md u-block u-flex u-justify-between u-items-center">
								<span>
									<svg class="u-mr-xsmall o-icon o-icon--sm">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#{{item.icon}}"></use>
									</svg>
									{{ item.label }}
									<svg class="o-icon o-icon--sm u-none@lg">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
									</svg>
								</span>
							</label>
						{% else %}
						<a href="{{ item.href }}" class="o-link-text u-label-04 u-no-underline u-cursor-pointer u-block u-flex u-justify-between u-items-center">
							<span>
								<svg class="u-mr-xsmall o-icon o-icon--sm">
									<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#{{item.icon}}"></use>
								</svg>
								{{ item.label }}
							</span>
							<svg class="o-icon o-icon--sm u-none@lg">
								<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
							</svg>
						</a>
						{% endif %}
					</li>
					{% endfor %}
				</ul>
			</div>
			<input type="radio" value="mail" id="content-form-radio" class="u-none" name="c-page__choice">
			<div class="form-body l-double__main c-tab__content">
				<!-- user edit form -->
				{% render "@form--edit-arguments", {
					type: type,
					page_title: page_title,
					actionLabel: actionLabel,
					succededImg: succededImg,
					zoneRequired: zoneRequired,
					userSettingsSections: userSettingsSections,
					prevStepForLabel: prevStepForLabel
				}, true %}
				<!-- user edit form -->
			</div>
		</div>
	</div>
	<!-- end tabs module -->
</div>
 
{
  "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"
    }
  ]
}

No notes defined.