Development (#63)

* designed the text

* Integrate with aws lambda

* fixed the alignment on Images of Change

* touched up on landing

* Change implementation to get from end of time

* kind of fixed the wrapper thing

* Superimpose future and past data charts

* Fix future and past trends

* implemented a simple footer

* Change css for quiz

* Fix temp chart

* just removing some awkward lines

* New Landing , not done

* Change footer and add temp test landing page

* Add 404 route

* Add new 404 pages

* Change 404

* Fix routing

* Fix chart

* Changed to bootstrap for the nav tab but have bugs

* Update css for map

* Cleanup code and decouple functions

* Add promise.all code for mapbox

* Add css for mapbox and disable scroll

* Change mapbox css

* Update map css

* Implement footer and update fonts

* Touchup footer

* Add font awesome dependencies

* fontawesome decoupling into js file

* Font changes and updates to Landing

* Complete footer 80%

* Touchup footer

* Update footer

* updated package lock json file

* corrected the merge stuff

* corrected the chart

* landing

* Touchup home

* added css modal for map that animates

* Prelim decoupling

* Update Home

* Update home page

* Add animations and prelim css

* Fix about page no responsive

* Implement about css almost responsive

* Decouple birds

* change font and colors of the text

* Preliminary add in future component

* small changes to the text

* Prelim bootstrap carousel implementation

* Touchup bootstrap tabs component

* insert call to action block

* Add last block action

* Add in typewriter

* adding animations

* added simple logic for markers

* added feature (vuejs) to see queried layer data

* Result Modal (WIP)

* fixed line height

* cleaned up the codes

* added disasterinfo component

* Fix some visualize bug

* Tried to add filter func

* fixed the interactiveness of the buttons and texts

* changed the video layout and added in some text

* changed the img files

* fixed the imgs in the page using webp extension

* got a temporary 404 page up..

* changed the css of the button

* added in the dates and changed the textbox layout

* changed the 404 design again

* Font awesome icons

* timeline implementation WIP

* changed to vue.js

* proto 1 time line

* timeline prototype 2, with lots of custom css

* media responsiveness for timeline

* added images, will clean. Functional timeline up

* minor change in top part of the page

* Update pkg-lock and delete weird mapfile

* Remove old images

* delete unused components

* graphical visuals edits

* Reorder css, fix bird and screen width bug

* Remove package

* Solve arrow issue

* Fix window scroll behavior

* Fix typewriter

* Add smart extendible class for button animation

* Fix app.vue duplication bug

* deleted the commented out parts

* adjusted the card height

* deleted commented parts

* shifted the animation to the correct file

* shifted the animation from img to the animation scss

* just changed renamed the folder

* changed the padding and margin

* put in the animation in the scss

* made the slider responsive

* altered the alignment of the astronaut

* changed the img

* add in icons in the Learning page

* made the icons responsive

* edited hamburger

* changed the 404 pg

* First implementation of visualise

* change position

* Testing commit

* revert the image slider to the previous version

* Merge branch 'development' of https://github.com/quinncheong/save-my-world into zq-branch

* reverted back to the previous version

* Touch up input for tabs

* Add hamburger in nav

* FIx navbar responsive bug

* map functionalities and responsiveness

* fixed the footer responsiveness + icons stuff

* Change API to LocationIQ

* Fix new component bug

* Fix header navbar bug

* Delete old componenet and shift folders

* Fix image of change bug

* added read more for result modal

* put some padding around the footer text

* Fix air pollution

* reverted the astronaut

* adding of filter

* added in the links to the social icons

* Added some common css for scrollbar

* Fix footer responsive

* Fix image size

* More footer + app content wrapper fix

* Add phone font size

* Final footer touchups

* Fix responsive about

* Fix future responsive

* Fix home page responsive

* edited

* Fix responsive navbar for homepage

* fixed featuresMain bug

* filter function in the making

* Change default to 2021 in slider. Change on slide

* added function to filter every year and indivyear

* Fix air pollution duplication

* nothing much, just to get the new one

* updated filter so that the result modal is updated

* added loader animations  in animations.scss

* Preliminary changes to map and search results

* Slight fix to disaster

* Add disaster types fix

* Fix scrollbar for disasters

* Finalise responsive filter buttons

* functional loader but buggy seaice map

* still ediitng, original is commented out

* Shift to old components

* Error handling for charts

* Fix loading bug

* handle sea ice error

* Handle chart info

* changed the num of img to 15

* changed the padding of the card content

* Add loader for pollution

* Handle loader for graphical visuals

* changed the responsiveness of the images for smaller screens

* Fix disaster css

* Initial weird thanks visualise

* edited

* dynamic filter,slider. Disables when popup clicked

* Done global scss and fix news component

* Disabled interactive when clicked

* Make learning responsive

* Add videos css

* changed to webp

* Shift font-awesome import

* Fix image slider font

Co-authored-by: asianburpgirl <estherrrlychee@gmail.com>
Co-authored-by: WeiTingsys <lauweiting2012@gmail.com>
Co-authored-by: Wong Jie Peng <76239879+jiepengwong@users.noreply.github.com>
Co-authored-by: Lau Wei Ting <76719595+WeiTingsys@users.noreply.github.com>

src/App.vue

@@ -124,5 +124,4 @@ a {
     padding: 1rem;
   }
 }
