Aeroporto di Bologna - Design System

Booking informations: Flights 

<div class="c-booking-info c-booking-info--flights ">
    <div class="c-booking-info__inner">
        <div class="u-mb-space-8">
            <p><strong>Tipo di viaggio</strong>: Economy - Andata e ritorno</p>
        </div>
        <div grid="grid vertical-center">
            <dl grid="3@md">
                <dt>Da</dt>
                <dd>Bologna, Guglielmo Marconi [BLQ]</dd>
            </dl>
            <dl grid="3@md">
                <dt>A</dt>
                <dd>Dubai, Al Maktoum Intl [DWC]</dd>
            </dl>
            <div grid="3@md" class="round-trip">
                <dl>
                    <dt>Andata</dt>
                    <dd><time datetime="2024/02/12">12/02/2024</time></dd>
                </dl>
                <dl>
                    <dt>Ritorno</dt>
                    <dd><time datetime="2024/02/18">18/02/2024</time></dd>
                </dl>
            </div>
            <dl grid="1@md">
                <dt>Passeggeri</dt>
                <dd>2</dd>
            </dl>
            <div grid="2@md" class="u-text-right">
                <button type="button" class="c-button c-button--adding js-fr-dialogmodal-open" aria-controls="dialog-flights-form">

                    Modifica la ricerca

                </button>
            </div>
        </div>
    </div>
</div>
 
<div class="c-booking-info c-booking-info--flights {{ modifier }}">
  <div class="c-booking-info__inner">
    <div class="u-mb-space-8">
      <p><strong>Tipo di viaggio</strong>: Economy - Andata e ritorno</p>
    </div>
    <div grid="grid vertical-center">
      <dl grid="3@md">
        <dt>Da</dt>
        <dd>Bologna, Guglielmo Marconi [BLQ]</dd>
      </dl>
      <dl grid="3@md">
        <dt>A</dt>
        <dd>Dubai, Al Maktoum Intl [DWC]</dd>
      </dl>
      <div grid="3@md" class="round-trip">
        <dl>
          <dt>Andata</dt>
          <dd><time datetime="2024/02/12">12/02/2024</time></dd>
        </dl>
        <dl>
          <dt>Ritorno</dt>
          <dd><time datetime="2024/02/18">18/02/2024</time></dd>
        </dl>
      </div>
      <dl grid="1@md">
        <dt>Passeggeri</dt>
        <dd>2</dd>
      </dl>
      <div grid="2@md" class="u-text-right">
        {{> @button edit-btn }}
      </div>
    </div>
  </div>
</div>
 
