- add further views

- also use constants via Webpack DefinePlugin

.env

@@ -2,3 +2,4 @@
 NODE_ENV=development
 
 CONSTANT_VALUE=1234567
+VUE_APP_PORTAL=//repository.geologie.ac.at/portal/login

src/App.vue

@@ -9,7 +9,7 @@
     /> -->
     <nav class="navbar navbar-light border-bottom" role="navigation" aria-label="main navigation">
         <div class="navbar-brand">
-            <a class="navbar-item" href="http://geomon.geologie.ac.at/" target="_blank">
+            <a class="navbar-item" href="http://www.geologie.ac.at/" target="_blank">
                 <!-- <img src="./assets/images/TETHYS-Logo.svg" width="240px" height="86" alt="TETHYS Logo" /> -->
                 <img src="./assets/images/TETHYS-Logo.svg" width="240" height="86" />
             </a>
@@ -50,7 +50,7 @@
             <div class="navbar-end">
                 <div class="navbar-item">
                     <div class="buttons">
-                        <a class="button is-primary custom-button">
+                        <a v-bind:href="portal" class="button is-primary custom-button">
                             <i class="fas fa-sign-in-alt"></i>
                             <!-- <fa :icon="['fas', 'phone']" class="fas fa-sign-in-alt" /> -->
                             <!-- </span> -->

src/app.ts

@@ -7,6 +7,8 @@ import HelpViewComponent from "./views/map-view/help-view-component.vue";
 import SearchViewComponent from "./views/search-view/search-view-component.vue";
 import ServiceViewComponent from "./views/services-view/service-view-component.vue";
 import OaiViewComponent from "./views/oai-view/oai-view-component.vue";
+import ContactViewComponent from "./views/contact-view/contact-view-component.vue";
+import { VUE_APP_PORTAL } from "./constants";
 // import VsInput from "./components/vs-input/vs-input.vue";
 // import VsResult from "./components/vs-result/vs-result.vue";
 // import FacetCategory from "./components/face-category/facet-category.vue";
@@ -31,10 +33,12 @@ import OaiViewComponent from "./views/oai-view/oai-view-component.vue";
         SearchViewComponent,
         ServiceViewComponent,
         OaiViewComponent,
