implement responsive behaviour

components/Ui/Map/Structures.vue

@@ -11,7 +11,12 @@
     </div>
 
     <v-row class="map-shortcuts">
-      <v-col v-for="shortcut in shortcuts" :key="shortcut.src" cols="2">
+      <v-col
+        v-for="shortcut in shortcuts"
+        :key="shortcut.src"
+        cols="4"
+        lg="2"
+      >
         <div @click="setMapBounds(shortcut.bounds)">
           <nuxt-img
             :src="shortcut.src"
@@ -174,5 +179,5 @@ export default Vue.extend({
       border: solid 1px #000;
       width: 75px;
       height: 75px;
-    }
+  }
 </style>

pages/structures/_id.vue

@@ -57,7 +57,11 @@
       <v-divider class="my-2" />
 
       <v-row class="my-2 py-2">
-        <v-col cols="6" class="description">
+        <v-col
+          cols="12"
+          sm="6"
+          class="description"
+        >
           <div class="d-flex flex-row mb-3">
             <h4>{{ $t('descriptive') }}</h4>
             <v-spacer />
@@ -71,7 +75,11 @@
           </p>
         </v-col>
 
-        <v-col cols="6" class="contact">
+        <v-col
+          cols="12"
+          sm="6"
+          class="contact"
+        >
           <div class="d-flex flex-row mb-3">
             <h4>{{ $t('contact') }}</h4>
             <v-spacer />
@@ -138,7 +146,7 @@
 
       <v-row class="mb-4">
         <v-col cols="12">
-          <v-btn disabled>
+          <v-btn small disabled>
             {{ $t('spot_on_from') }} 01/01/2021
           </v-btn>
         </v-col>
@@ -227,15 +235,17 @@ export default Vue.extend({
     color: #666666;
   }
 
-  .description {
-    border-right: solid 2px #e4611b;
-    width: 45%;
-    padding-right: 5%;
-  }
+  @media screen and (min-width: 600px) {
+    .description {
+      border-right: solid 2px #e4611b;
+      width: 45%;
+      padding-right: 5%;
+    }
 
-  .contact {
-    width: 45%;
-    padding-left: 5%;
+    .contact {
+      width: 45%;
+      padding-left: 5%;
+    }
   }
 
   .contact td {

pages/structures/index.vue

@@ -1,7 +1,7 @@
 <!-- Search for member structures -->
 
 <template>
-  <LayoutContainer class="map-view">
+  <LayoutContainer>
     <!-- Header -->
     <v-row>
       <v-layout>
@@ -21,7 +21,11 @@
 
     <v-row>
       <!-- Map Column (hidden in 'list-view' mode)-->
-      <v-col v-show="mapview" cols="6">
+      <v-col
+        v-show="mapview"
+        cols="12"
+        sm="6"
+      >
         <no-ssr>
           <UiMapStructures
             ref="map"
@@ -32,13 +36,16 @@
       </v-col>
 
       <!-- Results column -->
-      <v-col :cols="mapview ? 6 : 12">
+      <v-col
+        cols="12"
+        :sm="mapview ? 6 : 12"
+      >
         <!-- Search form -->
         <v-row>
           <v-form method="get" class="mt-8 w100">
             <v-container>
               <v-row>
-                <v-col cols="6" class="py-2 px-1">
+                <v-col cols="12" md="6" class="py-2 px-1">
                   <v-text-field
                     v-model="textFilter"
                     type="text"
@@ -52,7 +59,7 @@
                   />
                 </v-col>
 
-                <v-col cols="6" class="py-2 px-1">
+                <v-col cols="12" md="6" class="py-2 px-1">
                   <UiSearchAddress
                     ref="addressSearch"
                     type="municipality"
@@ -62,14 +69,14 @@
               </v-row>
 
               <v-row>
-                <v-col v-if="listview" cols="2" class="py-2 px-1">
+                <v-col v-if="listview && $vuetify.breakpoint.mdAndUp" cols="2" class="py-2 px-1">
                   <v-btn class="h100" @click="reinitializeFilters">
                     {{ $t('reinitialize') }}
                   </v-btn>
                 </v-col>
-                <v-col :cols="listview ? 8 : 12">
+                <v-col :cols="(listview && $vuetify.breakpoint.mdAndUp) ? 8 : 12">
                   <v-row class="filters">
-                    <v-col :cols="3" class="py-2 px-1">
+                    <v-col lg="3" :md="listview ? 3 : 6" sm="6" cols="12" class="py-2 px-1">
                       <v-select
                         v-model="practicesFilter"
                         :label="$t('type')"
@@ -81,7 +88,7 @@
                         @change="search"
                       />
                     </v-col>
-                    <v-col :cols="3" class="py-2 px-1">
+                    <v-col lg="3" :md="listview ? 3 : 6" sm="6" cols="12" class="py-2 px-1">
                       <v-select
                         v-model="departmentFilter"
                         :items="departments"
@@ -93,7 +100,7 @@
                         @change="search"
                       />
                     </v-col>
-                    <v-col :cols="3" class="py-2 px-1">
+                    <v-col lg="3" :md="listview ? 3 : 6" sm="6" cols="12" class="py-2 px-1">
                       <v-select
                         v-model="federationFilter"
                         :items="federations"
@@ -105,7 +112,7 @@
                         @change="search"
                       />
                     </v-col>
-                    <v-col :cols="3" class="py-2 px-1">
+                    <v-col lg="3" :md="listview ? 3 : 6" sm="6" cols="12" class="py-2 px-1">
                       <v-select
                         v-model="distanceFilter"
                         :label="$t('distance')"
@@ -124,14 +131,14 @@
                     </v-col>
                   </v-row>
                 </v-col>
-                <v-col v-if="listview" cols="2" class="py-2 px-1 d-flex justify-end">
+                <v-col v-if="listview && $vuetify.breakpoint.mdAndUp" cols="2" class="py-2 px-1 d-flex justify-end">
                   <v-btn class="h100">
                     {{ $t('search') }}
                   </v-btn>
                 </v-col>
               </v-row>
 
-              <v-row v-show="mapview" class="px-2 pt-2">
+              <v-row v-show="mapview || $vuetify.breakpoint.smAndDown" class="px-2 pt-2">
                 <v-btn @click="reinitializeFilters">
                   {{ $t('reinitialize') }}
                 </v-btn>
@@ -177,7 +184,6 @@
             <template #header>
               <i class="results-count">{{ totalRecords }} {{ $t('results') }}</i>
             </template>
-
             <template #default="props">
               <v-row justify="space-between" class="mt-1 mb-3">
                 <v-col
@@ -185,13 +191,13 @@
                   :key="structure.name"
                   cols="12"
                   sm="12"
-                  :md="mapview ? 6 : 12"
+                  :lg="mapview ? 6 : 12"
                   class="py-2 px-1"
                 >
                   <v-card
                     elevation="1"
                     outlined
-                    :class="'structure-card pa-3 d-flex ' + (mapview ? 'flex-column' : 'flex-row align-items-center')"
+                    :class="'structure-card pa-3 d-flex ' + ((mapview || $vuetify.breakpoint.smAndDown) ? 'flex-column' : 'flex-row align-items-center')"
                   >
                     <div class="d-flex justify-center">
                       <v-img