Upgrade vue-cli to 5.x rc and integrate scss

canopas · Jan 16, 2022 · 6198a4f · 6198a4f
1 parent c647f07
commit 6198a4f
Show file tree

Hide file tree

Showing 21 changed files with 6,460 additions and 14,566 deletions.
diff --git a/vue-frontend/package-lock.json b/vue-frontend/package-lock.json
diff --git a/vue-frontend/package.json b/vue-frontend/package.json
@@ -22,13 +22,16 @@
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@babel/core": "^7.16.7",
+    "@babel/eslint-parser": "^7.16.5",
+    "@vue/cli-plugin-babel": "~5.0.0-rc.2",
+    "@vue/cli-plugin-eslint": "~5.0.0-rc.2",
+    "@vue/cli-service": "~5.0.0-rc.2",
     "@vue/compiler-sfc": "^3.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0"
+    "eslint": "^8.7.0",
+    "eslint-plugin-vue": "^8.3.0",
+    "sass": "^1.48.0",
+    "sass-loader": "^12.4.0"
   },
   "eslintConfig": {
     "root": true,
@@ -40,7 +43,7 @@
       "eslint:recommended"
     ],
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "@babel/eslint-parser"
     },
     "rules": {}
   },

diff --git a/vue-frontend/src/App.vue b/vue-frontend/src/App.vue
@@ -18,7 +18,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 @font-face {
   font-family: "Product Sans";
   font-style: normal;
@@ -61,7 +61,7 @@ body {
   font-size: 1.5rem;
 }
 
-@media (min-width: 768px) {
+@include media-breakpoint-up(md) {
   .header-text {
     line-height: 2rem;
     font-size: 1.875rem;
@@ -73,7 +73,7 @@ body {
   }
 }
 
-@media (min-width: 992px) {
+@include media-breakpoint-up(lg) {
   .header-text {
     font-size: 3rem;
     line-height: 3.6rem;

diff --git a/vue-frontend/src/assets/scss/custom.scss b/vue-frontend/src/assets/scss/custom.scss
@@ -0,0 +1,2 @@
+@import "~bootstrap/scss/bootstrap";
+@import "~bootstrap/scss/mixins";
diff --git a/vue-frontend/src/components/Contact.vue b/vue-frontend/src/components/Contact.vue
diff --git a/vue-frontend/src/components/ContactScreen.vue b/vue-frontend/src/components/ContactScreen.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <ScreenHeader />
+    <ContactLanding />
+    <ContactForm />
+    <ScreenFooter />
+  </div>
+</template>
+
+<script>
+import ScreenHeader from "./partials/ScreenHeader.vue";
+import ScreenFooter from "./partials/ScreenFooter.vue";
+import ContactLanding from "./contact/ContactLanding.vue";
+import ContactForm from "./contact/ContactForm.vue";
+
+export default {
+  components: {
+    ScreenHeader,
+    ContactLanding,
+    ScreenFooter,
+    ContactForm,
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/vue-frontend/src/components/Home.vue → vue-frontend/src/components/HomeScreen.vue b/vue-frontend/src/components/Home.vue → vue-frontend/src/components/HomeScreen.vue
@@ -1,27 +1,27 @@
 <template>
   <div>
-    <Header />
+    <ScreenHeader />
     <LandingView />
     <ClientReview />
     <UserReviews />
     <ProblemSolution />
     <CanopasDescription />
-    <Consultation />
-    <CTA />
-    <Footer />
+    <HomeConsultation />
+    <HomeCTA />
+    <ScreenFooter />
   </div>
 </template>
 
 <script>
-import Header from "./partials/Header.vue";
+import ScreenHeader from "./partials/ScreenHeader.vue";
 import LandingView from "./home/LandingView.vue";
 import UserReviews from "./home/UserReviews.vue";
 import ClientReview from "./home/ClientReview.vue";
 import ProblemSolution from "./home/ProblemSolution.vue";
 import CanopasDescription from "./home/CanopasDescription.vue";
-import Consultation from "./home/Consultation.vue";
-import CTA from "./home/CTA.vue";
-import Footer from "./partials/Footer.vue";
+import HomeConsultation from "./home/HomeConsultation.vue";
+import HomeCTA from "./home/HomeCTA.vue";
+import ScreenFooter from "./partials/ScreenFooter.vue";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
@@ -46,15 +46,15 @@ library.add(
 
 export default {
   components: {
-    Header,
+    ScreenHeader,
     LandingView,
     UserReviews,
     ClientReview,
     ProblemSolution,
     CanopasDescription,
-    Consultation,
-    CTA,
-    Footer,
+    HomeConsultation,
+    HomeCTA,
+    ScreenFooter,
   },
 };
 </script>

diff --git a/vue-frontend/src/components/contact/Form.vue → ...nd/src/components/contact/ContactForm.vue b/vue-frontend/src/components/contact/Form.vue → ...nd/src/components/contact/ContactForm.vue
@@ -399,7 +399,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .apply-information {
   margin: 48px 10%;
 }
@@ -712,7 +712,7 @@ input:-webkit-autofill:active {
   font-size: 1.1rem;
 }
 
-@media (min-width: 992px) {
+@include media-breakpoint-up(lg) {
   .apply-information {
     margin: 48px 18%;
   }
@@ -751,7 +751,7 @@ input:-webkit-autofill:active {
   }
 }
 
-@media (min-width: 1280px) {
+@include media-breakpoint-up(xl) {
   .apply-information {
     margin: 48px 22%;
   }

diff --git a/...ontend/src/components/contact/Landing.vue → ...src/components/contact/ContactLanding.vue b/...ontend/src/components/contact/Landing.vue → ...src/components/contact/ContactLanding.vue
@@ -25,7 +25,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .landing-container {
   margin: 48px 15%;
 }
@@ -49,7 +49,7 @@ export default {
   margin-bottom: 24px;
 }
 
-@media (min-width: 992px) {
+@include media-breakpoint-up(lg) {
   .landing-container {
     margin: 48px 18%;
   }

diff --git a/vue-frontend/src/components/home/CanopasDescription.vue b/vue-frontend/src/components/home/CanopasDescription.vue
@@ -22,7 +22,7 @@
     </div>
     <div class="bongo-cat-wrapper">
       <div class="bongo-cat-div">
-      <BongoCat class="bongo-cat-image" />
+        <BongoCat class="bongo-cat-image" />
       </div>
     </div>
   </div>
@@ -42,7 +42,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .container-canopas-description {
   display: flex;
   flex-direction: column-reverse;
@@ -69,7 +69,7 @@ export default {
   height: 100%;
 }
 
-@media (min-width: 768px) {
+@include media-breakpoint-up(md) {
   .header-text {
     line-height: 2rem;
     font-size: 1.875rem;
@@ -96,7 +96,7 @@ export default {
   }
 }
 
-@media (min-width: 992px) {
+@include media-breakpoint-up(lg) {
   .header-text {
     font-size: 3rem;
     line-height: 3.6rem;
@@ -108,10 +108,9 @@ export default {
   }
 }
 
-@media (min-width: 1280px) 
-{  .bongo-cat-wrapper {
+@include media-breakpoint-up(xl) {
+  .bongo-cat-wrapper {
     flex: 1.3 1 0;
   }
-
 }
 </style>
diff --git a/vue-frontend/src/components/home/ClientReview.vue b/vue-frontend/src/components/home/ClientReview.vue
@@ -20,7 +20,7 @@
                 'client-image-item-' + Math.abs(i - (clientImageCount - 1) / 2)
               "
             >
-              <img              
+              <img
                 :src="client.image"
                 alt="client"
                 draggable="false"
@@ -190,7 +190,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .success-stories-bg {
   background: rgba(255, 148, 114, 0.05);
   padding: 6% 0;
@@ -350,15 +350,7 @@ export default {
   transform: translate(150%);
 }
 
-/* responsive */
-
-@media (min-width: 630px) {
-  .client-review {
-    width: 70%;
-  }
-}
-
-@media (min-width: 768px) {
+@include media-breakpoint-up(md) {
   .header-text {
     line-height: 2rem;
     font-size: 1.875rem;
@@ -369,6 +361,10 @@ export default {
     line-height: 1.375rem;
   }
 
+  .client-review {
+    width: 70%;
+  }
+
   .clients-list-wrapper {
     padding-top: 15%;
   }
@@ -392,7 +388,7 @@ export default {
   }
 }
 
-@media (min-width: 992px) {
+@include media-breakpoint-up(lg) {
   .header-text {
     font-size: 3rem;
     line-height: 3.6rem;
@@ -417,7 +413,7 @@ export default {
   }
 }
 
-@media (min-width: 1025px) {
+@include media-breakpoint-up(xl) {
   .success-stories-bg {
     border-radius: 400px 0;
   }

diff --git a/vue-frontend/src/components/home/CTA.vue → vue-frontend/src/components/home/HomeCTA.vue b/vue-frontend/src/components/home/CTA.vue → vue-frontend/src/components/home/HomeCTA.vue
@@ -89,7 +89,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .cta-container {
   display: flex;
   flex-direction: column;
@@ -184,7 +184,7 @@ export default {
   width: 90%;
 }
 
-@media (min-width: 768px) {
+@include media-breakpoint-up(md) {
   .header-text {
     line-height: 2rem;
     font-size: 1.875rem;
@@ -227,7 +227,7 @@ export default {
   }
 }
 
-@media (min-width: 992px) {
+@include media-breakpoint-up(lg) {
   .header-text {
     font-size: 3rem;
     line-height: 3.6rem;

diff --git a/...tend/src/components/home/Consultation.vue → .../src/components/home/HomeConsultation.vue b/...tend/src/components/home/Consultation.vue → .../src/components/home/HomeConsultation.vue
@@ -91,7 +91,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .consultant-container {
   margin: 48px 10%;
   display: flex;
@@ -169,7 +169,7 @@ export default {
   color: rgba(61, 61, 61, 0.5);
 }
 
-@media (min-width: 992px) {
+@include media-breakpoint-up(lg) {
   .consultant-container {
     flex-direction: row;
   }
@@ -191,7 +191,7 @@ export default {
   }
 }
 
-@media (min-width: 1200px) {
+@include media-breakpoint-up(xl) {
   .consultant-container {
     margin: 48px 15%;
   }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import "~bootstrap/scss/bootstrap";
		@import "~bootstrap/scss/mixins";