Canvas: Map

Reviewed

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-canvas c-canvas--content-template c-canvas--map " id="">

    <div class="c-canvas__paper">
        <div class="g-map">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d22752.862678770456!2d11.281851121846588!3d44.5334245462175!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x477fd3fac047a1cb%3A0x5653430165f8d67b!2sAeroporto+di+Bologna!5e0!3m2!1sit!2sit!4v1537359522016" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
        </div>
    </div>

    <div class="c-canvas__sidebar">
        <div class="c-starter c-starter--simple c-starter--textual c-starter--padding ">
            <p class="c-starter__title">Info</p>
            <h3>In autostrada</h3>
            <p>
                <strong>A1</strong> (provenienti da Milano), prendere l'uscita Bologna Borgo Panigale.
            </p>
            <p>
                <strong>A13</strong> (provenienti da Padova), prendere l'uscita Bologna Arcoveggio.
            </p>
            <p>
                <strong>A14</strong> (provenienti da Ancona), prendere l'uscita Bologna San Lazzaro.
            </p>
            <p>
                Maggiori informazioni al sito: <a href="#">Autostrade per l'Italia S.p.A.</a>
            </p>

            <h3>In tangenziale</h3>
            <p>
                In entrambi i sensi di marcia, prendere l'uscita 4 bis.
            </p>
            <a href="#" class="c-link c-link--primary">
                <span>Calcola percorso</span>
                <svg class="svg-24">
                    <use xlink:href="#ic_chevron_right_black_24px"></use>
                </svg></a>
            <p>
                Puoi trovare maggiori info sugli accessi e le corsie riservate ai passegggeri su <a href="#">viabilità
                    aeroportuale</a>.
            </p>
        </div>
        <div class="c-starter c-starter--simple c-starter--padding">
            <p class="c-starter__title">Documenti</p>
            <div class="c-media o-media ">
                <img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="Normativa PSSA aeroportuale" height="" width="32">
                <div class="c-media__body o-media__body">
                    <a href="#"><strong>Mappa della viabilità portuale</strong></a><br>PDF, 577 kb
                </div>
            </div>
        </div>
    </div>

</div>


        <div class="c-canvas c-canvas--content-template c-canvas--map {{ modifier }}" id="{{ canvas-id }}">
  
  <div class="c-canvas__paper">
    <div class="g-map">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d22752.862678770456!2d11.281851121846588!3d44.5334245462175!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x477fd3fac047a1cb%3A0x5653430165f8d67b!2sAeroporto+di+Bologna!5e0!3m2!1sit!2sit!4v1537359522016" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>
  </div>

  <div class="c-canvas__sidebar">
    {{ render "@starter--car-indications" }}
    {{ render "@starter--doc" doc merge=true }}
  </div>

</div>


        
            
            {
  "illustration": {
    "path": "/images/svgs/routes/ill-animali-veterinario.svg",
    "alt": "Veterinario"
  },
  "pdf-map": {
    "img-src": "/images/svgs/pdf.svg",
    "img-alt": "Mappa parcheggi",
    "img-width": "32",
    "body": "<a href=\"#\"><strong>Mappa parcheggi</strong></a><br>PDF, 577 kb"
  },
  "suggestion": {
    "text": "<strong>I nostri consigli</strong><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>",
    "hasImage": true,
    "img-src": "/images/svgs/stk_informazioni.svg",
    "img-alt": ""
  },
  "accordion": {
    "title": "Element title",
    "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime recusandae eligendi beatae nesciunt sit. Officiis nulla maiores, alias minima, dolorum harum et earum molestias odio architecto tempore est consequuntur ullam.",
    "id": "organism-canvas"
  },
  "documents": {
    "title": "2022",
    "pdf": [
      {
        "img-src": "/images/svgs/pdf.svg",
        "img-alt": "Gennaio 2022",
        "img-width": "32",
        "body": "<a href=\"#\"><strong>Gennaio</strong></a><br>PDF, 577 kb"
      },
      {
        "img-src": "/images/svgs/pdf.svg",
        "img-alt": "Febbraio 2022",
        "img-width": "32",
        "body": "<a href=\"#\"><strong>Febbraio</strong></a><br>PDF, 577 kb"
      },
      {
        "img-src": "/images/svgs/pdf.svg",
        "img-alt": "Marzo 2022",
        "img-width": "32",
        "body": "<a href=\"#\"><strong>Marzo</strong></a><br>PDF, 577 kb"
      },
      {
        "img-src": "/images/svgs/pdf.svg",
        "img-alt": "Aprile 2022",
        "img-width": "32",
        "body": "<a href=\"#\"><strong>Aprile</strong></a><br>PDF, 577 kb"
      },
      {
        "img-src": "/images/svgs/pdf.svg",
        "img-alt": "Maggio 2022",
        "img-width": "32",
        "body": "<a href=\"#\"><strong>Maggio</strong></a><br>PDF, 577 kb"
      }
    ]
  },
  "doc": {
    "modifier": "c-starter--padding",
    "pdf": {
      "img-src": "/images/svgs/pdf.svg",
      "img-alt": "Normativa PSSA aeroportuale",
      "img-width": "32",
      "body": "<a href=\"#\"><strong>Mappa della viabilità portuale</strong></a><br>PDF, 577 kb"
    }
  }
}

File:

Content:


                                .c-canvas {
  margin-bottom: remify(40px);
  padding-top: remify(40px);

  main & {
    grid-column: main;
  }

}

.c-canvas__picture {
  text-align: right;
  flex: 1 1 40%;
  display: none;

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

  img {
    max-height: remify(710px);
    position: relative;
    right: -4vw;
    top: remify(48px);
    // z-index: 0;
    // top: 50%;
    // transform: translateY(-50%);

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      width: 100%;
    }

  }

}

