Testing action for master

.github/workflows/dev.yml

@@ -0,0 +1,39 @@
+# Deploing to dev server
+name: Deploy the application to Google Cloud Run
+
+on:
+  pull_request:
+    branches:
+      - 'develop'
+
+  push:
+    branches:
+      - 'develop'
+
+jobs:
+  deploy:
+    name: Deploy job for dev
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v1
+
+      - name: Build Docker image
+        run: |
+          docker build . --tag gcr.io/${{ secrets.GCLOUD_PROJECT }}/${{ secrets.GCLOUD_APP_NAME_DEV }}
+
+      - name: Authenticate into Google Cloud Platform
+        uses: GoogleCloudPlatform/github-actions/setup-gcloud@master
+        with:
+          service_account_email: ${{ secrets.GCLOUD_EMAIL }}
+          service_account_key: ${{ secrets.GCLOUD_AUTH }}
+
+      - name: Configure Docker to use Google Cloud Platform
+        run: "gcloud auth configure-docker --quiet"
+
+      - name: Push image to Google Cloud Container Registry
+        run: docker push gcr.io/${{ secrets.GCLOUD_PROJECT }}/${{ secrets.GCLOUD_APP_NAME_DEV }}
+
+      - name: Install commands and deploy on cloud run
+        run: |
+          gcloud run deploy ${{ secrets.GCLOUD_APP_NAME_DEV }} --quiet --image gcr.io/${{ secrets.GCLOUD_PROJECT }}/${{ secrets.GCLOUD_APP_NAME_DEV }} --project ${{ secrets.GCLOUD_PROJECT }} --region europe-west1 --platform managed

.github/workflows/google.yml → .github/workflows/prod.yml

@@ -1,21 +1,23 @@
-
+# Deploing to prod server
 name: Deploy the application to Google Cloud Run
+
 on:
-  push:
+  pull_request:
     branches:
       - 'master'
 
 jobs:
   deploy:
-    name: Deploy job
+    name: Deploy job for prod
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
         uses: actions/checkout@v1
 
-      - name: Build Docker image
+      - name: Build Docker image for production
         run: |
           docker build . --tag gcr.io/${{ secrets.GCLOUD_PROJECT }}/${{ secrets.GCLOUD_APP_NAME }}
+
       - name: Authenticate into Google Cloud Platform
         uses: GoogleCloudPlatform/github-actions/setup-gcloud@master
         with:

assets/colors.scss

@@ -0,0 +1,3 @@
+$background: #2F2F2F;
+$textColor: #F1F1F1;
+$footer: #4A4A4A;

assets/global.scss

@@ -1,25 +1,23 @@
+@import '@/assets/colors';
+
 * {
   box-sizing: border-box;
-  margin: 0;
-  padding: 0;
 }
 
