Renamed asset folders, added pages, hanged colors.

public/404.html

@@ -7,10 +7,10 @@
     <script>
       const segment = 1;
 
-      sessionStorage.redirect = '/' + location.pathname.slice(1).split('/').slice(segment).join('/');
-      console.log('session redirect', sessionStorage.redirect);
+      //sessionStorage.redirect = '/' + location.pathname.slice(1).split('/').slice(segment).join('/');
+      //console.log('session redirect', sessionStorage.redirect);
 
-      location.replace(location.pathname.split('/').slice(0, 1 + segment).join('/'));
+      //location.replace(location.pathname.split('/').slice(0, 1 + segment).join('/'));
     </script>
 </head>
 

src/App.vue

@@ -38,10 +38,12 @@
 
     export default {
         name: "app",
+        
         components: {
             Navigation,
             Footer
         },
+
         created() {
             this.$buefy.config.setOptions(customIconConfig);
         }
@@ -73,6 +75,9 @@
         "facebook": ($facebook, $facebook-invert),
         "linkedin": ($linkedin, $linkedin-invert),
         "reddit": ($reddit, $reddit-invert),
+
+        "home": ($home, $home-inverted),
+        "home-light": ($home-light, $home-light-inverted),
         "download": ($download, $download-inverted),
         "download-light": ($download-light, $download-light-inverted),
         "donation": ($donation, $donation-inverted),

src/components/Gallery.vue

@@ -34,9 +34,9 @@
                 gallery: false,
                 selected: 0,
                 images: [
-                    { src: "./screenshots/Editor.gif", sub: "gallery.editor" },
-                    { src: "./screenshots/Recorder.png", sub: "gallery.editor" },
-                    { src: "./screenshots/Editor-Empty.png", sub: "gallery.editor" },
+                    { src: "./media/Editor.gif", sub: "gallery.editor" },
+                    { src: "./media/Recorder.png", sub: "gallery.editor" },
+                    { src: "./media/Editor-Empty.png", sub: "gallery.editor" },
                 ]
             }
         },

src/components/Navigation.vue

@@ -38,6 +38,11 @@
                     <p class="is-unselectable">Documentation</p>
                 </b-navbar-item>
 
+                <b-navbar-item tag="router-link" to="/share" :active="$route.path === '/share'">
+                    <b-icon pack="unicon" icon="uil-share" class="is-hidden-touch"></b-icon>
+                    <p class="is-unselectable">Share</p>
+                </b-navbar-item>
+
                 <b-navbar-item tag="router-link" to="/source" :active="$route.path === '/source'">
                     <b-icon pack="unicon" icon="uil-github-alt" class="is-hidden-touch"></b-icon>
                     <p class="is-unselectable">Source</p>
