diff --git a/src/App.vue b/src/App.vue index 56c7469..a782298 100644 --- a/src/App.vue +++ b/src/App.vue @@ -25,22 +25,24 @@ STARTSEITE -
  • - - INTRO -
  • SEARCH
  • - SERVICES + + SERVICES
  • + + HELP +
    • +
  • - OAI + + OAI
    • @@ -97,7 +99,7 @@ export default App; p, ol, ul, - li, + // li, dl, textarea, h1, diff --git a/src/app.ts b/src/app.ts index 52ea6cf..06442f8 100644 --- a/src/app.ts +++ b/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"); + }); + }); + } + } +} diff --git a/src/assets/scss/main-styles.scss b/src/assets/scss/main-styles.scss index 50ab4f6..e2541d7 100644 --- a/src/assets/scss/main-styles.scss +++ b/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; +} \ No newline at end of file diff --git a/src/assets/site/img/card-header1.jpg b/src/assets/site/img/card-header1.jpg new file mode 100644 index 0000000..b603aef Binary files /dev/null and b/src/assets/site/img/card-header1.jpg differ diff --git a/src/assets/site/img/card-header2.jpg b/src/assets/site/img/card-header2.jpg new file mode 100644 index 0000000..56b59ac Binary files /dev/null and b/src/assets/site/img/card-header2.jpg differ diff --git a/src/assets/site/img/card-header3.jpg b/src/assets/site/img/card-header3.jpg new file mode 100644 index 0000000..b9d1e52 Binary files /dev/null and b/src/assets/site/img/card-header3.jpg differ diff --git a/src/router/index.ts b/src/router/index.ts index 80238a6..0dad841 100644 --- a/src/router/index.ts +++ b/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({ diff --git a/src/views/home-view/home-view-component.scss b/src/views/home-view/home-view-component.scss index b2f0863..7777301 100644 --- a/src/views/home-view/home-view-component.scss +++ b/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 { diff --git a/src/views/home-view/home-view-component.ts b/src/views/home-view/home-view-component.ts index 3ef9c24..d510575 100644 --- a/src/views/home-view/home-view-component.ts +++ b/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 {} diff --git a/src/views/home-view/home-view-component.vue b/src/views/home-view/home-view-component.vue index 633e649..2f40ab8 100644 --- a/src/views/home-view/home-view-component.vue +++ b/src/views/home-view/home-view-component.vue @@ -87,7 +87,7 @@

    Eine Übersicht unserer Dienstleistungen

    -
    +
    Datenarchivierung diff --git a/src/views/map-view/help-view-component.scss b/src/views/map-view/help-view-component.scss new file mode 100644 index 0000000..b74ce52 --- /dev/null +++ b/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; +} diff --git a/src/views/map-view/map-view-component.ts b/src/views/map-view/help-view-component.ts similarity index 63% rename from src/views/map-view/map-view-component.ts rename to src/views/map-view/help-view-component.ts index e2f4722..e5eaec3 100644 --- a/src/views/map-view/map-view-component.ts +++ b/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 = []; } diff --git a/src/views/map-view/help-view-component.vue b/src/views/map-view/help-view-component.vue new file mode 100644 index 0000000..2721ee5 --- /dev/null +++ b/src/views/map-view/help-view-component.vue @@ -0,0 +1,90 @@ + + + + + + diff --git a/src/views/map-view/map-view-component.vue b/src/views/map-view/map-view-component.vue deleted file mode 100644 index 874a348..0000000 --- a/src/views/map-view/map-view-component.vue +++ /dev/null @@ -1,8 +0,0 @@ - - - diff --git a/src/views/oai-view/oai-view-component.ts b/src/views/oai-view/oai-view-component.ts new file mode 100644 index 0000000..6e1a9dc --- /dev/null +++ b/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 {} diff --git a/src/views/oai-view/oai-view-component.vue b/src/views/oai-view/oai-view-component.vue new file mode 100644 index 0000000..7d4afb1 --- /dev/null +++ b/src/views/oai-view/oai-view-component.vue @@ -0,0 +1,40 @@ + + + diff --git a/src/views/services-view/service-view-component.ts b/src/views/services-view/service-view-component.ts new file mode 100644 index 0000000..45c2542 --- /dev/null +++ b/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 {} diff --git a/src/views/services-view/service-view-component.vue b/src/views/services-view/service-view-component.vue new file mode 100644 index 0000000..d724841 --- /dev/null +++ b/src/views/services-view/service-view-component.vue @@ -0,0 +1,71 @@ + + +