.c-canvas__paper {
  position: relative;
  z-index: 1;
  // padding: remify(24px);
  // background-color: #fff;
  // border-radius: remify(4px);
  // @include shadow(medium);
  // flex: 1 1 100%;

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

  @include min-screen(bp(tablet-p)) {
    // flex: 0 1 60%;
    // padding: remify(56px);
  }

  & .o-collapsible__content p {
    margin-bottom: remify(32px);
  }

  & .o-collapsible__content p:last-child {
    margin-bottom: 0;
  }
}

.c-canvas__paper h2,
.c-canvas__paper h3 {
  color: primary(night, 100);
}

.c-canvas__paper h2 {
  font-weight: fw(light);
  margin-bottom: remify(24px);
  background-color: #fff;
}

.c-canvas__paper h3 {
  font-weight: fw(semibold);
  margin-bottom: remify(8px);

  &.is-positive,
  &.is-negative {
    display: flex;
    align-items: center;
  }

  &.is-positive {
    color: status(positive);
  }

  &.is-negative {
    color: status(negative);
  }

  svg {
    margin-right: remify(8px);
    * {
      fill: currentColor;
    }
  }

}

.c-canvas__paper .c-link {
  margin-bottom: remify(32px);
}

.c-canvas__paper > p {
  margin-bottom: remify(32px);
}
.c-canvas__paper p {
  line-height: 1.8;
}

// The following lines has been added because of this:
// https://bitbucket.org/GnvPartners/adb/issues/198/comandi-in-linea-float-left-float-right
.c-canvas__paper > p a img {
  max-width: remify(190px);
  padding: 0 16px 16px 16px;
}

.c-canvas__paper > img {
  margin-bottom: remify(32px);
}

.c-canvas__paper ul,
.c-canvas__paper ol {
  margin-top: remify(8px);
  margin-bottom: remify(32px);
}

.c-canvas__paper .spaced > li {
  margin-bottom: remify(16px);
}

.c-canvas__paper hr {
  display: block;
  height: remify(1px);
  border: 0;
  border-top: remify(1px) solid #ccc;
  margin: remify(16px) 0;
  padding: 0; 
}

.c-canvas__paper .c-media {
  margin-bottom: remify(32px);
}

.c-canvas__paper .c-collapsible__content .c-media {
  margin-bottom: remify(16px);
}

.c-canvas__paper .c-suggestion {
  margin-bottom: remify(40px);
  position: relative;
  // @include min-screen(bp(tablet-p)) {
  //   left: remify(-100px);
  // }
}

.c-canvas__paper .c-collapsible--simple {
  margin-top: remify(32px);
  margin-bottom: remify(32px);
}

.c-canvas__paper .c-snapshot,
.c-canvas__paper .c-highlight {
  margin-bottom: remify(32px);
}

.c-canvas__paper {
  & > * {
    &:last-child {
      margin-bottom: 0;
    }
  }
  & > img:last-child {
    margin-bottom: remify(32px);
  }
}



.c-canvas__sidebar {
  // flex: 1 1 100%;
  // margin-top: remify(24px);

  // & > * {
  //   margin-bottom: remify(16px);
  //   padding-bottom: remify(16px);

  //   &:last-child {
  //     margin-bottom: 0;
  //   }

  // }

  @include min-screen(bp(tablet-p)) {
    // flex: 0 1 35%;
    // position: relative;
    // right: remify(-40px);
    // margin-top: 0;
  }

  @include min-screen(remify(1400px)) {
    // right: remify(-70px);
  }

}


/*------------------------------------*\
  Content template modifier
\*------------------------------------*/

.c-canvas--content-template {
  position: relative;
}


/*------------------------------------*\
  Map modifier
\*------------------------------------*/

.c-canvas--map {
  padding: 0;

  .c-canvas__paper {
    min-height: remify(280px);
    height: auto;
    padding: 0;
    margin-bottom: 0;

    @include min-screen(bp(tablet-p)) {
      flex: 1 1 100%;
      height: remify(935px);
    }

    .g-map {
      width: 100%;
      height: 100%;
    }

  }

  .c-canvas__sidebar {

    @include min-screen(bp(tablet-p)) {
      position: absolute;
      z-index: 10;
      right: remify(-20px);
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      max-width: remify(400px);
    }

  }

}

.c-canvas--hasCarousel {

  .c-canvas__paper {
    overflow-x: hidden;
  }

}

/*------------------------------------*\
  Report modifier
\*------------------------------------*/

.c-canvas__report {
  // max-height: 800px;
  // overflow-y: scroll;
  padding: remify(0px) remify(16px);
  
  span {
    display: block;
    font-weight: fw(bold);
    color: primary(night, 80);
    text-transform: uppercase;
    margin-bottom: remify(8px);
  }
  
  h3 {
    font-weight: fw(regular);
    color: primary(night, 100);
    font-size: 150%;
    line-height: 1.4;
    margin-bottom: remify(16px);
    
    @include min-screen(bp(tablet)) {
      font-size: 150%;
      line-height: 1.333;
    }  
  }

  p {
    margin-bottom: remify(24px);
  }
}

.c-canvas__report-item {
  margin-bottom: remify(48px);

}

URL: /components/raw/canvas/_canvas.scss
Filesystem Path: src/views/03-organisms/canvas/_canvas.scss
Size: 5.1 KB

Handle: @canvas--map
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/canvas/canvas--map.hbs
References (2): @starter--car-indications, @starter--doc
Referenced by (1): @page-transports-car

No notes defined.