Merge pull request #7 from virtuagora/3.x

Ready for 3.0.0

Author: guillecro

.env.example

@@ -13,4 +13,5 @@ VUE_APP_GOOGLE_ANALYTICS_ID=#Changeme
 VUE_APP_MAPBOX_TOKEN_MAPTILES=#Changeme
 VUE_APP_MAPBOX_TOKEN_GEOLOCATION=#Changeme
 VUE_APP_MAPBOX_STYLE=#Changeme
+VUE_APP_YOUTUBE_API_KEY=#ChangeMe
 

README.md

@@ -18,6 +18,13 @@ VUE_APP_BASE_URL_PT=https://creandoredes.org/pt/
 VUE_APP_TITLE_ES=Creando Redes!
 VUE_APP_TITLE_EN=Making Networks!
 VUE_APP_TITLE_PT=Criando Redes!
-VUE_APP_MAPBOX_TOKEN=#Changeme
+VUE_APP_DESCRIPTION_EN=#ChangeMe
+VUE_APP_DESCRIPTION_ES=#ChangeMe
+VUE_APP_DESCRIPTION_PT=#ChangeMe
+VUE_APP_RECAPTCHA_SITE_KEY=#Changeme
+VUE_APP_GOOGLE_ANALYTICS_ID=#Changeme
+VUE_APP_MAPBOX_TOKEN_MAPTILES=#Changeme
+VUE_APP_MAPBOX_TOKEN_GEOLOCATION=#Changeme
 VUE_APP_MAPBOX_STYLE=#Changeme
+VUE_APP_YOUTUBE_API_KEY=#ChangeMe
 ```

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "creating-networks-front",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

package.json

@@ -41,6 +41,29 @@
           padding: 1rem;
         }
       }
+      &.has-background{
+          background-position: center center;
+          background-size: cover;
+          background-repeat: no-repeat;
+          .has-background-gradient{
+            background: #faaa35; /* Old browsers */
+          background: -moz-linear-gradient(
+            -45deg,
+            #faaa35 5%,
+            #f36d2200 94%
+          ); /* FF3.6-15 */
+          background: -webkit-linear-gradient(
+            -45deg,
+            #faaa35 5%,
+            #f36f2200 94%
+          ); /* Chrome10-25,Safari5.1-6 */
+          background: linear-gradient(
+            135deg,
+            #faaa35 5%,
+            #f36d2200 94%
+          ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+          }
+      }
       .title,
       .subtitle {
         color: #fff;
@@ -78,4 +101,15 @@
       }
     }
   }
+}
+
+.book-bg{
+    border-top: 1px solid rgba(255, 255, 255, 0.397);
+
+  background-image: url('/youngatlasbook-bg.png');
+  background-size: cover;
+  background-position: top, center;
+  .hero-body{
+    background: linear-gradient(to bottom, #8c30a367, rgba(0, 0, 0, 0.726));
+  }
 }

public/youngatlasbook-bg.png

@@ -27,25 +27,25 @@
 export default {
   props: {
     city: {
-      type: Object
-    }
+      type: Object,
+    },
   },
   data() {
     return {
       fetchingCityData: true,
-      cityData: null
+      cityData: null,
     };
   },
   methods: {
     getCity() {
       if (this.cityData == null) {
-        this.$http.get(`/v1/cities/${this.city.id}`).then(res => {
+        this.$http.get(`/v1/cities/${this.city.id}`).then((res) => {
           this.cityData = res.data.data;
           this.fetchingCityData = false;
         });
       }
-    }
-  }
+    },
+  },
 };
 </script>
 

public/youngatlasbook-logo.svg

@@ -0,0 +1,59 @@
+<template>
+  <div class="modal-card" style="width: 100%">
+    <section class="modal-card-body has-text-centered">
+      <div class="content">
+        <p><span class="is-size-4 is-700">{{resource.initiatives}} initiatives</span><br> have or does some work (or activity) in</p>
+        <h1 class="subtitle is-3 has-text-primary is-marginless">{{resource.name}}</h1>
+      </div>
+      <div v-if="!getching">
+        <p v-for="initiative in initiatives" :key="initiative.id">
+          <a @click="goToInitiative(initiative.id)">
+            <i class="fas fa-map-marked-alt has-text-primary"></i>
+            &nbsp;{{initiative.name}}
+          </a>
+        </p>
+      </div>
+      <div v-else>
+        <p>
+          <i class="fas fa-spin fa-sync"></i>&nbsp;Loading...
+        </p>
+      </div>
+      <br>
+      <div class="buttons is-centered">
+        <button class="button is-dark is-small" type="button" @click="$parent.close()">Close</button>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    resource: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      initiatives: [],
+      fetching: true
+    }
+  },
+  mounted: function(){
+    this.getInitiatives()
+  },
+  methods: {
+    getInitiatives() {
+        this.$http.get(`/v1/initiatives?countries=${this.resource.countryId}`).then((res) => {
+          this.initiatives = res.data.data;
+          this.fetching = false
+        });
+      },
+    goToInitiative(id){
+      this.$parent.close()
+      this.$router.push({name: 'initiative', params: { id: id }})
+    }
+    }
+  }
+</script>