geolba/tethys.frontend
6
0
Fork 1
Code Issues 7 Pull Requests Packages Projects 3 Releases 1 Wiki Activity

- set public path to /

Browse Source 
- on route change event close bulma navbar (in app.ts)
This commit is contained in:
Arno Kaimbacher 2021-11-26 11:29:13 +01:00
parent 3d53f89694
commit 952f51a1a7
5 changed files with 62 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.vue
View File

@ -13,36 +13,36 @@
<!-- <img src="./assets/images/TETHYS-Logo.svg" width="240px" height="86" alt="TETHYS Logo" /> --> <!-- <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" /> <img src="./assets/images/TETHYS-Logo.svg" width="240" height="86" />
</a> </a>
<a id="menu-icon" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu"> <a id="menu-icon" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" :class="active ? 'is-active' : ''" @click="showMobilemenu">
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
</a> </a>
</div> </div>
<div id="navMenu" class="navbar-menu"> <div id="navMenu" class="navbar-menu" :class="active ? 'is-active' : ''">
<ul class="navbar-start" style="flex-grow: 1; justify-content: center"> <ul class="navbar-start" style="flex-grow: 1; justify-content: center">
<li class="navbar-item"> <li class="navbar-item">
<!-- <a class="navbar-link is-arrowless active" href="#">STARTSEITE</a> --> <!-- <a class="navbar-link is-arrowless active" href="#">STARTSEITE</a> -->
<router-link class="navbar-link is-arrowless" to="/test/">STARTSEITE</router-link> <router-link class="navbar-link is-arrowless" to="/">STARTSEITE</router-link>
</li> </li>
<li class="navbar-item"> <li class="navbar-item">
<!-- <a class="navbar-link is-arrowless" href="#">SEARCH</a> --> <!-- <a class="navbar-link is-arrowless" href="#">SEARCH</a> -->
<router-link class="navbar-link is-arrowless" to="/test/search">SEARCH</router-link> <router-link class="navbar-link is-arrowless" to="/search">SEARCH</router-link>
</li> </li>
<li class="navbar-item"> <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> <router-link class="navbar-link is-arrowless" to="/services">SERVICES</router-link>
</li> </li>
<li class="navbar-item"> <li class="navbar-item">
<!-- <a class="navbar-link is-arrowless" href="#">INTRO</a> --> <!-- <a class="navbar-link is-arrowless" href="#">INTRO</a> -->
<router-link class="navbar-link is-arrowless" to="/test/help">HELP</router-link> <router-link class="navbar-link is-arrowless" to="/help">HELP</router-link>
</li> </li>
<!-- <li class="navbar-item"> <!-- <li class="navbar-item">
<a class="navbar-link is-arrowless" href="#">HELP</a> <a class="navbar-link is-arrowless" href="#">HELP</a>
</li> --> </li> -->
<li class="navbar-item"> <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> <router-link class="navbar-link is-arrowless" to="/oai">OAI</router-link>
</li> </li>
<!-- <!--
<a href="#" class="custom-btn"><i class="fas fa-sign-in-alt"></i>SIGN IN</a> --> <a href="#" class="custom-btn"><i class="fas fa-sign-in-alt"></i>SIGN IN</a> -->

46
src/app.ts
View File

@ -1,4 +1,6 @@
import { Options, Vue } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
import { Watch } from "vue-property-decorator";
import { RouteLocation } from "vue-router";
import HelloWorld from "./components/HelloWorld/HelloWorld.vue"; import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
import HomeViewComponent from "./views/home-view/home-view-component.vue"; import HomeViewComponent from "./views/home-view/home-view-component.vue";
import HelpViewComponent from "./views/map-view/help-view-component.vue"; import HelpViewComponent from "./views/map-view/help-view-component.vue";
@ -16,6 +18,7 @@ import OaiViewComponent from "./views/oai-view/oai-view-component.vue";
// import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "./models/headers"; // import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "./models/headers";
// import { ActiveFilterCategories } from "@/models/solr"; // import { ActiveFilterCategories } from "@/models/solr";
// https://devsoniq.com/how-to-toggle-bulma-css-navbar-in-your-vue-js-project/
@Options({ @Options({
components: { components: {
HelloWorld, HelloWorld,
@ -31,22 +34,35 @@ import OaiViewComponent from "./views/oai-view/oai-view-component.vue";
}, },
}) })
export default class App extends Vue { export default class App extends Vue {
mounted(): void { public active = false;
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" mounted(): void {
el.classList.toggle("is-active"); // const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);
$target?.classList.toggle("is-active"); // // Check if there are any navbar burgers
}); // if ($navbarBurgers.length > 0) {
}); // // Add a click event on each of them
// $navbarBurgers.forEach((elNavBurger) => {
// elNavBurger.addEventListener("click", () => {
// // Get the target from the "data-target" attribute
// const targetNavbar = elNavBurger.dataset.target;
// const $target = document.getElementById(targetNavbar);
// // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
// elNavBurger.classList.toggle("is-active");
// $target?.classList.toggle("is-active");
// });
// });
// }
} }
public showMobilemenu(event: PointerEvent): void {
// Don't follow the link
event.preventDefault();
this.active = !this.active;
}
@Watch("$route")
protected oRouteChangedChanged(to: RouteLocation, from: RouteLocation): any {
// console.log("setting " + from.path + " to " + to.path);
this.active = false;
} }
} }