{
  "el": "form",
  "entrance": {
    "time-detail-icon": {
      "symbol": "entrata-parcheggio-24px",
      "class": "c-icon"
    },
    "datetime-label": "Entrata",
    "datetime-day": "10",
    "datetime-month": "04",
    "datetime-year": "2018",
    "time-label": "Ore",
    "time-text": "16:30",
    "date-time-desktop": {
      "label_id": "entrance-date-time-desktop",
      "label_message": "Entrata (data e ora)",
      "label_class": "flatpickr-label",
      "screen-reader-text": "Scegli data e ora",
      "atom-input": {
        "id": "entrance-date-time-desktop",
        "type": "date",
        "class": "js-flatpickr flatpickr-input",
        "required": true,
        "hasNote": true,
        "describedby": "entrance-date-time-desktop-note",
        "placeholder": "Scegli data e ora"
      },
      "note_id": "entrance-date-time-desktop-note",
      "note_message": "Seleziona data e ora di entrata al parcheggio",
      "note_class": "u-visuallyhidden"
    },
    "date-mobile": {
      "label_id": "entrance-date-mobile",
      "label_message": "Entrata",
      "label_class": "",
      "atom-input": {
        "id": "entrance-date-mobile",
        "type": "date",
        "class": ""
      }
    },
    "time-mobile": {
      "label_id": "entrance-time-mobile",
      "label_message": "Ore",
      "label_class": "",
      "atom-select": {
        "id": "entrance-time-mobile",
        "class": "",
        "required": true,
        "hasNote": true,
        "describedby": "select-note",
        "placeholder": "Orario",
        "options": [
          {
            "value": "00:00",
            "text": "00:00"
          },
          {
            "value": "00:15",
            "text": "00:15"
          },
          {
            "value": "00:30",
            "text": "00:30"
          },
          {
            "value": "00:45",
            "text": "00:45"
          },
          {
            "value": "01:00",
            "text": "01:00"
          },
          {
            "value": "01:15",
            "text": "01:15"
          },
          {
            "value": "01:30",
            "text": "01:30"
          },
          {
            "value": "01:45",
            "text": "01:45"
          },
          {
            "value": "02:00",
            "text": "02:00"
          },
          {
            "value": "02:15",
            "text": "02:15"
          },
          {
            "value": "02:30",
            "text": "02:30"
          },
          {
            "value": "02:45",
            "text": "02:45"
          },
          {
            "value": "03:00",
            "text": "03:00"
          }
        ]
      }
    }
  },
  "form-note": {
    "class": "is-negative u-visuallyhidden",
    "text": "Inserisci una data e un orario di uscita successivi a quelli di entrata",
    "id": "parking-form-note"
  },
  "exit": {
    "time-detail-icon": {
      "symbol": "uscita-parcheggio-24px",
      "class": "c-icon"
    },
    "datetime-label": "Uscita",
    "datetime-day": "20",
    "datetime-month": "04",
    "datetime-year": "2018",
    "time-label": "Ore",
    "time-text": "20:30",
    "date-time-desktop": {
      "label_id": "exit-date-time-desktop",
      "label_message": "Uscita (data e ora)",
      "label_class": "flatpickr-label",
      "screen-reader-text": "Scegli data e ora",
      "atom-input": {
        "id": "exit-date-time-desktop",
        "type": "date",
        "class": "js-flatpickr flatpickr-input",
        "required": true,
        "hasNote": true,
        "describedby": "exit-date-time-desktop-note",
        "placeholder": "Scegli data e ora"
      },
      "note_id": "exit-date-time-desktop-note",
      "note_message": "Seleziona data e ora di uscita dal parcheggio",
      "note_class": "u-visuallyhidden"
    },
    "date-mobile": {
      "label_id": "exit-date-mobile",
      "label_message": "Uscita",
      "label_class": "",
      "atom-input": {
        "id": "exit-date-mobile",
        "type": "date",
        "class": ""
      }
    },
    "time-mobile": {
      "label_id": "exit-time-mobile",
      "label_message": "Ore",
      "label_class": "",
      "atom-select": {
        "id": "exit-time-mobile",
        "class": "",
        "required": true,
        "hasNote": true,
        "describedby": "select-note",
        "placeholder": "Orario",
        "options": [
          {
            "value": "00:00",
            "text": "00:00"
          },
          {
            "value": "00:15",
            "text": "00:15"
          },
          {
            "value": "00:30",
            "text": "00:30"
          },
          {
            "value": "00:45",
            "text": "00:45"
          },
          {
            "value": "01:00",
            "text": "01:00"
          },
          {
            "value": "01:15",
            "text": "01:15"
          },
          {
            "value": "01:30",
            "text": "01:30"
          },
          {
            "value": "01:45",
            "text": "01:45"
          },
          {
            "value": "02:00",
            "text": "02:00"
          },
          {
            "value": "02:15",
            "text": "02:15"
          },
          {
            "value": "02:30",
            "text": "02:30"
          },
          {
            "value": "02:45",
            "text": "02:45"
          },
          {
            "value": "03:00",
            "text": "03:00"
          }
        ]
      }
    }
  },
  "convenzioni": {
    "select-conventions": {
      "label_id": "select-conventions",
      "label_message": "Convenzione:",
      "label_class": "",
      "atom-select": {
        "id": "select-conventions-inline",
        "class": "",
        "required": false,
        "hasNote": true,
        "describedby": "select-conventions-note",
        "placeholder": "Scegli la convenzione",
        "options": [
          {
            "value": "option-1",
            "text": "Alba Tour"
          },
          {
            "value": "option-2",
            "text": "Alpitour",
            "selected": true
          },
          {
            "value": "option-3",
            "text": "Brixia Viaggi"
          },
          {
            "value": "option-4",
            "text": "Club Med"
          },
          {
            "value": "option-5",
            "text": "Domina Travel"
          },
          {
            "value": "option-6",
            "text": "In Viaggi"
          },
          {
            "value": "option-7",
            "text": "Marsupio Group"
          },
          {
            "value": "option-8",
            "text": "Smeg S.p.A."
          },
          {
            "value": "option-9",
            "text": "Viaggi Idea"
          }
        ]
      },
      "note_id": "select-conventions-note",
      "note_message": "Seleziona un'opzione dal menù a tendina",
      "note_class": "u-visuallyhidden"
    }
  },
  "edit-btn": {
    "type": "button",
    "text": "Modifica la ricerca",
    "modifier": "c-button--adding js-fr-dialogmodal-open",
    "opens-dialog": "dialog-flights-form"
  },
  "dialog-flights-form": {
    "id": "dialog-flights-form",
    "title": "Modifica il tuo volo"
  }
}
  • Content: 
    .c-booking-info {
  background-color: primary(sky, 20);
  display: flex;
  flex-wrap: wrap;

  @include min-screen( $booking-info-breakpoint ) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .c-parkings & {
    margin-bottom: remify(32px);
    border-radius: remify(4px);
    margin-top: remify(-16px);
  }

}

