- further views: help-view.component, oai-view-component

- new .card header images

src/App.vue

@@ -25,22 +25,24 @@
                     <!-- <a class="navbar-link is-arrowless active" href="#">STARTSEITE</a> -->
                     <router-link class="navbar-link is-arrowless" to="/test/">STARTSEITE</router-link>
                 </li>
-                <li class="navbar-item">
-                    <!-- <a class="navbar-link is-arrowless" href="#">INTRO</a> -->
-                    <router-link class="navbar-link is-arrowless" to="/test/map">INTRO</router-link>
-                </li>
                 <li class="navbar-item">
                     <!-- <a class="navbar-link is-arrowless" href="#">SEARCH</a> -->
                     <router-link class="navbar-link is-arrowless" to="/test/search">SEARCH</router-link>
                 </li>
                 <li class="navbar-item">
-                    <a class="navbar-link is-arrowless" href="#">SERVICES</a>
+                    <!-- <a class="navbar-link is-arrowless" href="#">SERVICES</a> -->
+                    <router-link class="navbar-link is-arrowless" to="/test/services">SERVICES</router-link>
                 </li>
                 <li class="navbar-item">
+                    <!-- <a class="navbar-link is-arrowless" href="#">INTRO</a> -->
+                    <router-link class="navbar-link is-arrowless" to="/test/help">HELP</router-link>
+                </li>
+                <!-- <li class="navbar-item">
                     <a class="navbar-link is-arrowless" href="#">HELP</a>
-                </li>
+                </li> -->
                 <li class="navbar-item">
-                    <a class="navbar-link is-arrowless" href="#">OAI</a>
+                    <!-- <a class="navbar-link is-arrowless" href="#">OAI</a> -->
+                    <router-link class="navbar-link is-arrowless" to="/test/oai">OAI</router-link>
                 </li>
                 <!-- 
                 <a href="#" class="custom-btn"><i class="fas fa-sign-in-alt"></i>SIGN IN</a> -->
@@ -97,7 +99,7 @@ export default App;
     p,
     ol,
     ul,
-    li,
+    // li,
     dl,
     textarea,
     h1,

src/app.ts

@@ -1,8 +1,10 @@
 import { Options, Vue } from "vue-class-component";
 import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
 import HomeViewComponent from "./views/home-view/home-view-component.vue";
-import MapViewComponent from "./views/map-view/map-view-component.vue";
+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 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";
@@ -22,8 +24,29 @@ import SearchViewComponent from "./views/search-view/search-view-component.vue";
         // VsResult,
         // FacetCategory,
         // ActiveFacetCategory,
-        MapViewComponent,
+        HelpViewComponent,
         SearchViewComponent,
+        ServiceViewComponent,
+        OaiViewComponent,
     },
 })
-export default class App extends Vue {}
+export default class App extends Vue {
+    mounted(): void {
+        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);
+        // Check if there are any navbar burgers
+        if ($navbarBurgers.length > 0) {
+            // Add a click event on each of them
+            $navbarBurgers.forEach((el) => {
+                el.addEventListener("click", () => {
+                    // Get the target from the "data-target" attribute
+                    const target = el.dataset.target;
+                    const $target = document.getElementById(target);
+
+                    // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+                    el.classList.toggle("is-active");
+                    $target?.classList.toggle("is-active");
+                });
+            });
+        }
+    }
+}

src/assets/scss/main-styles.scss

@@ -399,3 +399,79 @@ svg,
 .navbar-item img {
     max-height: 6rem;
 }
