add header to weater and mobile view to weather

Author: aafomin

src/components/AppHeader.vue

@@ -126,6 +126,11 @@ export default {
               title: "Валюта",
               route: "/mainConverter",
               icon: "trending_up"
+            },
+            {
+              title: "Погода",
+              route: "/weather",
+              icon: "trending_up"
             }
           ]
         : [
@@ -159,6 +164,11 @@ export default {
               route: "/mainConverter",
               icon: "trending_up"
             },
+            {
+              title: "Погода",
+              route: "/weather",
+              icon: "trending_up"
+            },
             {
               title: "ЛК",
               route: "/pc",

src/components/Weather/card-weather.vue

@@ -4,12 +4,7 @@
     class="card"
     :style="{backgroundImage:`url(${require(`@/assets/weather-icons/${dayTime}.jpg`)})`}"
   >
-    <v-snackbar
-      v-model="snackbar"
-      :timeout="timeout"
-      :top="'top'"
-      :color= "'info'"
-    >{{ text }}</v-snackbar>
+    <v-snackbar v-model="snackbar" :timeout="timeout" :top="'top'" :color="'info'">{{ text }}</v-snackbar>
     <v-layout column class="card__title">
       <div class="card__title_time text-md-center">Обновлено {{city.time}}</div>
       <div class="card__title_location text-md-center">{{city.country}}, {{city.city}}</div>
@@ -45,7 +40,7 @@
       <v-flex xs6 offset-sm4>
         <div>{{city.weatherText}}, Видимость {{city.visibility}}</div>
       </v-flex>
-      <v-btn flat small color="brown darken-4" @click="saveToLS">Сохранить</v-btn>
+      <v-btn flat small color="white" @click="saveToLS">Сохранить</v-btn>
     </v-layout>
   </v-layout>
 </template>
@@ -122,8 +117,8 @@ export default {
       font-size: 14px;
       color: wheat;
     }
-    .card__title_location {
-    }
+    // .card__title_location {
+    // }
   }
   .card__center {
     .card__center_temp {
@@ -165,6 +160,16 @@ export default {
 }
 
 @media screen and (max-width: 1024px) {
+  .card {
+    width: 95vw;
+    .card__center {
+      font-size: 12px;
+      .card__center_icon {
+        width: 25vw;
+        height: 25vh;
+      }
+    }
+  }
 }
 @media screen and (max-width: 600px) {
 }

src/components/Weather/search-list.vue

@@ -37,9 +37,15 @@ export default {
   cursor: pointer;
   position: absolute;
   max-height: 55vh;
-  margin-top: 8vh;
+  margin-top: 55px;
   overflow: auto;
-  width: 40%;
+  width: 30%;
   z-index: 1;
 }
+@media screen and (max-width: 1024px) {
+  .weather__searchList {
+    width: 55%;
+  }
+
+}
 </style>

src/components/Weather/weather.vue

@@ -1,7 +1,7 @@
 <template>
   <v-layout column class="weather">
     <loading v-show="isLoading"></loading>
-    <v-flex xs3 offset-sm3 v-click-outside>
+    <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>
@@ -12,7 +12,7 @@
         </v-btn>
         <v-divider></v-divider>
       </v-layout>
-    </v-flex>
+    </div>
     <v-flex xs8 offset-sm3 v-show="!isLoading">
       <div v-for="(city, index) in cities" :key="index">
         <card :city="city"></card>
@@ -37,23 +37,6 @@ export default {
     searchText: "",
     selectCityShow: false,
     selectCity: {}
-    // items: [
-    //   {
-    //     country: "Россия",
-    //     city: "Москва"
-    //   },
-    //   {
-    //     country: "Россия",
-    //     city: "Москва"
-    //   },
-    //   {
-    //     country: "Россия",
-    //     city: "Москва"
-    //   }
-    // ],
-    // cities: {
-    //   city: "Пермь"
-    // }
   }),
   computed: {
     ...mapActions("weatherStore", [
@@ -103,8 +86,18 @@ export default {
 </script>
 <style lang="scss" scoped>
 .weather {
+  position: relative;
+  .weather__search {
+    margin-left: 25%;
+    width: 750px;
+  }
 }
 @media screen and (max-width: 1024px) {
+  .weather {
+    .weather__search {
+      width: 70%;
+    }
+  }
 }
 @media screen and (max-width: 600px) {
 }

src/store/weatherStore.js

@@ -23,7 +23,7 @@ export default {
     },
   },
   actions: {
-    INIT_STATE({ dispatch, commit, state }) {
+    INIT_STATE({ dispatch, state }) {
       state.isLoading = true;
       let arr = [];
       if (localStorage.getItem("city") != null) {
@@ -56,6 +56,7 @@ export default {
       } else {
         /* eslint-disable */
         console.error("геолокация НЕдоступна");
+        alert("Геолокация Не доступна")
       }
     },
     async GET_WEATHER_CITY({ commit }, data) {
@@ -101,14 +102,21 @@ export default {
       let items = []
       let cities = {};
       axios.get(url).then(response => {
-        response.data.forEach(el => {
+        if (response.data.length > 0) {
+          response.data.forEach(el => {
+            cities = {
+              country: el.Country.LocalizedName,
+              city: el.LocalizedName,
+              Key: el.Key
+            };
+            items.push(cities);
+          });
+        } else {
           cities = {
-            country: el.Country.LocalizedName,
-            city: el.LocalizedName,
-            Key: el.Key
+            city: "Ничего не найдено",
           };
-          items.push(cities);
-        });
+          items.push(cities)
+        }
       });
       commit('SET_ITEM_CITY', items)
     },