Airport map: Area

Same as 2018

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-airport-map o-sliding-panel o-sliding-panel--airport-map c-airport-map--has-overlay">

    <div class="c-airport-map__list o-sliding-panel__list">
        <form action="../preview/page-airport-maps--search-results.html" class="c-form">
            <h3>Esplora la mappa</h3>
            <label for="search-field" class="  has-button" aria-label="">
                Cerca
                <input id="search-field" type="text" class="js-combobox " placeholder="" value="" aria-describedby="search-field-note" list="search-destinations" data-combobox-prefix-class="combobox" data-combobox-case-sensitive="no" data-combobox-search-option="containing" data-combobox-help-text="Premi il tasto TAB o le frecce direzionali per accedere e navigare attraverso i suggerimenti. Conferma la tua scelta col tasto INVIO, oppure premi il tasto ESC per chiudere la lista dei suggerimenti." data-suggestion-single="C'è " data-suggestion-plural="Ci sono " data-suggestion-word="Suggerimento" data-suggestion-word-plural="Suggerimenti" data-combobox-see-more-text="Guarda più risultati">
                <button type="submit" class="c-button c-button--submit c-button--searchIcon " aria-label="Avvia la ricerca">
                    <svg class="c-icon c-icon--18">
                        <use xlink:href="#ic_search_black_24px"></use>
                    </svg> </button>
                <datalist id="search-destinations">
                    <option value="Check in A">
                    <option value="Check in B">
                    <option value="Check in C">
                    <option value="Accettazione">
                    <option value="Cafè">
                    <option value="Bar Centrale">
                </datalist>
                <p class="c-field__note " id="search-field-note">
                    Cerca bar, negozi, parcheggi, servizi...
                </p>
            </label>
            <div class="c-airport-map__chip-list">
                <div class="c-chip ">

                    <a href="#">COVID-19</a>

                </div>
                <div class="c-chip ">

                    <span>ASSISTENZE SPECIALI</span>

                </div>
                <div class="c-chip ">

                    <span>TRASPORTI</span>

                </div>
            </div>

            <h3>Oppure filtra per area</h3>
            <label for="select-field" class="c-select-icon" aria-label="">
                AREA: <span class="required-marker" aria-hidden="true">*</span>
                <img src="../../images/svgs/icn_area_map.svg" alt="immagine selezione piano" aria-hidden="true">
                <select id="select-field" class="" aria-describedby="select-note">
                    <option value="" disabled selected>Seleziona area</option>
                    <option value="option-1">Aerostazione</option>
                    <option value="option-2">Parcheggi</option>
                    <option value="option-3">Trasporti</option>
                    <option value="option-4">Altre aree esterne</option>
                </select>
                <em class="c-field__note u-visuallyhidden" id="select-note">
                    Seleziona una opzione dal menù a tendina
                </em>
            </label>
        </form>

    </div>

    <div class="c-airport-map__main o-sliding-panel__main">

        <div class="c-airport-map__pic">

            <div class="c-airport-map__overlay">
                <img src="/images/svgs/ill-bagaglio-a-mano.svg" alt="Info Covid-19" aria-hidden="true">
                <h3>In quale area vuoi cercare?</h3>
                <div>Scegli qui a fianco tra Aerostazione, parcheggi, <br>trasporti o aree esterne.</div>
            </div>

            <ul id="status"></ul>

            <p aria-label="Bologna airport map" class="u-visuallyhidden">Bologna airport map</p>
            <div id="map" class="c-airport-map__canvas">
            </div>

            <div class="c-suggestion c-suggestion--geolocation active">

                <img src="../../images/svgs/stk_location.svg" alt="Attiva le convenzioni">

                <div class="c-suggestion__text">
                    <strong>Ti trovi in aeroporto</strong>
                    <p>
                        Geolocalizzazione attiva
                    </p>
                </div>

            </div>

            <div class="c-dialog c-dialog--conventions js-fr-dialogmodal " id="dialog-conventions">
                <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-conventions-title">
                    <div role="document">

                        <p class="c-dialog__title" id="dialog-conventions-title">Convenzioni</p>

                        <p class="c-dialog__subtitle">
                            Controlla se puoi ottenere dei prezzi dedicati a te.
                        </p>

                        <div class="c-form">

                            <label for="select-conventions" class="" aria-label="">
                                Convenzione:
                                <select id="select-conventions" class="" aria-describedby="select-conventions-note">
                                    <option value="" disabled selected>Seleziona l&#x27;accreditamento di cui far parte</option>
                                    <option value="option-1">Alba Tour</option>
                                    <option value="option-2">Alpitour</option>
                                    <option value="option-3">Brixia Viaggi</option>
                                    <option value="option-4">Club Med</option>
                                    <option value="option-5">Domina Travel</option>
                                    <option value="option-6">In Viaggi</option>
                                    <option value="option-7">Marsupio Group</option>
                                    <option value="option-8">Smeg S.p.A.</option>
                                    <option value="option-9">Viaggi Idea</option>
                                </select>
                                <em class="c-field__note u-visuallyhidden" id="select-conventions-note">
                                    Seleziona un'opzione dal menù a tendina
                                </em>
                            </label>
                            <p class="c-dialog__text">
                                <strong>AVVISO IMPORTANTE</strong><br>
                                1) Per avvalersi della convenzione e della tariffa scontata, è indispensabile, al rientro dal viaggio, prima di pagare e di ritirare l'auto, consegnare il voucher del Tour Operator o mostrare la tessera di accreditamento alla cassa del <a href="#"><strong>Presidio Parcheggi</strong></a>.
                                <br><br>
                                2) La mancata o ritardata consegna del voucher o visione della tessera di accreditamento, ovvero dopo aver pagato la sosta alle casse automatiche o alle colonne di uscita, implica la perdita del diritto di avvalersi della tariffa scontata e l'applicazione della tariffa standard senza possibilità di rimborso.
                                <br><br>

                                <input type="checkbox" id="conventions-terms" name="accespt" class="u-visuallyhidden " role="group" aria-label="conventions-terms">

                                <label for="conventions-terms" class="terms-conditions">
                                    <strong>Accetto le condizioni di utilizzo convenzione come sopra riportate</strong>
                                </label>
                            </p>

                            <div class="c-dialog__action">
                                <button type="button" class="c-button c-button--submit c-button--large">

                                    Attiva convenzione

                                </button>
                            </div>

                        </div>

                        <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                            <svg class="c-icon c-icon--32">
                                <use xlink:href="#ic_close_black_24px"></use>
                            </svg> </button>

                    </div>
                </div>
            </div>
            <div class="c-airport-map__position">
                <span>Ops...forse ti sei spostato troppo dall'aeroporto?</span>
                <button type="button" class="c-button c-button--adding" data-toggle="data-toggle">

                    Centra la mappa sull'aeroporto

                </button>
            </div>

        </div>
    </div>

