UnivateProperties/src/components/property/residential/residentialCarouselSection.vue

<template>
  <div>
    <section id="intro">
      <div class="container">
        <div class="form">
          <div class="row">
            <div align="left" class="col-sm-12 col-md-8">
              <div class="intro-content">
                <h2>Find your Home</h2>

                <ul class="nav nav-tabs mb-3" id="pills-tab" role="tablist">
                  <li class="nav-item">
                    <a
                      class="nav-link active"
                      id="buy-tab"
                      data-toggle="pill"
                      href="#buy"
                      role="tab"
                      aria-controls="buy"
                      aria-selected="true"
                      @click="SetSalesType('Sale')"
                    >
                      Buy
                    </a>
                  </li>
                  <li class="nav-item">
                    <a
                      class="nav-link"
                      id="rent-tab"
                      data-toggle="pill"
                      href="#rent"
                      role="tab"
                      aria-controls="rent"
                      aria-selected="false"
                      @click="SetSalesType('Rent')"
                    >
                      Rent
                    </a>
                  </li>
                </ul>
                <div class="tab-content" id="pills-tabContent">
                  <div
                    class="tab-pane fade show active"
                    id="buy"
                    role="tabpanel"
                    aria-labelledby="buy-tab"
                  >
                    <h4>Properties for Sale</h4>
                    <div class="row">
                      <div align="left" class="form-group col-md-12">
                        <autoComplete @GoogleAddress="UpdateAddress" />
                      </div>
                    </div>
                    <a v-on:click="SearchClick" class="btn-white-border">
                      <i class="fa fa-search"></i>
                      Search
                    </a>
                  </div>

                  <div
                    class="tab-pane fade"
                    id="rent"
                    role="tabpanel"
                    aria-labelledby="rent-tab"
                  >
                    <h4>Rental Properties</h4>
                    <div class="row">
                      <div align="left" class="form-group col">
                        <autoComplete @GoogleAddress="UpdateAddress" />
                      </div>
                    </div>
                    <a v-on:click="SearchClick" class="btn-white-border">
                      <i class="fa fa-search"></i>
                      Search
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <carousel
        :nav="false"
        :dots="false"
        :items="1"
        :autoplay="true"
        :loop="true"
        id="intro-carousel"
        style="margin-top: -50px;"
        :responsive="{
          0: { items: 1, nav: false },
          600: { items: 1, nav: false },
        }"
      >
        <img
          class="item"
          src="img/intro-carousel/residential-1.jpg"
          style="object-fit: cover;"
          alt
        />
        <img
          class="item"
          src="img/intro-carousel/residential-2.jpg"
          style="object-fit: cover;"
          alt
        />
        <img
          class="item"
          src="img/intro-carousel/residential-3.jpg"
          style="object-fit: cover;"
          alt
        />
        <img
          class="item"
          src="img/intro-carousel/residential-4.jpg"
          style="object-fit: cover;"
          alt
        />
        <img
          class="item"
          src="img/intro-carousel/residential-5.jpg"
          style="object-fit: cover;"
          alt
        />
        <img
          class="item"
          src="img/intro-carousel/residential-6.jpg"
          style="object-fit: cover;"
          alt
        />
      </carousel>
    </section>
    <main id="main" style="margin-top: -20px;">
      <div class="container-fluid">
        <div class="row">
          <div
            ref="searchRes"
            :class="{ 'searchRes--clicked': clicked }"
            class="col-sm-12 searchRes"
          >
            <searchResult
              :class="{ 'searchComponent--clicked ': clicked }"
              class="searchComponent"
            />
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from 'vuex'
import autoComplete from '../../shared/addressAutoComplete'
import carousel from 'vue-owl-carousel'
import searchResult from '../propertySearchResults'
export default {
  components: {
    carousel,
    autoComplete,
    searchResult,
  },
  data() {
    return {
      propertyUsageType: 'Residential',
      salesType: 'Sale',
      searchText: '',
      clicked: false,
    }
  },
  computed: {
    ...mapState('propertySearch', ['propertySearch']),
  },
  methods: {
    ...mapActions('propertySearch', ['applyFilter']),
    SetSalesType(value) {
      this.salesType = value
    },
    SearchClick() {
      this.propertySearch.propertyUsageType = this.propertyUsageType
      this.propertySearch.salesType = this.salesType

      //this.clicked = true;
      this.$router.push('/property/residential/searchResult')
    },
    SelectedFilter(item) {
      this.searchText = item
    },
    UpdateAddress(place) {
      this.propertySearch.province = place.province
      this.propertySearch.city = place.city
      this.propertySearch.suburb = place.suburb
    },
  },
  mounted() {
    this.propertySearch.city = 'All'
    this.propertySearch.suburb = 'All'
    this.propertySearch.province = 'All'
  },
}
</script>

<style lang="scss" scoped>
.searchRes {
  will-change: transform;
  transition: height 500ms;
  height: 0px;
}

.searchRes--clicked {
  height: 75vh;
}

@media only screen and (max-width: 575px) {
  .searchRes--clicked {
    height: 100vh;
  }
}

@media only screen and (min-width: 576px) {
  .searchRes--clicked {
    height: 60vh;
  }
}

@media only screen and (min-width: 768px) {
  .searchRes--clicked {
    height: 75vh;
  }
}
@media only screen and (min-width: 992px) {
  .searchRes--clicked {
    height: 60vh;
  }
}

@media only screen and (min-width: 1200px) {
  .searchRes--clicked {
    height: 70vh;
  }
}

.searchComponent {
  will-change: transform;
  transition: opacity 0.2s ease-in-out;
  transition-delay: 0.5s;
  margin-bottom: 80px;
  position: absolute;
  width: 100%;
  left: 0;
  opacity: 0;
}

.searchComponent--clicked {
  opacity: 1;
}
.nav-tabs li a {
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: white;
  border-bottom-color: rgb(27, 117, 187);
  border: 1px solid rgb(27, 117, 187);
}

.nav-tabs li :hover {
  color: white;
  background-color: rgb(27, 117, 187);
}

.nav-tabs li a.active {
  border-top: none;
  border-left: none;
  border-right: none;
  color: white;
  background-color: rgb(80, 133, 240);
  border-bottom-color: rgb(80, 133, 240);
}

.nav-tabs li a :hover {
  background-color: transparent;
  color: white;
}
</style>