extensions/interactions/InteractiveMap/directives/interactive-map-interaction.component.html - develop - githubmirror/oppia

extensions/interactions/InteractiveMap/directives/interactive-map-interaction.component.html

69 строк1 KB

Pirajesh M R

Fix #18542 : Fixes the alignment issue of the music notes and map interaction components (#18656)

30 июл 2023, 10:48

30 июл 2023, 10:489235fdd

<style>
  .oppia-interactive-map {
    height: 300px;
    margin: auto;
    max-height: 300px;
  }

  .interactive-map-container {
    background: #fff;
    padding: 8px;
    width: 35rem;
  }

  @media screen and (max-width: 1024px) {

    .interactive-map-container {
      padding: 8px 0;
      width: 23rem;
    }
  }

  @media screen and (max-width: 768px) {

    .interactive-map-container {
      padding: 8px 0;
      width: 53rem;
    }
  }

  @media screen and (max-width: 559px) {
    .oppia-interactive-map {
      max-width: 83vw;
      min-width: 1vw;
    }

    .interactive-map-container {
      padding: 8px 0;
      width: 28rem;
    }
  }

  @media screen and (max-width: 375px) {

    .interactive-map-container {
      padding: 8px 0;
      width: 24rem;
    }
  }

  @media screen and (max-width: 320px) {

    .interactive-map-container {
      padding: 8px 0;
      width: 20rem;
    }
  }
</style>

<div class="interactive-map-container">
  <div leaflet
       id="interactiveMap"
       class="oppia-interactive-map"
       [leafletOptions]="mapOptions"
       (leafletClick)="leafletClick($event)"
       (leafletMouseOut)="leafletMouseOut()"
       (leafletMouseOver)="leafletMouseOver()">
    <div *ngIf="mapMarkers" [leafletLayer]="mapMarkers"></div>
  </div>
</div>