-html {
-  background: #2F2F2F;
+html, body {
+  margin: 0;
+  padding: 0;
   font-family: 'Montserrat', sans-serif;
+  background: $background;
 }
 
-h1, h2, h3, h4, h5, p {
-  color: #F1F1F1;
+h1, h2, h3, p, a {
+  color: $textColor;
   text-align: center;
 }
 
-h2 {
-  margin-bottom: 10px;
-}
-
-a {
-  color:#F1F1F1;
-  text-decoration: none;
-  margin: 10px;
-}
+@media only screen and (max-width: 765px) {
+  body {
+    padding: 10px;
+  }
+}

components/homepage/about.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="about">
+    <h2>About</h2>
+    <p>We are a Team of Guys from Germany. <br>
+    We started this Project as a Part of our Graduate Exam. The aim is to create a easily usable Aircraft to help Farmers, Rangers and Rescue personal. Due to its Design the Drone can also carry cargo like medicine supplys to unreachable Areas.</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.about {
+  margin-top: 40px;
+}
+
+@media only screen and (min-width: 1200px) {
+  p {
+    width: 800px;
+    margin: 0 auto;
+  }
+}
+</style>

components/design.vue → components/homepage/design.vue

@@ -1,21 +1,38 @@
 <template>
-  <div class="container">
+  <div class="design">
     <h2>Design</h2>
-
     <p>We are creating a high range, autonomous drone with VTOL capabilitys. The Frame is based on a Skywalker X8 design, a flying wing plane.</p>
+
     <p>The aircraft is going to be made out of carbon fiber with 3D printed, easily swappable parts. The sensors are arranged in modules that can be replaced as needed. The Batterys are state of the art lithium ion cells that last for 1 hour of flight time and charge very fast.</p>
+
     <p>The aircraft sould have a high end GPS antenna and LTE connectivity.  With this and all the other sensors the Aircraft is able to operate over long distances while still having a constant connection to the controll station.</p>
+
     <p>The rotors are able to rotate vertical for flying or horizontally for vertical takeoff and landing. In case of an emergency the plane can recover from free fall using the hover mode while gliding mode allows the plane to fly long distances efficently.</p>
 
-    <img src="/images/plan.svg" alt="">
+    <img src="/images/plan.svg">
   </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component} from 'nuxt-property-decorator'
+<style lang="scss" scoped>
+.design {
+  margin-top: 40px;
+  text-align: center;
 
-@Component
-export default class Design extends Vue {
+  img {
+    width: 80%;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  p {
+    width: 800px;
+    margin: 0 auto;
+  }
+}
 
+@media only screen and (min-width: 1200px) {
+  img {
+    width: 1000px !important;
+  }
 }
-</script>
+</style>

components/features.vue → components/homepage/features.vue

@@ -1,56 +1,58 @@
 <template>
-  <div class="container">
+  <div class="features">
     <h2>Features</h2>
+
     <div class="feature">
       <h3>VTOL</h3>
       <p>Enables the Aircraft to access difficult places</p>
     </div>
+
     <div class="feature">
       <h3>Autonomous</h3>
       <p>For large scale operations without human supervision</p>
     </div>
+
     <div class="feature">
       <h3>Long Range</h3>
       <p>1 hour flight time for long missions</p>
     </div>
+
     <div class="feature">
-      <h3>Safe</h3>
+      <h3>Safety</h3>
       <p>Safety for all types of missions</p>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component } from 'nuxt-property-decorator'
-
-@Component
-export default class Features extends Vue {
-
-}
-</script>
-
-
 <style lang="scss" scoped>
-.container {
+.features {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-  gap: 25px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: .5fr 1fr 1fr;
+  margin-top: 40px;
 
   h2 {
     grid-column: 1 / span 2;
   }
+}
+
+@media only screen and (min-width: 1200px) {
+  .features {
+    width: 800px;
+    margin: 40px auto;
+  }
+}
+
+@media only screen and (max-width: 765px) {
+  .features {
+    grid-template-columns: 1fr 0fr;
 
-  .feature {
-    &:nth-of-type(odd) {
+    h2 {
       grid-column: 1;
     }
-    &:nth-of-type(even) {
-      grid-column: 2;
-    }
 
-    h3 {
-      margin-bottom: 10px;
+    .feature {
+      grid-column: 1;
     }
   }
 }

components/homepage/home.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="home">
+    <img src="/images/plane.svg" class="bg-plane">
+
+    <div class="heading">
+      <h1>Autonomous Plane Project</h1>
+      <h2>A plane to save lives and give new insights</h2>
+    </div>
+
+    <div class="contributors">
+      <a href="https://www.github.com/hannHank">HannHank</a>
+      <a href="https://www.github.com/johann-su">johann-su</a>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.home {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: calc(100vh - 200px);
+  margin-bottom: 100px;
+
+  .bg-plane {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80vw;
+    z-index: 1;
+  }
+
+  .heading {
+    margin: auto auto;
+    z-index: 2;
+  }
+
+  a {
+    margin: 10px;
+  }
+}
+
+@media only screen and (max-width: 765px) {
+  .contributors {
+    text-align: center;
+  }
+}
+</style>
+
+