fix bugs in weather

Author: aafomin

src/components/Main/imageGrid.vue

@@ -15,11 +15,6 @@
           <p>To continue</p>
           <p>you need to register</p>
         </div>
-        <!-- <div class="text-xs-center">
-          <v-btn round large color="brown darken-4" dark>
-            <h2>Начать</h2>
-          </v-btn>
-        </div>-->
       </v-flex>
     </v-layout>
   </v-container>

src/components/Weather/card-weather.vue

@@ -203,9 +203,8 @@ export default {
   .card {
     width: 95vw;
     height: 40%;
-    margin: auto;
     .card__center {
-      font-size: 0.75rem;
+      font-size: 1rem;
       .center__icon {
         width: 32vw;
         height: 20vh;
@@ -226,7 +225,7 @@ export default {
   .card__datails {
     margin: auto;
     width: 95vw;
-    height: 40vh;
+    height: 42vh;
   }
 }
 </style>

src/components/Weather/weather.vue

@@ -5,7 +5,7 @@
     <div v-click-outside>
       <v-layout v-show="!isLoading" class="weather__search">
         <v-layout column>
-          <v-text-field label="Search" clearable v-model="searchText"></v-text-field>
+          <v-text-field class="weather__search-input" label="Search" clearable v-model="searchText"></v-text-field>
           <search-list v-if="selectCityShow" :items="items" @selectItem="getWeatherByCity"></search-list>
         </v-layout>
         <v-btn fab dark color="brown darken-4" small @click="searchCity">
@@ -14,7 +14,7 @@
         <v-divider></v-divider>
       </v-layout>
     </div>
-    <v-flex xs8 offset-sm3 v-show="!isLoading">
+    <v-flex class="weather__card" xs8 v-show="!isLoading">
       <div v-for="(city, index) in cities" :key="index">
         <card :city="city"></card>
       </div>
@@ -47,7 +47,12 @@ export default {
       "SEARCH_CITY",
       "GET_WEATHER_CITY"
     ]),
-    ...mapState("weatherStore", ["cities", "items", "isLoading", "searchLoading"])
+    ...mapState("weatherStore", [
+      "cities",
+      "items",
+      "isLoading",
+      "searchLoading"
+    ])
   },
   created() {
     this.INIT_STATE;
@@ -88,15 +93,25 @@ export default {
 <style lang="scss" scoped>
 .weather {
   position: relative;
+  .weather__card {
+    margin: auto;
+  }
   .weather__search {
-    margin-left: 25%;
-    width: 750px;
+    margin: auto;
+    width: 650px;
+    .weather__search-input {
+      font-size: 1.75rem;
+      width: 600px;
+    }
   }
 }
 @media screen and (max-width: 800px) {
   .weather {
     .weather__search {
-      width: 70%;
+      width: 85%;
+      .weather__search-input {
+        width: 100%;
+      }
     }
   }
 }

src/views/loading.vue

@@ -30,4 +30,12 @@ export default {
     margin-top: 15%;
   }
 }
+@media screen and (max-width: 800px) {
+  .text-xs-center {
+    .circular {
+      margin-top: 20%;
+      margin-left: -12vw;
+    }
+  }
+}
 </style>