-  
 </style>

src/components/Learning/Videos.vue → src/OldComponents/Learning/Videos.vue

@@ -15,6 +15,19 @@
       v-for="(srcset, index) of sources"
       class="cards_item"
       >
+
+      <!--original-->
+        <!-- <div class="card bg-transparent">
+          <div class="card_image"><iframe width="100%" height="100%"
+              :src="srcset.link"
+              allowfullscreen
+            ></iframe></div>
+          <div class="card_content">
+            <h6 class="card_title">{{ srcset.title }}</h6>
+            <p class="card_text">{{ srcset.text }}</p>
+          </div>
+        </div> -->
+
         <div class="card bg-transparent">
           <div class="card_image"><iframe width="100%" height="100%"
               :src="srcset.link"
@@ -25,6 +38,7 @@
             <p class="card_text">{{ srcset.text }}</p>
           </div>
         </div>
+
       </li>
     </ul>
   </div>

src/components/Charts/MainChart.vue → src/OldComponents/MainChart.vue

@@ -6,8 +6,8 @@
 </template>
 
 <script>
-import TempChart from "./TemperatureChart.vue";
-import AirPollutionChart from "./AirPollutionChart.vue";
+import TempChart from "../components/Charts/TemperatureChart.vue";
+import AirPollutionChart from "../components/Charts/AirPollutionChart.vue";
 
 export default {
   name: "MainChart",

src/assets/js/fontawesome-icons.js

@@ -5,7 +5,9 @@ import { faTwitter } from "@fortawesome/free-brands-svg-icons";
 import { faLinkedin } from "@fortawesome/free-brands-svg-icons";
 import { faInstagram } from "@fortawesome/free-brands-svg-icons";
 import { faGithub, faFacebookSquare } from "@fortawesome/free-brands-svg-icons";
+import { fas } from "@fortawesome/free-solid-svg-icons";
 
+library.add(fas);
 library.add(faTwitter);
 library.add(faInstagram);
 library.add(faLinkedin);

src/assets/scss/_animations.scss

@@ -325,3 +325,22 @@ font-family: "Sora", sans-serif;
 	}
 }
 