.c-booking-info__button {
  text-align: center;
  width: 100%;
  margin-top: remify(16px);

  @include min-screen( $booking-info-second-breakpoint ) {
    width: auto;
    margin-top: 0;
  }

}

.js-booking-info-btn-confirm {
  display: none;
}

.c-booking-info__close-btn {
  display: none;
  height: 24px;
  border: none;
  background: transparent;
  position: absolute;
  top: -30px;
  right: 16px;
  display: none;
  padding: 0;

  svg * {
    fill: #fff;
  }

  .o-spotlight.is-active & {
    display: block;
  }

}

.c-booking-info__close-area {
  max-width: remify(900px);
  width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.c-booking-info dl {
  @include font-scale(level-2);
  color: secondary(text, 100);
}

.c-booking-info dt {
  font-weight: fw(bold);
}

.c-booking-info dd {
  margin-top: remify(4px);
}

/*------------------------------------*\
  Modifier: Fullbleed
\*------------------------------------*/

.c-booking-info--fullbleed {
  padding: remify(16px) 0;
  justify-content: center;
}

/*------------------------------------*
  Modifier: Flights
*------------------------------------*/
.c-booking-info--flights {
  display: block;
  padding: remify(24px) remify(16px);

  .c-booking-info__inner {
    max-width: remify($base-page-width);
    margin-inline: auto;
    color: secondary(text, 100);
  }

  .round-trip {
    display: flex;
    gap: remify(16px);
    border-inline: remify(1px) solid primary(night, 40);
    padding-inline: remify(16px);

    & > * {
      flex: auto;
    }
  }
  
}
  • URL: /components/raw/booking-info/_booking-info.scss
  • Filesystem Path: src/views/03-organisms/booking-info/_booking-info.scss
  • Size: 1.9 KB
  • Content: 
    (function($){
  'use strict';

  if(!$.tangible){
    $.tangible = new Object();
  };

  $.tangible.bookingInfo = function(el, options){
    var base = this;

    base.$el = $(el);
    base.el = el;

    base.init = function(){

      base.$mainForm = $('.c-booking-info');
      base.$inputs = $('.c-booking-info input, .c-booking-info select');
      base.$inputsArray = $('.c-booking-info input').toArray();
      base.$buttonEdit = $('.c-booking-info .js-booking-info-btn-edit');
      base.$buttonConfirm = $('.c-booking-info .js-booking-info-btn-confirm');
      base.$overlay = $('.o-spotlight__element');
      base.$closeOverlayBtn = $('.js-close-overlay');

      base.addsReadonly();
      
      base.$buttonEdit.click(function(e){
        e.preventDefault();
        base.removesReadonly();
        base.setFocusOnFirstInput();
        base.changeButton( $(this) );
        base.addsOverlay();
      });

      base.$closeOverlayBtn.click(function(e){
        e.preventDefault();
        base.removesOverlay( $(this) );
        base.addsReadonly();
        base.$buttonConfirm.hide();
        base.$buttonEdit.show();
      });

    };

    // Adds overlay
    base.addsOverlay = function() {
      base.$overlay.addClass('o-spotlight__element--overlay');
      base.$overlay.parent('.o-spotlight').addClass('is-active');
      base.$closeOverlayBtn.show();
    }

    // Removes overlay
    base.removesOverlay = function(elem) {
      base.$overlay.removeClass('o-spotlight__element--overlay');
      base.$overlay.closest('.o-spotlight').removeClass('is-active');
      elem.hide();
    }

    // Adds readonly
    base.addsReadonly = function() {
      base.$inputs.prop('readonly', true);
      base.$inputs.prop('disabled', true);
      base.$inputs.parent().addClass("is-readonly");
    }

    // Removes readonly
    base.removesReadonly = function() {
      base.$inputs.prop('readonly', false);
      base.$inputs.prop('disabled', false);
      base.$inputs.parent().removeClass("is-readonly");
    }

    // Set focus on first input
    base.setFocusOnFirstInput = function() {
      base.$inputsArray[0].focus();
    }

    base.changeButton = function(el) {
      el.hide();
      base.$buttonConfirm.show();
    }

    base.init();

  };

  $.fn.tangible_bookingInfo = function(options){
    return this.each(function(){
      (new $.tangible.bookingInfo(this, options));
    });
  };

})(jQuery);
  • URL: /components/raw/booking-info/booking-info.js
  • Filesystem Path: src/views/03-organisms/booking-info/booking-info.js
  • Size: 2.4 KB

No notes defined.