Airport map: Detail

Same as 2018

HTML
View
Context
Assets
Info
Notes


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

    <div class="c-airport-map__list o-sliding-panel__list">
        <a href="../preview/page-airport-maps.html" class="u-mb--medium">← Indietro</a>

        <div class="c-airport-map__detail c-airport-map__detail--desktop">
            <div class="c-airport-map__detail-image">
                <img src="../../images/transports-bus.jpg" alt="descrizione punto di interesse">
            </div>

            <div class="c-airport-map__detail-description">
                <div class="c-airport-map__detail-logo">
                    <img src="http://via.placeholder.com/140x80?text&#x3D;Logo+negozio" alt="Ferrari" class="u-OF-contain">
                </div>
                <h3>Check in A (Accettazione)</h3>
                <p>Servizi aeroportuali - <strong>piano terra</strong></p>
                <div class="c-chip ">

                    <svg class="c-icon c-icon--18">
                        <use xlink:href="#ic_directions_walk_black_24px"></use>
                    </svg>
                    <span>a 26 metri da te</span>

                </div>
                <div class="c-airport-map__detail-text">
                    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                </div>
                <a href="../preview/page-shop-detail.html" class="c-airport-map__detail-link">Scopri di più →</a>
            </div>

            <div class="c-airport-map__detail-footer">
                <img src="../../images/svgs/ic_iphone.svg" aria-hidden="true">
                <div>
                    <p>Vuoi raggiungere questo punto?</p>
                    <a href="#">Fatti guidare dall'App BLQ →</a>
                </div>
            </div>
        </div>
    </div>

    <div class="c-airport-map__main o-sliding-panel__main">
        <div class="c-airport-map__pic">
            <ul id="status"></ul>

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

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

                <div class="c-suggestion__text">
                    <strong>Ti trovi in aeroporto?</strong>
                    <p>
                        <a href="#">Attiva la geolocalizzazione</a>
                    </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>
            <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-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 class="c-airport-map__detail c-airport-map__detail--mobile">
        <a class="c-airport-map__detail-close" href="../preview/page-airport-maps--search-results.html"></a>
        <div class="c-airport-map__detail-description">
            <div class="c-chip ">

                <svg class="c-icon c-icon--18">
                    <use xlink:href="#ic_directions_walk_black_24px"></use>
                </svg>
                <span>a 26 metri da te</span>

            </div>
            <h3>Check in A (Accettazione)</h3>
            <p>Servizi aeroportuali - <strong>piano terra</strong></p>
            <a href="../preview/page-shop-detail.html" class="c-airport-map__detail-link">Scopri di più →</a>
        </div>
        <div class="c-airport-map__detail-footer">
            <img src="../../images/svgs/ic_iphone.svg" aria-hidden="true">
            <div>
                <p>Vuoi raggiungere questo punto?</p>
                <a href="#">Fatti guidare dall'App BLQ →</a>
            </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">
    <a href="{{ path '/components/preview/page-airport-maps' }}" class="u-mb--medium">← Indietro</a>

    {{!-- Desktop POI card --}}
    <div class="c-airport-map__detail c-airport-map__detail--desktop">
      <div class="c-airport-map__detail-image">
        <img src="{{ path poi-img-src }}" alt="{{ poi-img-alt }}">
      </div>

      <div class="c-airport-map__detail-description">
        {{#if logo}}
          <div class="c-airport-map__detail-logo">
            <img src="{{ logo.src }}" alt="{{ logo.alt }}" class="u-OF-contain">
          </div>
        {{/if}}
        <h3>{{{ card-info-title }}}</h3>
        <p>{{{ card-info-category }}}</p>
        {{> @chip airport-chip }}
        <div class="c-airport-map__detail-text">{{{ card-info-text }}}</div>
        <a href="{{ path card-info-link-url }}" class="c-airport-map__detail-link">{{{ card-info-link-text }}}</a>
      </div>

      {{!-- Il footer contiene il link al dowload dell'app. Rimuovere se non necessario --}}
      <div class="c-airport-map__detail-footer">
        <img src="{{ path '/images/svgs/ic_iphone.svg' }}" aria-hidden="true">
        <div>
          <p>{{{ card-info-footer-text }}}</p>
          <a href="#">{{{ card-info-footer-link }}}</a>
        </div>
      </div>
    </div>
  </div>
  
  {{!-- Map --}}
  <div class="c-airport-map__main o-sliding-panel__main">
    <div class="c-airport-map__pic">
      <ul id="status"></ul>

      {{> @suggestion--default geolocation }}

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


  {{!-- Mobile POI card  --}}
  <div class="c-airport-map__detail c-airport-map__detail--mobile">
		  {{!-- back link - close button appearence  --}}
  <a class="c-airport-map__detail-close" href="{{ path '/components/preview/page-airport-maps--search-results' }}"></a>
    <div class="c-airport-map__detail-description">
      {{> @chip airport-chip }}
      <h3>{{{ card-info-title }}}</h3>
      <p>{{{ card-info-category }}}</p>
      <a href="{{ path card-info-link-url }}" class="c-airport-map__detail-link">{{{ card-info-link-text }}}</a>
    </div>
    <div class="c-airport-map__detail-footer">
      <img src="{{ path '/images/svgs/ic_iphone.svg' }}" aria-hidden="true">
      <div>
        <p>{{{ card-info-footer-text }}}</p>
        <a href="#">{{{ card-info-footer-link }}}</a>
      </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": "<a href=\"#\">Attiva la geolocalizzazione</a>",
    "icon-path": "/images/svgs/stk_location.svg",
    "icon-alt": "Attiva le convenzioni",
    "modifier": "c-suggestion--geolocation"
  },
  "map-position-text": "Ops...forse ti sei spostato troppo dall'aeroporto?",
  "poi-img-src": "/images/transports-bus.jpg",
  "logo": {
    "src": "http://via.placeholder.com/140x80?text=Logo+negozio",
    "alt": "Ferrari"
  },
  "card-info-title": "Check in A (Accettazione)",
  "card-info-category": "Servizi aeroportuali - <strong>piano terra</strong>",
  "poi-img-alt": "descrizione punto di interesse",
  "card-info-text": "<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>",
  "card-info-link-text": "Scopri di più →",
  "card-info-link-url": "/components/preview/page-shop-detail",
  "card-info-footer-text": "Vuoi raggiungere questo punto?",
  "card-info-footer-link": "Fatti guidare dall'App BLQ →",
  "airport-chip": {
    "chip-icon": {
      "class": "c-icon c-icon--18",
      "symbol": "ic_directions_walk_black_24px"
    },
    "text": "a 26 metri da te"
  }
}

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--detail
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/airport-map/airport-map--detail.hbs
References (3): @chip, @suggestion--default, @button--adding
Referenced by (1): @page-airport-maps--detail

No notes defined.