+
+.loader {
+  border: 16px solid #f3f3f3; /* Light grey */
+  border-top: 16px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+  margin: 0 auto;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/assets/scss/_common.scss

@@ -1,11 +1,76 @@
 @import "./variables";
+@import "./placeholders";
 
-::-webkit-scrollbar {
-  width: 4px;
+// ::-webkit-scrollbar {
+//   width: 8px;
+// }
+
+// ::-webkit-scrollbar-thumb {
+//   @extend %scrollbar-thumb;
+// }
+
+// ::-webkit-scrollbar-thumb:hover {
+//   background: $color-secondary;
+// }
+
+// Loader spinner
+.loader {
+  border: 16px solid #f3f3f3; /* Light grey */
+  border-top: 16px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 1s linear infinite;
+  margin: 0 auto;
+}
+
+/* common loading for font */
+.loading {
+  font-size: 44px;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 800;
+  text-align: center;
+  letter-spacing: 10px;
+  span {
+    display: inline-block;
+    margin: 0 -0.05em;
+  }
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: $color-secondary;
+/* code #7 */
+.loading07 {
+  span {
+    position: relative;
+    color: rgba(#000, 0.2);
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      content: attr(data-text);
+      color: #fff;
+      opacity: 0;
+      transform: scale(1.5);
+      animation: loading07 3s infinite;
+    }
+    @for $i from 1 through 6 {
+      &:nth-child(#{$i + 1})::after {
+        animation-delay: #{$i * 0.1}s;
+      }
+    }
+  }
+}
+@keyframes loading07 {
+  0%,
+  75%,
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+  25%,
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
 .font-big {

src/assets/scss/_placeholders.scss

@@ -9,7 +9,7 @@
   border: 4px solid rgba(0, 0, 0, 0);
   background-color: rgba(94, 94, 94, 0.51);
   background-clip: padding-box;
-  margin-right: 4px;
+  height: 50px;
 }
 
 %background-overlay{
@@ -27,4 +27,13 @@
   margin: auto;
   justify-content: space-between;
   font-size: $variable-font;
+}
+
+// Css for a vertical flex direction baseline
+%vertical-flex {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: justify;
 }

src/assets/scss/_variables.scss

@@ -10,7 +10,7 @@ $tertiary-color: #8e8e8e;
 $tertiary-color-opacity: #8e8e8e80;
 
 // For webkit scrollbar
-$color-secondary: #535353;
+$color-secondary: black;
 
 $testing-variable: rgb(73, 200, 51);
 $font-size-primary: 1.4rem;

src/components/Charts/AirPollutionChart.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="card border-primary mb-3">
       <div class="card-header text-primary weight">Air Pollution</div>
-      <div class="card-body text-dark">
+      <div class="card-body temp-card-body text-dark">
         <vue3-chart-js
           :id="barChart.id"
           ref="chartRef"
@@ -27,40 +27,7 @@
       </div>
     </div>
 
-    <!--this is the correct one-->
-
-    <!-- <form @submit="handleClick"> -->
-    <!-- <p>Select a country:</p> -->
-    <!-- <div class="form-box"> -->
-    <!-- <div class= 'container'> -->
-    <!-- <label class="form-label"> -->
-    <!-- <p>Select a country:</p> -->
-
-    <!-- <select data-live-search="true" class=" include-margin selectpicker"  v-model="country" > -->
-    <!--the following drop down list is correct-->
-    <!-- <select class='include-margin' v-model="country">
-          <option
-            :key="country.name"
-            v-for="country in countries"
-            :value="country.name"
-          > 
-            {{ country.name }}
-          </option>
-        </select> -->
-    <!-- </label> -->
-    <!-- </div> -->
-    <!-- <button class="btn btn-success search-btn">Get Data</button> -->
-    <!-- </div> -->
-
-    <!-- <label>
-        Select a year (must be 2020 only):
-        <input v-model="year" type="number" required />
-      </label> -->
-    <!-- <button class="btn btn-success search-btn">Get Data</button> -->
-    <!-- </form> -->
-
     <!--seeing how to make the bar responsive  -->
-
     <form @submit="handleClick">
       <p class="mb-2">Select a country:</p>
       <div class="form-box mb-3">
@@ -81,13 +48,19 @@
         <!-- </div> -->
         <button class="btn btn-success search-btn">Get Data</button>
       </div>
-
-      <!-- <label>
-        Select a year (must be 2020 only):
-        <input v-model="year" type="number" required />
-      </label> -->
-      <!-- <button class="btn btn-success search-btn">Get Data</button> -->
     </form>
+    <!-- Loading component -->
+    <section v-show="isLoading">
+      <div class="loading loading07">
+        <span data-text="L">L</span>
+        <span data-text="O">O</span>
+        <span data-text="A">A</span>
+        <span data-text="D">D</span>
+        <span data-text="I">I</span>
+        <span data-text="N">N</span>
+        <span data-text="G">G</span>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -112,6 +85,7 @@ export default {
     const chartRef = ref(null);
     const country = ref("Singapore");
     const year = ref(2020);
+    const isLoading = ref(false);
 
     const barChart = {
       id: "bar",
@@ -174,7 +148,7 @@ export default {
             // fontColor: '#4848EE',
           },
           xAxes: {
-            display: false,
+            display: true,
             stacked: true,
           },
           // xAxes: {
@@ -201,19 +175,20 @@ export default {
     // Function to load the new data
     const handleClick = async (e) => {
       e.preventDefault();
-
-      //   First portion is to do forward geocoding to get the lat and long
-      // Need better plan to support https
-      // let geolocationUrl = "https://api.positionstack.com/v1/forward";
-      // let access_key = process.env.VUE_APP_POSITIONSTACK_API_KEY;
-      let query = country.value;
-      let isoCountry = iso.whereCountry(country.value).country;
-      console.log(iso.whereCountry(country.value))
-
-      // New forward geocoding api
-      let access_key = process.env.VUE_APP_LOCATION_IQ_API;
-      let geolocationUrl = `https://us1.locationiq.com/v1/search.php?`
+      isLoading.value = true;
       try {
+        //   First portion is to do forward geocoding to get the lat and long
+        // Need better plan to support https
+        // let geolocationUrl = "https://api.positionstack.com/v1/forward";
+        // let access_key = process.env.VUE_APP_POSITIONSTACK_API_KEY;
+        let query = country.value;
+        let isoCountry = iso.whereCountry(country.value).country;
+        console.log(iso.whereCountry(country.value));
+
+        // New forward geocoding api
+        let access_key = process.env.VUE_APP_LOCATION_IQ_API;
+        let geolocationUrl = `https://us1.locationiq.com/v1/search.php?`;
+
         // This is for position stack api
         // let res = await axios.get(geolocationUrl, {
         //   params: {
@@ -344,8 +319,12 @@ export default {
         ];
 
         chartRef.value.update(null);
+        isLoading.value = false;
       } catch (err) {
-        console.log(err);
+        isLoading.value = false;
+        alert(
+          "The country you selected is currently not available. Please select another country."
+        );
       }
     };
 
@@ -373,12 +352,12 @@ export default {
       chartRef,
       year,
       country,
+      isLoading,
       updateChart,
       handleClick,
       countries,
     };
   },
-
   //added
   // mounted(){
   //   const plugin = document.createElement("script");
@@ -392,37 +371,33 @@ export default {
 };
 </script>
 
-
-
-
 <style lang="scss" scoped>
-.temp-chart-bg {
-  display: flex;
-  flex-direction: column;
-  padding: 1rem;
-  background-color: white;
-  color: black;
-  justify-content: center;
-  margin: auto;
-  width: 100%;
+.temp-card-body {
+  padding: 0.3rem;
+}
+
+@media screen and (min-width: 568px) {
+  .temp-card-body {
+    padding: 1rem;
+  }
 }
 
 .search-btn {
-  background: green;
+  background: $bg-color-secondary;
   color: #fff;
-  height: 28px;
+  height: 26px;
   // width: 100px;
   border: none;
   border-radius: 3px;
   padding: 5px;
   font-size: 15px;
-}
 
-// change background color on horver
-.search-btn:hover {
-  background: #fff;
-  color: black;
-  font-weight: bold;
+  // change background color on horver
+  &:hover {
+    background: #fff;
+    color: black;
+    font-weight: bold;
+  }
 }
 
 .weight {