OCDE - Pattern Library v1.13.0

Mobile Map Pane: Mobile College (Example) 

<!-- Error rendering component -->
<!-- Could not render component '@distance-filter--defaultexample' - component not found. -->
<!-- Error: Could not render component '@distance-filter--defaultexample' - component not found.
    at Object.render (/root/packages/patternlibrary/node_modules/@frctl/handlebars/src/helpers/render.js:23:19)
    at Object.helperWrapper (/root/packages/patternlibrary/node_modules/promised-handlebars/index.js:130:23)
    at Object.<anonymous> (/root/packages/patternlibrary/node_modules/promised-handlebars/lib/utils.js:29:28)
    at Object.wrapper (/root/packages/patternlibrary/node_modules/handlebars/dist/cjs/handlebars/internal/wrapHelper.js:15:19)
    at Object.eval [as main] (eval at createFunctionContext (/root/packages/patternlibrary/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:262:23), <anonymous>:11:102)
    at main (/root/packages/patternlibrary/node_modules/handlebars/dist/cjs/handlebars/runtime.js:208:32)
    at ret (/root/packages/patternlibrary/node_modules/handlebars/dist/cjs/handlebars/runtime.js:212:12)
    at ret (/root/packages/patternlibrary/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:519:21)
    at prepareAndResolveMarkers (/root/packages/patternlibrary/node_modules/promised-handlebars/index.js:99:39)
    at /root/packages/patternlibrary/node_modules/promised-handlebars/lib/utils.js:29:28
    at HandlebarsAdapter.render (/root/packages/patternlibrary/node_modules/@frctl/handlebars/src/adapter.js:37:30)
    at ComponentSource._renderVariant (/root/packages/patternlibrary/node_modules/@frctl/fractal/src/api/components/source.js:212:30)
    at _renderVariant.next (<anonymous>)
    at onFulfilled (/root/packages/patternlibrary/node_modules/co/index.js:65:19) -->
 
<div class="mobilemappane mobilemappane-college">

  <div class="mobilemappane-x-select">
    {{render '@buttonselect' buttonSelectContext merge=true}}
  </div>

  <div class="u-padding-left1x u-padding-right1x">
  {{render '@distance-filter--defaultexample'}}
  </div>

  <div class="u-padding-left1x u-padding-right1x">
    {{render '@sidebaroption--mobile'}}
  </div>

  <div class="u-padding-left1x u-padding-right1x">
    {{render '@sidebaroption--mobile'}}
  </div>

  <div class="mobilemappane-x-cards">
    <div class="{{render '@l-cards'}}">
      <a class="{{render '@card--college'}}" href="#" target="_blank">
        <div class="card-x-map" id="card-x-map1"></div>
        <div class="card-x-body">
          <div class="card-x-title">Cypress College</div>
          <svg>
            <use xlink:href="#icon-externallink"></use>
          </svg>
        </div>
      </a>
      <a class="{{render '@card--college'}}" href="#" target="_blank">
        <div class="card-x-map" id="card-x-map2"></div>
        <div class="card-x-body">
          <div class="card-x-title">Orange Coast College</div>
          <svg>
            <use xlink:href="#icon-externallink"></use>
          </svg>
        </div>
      </a>
      <a class="{{render '@card--college'}}" href="#" target="_blank">
        <div class="card-x-map" id="card-x-map3"></div>
        <div class="card-x-body">
          <div class="card-x-title">Saddleback College</div>
          <svg>
            <use xlink:href="#icon-externallink"></use>
          </svg>
        </div>
      </a>
      <a class="{{render '@card--college'}}" href="#" target="_blank">
        <div class="card-x-map" id="card-x-map4"></div>
        <div class="card-x-body">
          <div class="card-x-title">Cypress College</div>
          <svg>
            <use xlink:href="#icon-externallink"></use>
          </svg>
        </div>
      </a>
      <a class="{{render '@card--college'}}" href="#" target="_blank">
        <div class="card-x-map" id="card-x-map5"></div>
        <div class="card-x-body">
          <div class="card-x-title">Cypress College</div>
          <svg>
            <use xlink:href="#icon-externallink"></use>
          </svg>
        </div>
      </a>
      <a class="{{render '@card--college'}}" href="#" target="_blank">
        <div class="card-x-map" id="card-x-map6"></div>
        <div class="card-x-body">
          <div class="card-x-title">Cypress College</div>
          <svg>
            <use xlink:href="#icon-externallink"></use>
          </svg>
        </div>
      </a>
      <a class="{{render '@card--college'}}" href="#" target="_blank">
        <div class="card-x-map" id="card-x-map7"></div>
        <div class="card-x-body">
          <div class="card-x-title">Cypress College</div>
          <svg>
            <use xlink:href="#icon-externallink"></use>
          </svg>
        </div>
      </a>
    </div>
  </div>

