forked from geolba/tethys.frontend
- set public path to /
- on route change event close bulma navbar (in app.ts)
This commit is contained in:
Arno Kaimbacher
parent
3d53f89694
commit
952f51a1a7
14
src/App.vue
14
src/App.vue
|
|
@ -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="240" height="86" />
|
||||
</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>
|
||||
</a>
|
||||
</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">
|
||||
<li class="navbar-item">
|
||||
<!-- <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 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>
|
||||
<router-link class="navbar-link is-arrowless" to="/search">SEARCH</router-link>
|
||||
</li>
|
||||
<li class="navbar-item">
|
||||
<!-- <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 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>
|
||||
<router-link class="navbar-link is-arrowless" to="/help">HELP</router-link>
|
||||
</li>
|
||||
<!-- <li class="navbar-item">
|
||||
<a class="navbar-link is-arrowless" href="#">HELP</a>
|
||||
</li> -->
|
||||
<li class="navbar-item">
|
||||
<!-- <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>
|
||||
<!--
|
||||
<a href="#" class="custom-btn"><i class="fas fa-sign-in-alt"></i>SIGN IN</a> -->
|
||||
|
|
|
|||
48
src/app.ts
48
src/app.ts
|
|
@ -1,4 +1,6 @@
|
|||
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 HomeViewComponent from "./views/home-view/home-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 { ActiveFilterCategories } from "@/models/solr";
|
||||
|
||||
// https://devsoniq.com/how-to-toggle-bulma-css-navbar-in-your-vue-js-project/
|
||||
@Options({
|
||||
components: {
|
||||
HelloWorld,
|
||||
|
|
@ -31,22 +34,35 @@ import OaiViewComponent from "./views/oai-view/oai-view-component.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);
|
||||
public active = false;
|
||||
|
||||
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
|
||||
el.classList.toggle("is-active");
|
||||
$target?.classList.toggle("is-active");
|
||||
});
|
||||
});
|
||||
}
|
||||
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((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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,27 +7,27 @@ import OaiViewComponent from "@/views/oai-view/oai-view-component.vue";
|
|||
|
||||
const routes = [
|
||||
{
|
||||
path: "/test/",
|
||||
path: "/",
|
||||
name: "Home",
|
||||
component: HomeViewComponent,
|
||||
},
|
||||
{
|
||||
path: "/test/help",
|
||||
path: "/help",
|
||||
name: "Help",
|
||||
component: HelpViewComponent,
|
||||
},
|
||||
{
|
||||
path: "/test/search",
|
||||
path: "/search",
|
||||
name: "Search",
|
||||
component: SearchViewComponent,
|
||||
},
|
||||
{
|
||||
path: "/test/services",
|
||||
path: "/services",
|
||||
name: "Services",
|
||||
component: ServiceViewComponent,
|
||||
},
|
||||
{
|
||||
path: "/test/oai",
|
||||
path: "/oai",
|
||||
name: "Oai",
|
||||
component: OaiViewComponent,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@
|
|||
<p class="lead">Eine Übersicht unserer Dienstleistungen</p>
|
||||
<hr class="center-line" />
|
||||
</div>
|
||||
<div class="columns is-tablet work-items">
|
||||
<div class="columns is-desktop 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" />
|
||||
|
|
@ -200,11 +200,21 @@
|
|||
<div class="card-body">
|
||||
<h5 class="card-title">Tools and Support</h5>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item"><a href="#">Contact</a></li>
|
||||
<li class="list-group-item"><a href="#">Impressum</a></li>
|
||||
<li class="list-group-item"><a href="#">Sitelinks</a></li>
|
||||
<li class="list-group-item"><a href="#">Terms & Conditions</a></li>
|
||||
<li class="list-group-item"><a href="#">rdr bei GitHub</a></li>
|
||||
<li class="list-group-item">
|
||||
<a href="#"><i class="far fa-id-card"></i> Contact</a>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<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 & 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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -215,7 +225,7 @@
|
|||
<h5 class="card-title">Connect with us</h5>
|
||||
<ul class="list-group list-group-flush">
|
||||
<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 class="list-group-item">
|
||||
<a href="#"><i class="fas fa-phone-alt pr-2"></i> +43-1-7125674</a>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
module.exports = {
|
||||
publicPath: "/test"
|
||||
publicPath: "/"
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user