</div>


        <div class="c-airport-map o-sliding-panel o-sliding-panel--airport-map {{ modifier }}">
  
  {{!-- Left side panel --}}
  <div class="c-airport-map__list o-sliding-panel__list">
    <form action="{{ path form-action-url }}" class="c-form">
      <h3>Esplora la mappa</h3>
      {{> @autocomplete search-field }}
      <div class="c-airport-map__chip-list">
      {{#each empty-chips }}
        {{> @chip }}
      {{/each}}
      </div>   


      <h3>Oppure filtra per area</h3>
      {{> @select select-area }}
    </form>

  </div>
  
  {{!-- Map  --}}      
  <div class="c-airport-map__main o-sliding-panel__main">
    
    <div class="c-airport-map__pic">

      <div class="c-airport-map__overlay">
        <img src="{{ img-src }}" alt="{{ img-alt }}" aria-hidden="true">
        <h3>In quale area vuoi cercare?</h3>
        <div>Scegli qui a fianco tra Aerostazione, parcheggi, <br>trasporti o aree esterne.</div>
      </div>

      <ul id="status"></ul>

      <p aria-label="Bologna airport map" class="u-visuallyhidden">Bologna airport map</p>
      <div id="map" class="c-airport-map__canvas">
        {{!-- Map canvas  --}}      
      </div> 
      
      {{> @suggestion--default geolocation }}
      
      {{!-- if user is far from airport  --}}      
      <div class="c-airport-map__position">
        <span>{{{ map-position-text }}}</span>
        {{> @button--adding back-position }}
      </div>

    </div>
  </div>

</div>


        
            
            {
  "doorbell-category": [
    {
      "modifier": "c-doorbell--category",
      "category-color": "#B155C6",
      "img": {
        "src": "/images/svgs/icn-way-shopping.svg",
        "alt": "Shopping Area"
      },
      "title": "Shopping Area",
      "link": {
        "url": "/components/preview/page-airport-maps--category-selected",
        "text": "Guarda tutti"
      }
    },
    {
      "modifier": "c-doorbell--category",
      "category-color": "#86B337",
      "img": {
        "src": "/images/svgs/icn-way-ristorazione.svg",
        "alt": "Ristorazione"
      },
      "title": "Ristorazione",
      "link": {
        "url": "/components/preview/page-airport-maps--category-selected",
        "text": "Guarda tutti"
      }
    },
    {
      "modifier": "c-doorbell--category",
      "category-color": "#BC2026",
      "img": {
        "src": "/images/svgs/icn-way-controllo-passaporti.svg",
        "alt": "Servizi Aeroportuali"
      },
      "title": "Servizi Aeroportuali",
      "link": {
        "url": "/components/preview/page-airport-maps--category-selected",
        "text": "Guarda tutti"
      }
    },
    {
      "modifier": "c-doorbell--category",
      "category-color": "#FF8400",
      "img": {
        "src": "/images/svgs/icn-way-controllo-passaporti.svg",
        "alt": "Enti Aeroportuali"
      },
      "title": "Enti Aeroportuali",
      "link": {
        "url": "/components/preview/page-airport-maps--category-selected",
        "text": "Guarda tutti"
      }
    },
    {
      "modifier": "c-doorbell--category",
      "category-color": "#F0C000",
      "img": {
        "src": "/images/svgs/icn-way-ascensore.svg",
        "alt": "Ascensore"
      },
      "title": "Ascensore",
      "link": {
        "url": "/components/preview/page-airport-maps--category-selected",
        "text": "Guarda tutti"
      }
    },
    {
      "modifier": "c-doorbell--category",
      "category-color": "#F0C000",
      "img": {
        "src": "/images/svgs/icn-way-scala-mobile.svg",
        "alt": "Scala mobile"
      },
      "title": "Scala mobile",
      "link": {
        "url": "/components/preview/page-airport-maps--category-selected",
        "text": "Guarda tutti"
      }
    },
    {
      "modifier": "c-doorbell--category",
      "category-color": "#F0C000",
      "img": {
        "src": "/images/svgs/icn-way-scale.svg",
        "alt": "Scale"
      },
      "title": "Scale",
      "link": {
        "url": "/components/preview/page-airport-maps--category-selected",
        "text": "Guarda tutti"
      }
    },
    {
      "modifier": "c-doorbell--category",
      "category-color": "#00A0DB",
      "img": {
        "src": "/images/svgs/icn-way-toilette-donna-uomo.svg",
        "alt": "Toilette"
      },
      "title": "Toilette",
      "link": {
        "url": "/components/preview/page-airport-maps--category-selected",
        "text": "Guarda tutti"
      }
    },
    {
      "modifier": "c-doorbell--category",
      "category-color": "#000000",
      "img": {
        "src": "/images/svgs/icn-way-bus-taxi.svg",
        "alt": "Trasporti"
      },
      "title": "Trasporti",
      "link": {
        "url": "/components/preview/page-airport-maps--category-selected",
        "text": "Guarda tutti"
      }
    },
    {
      "modifier": "c-doorbell--category",
      "category-color": "#000000",
      "img": {
        "src": "/images/svgs/icn-way-biglietteria.svg",
        "alt": "Counter"
      },
      "title": "Counter",
      "link": {
        "url": "/components/preview/page-airport-maps--category-selected",
        "text": "Guarda tutti"
      }
    },
    {
      "modifier": "c-doorbell--category",
      "category-color": "#000000",
      "img": {
        "src": "/images/svgs/icn-way-event-seat.svg",
        "alt": "Chair"
      },
      "title": "Chair",
      "link": {
        "url": "/components/preview/page-airport-maps--category-selected",
        "text": "Guarda tutti"
      }
    }
  ],
  "form-action-url": "/components/preview/page-airport-maps--search-results",
  "search-field": {
    "label_id": "search-field",
    "label_message": "Cerca",
    "label_class": null,
    "atom-input": {
      "id": "search-field",
      "type": "text",
      "class": null,
      "placeholder": "",
      "required": false,
      "hasNote": true,
      "describedby": "search-field-note",
      "hasSubmitButton": true
    },
    "search-icon": {
      "class": "c-icon c-icon--18",
      "symbol": "ic_search_black_24px"
    },
    "autocomplete": {
      "datalist-id": "search-destinations",
      "prefix-class": "combobox",
      "case-sensitive": "no",
      "search-option": "containing",
      "help-text": "Premi il tasto TAB o le frecce direzionali per accedere e navigare attraverso i suggerimenti. Conferma la tua scelta col tasto INVIO, oppure premi il tasto ESC per chiudere la lista dei suggerimenti.",
      "options": [
        {
          "value": "Check in A"
        },
        {
          "value": "Check in B"
        },
        {
          "value": "Check in C"
        },
        {
          "value": "Accettazione"
        },
        {
          "value": "Cafè"
        },
        {
          "value": "Bar Centrale"
        }
      ]
    },
    "note_id": "search-field-note",
    "note_message": "Cerca bar, negozi, parcheggi, servizi...",
    "note_class": ""
  },
  "select": {
    "label_id": "select-field",
    "label_message": "Piano:",
    "label_class": "c-select-icon",
    "atom-select": {
      "id": "select-field",
      "class": null,
      "required": true,
      "hasIcon": true,
      "icon-path": "/images/svgs/ic_floors_map.svg",
      "icon-alt": "immagine selezione piano",
      "symbol": "ic_check_black_24px",
      "hasNote": true,
      "describedby": "select-note",
      "placeholder": "Seleziona un piano",
      "options": [
        {
          "value": "option-1",
          "text": "Piano terra"
        },
        {
          "value": "option-2",
          "text": "Primo piano"
        },
        {
          "value": "option-3",
          "text": "Parcheggi"
        }
      ]
    },
    "note_id": "select-note",
    "note_message": "Seleziona una opzione dal menù a tendina",
    "note_class": "u-visuallyhidden"
  },
  "back-position": {
    "name": "submit",
    "type": "button",
    "text": "Centra la mappa sull'aeroporto",
    "modifier": "c-button--adding",
    "data-toggle": "data-toggle"
  },
  "geolocation": {
    "title": "Ti trovi in aeroporto",
    "text": "Geolocalizzazione attiva",
    "icon-path": "/images/svgs/stk_location.svg",
    "icon-alt": "Attiva le convenzioni",
    "modifier": "c-suggestion--geolocation active"
  },
  "map-position-text": "Ops...forse ti sei spostato troppo dall'aeroporto?",
  "modifier": "c-airport-map--has-overlay",
  "img-src": "/images/svgs/ill-bagaglio-a-mano.svg",
  "img-alt": "Info Covid-19",
  "empty-chips": [
    {
      "has-link": true,
      "link-url": "#",
      "text": "COVID-19"
    },
    {
      "text": "ASSISTENZE SPECIALI"
    },
    {
      "text": "TRASPORTI"
    }
  ],
  "select-area": {
    "label_id": "select-field",
    "label_message": "AREA:",
    "label_class": "c-select-icon",
    "atom-select": {
      "id": "select-field",
      "class": null,
      "required": true,
      "hasIcon": true,
      "icon-path": "/images/svgs/icn_area_map.svg",
      "icon-alt": "immagine selezione piano",
      "symbol": "ic_check_black_24px",
      "hasNote": true,
      "describedby": "select-note",
      "placeholder": "Seleziona area",
      "options": [
        {
          "value": "option-1",
          "text": "Aerostazione"
        },
        {
          "value": "option-2",
          "text": "Parcheggi"
        },
        {
          "value": "option-3",
          "text": "Trasporti"
        },
        {
          "value": "option-4",
          "text": "Altre aree esterne"
        }
      ]
    },
    "note_id": "select-note",
    "note_message": "Seleziona una opzione dal menù a tendina",
    "note_class": "u-visuallyhidden"
  }
}

File:

Content:


                                .c-airport-map__list {
  padding: remify(16px);

  .c-airport-maps--detail & {
    display: none;
    
    @include min-screen (bp(tablet-p)) {
      display: block;
    }
  }

  h3 {
    font-weight: fw(regular);
    margin: remify(24px) 0 remify(16px);
    
    &:first-child {
      margin: 0 0 remify(16px);
      
      @include min-screen (bp(tablet-p)) {
        margin: remify(24px) 0 remify(16px);
      }
    }

  }

  a {
    display: block;
  }

	.c-accordion__img {
		width: 100%;
    max-width: remify(48px);
    //max-height: remify(48px);
	}
}

.c-airport-map__main {
  background-color: #fff;
  position: relative;

  .c-airport-maps--detail & {
    display: block;
    grid-area: initial;
    
    @include min-screen (bp(tablet-p)) {
      grid-area: map;
    }
  }
}

.c-airport-map__overlay {

  position: absolute;
  top: 0; 
  right:0;
  bottom:0;
  left:0;
  z-index: 10;
  background:  rgba( primary(night, 100), .8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;

  display: none;
  
  .c-airport-map--has-overlay & { display: flex; }

  h3 { 
    font-weight:700;
    margin-bottom: 10px;
  }
}

.c-airport-map__pic {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.c-airport-map__doc {
  position: absolute;
  bottom: remify(16px);
  left: remify(16px);

  p {
    margin-bottom: 0;
  }

}

.c-airport-map__position {
  display: none;
  
  @include min-screen (bp(tablet-p)) {
    position: absolute;
    bottom: remify(24px);
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    color: secondary(text,100);
  
    span {
      margin-bottom: remify(20px);
    }
  }
}

.c-airport-map__category {
  display: flex;
  align-items: center;
}

.c-airport-map__category-icon {
  width: remify(48px);
  min-width: remify(48px);
  height: remify(48px);
  border-radius: 50%;
  border: 3px solid;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  
  img {
    width: remify(24px);
    height: remify(24px);
  }
}

.c-airport-map__category-name {
  font-weight: fw(semibold);
  font-size: 125%;
  line-height: 1.4;
  margin-left: remify(24px);
}

.c-airport-map__detail {
  @include shadow(higher);
  background-color: #fff;
  color: secondary(text,100);
  border-radius: remify(6px);  
  
  h3 {
    font-weight: fw(semibold);
    font-size: 125%;
    line-height: 1.4;    
  }
  
  p {
    margin-bottom: remify(8px);
  }
  
}

.c-airport-map__canvas {
  width: 100%;
  height: 92vh;

  .c-airport-maps--detail & {
    height: 60vh;


    @include min-screen (bp(tablet-p)) {
      height: 92vh;
    }
  }
}

.c-airport-map__detail {
  position: relative;
}


.c-airport-map__detail-image {
  border-top-right-radius: remify(6px);
  border-top-left-radius: remify(6px);
  overflow: hidden;
}

.c-airport-map__detail-description {
  padding: remify(16px);
  padding-top: remify(24px);

  position: relative;

  .c-airport-map__detail-logo {
    position: absolute;
    z-index: 10;
    background-color: #fff;
    @include shadow(medium);
    border-radius: remify(8px);
    width: remify(200px);
    height: remify(130px);
    display: flex;
    align-items: center;
    justify-content: center;
    // margin: remify(-100px) auto remify(24px) auto;
    padding: 0 remify(8px);
    left: 50%;
    transform: translateX(-50%);
    top: remify(-105px);
  
    img {
      width: remify(200px);
      height: remify(80px);
    }
  
  }
  
  a {
    font-size: remify(14px);
    
    @include min-screen (bp(tablet-p)) {
      font-size: initial;
    }
  }

  @include min-screen (bp(tablet-p)) {
    padding: remify(24px);
  }
}

.c-airport-map__detail-text {
  margin: remify(32px) 0;
}

.c-airport-map__detail-footer {
  display: flex;
  align-items: center;
  border-bottom-right-radius: remify(6px);
  border-bottom-left-radius: remify(6px);
  color: secondary(page, 100);
  background-color: primary(sky, 120);
  padding: remify(16px);
  font-size: remify(14px);
  
  @include min-screen (bp(tablet-p)) {
    display: none;
    padding: remify(32px) remify(24px);
    font-size: remify(16px);
  }
    
  p {
    margin-left: remify(24px);
    font-weight: fw(bold);
  }
  
  a {
    margin-left: remify(24px);
    color: secondary(page, 100);
  }
  
}

.c-airport-map__chip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.c-airport-map__detail--desktop {
  display: none;
  
  @include min-screen (bp(tablet-p)) {
    display: block;
  }
}

.c-airport-map__detail--mobile {
  display: block;
  bottom: remify(-140px);
  right: remify(16px);
  left: remify(16px);
  position: absolute;

  @include min-screen (bp(tablet-p)) {
    display: none;
  }
}

.c-airport-map__detail-close {
  position: absolute;
  top: remify(-16px);
  right: remify(-12px);
	z-index: 30;
  background-color: secondary(text, 100);
	color: #fff;
  width: remify(48px);
  height: remify(48px);
  border-radius: remify(24px);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  @include shadow(higher);
  
  @include min-screen (bp(tablet-p)) {
    display: none;
  }
  
  &::before {
    content: '×';
    font-size: remify(24px);
  }
  
}

/*------------------------------------*\
  detail layout modifier
\*------------------------------------*/

.c-airport-maps--detail {
	position: relative;
	margin-bottom: 170px;
	@include min-screen (bp(tablet-p)) {
		margin-bottom: 0;
	}
  
  .c-header,
  .c-helpdesk,
  .c-footer {
  //  display: none !important;

    @include min-screen (bp(tablet-p)) {
      display: block;
    }
  }
}

URL: /components/raw/airport-map/_airport-map.scss
Filesystem Path: src/views/03-organisms/airport-map/_airport-map.scss
Size: 5.7 KB

Handle: @airport-map--area
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/airport-map/airport-map--area.hbs
References (5): @autocomplete, @chip, @select, @suggestion--default, @button--adding
Referenced by (1): @page-airport-maps--area

No notes defined.