+        ContactViewComponent,
     },
 })
 export default class App extends Vue {
     public active = false;
+    public portal = VUE_APP_PORTAL;
 
     mounted(): void {
         // const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);

src/assets/scss/main-styles.scss

@@ -134,7 +134,7 @@ hr.center-line {
     opacity: 1;
 }
 body H1 {
-    font-family: Verdana;
+    // font-family: Verdana;
     text-transform: uppercase;
     font-weight: bold;
     font-size: 1.6em;
@@ -198,46 +198,35 @@ body {
     color: rgb(74, 74, 74);
 }
 
-.icon-spacing {
-    margin-right: 3px;
-}
-
-svg,
-:before,
-:after {
-    box-sizing: border-box;
-    padding: auto;
-    margin: auto;
-}
 
 .hide {
     display: none;
 }
 
-.animate_content {
+// .animate_content {
-    animation: animate 3s ease;
+//     animation: animate 3s ease;
-}
+// }
 
-@keyframes animate {
+// @keyframes animate {
-    10% {
+//     10% {
-        transform: scale(1, 0.004);
+//         transform: scale(1, 0.004);
-    }
+//     }
-    35% {
+//     35% {
-        transform: scale(0.001, 0.004);
+//         transform: scale(0.001, 0.004);
-        opacity: 1;
+//         opacity: 1;
-    }
+//     }
-    50% {
+//     50% {
-        transform: scale(0.001, 0.004);
+//         transform: scale(0.001, 0.004);
-        opacity: 0;
+//         opacity: 0;
-    }
+//     }
-    85% {
+//     85% {
-        transform: scale(1, 0.004);
+//         transform: scale(1, 0.004);
-        opacity: 1;
+//         opacity: 1;
-    }
+//     }
-    100% {
+//     100% {
-        transform: scale(1, 1);
+//         transform: scale(1, 1);
-    }
+//     }
-}
+// }
 
 .page_description {
     font-weight: 300;
@@ -256,78 +245,7 @@ svg,
     overflow: hidden;
 }
 
-.rabbit-grid {
-    padding-left: 2%;
-    padding-right: 2%;
-}
 
-.rabbit-card {
-    height: 10vh;
-    margin: auto;
-    justify-content: center;
-    border-radius: 6px;
-}
-
-.rabbit-text {
-    font-size: 1.75vh;
-}
-
-/* flip the pane when hovered */
-.flip-container:hover .flipper,
-.flip-container.hover .flipper {
-    transform: rotateY(180deg);
-}
-
-.flip-container,
-.front,
-.back {
-    width: 100%;
-    height: 100%;
-}
-
-/* flip speed goes here */
-.flipper {
-    transition: 0.6s;
-    transform-style: preserve-3d;
-
-    position: relative;
-}
-
-/* hide back of pane during swap */
-.front,
-.back {
-    backface-visibility: hidden;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-/* front pane, placed above back */
-.front {
-    z-index: 2;
-    /* for firefox 31 */
-    transform: rotateY(0deg);
-    border-radius: 6px;
-}
-
-/* back, initially hidden pane */
-.back {
-    position: absolute;
-    transform: rotateY(180deg);
-    width: 100%;
-    display: table;
-    justify-content: center;
-    border-radius: 6px;
-    border-style: solid;
-    border-width: 1px;
-}
-
-.back a {
-    display: table-cell;
-    vertical-align: middle;
-    text-align: center;
-}
 
 #home_padding {
     margin-top: 7%;
@@ -391,7 +309,7 @@ svg,
 }
 
 .navbar-light .navbar-menu .navbar-item {
-    font-family: Verdana, sans-serif;
+    // font-family: Verdana, sans-serif;
     color: #212529;
     font-size: 0.9em;
     font-weight: 700;

src/constants.ts

@@ -0,0 +1,11 @@
+// declare const POINT_URL: string;
+// declare const EDGE_URL: string;
+declare const VUE_APP_PORTAL: string;
+
+// const _EDGE_URL = EDGE_URL;
+// const _POINT_URL = POINT_URL;
+const _VUE_APP_PORTAL = VUE_APP_PORTAL;
+
+// export { _EDGE_URL as EDGE_URL };
+// export { _POINT_URL as POINT_URL };
+export { _VUE_APP_PORTAL as VUE_APP_PORTAL };

src/router/index.ts

@@ -4,6 +4,7 @@ import HelpViewComponent from "@/views/map-view/help-view-component.vue";
 import SearchViewComponent from "@/views/search-view/search-view-component";
 import ServiceViewComponent from "@/views/services-view/service-view-component.vue";
 import OaiViewComponent from "@/views/oai-view/oai-view-component.vue";
+import ContactViewComponent from "@/views/contact-view/contact-view-component.vue";
 
 const routes = [
     {
@@ -31,6 +32,11 @@ const routes = [
         name: "Oai",
         component: OaiViewComponent,
     },
+    {
+        path: "/contact",
+        name: "Contact",
+        component: ContactViewComponent,
+    },
 ];
 
 const router = createRouter({

src/views/contact-view/contact-view-component.scss

@@ -0,0 +1,11 @@
+a.social-media {
+    color: #494f54 !important;
+    text-decoration:none;   
+}
+
+.social-links li {
+    // display:inline-block;
+    padding: 0.5rem 0rem
+  }
+
+  

src/views/contact-view/contact-view-component.ts

@@ -0,0 +1,12 @@
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+    name: "ContactViewComponent",
+    // components: {
+    //     VsInput,
+    //     VsResult,
+    //     FacetCategory,
+    //     ActiveFacetCategory,
+    // },
+})
+export default class ContactViewComponent extends Vue {}

src/views/contact-view/contact-view-component.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="container">
+        <section class="section">
+            <div class="column is-full text-center">
+                <!-- <h1>TETHYS SERVICES</h1> -->
+                <p class="lead">Want to keep updated or need further information?</p>
+                <hr class="center-line" />
+            </div>
+            <div class="column is-half contact-us-details" style="padding-top: 0; margin-top: 0">
+                <h3>Our Location</h3>
+                <h5>
+                    Geologische Bundesanstalt <br />
+                    Neulinggasse 38 <br />
+                    1030 Wien <br />
+                    <!-- <i class="fas fa-mobile-alt"></i> +43-1-7125674 <br />
+                    <i class="fas fa-envelope-open-text"></i>
+                    <a class="social-media" href="mailto:repository@geologie.ac.at"> repository@geologie.ac.at</a><br /> -->
+                </h5>
+                <ul class="social-links">
+                    <li><i class="fas fa-phone-alt pr-2"></i> +43-1-7125674 <br /></li>
+                    <li>
+                        <a class="social-media" href="mailto:repository@geologie.ac.at"><i class="fas fa-envelope pr-2"></i> repository(at)geologie.ac.at </a>
+                    </li>
+                    <li>
+                        <a class="social-media" href="https://twitter.com/GeologischeBA" target="_blank"> <i class="fab fa-twitter"></i> twitter.com/GeologischeBA </a>
+                    </li>
+                    <li>
+                        <a class="social-media" href="https://www.facebook.com/geologie.ac.at" target="_blank"> <i class="fab fa-facebook"></i> www.facebook.com/geologie.ac.at </a>
+                    </li>
+                </ul>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script lang="ts">
+import ContactViewComponent from "./contact-view-component";
+export default ContactViewComponent;
+</script>
+
+<style scoped lang="scss">
+@import "./contact-view-component.scss";
+</style>

src/views/home-view/home-view-component.vue

@@ -188,9 +188,10 @@
                         <div class="card-body">
                             <h5 class="card-title">About TETHYS</h5>
                             <ul class="list-group list-group-flush">
-                                <li class="list-group-item"><a href="#">OAI</a></li>
+                                <!-- <li class="list-group-item"><a href="#">OAI</a></li> -->
-                                <li class="list-group-item"><a href="#">About GBA</a></li>
+                                <li class="list-group-item"><router-link to="/oai">OAI</router-link></li>
-                                <li class="list-group-item"><a href="#">News</a></li>
+                                <li class="list-group-item"><a href="https://www.geologie.ac.at/" target="_blank">About GBA</a></li>
+                                <li class="list-group-item"><a href="https://www.geologie.ac.at/news/news" target="_blank">News</a></li>
                             </ul>
                         </div>
                     </div>
@@ -201,7 +202,8 @@
                             <h5 class="card-title">Tools and Support</h5>
                             <ul class="list-group list-group-flush">
                                 <li class="list-group-item">
-                                    <a href="#"><i class="far fa-id-card"></i> Contact</a>
+                                    <!-- <a href="#"><i class="far fa-id-card"></i> Contact</a> -->
+                                    <router-link to="/contact"><i class="far fa-id-card"></i> Contact</router-link>
                                 </li>
                                 <li class="list-group-item">
                                     <a href="#"><i class="fas fa-stamp"></i> Impressum</a>

vue.config.js

@@ -1,3 +1,24 @@
+const webpack = require('webpack');
+
 module.exports = {
-    publicPath: "/" 
+    publicPath: "/",
+    // chainWebpack: config => {
+    //     config
+    //       .plugin('define')
+    //       .tap(args => {
+    //           args[0] = {
+    //              ...args[0],
+    //              VUE_APP_PORTAL: JSON.stringify(process.env.PORTAL),
+    //              // other stuff
+    //           }
+    //           return args
+    //        })
+    //   },
+      configureWebpack: {
+        plugins: [
+          new webpack.DefinePlugin({           
+            VUE_APP_PORTAL: JSON.stringify(process.env.VUE_APP_PORTAL),
+          }),
+        ],
+      },
  }