@@ -174,9 +179,9 @@
 
         methods: {
             navigationColor() {
-                switch (this.$route.path) {
-                    case "/":
-                        return "is-primary";
+                switch (this.trimRight(this.$route.path, '/')) {
+                    case "":
+                        return "is-home";
                     case "/downloads":
                         return "is-download";
                     case "/donation":
@@ -190,8 +195,8 @@
                 }
             },
             textColor(){
-                switch (this.$route.path) {
-                    case "/":
+                switch (this.trimRight(this.$route.path, '/')) {
+                    case "":
                     case "/downloads":
                     case "/donation":
                     case "/screenshots":
@@ -202,9 +207,9 @@
                 }
             },
             buttonColor() {
-                switch (this.$route.path) {
-                    case "/":
-                        return this.isLoading ? "is-light" : "is-primary is-inverted";
+                switch (this.trimRight(this.$route.path, '/')) {
+                    case "":
+                        return this.isLoading ? "is-light" : "is-home is-inverted";
                     case "/downloads":
                         return this.isLoading ? "is-light" : "is-download is-inverted";
                     case "/donation":
@@ -218,10 +223,12 @@
                 }
             },
             tooltipBackground() {
-                switch (this.$route.path) {
+                switch (this.trimRight(this.$route.path, '/')) {
                     case "/":
                     case "/downloads":
                     case "/donation":
+                    case "/screenshots":
+                    case "/contact":
                         return "is-light";
                     default:
                         return "is-info";

src/main.js

@@ -12,44 +12,45 @@ import CustomColors from "./mixins/colors.scss";
 
 Vue.use(VueResource);
 Vue.use(Buefy, {
-  defaultIconPack: "unicons",
+    defaultIconPack: "unicons",
 });
 Vue.use(VueShowdown, {
-  flavor: "github",
-  options: {
-    headerLevelStart: 3,
-    openLinksInNewWindow: true,
-    requireSpaceBeforeHeadingText: true,
-  },
+    flavor: "github",
+    options: {
+        headerLevelStart: 3,
+        openLinksInNewWindow: true,
+        requireSpaceBeforeHeadingText: true,
+    }
 });
 Vue.use(VueClipboard);
 Vue.use(CustomColors);
 Vue.use(VueGtag, { 
-  config: { id: "UA-87410077-2" },
-  enabled: process.env.NODE_ENV === 'production' }, router);
+    config: { id: "UA-87410077-2" },
+    enabled: process.env.NODE_ENV === 'production' 
+}, router);
 
 Vue.config.productionTip = false;
 
 Vue.prototype.$store = {
-  release: {},
-  releaseList: [],
-  previousDate: null,
-  totalDownloads: 0,
-  totalDays: 0
+    release: {},
+    releaseList: [],
+    previousDate: null,
+    totalDownloads: 0,
+    totalDays: 0
 };
 
 new Vue({
-  router,
-  i18n,
-  render: (h) => h(App),
-  created() {
-    //console.log('app version', process.env.VUE_APP_VERSION);
+    router,
+    i18n,
+    render: (h) => h(App),
+    created() {
+        // if (sessionStorage.redirect) {
+        //     console.log('redirect', sessionStorage.redirect);
+
+        //     const redirect = sessionStorage.redirect;
+        //     delete sessionStorage.redirect;
 
-    if (sessionStorage.redirect) {
-      const redirect = sessionStorage.redirect;
-      //console.log('redirect', redirect);
-      delete sessionStorage.redirect;
-      this.$router.push(redirect);
+        //     this.$router.push(redirect);
+        // }
     }
-  }
 }).$mount("#app");

src/mixins/colors.scss

@@ -1,6 +1,6 @@
 //Override default colors.
-$primary: #5cadd5;
-//$primary: #427a8a;
+//$primary: #3396c7; //5cadd5;
+$primary: #427a8a;
 $primary-invert: findColorInvert($primary);
 $white: #f8f9fa;
 $black: findColorInvert($white);
@@ -16,24 +16,29 @@ $linkedin-invert: findColorInvert($linkedin);
 $reddit: #FF4500;
 $reddit-invert: findColorInvert($reddit);
 
+$home: #3396c7; //5cadd5;
+$home-inverted: findColorInvert($home);
+$home-light: #29d6b5;
+$home-light-inverted: findColorInvert($home-light);
+
 $download: #155591;
 $download-inverted: findColorInvert($download);
 $download-light: #1c7ed6;
 $download-light-inverted: findColorInvert($download-light);
 
-$donation: #158091;//911515;
+$donation: #6d3fb8; //#667db6; //#3d74b8;
 $donation-inverted: findColorInvert($donation);
-$donation-light: #1cbcd6; //d61c1c;
+$donation-light: rgb(157, 120, 216); //#0082c8;//#799ECC;
 $donation-light-inverted: findColorInvert($donation-light);
 
-$screenshots: #158091;//911515;
+$screenshots: #116611; //rgb(41, 58, 75);//911515;
 $screenshots-inverted: findColorInvert($screenshots);
-$screenshots-light: #1cbcd6; //d61c1c;
+$screenshots-light: #708770; //rgba(90,92,106,1); //d61c1c;
 $screenshots-light-inverted: findColorInvert($screenshots-light);
 
-$contact: #155591;
+$contact: rgb(1, 121, 161);
 $contact-inverted: findColorInvert($contact);
-$contact-light: #1c7ed6;
+$contact-light: #00B4DB;
 $contact-light-inverted: findColorInvert($contact-light);
 
 $dark-15: rgba(0, 0,0, 0.15);

src/mixins/helpers.js

@@ -59,6 +59,18 @@ export default {
 
             return bytes.toFixed(1) + " " + units[u];
         },
+        trimLeft(text, charlist) {
+            if (charlist === undefined)
+                charlist = "\s";
+
+            return text.replace(new RegExp("^[" + charlist + "]+"), "");
+        },
+        trimRight(text, charlist) {
+            if (charlist === undefined)
+                charlist = "\s";
+
+            return text.replace(new RegExp("[" + charlist + "]+$"), "");
+        }
     },
     // filters:{ }
 };

src/router/index.js

@@ -74,6 +74,15 @@ const routes = [
     redirect: "/contact"
   },
 
+  {
+    path: "/share",
+    name: "Share",
+    component: () => import(/* webpackChunkName: "Share" */ "@/views/Share.vue")
+  },
+  {
+    path: "/src",
+    redirect: "/source"
+  },
 
   {
     path: "/source",

src/views/Contact.vue

@@ -148,7 +148,7 @@
 
     //Background of the hero panel.
     .hero.is-contact {
-        background-image: linear-gradient($download, $download-light);
+        background-image: linear-gradient($contact, $contact-light);
     }
     
     //Fills up the space.

src/views/Documentation.vue

@@ -1,9 +1,34 @@
 <template>
-  <div></div>
+    <div class="screenshots">
+        <section class="hero is-light">
+            <div class="hero-body">
+                <div class="container">
+                    <h2 class="title is-size-3 has-text-centered is-unselectable">Documentation</h2>
+                    <p class="subtitle has-text-centered has-text-grey-lighter is-unselectable">Learn how to use ScreenToGif</p>
+                </div>
+            </div>
+        </section>
+
+
+    </div>
 </template>
 
 <script>
-export default {};
+    import ImageLoader from "@/components/ImageLoader.vue";
+
+    export default {
+        components: {
+            ImageLoader
+        },
+    };
 </script>
 
-<style scoped></style>
+<style lang="scss">
+    @import "@/mixins/colors.scss";
+
+    //Background of the hero panel.
+    // .hero.is-screenshots {
+    //     background-image: linear-gradient($screenshots, $screenshots-light);
+    // }
+
+</style>

src/views/Home.vue

@@ -460,11 +460,12 @@
         transform: scale(1);
     }
 
+    @import "@/mixins/colors.scss";
 
     //Background of the hero panel.
     section.hero.is-primary {
         //background-image: url('../assets/BackgroundHome.svg'), linear-gradient(#5cadd5, #54dec4);
-        background-image: linear-gradient(#5cadd5, #54dec4);
+        background-image: linear-gradient($home, $home-light);
     }
 
     // .hero-background {

src/views/Screenshots.vue

@@ -1,9 +1,34 @@
 <template>
-  <div></div>
+    <div class="screenshots">
+        <section class="hero is-screenshots">
+            <div class="hero-body">
+                <div class="container">
+                    <h2 class="title is-size-3 has-text-centered is-unselectable">Screenshots and examples</h2>
+                    <p class="subtitle has-text-centered has-text-grey-lighter is-unselectable">Checkout what you can do with ScreenToGif</p>
+                </div>
+            </div>
+        </section>
+
+
+    </div>
 </template>
 
 <script>
-export default {};
+    import ImageLoader from "@/components/ImageLoader.vue";
+
+    export default {
+        components: {
+            ImageLoader
+        },
+    };
 </script>
 
-<style scoped></style>
+<style lang="scss">
+    @import "@/mixins/colors.scss";
+
+    //Background of the hero panel.
+    .hero.is-screenshots {
+        background-image: linear-gradient($screenshots, $screenshots-light);
+    }
+
+</style>