10
src/router/index.ts
View File

@ -7,27 +7,27 @@ import OaiViewComponent from "@/views/oai-view/oai-view-component.vue";
const routes = [ const routes = [
{ {
path: "/test/", path: "/",
name: "Home", name: "Home",
component: HomeViewComponent, component: HomeViewComponent,
}, },
{ {
path: "/test/help", path: "/help",
name: "Help", name: "Help",
component: HelpViewComponent, component: HelpViewComponent,
}, },
{ {
path: "/test/search", path: "/search",
name: "Search", name: "Search",
component: SearchViewComponent, component: SearchViewComponent,
}, },
{ {
path: "/test/services", path: "/services",
name: "Services", name: "Services",
component: ServiceViewComponent, component: ServiceViewComponent,
}, },
{ {
path: "/test/oai", path: "/oai",
name: "Oai", name: "Oai",
component: OaiViewComponent, component: OaiViewComponent,
}, },

24
src/views/home-view/home-view-component.vue
View File

@ -87,7 +87,7 @@
<p class="lead">Eine Übersicht unserer Dienstleistungen</p> <p class="lead">Eine Übersicht unserer Dienstleistungen</p>
<hr class="center-line" /> <hr class="center-line" />
</div> </div>
<div class="columns is-tablet work-items"> <div class="columns is-desktop work-items">
<div class="column col-sm overlay-boxes"> <div class="column col-sm overlay-boxes">
<div class="card overlay work-back"> <div class="card overlay work-back">
<img src="@/assets/site/img/box-1-hover.jpg" alt="Datenarchivierung" /> <img src="@/assets/site/img/box-1-hover.jpg" alt="Datenarchivierung" />
@ -200,11 +200,21 @@
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Tools and Support</h5> <h5 class="card-title">Tools and Support</h5>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<li class="list-group-item"><a href="#">Contact</a></li> <li class="list-group-item">
<li class="list-group-item"><a href="#">Impressum</a></li> <a href="#"><i class="far fa-id-card"></i> Contact</a>
<li class="list-group-item"><a href="#">Sitelinks</a></li> </li>
<li class="list-group-item"><a href="#">Terms &amp; Conditions</a></li> <li class="list-group-item">
<li class="list-group-item"><a href="#">rdr bei GitHub</a></li> <a href="#"><i class="fas fa-stamp"></i> Impressum</a>
</li>
<li class="list-group-item">
<a href="#"><i class="fas fa-link"></i> Sitelinks</a>
</li>
<li class="list-group-item">
<a href="#"><i class="far fa-file-alt"></i> Terms &amp; Conditions</a>
</li>
<li class="list-group-item">
<a target="_blank" href="https://github.com/geolba/tethys"><i class="fab fa-github"></i> rdr bei GitHub</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -215,7 +225,7 @@
<h5 class="card-title">Connect with us</h5> <h5 class="card-title">Connect with us</h5>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<li class="list-group-item"> <li class="list-group-item">
<a href="#"><i class="fas fa-home pr-2"></i>GBA</a> <a target="_blank" href="https://www.geologie.ac.at/"><i class="fas fa-home pr-2"></i>GBA</a>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<a href="#"><i class="fas fa-phone-alt pr-2"></i> +43-1-7125674</a> <a href="#"><i class="fas fa-phone-alt pr-2"></i> +43-1-7125674</a>

2
vue.config.js
View File

@ -1,3 +1,3 @@
module.exports = { module.exports = {
publicPath: "/test" publicPath: "/"
} }