Aeroporto di Bologna - Design System

Snapshot: Single 

<div class="c-snapshot " aria-hidden="true">
    <div class="c-snapshot__thumbnail">
        <img src="https://picsum.photos/270/205" alt="Single image" class="u-OF-cover">
        <button class="c-snapshot__button js-fr-dialogmodal-open" aria-controls="dialog-gallery-single">
            <span class="u-visuallyhidden">Apri la gallery</span>
            <svg class="c-icon c-icon--24">
                <use xlink:href="#ic-zoom-24px"></use>
            </svg> </button>
    </div>
    <p>Single image</p>
</div>

<div class="c-dialog c-dialog--gallery js-fr-dialogmodal " id="dialog-gallery-single">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-gallery-single-title">
        <div role="document">
            <p class="c-dialog__title" id="dialog-gallery-single-title" aria-hidden="true">Single image</p>
            <img src="https://picsum.photos/800/533" alt="Single image">
            <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-snapshot {{ modifier }}" aria-hidden="true">
	{{#if title}}
    <p class="c-snapshot__title">{{ title }}</p>
  {{/if}}
  <div class="c-snapshot__thumbnail">
    <img src="{{ path img.src }}" alt="{{ img.alt }}" class="u-OF-cover">
    <button class="c-snapshot__button js-fr-dialogmodal-open" aria-controls="dialog-gallery-single">
      <span class="u-visuallyhidden">Apri la gallery</span>
      {{> @icon icon-zoom-in }}
    </button>
  </div>
  <p>{{ caption }}</p>
</div>

{{ render "@dialog--gallery-single" }}
 
{
  "target-id": "snapshot-1",
  "img": {
    "src": "https://picsum.photos/270/205",
    "alt": "Single image"
  },
  "icon-zoom-in": {
    "symbol": "ic-zoom-24px",
    "class": "c-icon c-icon--24"
  },
  "icon-download": {
    "symbol": "ic-download-24px",
    "class": "c-icon c-icon--24"
  },
  "caption": "Single image"
}
  • Content: 
    .c-snapshot {
  background-color: #fff;
  border-radius: remify(16px);
  overflow: hidden;
  display: inline-block;
  padding: 0;
  @include shadow(medium);
  position: relative;

  background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);
  /* Night/10 */
  border: 2px solid #E7EBEF;

  margin-top: remify(0px);
  margin-bottom: remify(32px);
  padding-bottom: remify(0px);

  p {
    padding: 0 remify(16px) remify(12px);
    
    .c-canvas__paper & {
      margin-bottom: 0;
    }

  }

  .c-canvas__sidebar &,
  .o-adjacent__item & {
    width: 100%;
  }

  .c-canvas__sidebar & {
    // margin-top: remify(16px);
  }


  
  .c-snapshot__button,
  .c-snapshot__download-link {
    position: absolute;
    bottom: remify(8px);
    z-index: 100;
  }

  .c-snapshot__button {
    right: 0;
    background-color: transparent;
    border: none;
  }

  .c-snapshot__download-link {
    left: remify(48px);
  }

}

p.c-snapshot__title {
	text-transform: uppercase;
	color: primary(night, 100);
	font-weight: fw(bold);
	margin-top: remify(12px);
  margin-bottom: remify(12px);
  padding-bottom: 0;

}
.c-snapshot__title + .c-snapshot__thumbnail {
	margin-top: 0;
}

.c-snapshot__thumbnail {
  display: block;
  height: remify(200px);
  width: 100%;
  // max-width: remify(300px);
  margin-bottom: remify(12px);
  position: relative;
  
  img {
    width: 100%;
    height: 100%;
  }

  .c-canvas__sidebar & {
    width: 100%;
    max-width: initial;
  }

}

.c-snapshot__lightbox {
	/** Default lightbox to hidden */
  display: none;

  /** Position and style */
  width: remify(600px);
  text-align: center;
	position: absolute;
	z-index: 999;
	top: -50%;
  left: 50%;
  transform: translateX(-50%);
  
  img {
    width: remify(600px);
    height: remify(400px);
  }

}

.c-snapshot__lightbox.is-visible {
  display: block;
}

/*------------------------------------*\
  Video modifier
\*------------------------------------*/

.c-snapshot--video {

  .c-snapshot__thumbnail {
    max-width: initial;
  }

  p {
    text-transform: initial;
  }

  .c-snapshot__thumbnail {
    height: auto;

    iframe {
      width: 100%;
    }

  }

}

/*------------------------------------*\
  Gallery modifier
\*------------------------------------*/

.c-snapshot--gallery {
  // To avoid that .c-snapshot--gallery remains visible when the big gallery is open
  z-index: 0;

  p {
    text-transform: initial;
  }

  .c-snapshot__thumbnail {
    margin-left: auto;
    margin-right: auto;
    max-width: remify(300px);
  }

}
  • URL: /components/raw/snapshot/_snapshot.scss
  • Filesystem Path: src/views/02-molecules/snapshot/_snapshot.scss
  • Size: 2.5 KB
  • Content: 
    (function($) {

  var $snapshotThumbnail = $('.js-snapshot-thumbnail');
  var $snapshotLightbox = $('.js-snapshot-lightbox');

  $snapshotThumbnail.each( function() {

    var thumb = $(this);
    
    thumb.click(function() {
      $(this).next($snapshotLightbox).addClass('is-visible');
    });

    $snapshotLightbox.click(function() {
      $(this).removeClass('is-visible');
    });

  });

})(jQuery);
  • URL: /components/raw/snapshot/snapshot.js
  • Filesystem Path: src/views/02-molecules/snapshot/snapshot.js
  • Size: 407 Bytes

No notes defined.