<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time" aria-label="Orario programmato">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<div>
<p>Imbarco terminato</p>
</div>
<div>Gate <strong>5</strong></div>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
<div class="c-flight-info-card {{modifier}}">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">{{ data.place }}</div>
<div class="schedule">
<p class="schedule__time" aria-label="Orario programmato">{{ data.scheduled-time }}</p>
{{#if time-variation-label}}
{{> @rounded-label time-variation-label text=data.variation-time aria-label="Orario effettivo" }}
{{/if}}
</div>
</div>
<div class="c-flight-info-card__body">
<p>{{ data.flight-company }} | {{#each data.flight-codes}}<span class="flight-code">{{ this }}</span>{{/each}}</p>
{{#if data.flight-status}}
<div class="flight-status">
<div>
<p>{{{ data.flight-status }}}</p>
{{#if data.actual-date}}<p class="actual-date">{{data.actual-date}}</p>{{/if}}
</div>
{{#if data.gate-number}}
<div>Gate <strong>{{ data.gate-number }}</strong></div>
{{/if}}
</div>
{{/if}}
</div>
</div>
<div class="c-flight-info-card__footer">
{{> @link follow-flight-link }}
{{> @link detail-link }}
</div>
</div>
{
"data": {
"place": "Santiago di Compostela SCQ",
"flight-status": "Imbarco terminato",
"scheduled-time": "18:04",
"variation-time": "22:03",
"flight-company": "Swiss International Air Lines",
"flight-codes": [
"BA541",
"AA6607",
"JL7154",
"AA6607"
],
"departure-time": "22:30",
"gate-number": "5"
},
"follow-flight-link": {
"modifier": "cta",
"url": "#",
"text": "Segui volo",
"svg": {
"symbol": "ic_fb_messenger",
"class": "c-icon c-icon--18"
}
},
"detail-link": {
"modifier": "cta",
"url": "/components/preview/page-myflight-departure.html",
"text": "Dettagli",
"svg": {
"symbol": "ic_chevron_right_black_24px",
"class": "c-icon c-icon--18"
}
}
}
.c-flight-info-card {
}
.c-flight-info-card__inner {
background-color: #FFF;
padding: remify(16px);
border-radius: remify(8px) remify(8px) 0 0;
border: 1px solid primary(sky, 20);
border-bottom: 0;
}
.c-flight-info-card__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: remify(16px);
gap: remify(16px);
}
.c-flight-info-card .schedule,
.c-flight-info-card .flight-status {
display: flex;
align-items: center;
gap: remify(8px);
}
.c-flight-info-card .flight-status {
margin-top: remify(8px);
justify-content: space-between;
align-items: flex-start;
@include font-scale(level-2);
@include min-screen(bp(phablet)) {
justify-content: flex-end;
}
}
.c-flight-info-card .actual-date {
@include font-scale(level-1-5);
}
.c-flight-info-card .flight-code:after {
content: " | ";
}
.c-flight-info-card .flight-code:last-child:after {
display: none;
}
.c-flight-info-card .c-rounded-label {
@include font-scale(level-1-5);
padding-inline: remify(8px);
}
.c-flight-info-card__body {
@include font-scale(level-1);
color: primary(night, 100);
text-align: left;
@include min-screen(bp(phablet)) {
@include font-scale(level-1-5);
}
}
.c-flight-info-card .place,
.c-flight-info-card .schedule__time {
@include font-scale(level-1-5);
font-weight: fw(bold);
color: primary(night, 120);
text-transform: uppercase;
@include min-screen(bp(phablet)) {
@include font-scale(level-2);
}
}
.c-flight-info-card .place {
text-align: left;
}
.c-flight-info-card__footer {
background-color: primary(sky, 10);
padding: remify(8px) remify(16px);
display: flex;
justify-content: space-between;
border-radius: 0 0 remify(8px) remify(8px);
border: 1px solid primary(sky, 20);
border-top: 0;
}
.c-flight-info-card__footer a {
color: primary(night, 120);
font-weight: fw(bold);
text-decoration: none;
display: flex;
align-items: center;
gap: remify(4px);
&:hover {
text-decoration: underline;
}
&:last-child {
margin-left: auto;
}
}
/*------------------------------------*
Modifier: Delayed
Info: cancellato questo modifier come da richiesta di Luca Pagnini nel ticket #1628
https://bitbucket.org/GnvPartners/adb/issues/1628/mobile-confusione-voli-in-ritardo#comment-67360409
*------------------------------------*/
// .c-flight-info-card--delayed {
// .schedule__time {
// text-decoration: line-through;
// }
// }
/*------------------------------------*\
Modifier: Past
\*------------------------------------*/
.c-flight-info-card--past {
position: relative;
opacity: .5;
}
No notes defined.