+
+
+
+
+.card {
+    position: relative;  
+    display: flex;  
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    border-radius: 0.25rem;
+}
+
+.card-body {
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    padding: 1rem 1rem;
+}
+
+.text-white {
+    color: #fff !important;
+}
+
+// .work-front {
+//     position: absolute;
+//     top: 5%;
+//     left: 5%;
+// }
+.work-front {
+    display: flex;
+}
+.work-front .box-1,
+.work-front .box-2,
+.work-front .box-3 {
+    position: absolute;
+    top: 85%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+// .work-back {
+//     position: absolute;
+//     top: 5%;
+//     left: 5%;
+// }
+.work-back {
+    display: none;
+}
+.work-back .box-1-hover {
+    position: absolute;
+    top: 5%;
+    left: 5%;
+    opacity: 0.9;
+    padding: 2%;
+}
+
+.custom-heading {
+    font-family: Verdana;
+    font-weight: bold;
+    font-size: 1.2em;
+    line-height: 1.9em;
+    color: #fff;
+}
+
+.work-items div:hover .work-back {
+    display: flex;
+    /* box-shadow: inset 0 0 0 10px #222; */
+}
+.work-items div:hover .work-front {
+    display: none;
+}

src/router/index.ts

@@ -1,7 +1,9 @@
 import { createWebHistory, createRouter } from "vue-router";
 import HomeViewComponent from "@/views/home-view/home-view-component.vue";
-import MapViewComponent from "@/views/map-view/map-view-component.vue";
+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";
 
 const routes = [
     {
@@ -10,15 +12,25 @@ const routes = [
         component: HomeViewComponent,
     },
     {
-        path: "/test/map",
-        name: "Map",
-        component: MapViewComponent,
+        path: "/test/help",
+        name: "Help",
+        component: HelpViewComponent,
     },
     {
         path: "/test/search",
         name: "Search",
         component: SearchViewComponent,
     },
+    {
+        path: "/test/services",
+        name: "Services",
+        component: ServiceViewComponent,
+    },
+    {
+        path: "/test/oai",
+        name: "Oai",
+        component: OaiViewComponent,
+    },
 ];
 
 const router = createRouter({

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

@@ -13,83 +13,7 @@ h6 {
     margin-top: 1.5rem;
 }
 
-.card {
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    min-width: 0;
-    word-wrap: break-word;
-    background-color: #fff;
-    background-clip: border-box;
-    border: 1px solid rgba(0, 0, 0, 0.125);
-    border-radius: 0.25rem;
-}
 
-.card-body {
-    -webkit-box-flex: 1;
-    -ms-flex: 1 1 auto;
-    flex: 1 1 auto;
-    padding: 1rem 1rem;
-}
-
-.text-white {
-    color: #fff !important;
-}
-
-// .work-front {
-//     position: absolute;
-//     top: 5%;
-//     left: 5%;
-// }
-.work-front {
-    display: flex;
-}
-.work-front .box-1,
-.work-front .box-2,
-.work-front .box-3 {
-    position: absolute;
-    top: 85%;
-    left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-}
-
-// .work-back {
-//     position: absolute;
-//     top: 5%;
-//     left: 5%;
-// }
-.work-back {
-    display: none;
-}
-.work-back .box-1-hover {
-    position: absolute;
-    top: 5%;
-    left: 5%;
-    opacity: 0.9;
-    padding: 2%;
-}
-
-.custom-heading {
-    font-family: Verdana;
-    font-weight: bold;
-    font-size: 1.2em;
-    line-height: 1.9em;
-    color: #fff;
-}
-
-.work-items div:hover .work-back {
-    display: flex;
-    /* box-shadow: inset 0 0 0 10px #222; */
-}
-.work-items div:hover .work-front {
-    display: none;
-}
 
 //contact apge
 .page-breaker {

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

@@ -1,16 +1,16 @@
 import { Options, Vue } from "vue-class-component";
-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";
-import ActiveFacetCategory from "@/components/active-facet-category/active-facet-category.vue";
+// 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";
+// import ActiveFacetCategory from "@/components/active-facet-category/active-facet-category.vue";
 
 @Options({
     name: "HomeViewComponent",
-    components: {
-        VsInput,
-        VsResult,
-        FacetCategory,
-        ActiveFacetCategory,
-    },
+    // components: {
+    //     VsInput,
+    //     VsResult,
+    //     FacetCategory,
+    //     ActiveFacetCategory,
+    // },
 })
 export default class HomeViewComponent extends Vue {}

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

@@ -87,7 +87,7 @@
                     <p class="lead">Eine Übersicht unserer Dienstleistungen</p>
                     <hr class="center-line" />
                 </div>
-                <div class="columns is-desktop work-items">
+                <div class="columns is-tablet work-items">
                     <div class="column col-sm overlay-boxes">
                         <div class="card overlay work-back">
                             <img src="@/assets/site/img/box-1-hover.jpg" alt="Datenarchivierung" />

src/views/map-view/help-view-component.scss

@@ -0,0 +1,75 @@
+// .card {
+//     position: relative;
+//     display: flex;
+//     -webkit-box-orient: vertical;
+//     -webkit-box-direction: normal;
+//     -ms-flex-direction: column;
+//     flex-direction: column;
+//     min-width: 0;
+//     word-wrap: break-word;
+//     background-color: #fff;
+//     background-clip: border-box;
+//     border: 1px solid rgba(0, 0, 0, 0.125);
+//     border-radius: 0.25rem;
+// }
+
+.card p {
+    margin-top: 1.5rem;
+}
+
+.card-img,
+.card-img-top {
+    border-top-left-radius: calc(0.25rem - 1px);
+    border-top-right-radius: calc(0.25rem - 1px);
+}
+.card-img,
+.card-img-top,
+.card-img-bottom {
+    width: 100%;
+}
+
+// .card-body {
+//     -webkit-box-flex: 1;
+//     -ms-flex: 1 1 auto;
+//     flex: 1 1 auto;
+//     padding: 1rem 1rem;
+// }
+// .p-0 {
+//     padding: 0 !important;
+// }
+
+.card-title-custom {
+    // font-family: Verdana;
+    background-color: #336699;
+    width: 100%;
+    text-align: center;
+    text-transform: uppercase;
+    font-weight: bold;
+    padding: 4%;
+    color: #fff;
+    margin: 0;
+}
+
+.card-title-custom .h5 {
+    font-size: 1.25rem;
+}
+.card-text:last-child {
+    margin-bottom: 0;
+}
+
+.card-equal-height {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+a.text-secondary {
+    color: #494f54 !important;
+    text-decoration: underline;
+}
+
+a.text-secondary:focus,
+a.text-secondary:hover {
+    color: #494f54 !important;
+    text-decoration: underline;
+}

src/views/map-view/help-view-component.ts

@@ -2,8 +2,8 @@ import { Options, Vue } from "vue-class-component";
 // import { Prop } from "vue-property-decorator";
 
 @Options({
-    name: "MapViewComponent",
+    name: "HelpViewComponent",
 })
-export default class MapViewComponent extends Vue {
+export default class HelpViewComponent extends Vue {
     results: Array<any> = [];
 }

src/views/map-view/help-view-component.vue

@@ -0,0 +1,90 @@
+<template>
+    <div class="container">
+        <div class="columns is-desktop help-items">
+            <div class="column col-sm">
+                <div class="card super-card card-equal-height">
+                    <img class="card-img-top" src="@/assets/site/img/card-header1.jpg" alt="card header" />
+
+                    <div class="card-body p-0">
+                        <h5 class="card-title-custom">Tethys RDR</h5>
+                    </div>
+                    <div class="card-content">
+                        <p class="card-text">
+                            Tethys RDR ist ein Datenverlag der Geologischen Bundesanstalt (GBA), der ausschließlich an der GBA generierte geowissenschaftliche Forschungsdat en
+                            publiziert. Die Datenpublikationen können sowohl in deutscher, als auch in englischer Sprache publiziert werden. Durch die Bereitstellung der
+                            Datenpublikation zusammen mit Metadaten nach standardisierten Schemata werden die Publikationen auffindbar und zitierbar.
+                        </p>
+                    </div>
+                    <div class="card-footer">
+                        <p class="card-footer-item">
+                            <a class="button is-primary custom-button">
+                                <i class="fas fa-sign-in-alt"></i>
+                                <strong>KONTAKT</strong>
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="column col-sm">
+                <div class="card super-card card-equal-height">
+                    <img class="card-img-top" src="@/assets/site/img/card-header2.jpg" alt="card header" />
+                    <div class="card-body p-0">
+                        <h5 class="card-title-custom">Voraussetzungen</h5>
+                    </div>
+                    <div class="card-content">
+                        <p class="card-text">
+                            GBA-Angehörigkeit oder in Kooperation mit der GBA gemeinsame Publikation der Daten. Im Besitz eines eigenen Zugangscodes zu sein bzw. um den Zugangscode
+                            anzufragen (Kontakt).
+                        </p>
+                        <p class="card-text">Die Datenpublikationsrichtlinien gelesen, verstanden und akzeptiert zu haben.</p>
+                        <p class="card-text">Die Datensätze vollständig und fachlich korrekt hochladen.</p>
+                    </div>
+                    <div class="card-footer">
+                        <p class="card-footer-item">
+                            <a class="button is-primary custom-button">
+                                <i class="fas fa-sign-in-alt"></i>
+                                <strong>KONTAKT</strong>
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="column col-sm">
+                <div class="card super-card card-equal-height">
+                    <img class="card-img-top" src="@/assets/site/img/card-header3.jpg" alt="card header" />
+                    <div class="card-body p-0">
+                        <h5 class="card-title-custom">DATEN UPLOAD</h5>
+                    </div>
+                    <div class="card-content">
+                        <p class="card-text">
+                            Wird eine Datenpublikation erwünscht, so kann der Verfasser der Publikation sich direkt bei Tethys RDR einloggen und den Publikationsablauf starten.
+                        </p>
+                        <p class="card-text">
+                            Wurde noch kein <a href="" class="text-secondary">account</a> angelegt, steht das Tethys RDR-Team bereit, um die weiteren Schritte zu klären (Kontakt).
+                        </p>
+                    </div>
+                    <div class="card-footer">
+                        <p class="card-footer-item">
+                            <a class="button is-primary custom-button">
+                                <i class="fas fa-sign-in-alt"></i>
+                                <strong>KONTAKT</strong>
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import HelpViewComponent from "./help-view-component";
+export default HelpViewComponent;
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+@import "./help-view-component.scss";
+</style>

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

@@ -1,8 +0,0 @@
-<template>
-    <span>INTRO</span>
-</template>
-
-<script lang="ts">
-import MapViewComponent from "./map-view-component";
-export default MapViewComponent;
-</script>

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

@@ -0,0 +1,6 @@
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+    name: "OaiViewComponent",
+})
+export default class OaiViewComponent extends Vue {}

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

@@ -0,0 +1,40 @@
+<template>
+    <div class="container">
+        <div class="column is-full text-center">
+            <p class="lead">OAI</p>
+            <hr class="center-line" />
+        </div>
+        <div class="column is-full text-left">
+            <p class="paragraph-justify">
+                Die Open Archives Initiative (OAI; http://www.openarchives.org) dient der Entwicklung und Förderung von Interoperabilitätsstandards für die Auffindbarkeit von
+                elektronischen Publikationen im Internet. Das dazu entwickelte Protokoll OAI-PMH (OAI Protocol for Metadata Harvesting) wird zum globalen „Ernten“ der durch
+                Metadaten beschriebenen Publikationen im Internet herangezogen. Eine Liste aller OAI-Provider wird unter folgender Adresse zur Verfügung gestellt:
+                <a href="https://www.openarchives.org/Register/BrowseSites" target="_blank">www.openarchives.org/Register/BrowseSites</a>
+            </p>
+        </div>
+        <div class="column is-full text-center">
+            <p class="lead">OAI-PMH</p>
+            <hr class="center-line" />
+        </div>
+        <div class="column is-full text-left">
+            <p class="paragraph-justify">
+                Die OAI-PMH Basis URL für das Research Data Repository der Geologischen Bundesanstalt lautet
+                <a href="https://tethys.at/oai">https://tethys.at/oai</a> <br />
+                Derzeit unterstützt das OAI-Service den Metadatenstandard DC (OAI-PMH Dublin Core) und eingeschränkt den Standard DataCite (aktuell in dieser Testkonfiguration noch
+                ohne Vergabe einer im Schema verpflichtenden DOI).
+            </p>
+            <!-- <ul class="quicklinks">
+                <li><a href="?verb=Identify">Identify</a> |</li>
+                <li><a href="?verb=ListRecords&amp;metadataPrefix=oai_dc">ListRecords</a> |</li>
+                <li><a href="?verb=ListSets">ListSets</a> |</li>
+                <li><a href="?verb=ListMetadataFormats">ListMetadataFormats</a> |</li>
+                <li><a href="?verb=ListIdentifiers&amp;metadataPrefix=oai_dc">ListIdentifiers</a></li>
+            </ul> -->
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import OaiViewComponent from "./oai-view-component";
+export default OaiViewComponent;
+</script>

src/views/services-view/service-view-component.ts

@@ -0,0 +1,6 @@
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+    name: "ServiceViewComponent",
+})
+export default class ServiceViewComponent extends Vue {}

src/views/services-view/service-view-component.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="container">
+        <section class="section">
+            <div class="column is-full text-center">
+                <h1>TETHYS SERVICES</h1>
+                <p class="lead">Eine Übersicht unserer Dienstleistungen</p>
+                <hr class="center-line" />
+            </div>
+            <div class="columns is-tablet work-items">
+                <div class="column col-sm overlay-boxes">
+                    <div class="card overlay work-back">
+                        <img src="@/assets/site/img/box-1-hover.jpg" alt="Datenarchivierung" />
+                        <div class="card-body box-1-hover">
+                            <p class="text-white">
+                                Tethys RDR publiziert und archiviert nach den FAIR Prinzipien* nachhaltig so wie sicher geowissenschaftliche Datensätze in offenen, frei lesbaren
+                                Formaten. * FAIR data
+                            </p>
+                        </div>
+                    </div>
+                    <div class="card green work-front">
+                        <img src="@/assets/site/img/box-1.jpg" alt="Datenarchivierung" />
+                        <div class="card-body box-1">
+                            <div class="custom-heading">DATENARCHIVIERUNG</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="column col-sm overlay-boxes">
+                    <div class="card overlay work-back">
+                        <img src="@/assets/site/img/box-2-hover.jpg" alt="DATENPUBLIKATION" />
+                        <div class="card-body box-1-hover">
+                            <p class="text-white">
+                                Die Datensätze werden mit standardisierten Metadatenschemen publiziert und sind somit nicht nur auffindbar, wiederverwendbar und auch
+                                maschinenlesbar, sondern können dadurch auch einfach zitiert werden.
+                            </p>
+                        </div>
+                    </div>
+                    <div class="card green work-front">
+                        <img src="@/assets/site/img/box-2.jpg" alt="Datenpublikation" />
+                        <div class="card-body box-2">
+                            <div class="custom-heading">DATENPUBLIKATION</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="column col-sm overlay-boxes">
+                    <div class="card overlay work-back">
+                        <img src="@/assets/site/img/box-3-hover.jpg" alt="BEGUTACHTUNG" />
+                        <div class="card-body box-1-hover">
+                            <p class="text-white">
+                                Alle im Tethys RDR publizierten Datensätze werden auf technische sowie inhaltliche Vollständigkeit geprüft und werden bei Bedarf auch einer
+                                fachlichen Begutachtung unterworfen. Ein klassischer Peer Review-Prozess ist in Vorbereitung.
+                            </p>
+                        </div>
+                    </div>
+                    <div class="card green work-front">
+                        <img src="@/assets/site/img/box-3.jpg" alt="BEGUTACHTUNG" />
+                        <div class="card-body box-3">
+                            <div class="custom-heading">BEGUTACHTUNG</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script lang="ts">
+import ServiceViewComponent from "./service-view-component";
+export default ServiceViewComponent;
+</script>