</div>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
      crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
        integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
        crossorigin=""></script>


<script>
  var cardmap1 = L.map('card-x-map1',{
    zoomControl: false,
    attributionControl: false
  }).setView([33.6412, -117.9188], 10);

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
  }).addTo(cardmap1);

  // Create the map marker.
  var icon = L.divIcon({
    className: 'mapmarker',
    iconSize:null,
    iconAnchor: [11, 11],
  });

  var marker1 = L.marker([33.6412, -117.9188],{icon: icon}).addTo(cardmap1);

  var cardmap2 = L.map('card-x-map2',{
    zoomControl: false,
    attributionControl: false
  }).setView([33.6412, -117.9188], 10);

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
  }).addTo(cardmap2);

  var marker2 = L.marker([33.6412, -117.9188],{icon: icon}).addTo(cardmap2);

  var cardmap3 = L.map('card-x-map3',{
    zoomControl: false,
    attributionControl: false
  }).setView([33.6412, -117.9188], 10);

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
  }).addTo(cardmap3);

  var marker3 = L.marker([33.6412, -117.9188],{icon: icon}).addTo(cardmap3);

  var cardmap4 = L.map('card-x-map4',{
    zoomControl: false,
    attributionControl: false
  }).setView([33.6412, -117.9188], 10);

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
  }).addTo(cardmap4);

  var marker4 = L.marker([33.6412, -117.9188],{icon: icon}).addTo(cardmap4);

  var cardmap5 = L.map('card-x-map5',{
    zoomControl: false,
    attributionControl: false
  }).setView([33.6412, -117.9188], 10);

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
  }).addTo(cardmap5);

  var marker5 = L.marker([33.6412, -117.9188],{icon: icon}).addTo(cardmap5);

  var cardmap6 = L.map('card-x-map6',{
    zoomControl: false,
    attributionControl: false
  }).setView([33.6412, -117.9188], 10);

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
  }).addTo(cardmap6);

  var marker6 = L.marker([33.6412, -117.9188],{icon: icon}).addTo(cardmap6);

  var cardmap7 = L.map('card-x-map7',{
    zoomControl: false,
    attributionControl: false
  }).setView([33.6412, -117.9188], 10);

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
  }).addTo(cardmap7);

  var marker7 = L.marker([33.6412, -117.9188],{icon: icon}).addTo(cardmap7);

</script>
 
/* No context defined. */
  • Content: 
    .mobilemappane {
  background-color: $color-light1;
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
  overflow: hidden;

  .mobilemappane-x-select {
    margin-bottom: $gridspacing * 3;
    padding: 0 $gridspacing;
  }

  .mobilemappane-x-heading {
    // This was moved to the container so the box-shadow doesnt get cut off.
    // margin-bottom: $gridspacing;
    padding: 0 ($gridspacing * 2.5);
  }

  .mobilemappane-x-map {
    pointer-events: none;
  }

  .mobilemappane-x-empty {
    padding: ($gridspacing * 2) ($gridspacing * 3) ($gridspacing * 6);
  }

  .mobilemappane-x-emptytext1 {
    gap: 1rem;

    img {
      height: $gridspacing * 3;
      position: relative;
      top: $gridspacing;
      width: $gridspacing * 3;
    }

    .sidebar-x-emptybody > * + * {
      margin-top: $gridspacing;
    }
  }

  .sidebar-x-emptybacklink {
    display: inline-block;
    margin-top: $gridspacing;
  }
}
  • URL: /components/raw/mobilemappane/_mobilemappane.scss
  • Filesystem Path: src/scss/02-modules/mobilemappane/_mobilemappane.scss
  • Size: 948 Bytes

No notes defined.