<template>
    <div class="map-container">
        <map-area :place="mapData[locationIndex]"></map-area>
        <map-controls @locationChange="updateArea"
            :mapData="mapData"></map-controls>
    </div>
</template>

<script>
import MapArea from '@/components/MapArea';
import MapControls from '@/components/MapControls';

export default {
    name: 'el-map',
    props: {
        mapData: {
            type: Array,
            required: true,
        },
    },
    data() {
        return {
            locationIndex: 0,
        };
    },
    components: {
        MapArea,
        MapControls,
    },
    methods: {
        updateArea(label) {
            this.locationIndex = this.mapData.findIndex(place => place.city === label);
        },
    },
};
</script>

<style lang="less" scoped>
@import (reference) '~@/assets/variables/global';

.map-container {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    grid-column-gap: (@base-unit * 5);
}
</style>

<template>
    <div class="map-container">
        <map-area :place="mapData[locationIndex]"></map-area>
        <map-controls @locationChange="updateArea"
            :mapData="mapData"></map-controls>
    </div>
</template>

<script>
import MapArea from '@/components/MapArea';
import MapControls from '@/components/MapControls';

export default {
    name: 'el-map',
    props: {
        mapData: {
            type: Array,
            required: true,
        },
    },
    data() {
        return {
            locationIndex: 0,
        };
    },
    components: {
        MapArea,
        MapControls,
    },
    methods: {
        updateArea(label) {
            this.locationIndex = this.mapData.findIndex(place => place.city === label);
        },
    },
};
</script>

<style lang="less" scoped>
@import (reference) '~@/assets/variables/global';

.map-container {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    grid-column-gap: 2.4rem;
    grid-auto-rows: minmax(62vh, auto);
}
</style>

Use grid-auto-rows intead of map-height for map and controls
Use grid-auto-rows intead of map-height for map and controls
