Commit 2fd2580c authored by Marcel Nellesen's avatar Marcel Nellesen
Browse files

New: Extracted Header/Footer (coscine/issues#1061)

parent eb2f552e
......@@ -14,6 +14,7 @@ test:
- npm test
except:
refs:
- master
- tags
variables:
- $GITLAB_USER_ID == $GIT_BOT_USER_ID
......@@ -22,6 +23,7 @@ publish:
stage: publish
script:
- npm run build
- npm test
- npx semantic-release
only:
- master
......
......@@ -1200,6 +1200,21 @@
"file-saver": "^2.0.2"
}
},
"@coscine/component-library": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@coscine/component-library/-/component-library-1.1.0.tgz",
"integrity": "sha512-FkaHE0dPPyg52fdK17rygRJ6EiN99gx0acawOC6Ws7vHIFvCIvvFdwD2KenbBbH2ue3qiZtwY+7EPOF6v5g+Aw==",
"requires": {
"@types/jquery": "^3.5.1",
"bootstrap-vue": "^2.16.0",
"jquery": "^3.5.1",
"vue": "^2.6.11",
"vue-i18n": "^8.21.0",
"vue-loading-overlay": "^3.3.3",
"vue-material-design-icons": "^4.8.0",
"vue-runtime-helpers": "^1.1.2"
}
},
"@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
......@@ -21892,6 +21907,11 @@
}
}
},
"vue-loading-overlay": {
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-3.4.2.tgz",
"integrity": "sha512-xcB+NPjl76eA0uggm707x3ZFgrNosZXpynHipyS3K+rrK1NztOV49R1LY+/4ij5W1KYANp7eRI2EIHrxCpmWAw=="
},
"vue-markdown": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/vue-markdown/-/vue-markdown-2.2.4.tgz",
......@@ -21912,6 +21932,16 @@
"markdown-it-toc-and-anchor": "^4.1.2"
}
},
"vue-material-design-icons": {
"version": "4.9.0",
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-4.9.0.tgz",
"integrity": "sha512-g+4dKL2Dk0oHljLoUoeeu41z1moHaUcjEIz5H+ml52KTzimPA86W/kj9/kfbI7Ex24lEMGFAxpD6jU3rEJvlwg=="
},
"vue-runtime-helpers": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vue-runtime-helpers/-/vue-runtime-helpers-1.1.2.tgz",
"integrity": "sha512-pZfGp+PW/IXEOyETE09xQHR1CKkR9HfHZdnMD/FVLUNI+HxYTa82evx5WrF6Kz4s82qtqHvMZ8MZpbk2zT2E1Q=="
},
"vue-style-loader": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
......
<template>
<div id="wrap" :style="cssProps">
<RWTHHeader
<coscine-page-header
:rwthImage="rwthImage"
:coscineImageBlack="coscineImageBlack"/>
:coscineImageBlack="coscineImageBlack"
:locale="this.$root.$i18n.locale"
@changeLocale="changeLocale"/>
<div class="container-fluid app-content">
<div class="row">
<div class="col-xl-2"></div>
......@@ -82,7 +84,12 @@
</div>
<div class="col-xl-2"></div>
</div>
<RWTHFooter/>
<coscine-page-footer
:contact="$t('contact')"
:disclaimer="$t('disclaimer')"
:help="$t('help')"
:imprint="$t('imprint')"
/>
</div>
</template>
......@@ -92,8 +99,7 @@ import VueMarkdown from 'vue-markdown';
import LoginMain from './components/LoginMain.vue';
import LogoutMain from './components/LogoutMain.vue';
import TOS from './components/TOS.vue';
import RWTHHeader from './components/RWTHHeader.vue';
import RWTHFooter from './components/RWTHFooter.vue';
import { CoscinePageHeader, CoscinePageFooter } from '@coscine/component-library';
import coscineImageBlackPath from './assets/logo-coscine-black.png';
import coscineImageBluePath from './assets/logo-coscine-blue.png';
......@@ -180,9 +186,9 @@ export default Vue.extend({
LoginMain,
LogoutMain,
TOS,
RWTHHeader,
RWTHFooter,
VueMarkdown,
CoscinePageHeader,
CoscinePageFooter,
},
computed: {
cssProps() {
......@@ -236,6 +242,13 @@ export default Vue.extend({
changeLogoutState() {
this.logoutState = !this.logoutState;
},
changeLocale() {
if (this.$root.$i18n.locale === 'en') {
this.$root.$i18n.locale = 'de';
} else {
this.$root.$i18n.locale = 'en';
}
},
},
created() {
this.retrieveNotices();
......@@ -341,8 +354,7 @@ export default Vue.extend({
transition: opacity 0.3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active below version 2.1.8 */ {
.component-fade-enter, .component-fade-leave-to {
opacity: 0;
}
......
<template>
<footer id="footer">
<div class="row container">
<div id="servicecol" class="col-xs-12 col-sm-6">
<div class="list-group">
<h2>Service</h2>
<a href="https://help.itc.rwth-aachen.de/service/7ab6210773b04ef28a1a8cb33628be67" class="list-group-item list-group-item-action">{{ $t('help') }}</a>
<a href="https://git.rwth-aachen.de/coscine/terms/-/blob/master/PrivacyPolicy.md" class="list-group-item list-group-item-action">{{ $t('disclaimer') }}</a>
<a href="http://www.itc.rwth-aachen.de/cms/IT-Center/Footer/Service/~epvv/Impressum/" class="list-group-item list-group-item-action">{{ $t('imprint') }}</a>
</div>
</div>
<div id="contactcol" class="col-xs-12 col-sm-6">
<div id="contact-list" class="list-group">
<h2 id="footerContact">{{ $t('contact') }}</h2>
<a id="mail" href="mailto:servicedesk@itc.rwth-aachen.de" class="list-group-item list-group-item-action">
servicedesk@itc.rwth-aachen.de
</a>
<span id="phone" class="list-group-item">
+49 241 / 80-24680
</span>
<span id="fax" class="list-group-item">
+49 241 / 80-22981
</span>
</div>
</div>
</div>
</footer>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'rwthfooter',
});
</script>
<style scoped></style>
<template>
<header id="header">
<nav id="nav-global" class="navbar rwth-black navbar-dark navbar-expand-md">
<div class="app-header-container">
<div id="DeltaSiteLogo">
<a id="ctl00_onetidProjectPropertyTitleGraphic" title="Team Site" class="ms-siteicon-a" href="/">
<img id="ctl00_onetidHeadbnnr2" class="ms-siteicon-img" name="onetidHeadbnnr0" :src="rwthImage" alt="RWTH Aachen University" data-themekey="#">
</a>
</div>
</div>
<div id="DeltaCoScInESiteLogo">
<a id="ctl00_SPSimpleSiteLink1" title="Team Site" class="ms-siteicon-a coscineSiteIcon" href="/">
<img id="ctl00_SiteLogoImage1" class="ms-siteicon-img" name="onetidHeadbnnr0" :src="coscineImageBlack" alt="Coscine" data-themekey="#">
</a>
<span class="coscineSiteIconLabel">CoScInE</span>
</div>
<ul id="nav-langsearch" class="navbar-nav ml-auto">
<li id="langToggle" class="next-lang" tabindex="0" aria-label="toggle language">
<a class="nav-link lang" href="#" id="Lang" v-on:click="changeLocale()">
<span id="langBox" class="language-box">{{ $t('otherLocale') }}</span>
</a>
</li>
</ul>
</nav>
</header>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'rwthHeader',
props: {
rwthImage: String,
coscineImageBlack: String,
},
methods: {
changeLocale() {
if (this.$root.$i18n.locale === 'en') {
this.$root.$i18n.locale = 'de';
} else {
this.$root.$i18n.locale = 'en';
}
},
},
});
</script>
<style scoped></style>
......@@ -4,6 +4,7 @@ declare module '*.vue' {
}
declare module '@coscine/api-connection';
declare module '@coscine/component-library';
declare module 'vue-markdown';
declare module '@itcenter-layout/bootstrap';
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment