Skip to content

Add complaint link and redesign footer #1011

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
+115 −70
Closed

Add complaint link and redesign footer #1011

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6023723
Add complaint link and redesign footer
dati18 Jul 14, 2025
5a3c6f3
update .env.development files
dati18 Jul 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .env.development.local
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@ VUE_APP_API_URL=http://localhost:8082
VUE_APP_API_MOCK=0
VUE_APP_RECAPTCHA_SITE_KEY="6LeHzbMUAAAAABjNp0vILaWr5ZeYHmteF7rGuZNV" # todo replace with test key
VUE_APP_BUILD_FOR_DOCKER_IMAGE=0
VUE_APP_CNAME_RECORD=sites-1.dyna.wbaas.localhost
VUE_APP_SUBDOMAIN_SUFFIX=".wbaas.localhost"
VUE_APP_CNAME_RECORD=sites-1.dyna.wbaas.dev
VUE_APP_SUBDOMAIN_SUFFIX=".wbaas.dev"
4 changes: 2 additions & 2 deletions .env.development.mock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@ VUE_APP_API_URL=
VUE_APP_API_MOCK=1
VUE_APP_RECAPTCHA_SITE_KEY="6LeHzbMUAAAAABjNp0vILaWr5ZeYHmteF7rGuZNV"
VUE_APP_BUILD_FOR_DOCKER_IMAGE=0
VUE_APP_CNAME_RECORD=sites-1.dyna.wbaas.localhost
VUE_APP_SUBDOMAIN_SUFFIX=".wbaas.localhost"
VUE_APP_CNAME_RECORD=sites-1.dyna.wbaas.dev
VUE_APP_SUBDOMAIN_SUFFIX=".wbaas.dev"
4 changes: 2 additions & 2 deletions .env.development.test
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@ VUE_APP_API_URL=http://host.docker.internal:8082
VUE_APP_API_MOCK=0
VUE_APP_RECAPTCHA_SITE_KEY="6LeHzbMUAAAAABjNp0vILaWr5ZeYHmteF7rGuZNV" # todo replace with test key
VUE_APP_BUILD_FOR_DOCKER_IMAGE=0
VUE_APP_CNAME_RECORD=sites-1.dyna.wbaas.localhost
VUE_APP_SUBDOMAIN_SUFFIX=".wbaas.localhost"
VUE_APP_CNAME_RECORD=sites-1.dyna.wbaas.dev
VUE_APP_SUBDOMAIN_SUFFIX=".wbaas.dev"
29 changes: 4 additions & 25 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 3 additions & 6 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<v-container v-else class="full-height-content">
<router-view></router-view>
</v-container>
<Foot :class="{'tall-footer': customLayout}"></Foot>
<Foot></Foot>
<Interval
v-if="this.$store.getters.isLoggedIn && !this.$store.getters.currentUser.verified"
:callback="checkVerified"
Expand Down Expand Up @@ -46,10 +46,7 @@ export default {
.grecaptcha-badge { opacity:0;}

.full-height-content {
height: 100%
height: 100%;
padding-bottom: "56px"
}

.tall-footer.footer {
height: 100%;
}
</style>
135 changes: 102 additions & 33 deletions src/components/Layout/Foot.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,113 @@
<template>
<footer data-test-id="footer" class="footer">
<v-footer color="primary lighten-1">
<v-container>
<ul class="footer-list">
<li><a target="_blank" rel="noopener noreferrer" href="https://wikiba.se/about-us/">About</a></li>
<li><router-link to="/discovery">Discovery</router-link></li>
<li><a target="_blank" rel="noopener noreferrer" href="https://www.mediawiki.org/wiki/Wikibase/Wikibase.cloud">Documentation</a></li>
<li><a target="_blank" rel="noopener noreferrer" href="https://status.wikibase.cloud">Platform Status</a></li>
<li><a target="_blank" rel="noopener noreferrer" href="https://github.com/wbstack">Github</a></li>
<li><router-link to="/privacy-policy">Privacy Policy</router-link></li>
<li><router-link to="/terms-of-use">Terms of Use</router-link></li>
<li><a target="_blank" rel="noopener noreferrer" href="https://www.wikimedia.de/impressum/">Imprint</a></li>
<li><router-link to="/contact">Contact</router-link></li>
</ul>
</v-container>
</v-footer>

</footer>
<v-footer data-test-id="footer" class="footer">
<v-row :class="['row-margin', { 'small-row-margin': isNarrow }]" no-gutters>
<v-col :class="['col-margin', { 'small-col-margin': isNarrow }]" ref="col1" cols="auto">
<nav aria-label="Wikibase Cloud links">
<h3 class="footer-list-title">Wikibase Cloud</h3>
<ul class="footer-list">
<li><a target="_blank" rel="noopener noreferrer" href="https://wikiba.se/about-us/">About</a></li>
<li><router-link to="/discovery">Discovery</router-link></li>
<li><a target="_blank" rel="noopener noreferrer" href="https://www.mediawiki.org/wiki/Wikibase/Wikibase.cloud">Documentation</a></li>
<li><a target="_blank" rel="noopener noreferrer" href="https://status.wikibase.cloud">Platform Status</a></li>
<li><a target="_blank" rel="noopener noreferrer" href="https://github.com/wbstack">GitHub</a></li>
<li><router-link to="/contact">Contact us</router-link></li>
</ul>
</nav>
</v-col>
<v-col ref="col2" cols="auto">
<nav aria-label="Legal links">
<h3 class="footer-list-title">Legal</h3>
<ul class="footer-list">
<li><router-link to="/privacy-policy">Privacy Policy</router-link></li>
<li><router-link to="/terms-of-use">Terms of Use</router-link></li>
<li><a target="_blank" rel="noopener noreferrer" href="https://www.wikimedia.de/impressum/">Imprint</a></li>
<li><router-link to="/complaint">Report illegal content</router-link></li>
</ul>
</nav>
</v-col>
</v-row>
</v-footer>
</template>

<script>
export default {
name: 'Foot'
name: 'Foot',
data() {
return {
isNarrow: false,
totalColsWidth: 0
}
},
mounted() {
this.updateWidths();
window.addEventListener('resize', this.updateWidths);
},
beforeDestroy() {
window.removeEventListener('resize', this.updateWidths);
},
methods: {
updateWidths() {
// Get widths of both columns
const col1 = this.$refs.col1?.$el || this.$refs.col1;
const col2 = this.$refs.col2?.$el || this.$refs.col2;
const col1Width = col1 ? col1.offsetWidth : 0;
const col2Width = col2 ? col2.offsetWidth : 0;
this.totalColsWidth = col1Width + col2Width;

// Calculate threshold in px (11rem)
const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
const threshold = this.totalColsWidth + 2 * 3 * rem + 5 * rem;

// Set isNarrow based on window width
this.isNarrow = window.innerWidth < threshold;
}
}
}
</script>

<style scoped>
ul.footer-list {
list-style: none;
padding-left: 0 !important;
}
.footer-list {
list-style: none;
padding-left: 0;
}

ul.footer-list a,
.white-footer-links a{
color: white !important;
}
.footer {
height: auto;
}
.v-footer, .container {
height: 100%;
}
.footer-list-title {
font-weight: bold;
color: white;
margin-bottom: 0.5em;
}

.footer-list li {
margin-bottom: 0.3em;
}

.footer-list a, .footer-list :deep(a) {
color: white !important;
text-decoration: none;
transition: text-decoration 0.2s, color 0.2s;
}

.footer-list a:hover, .footer-list :deep(a:hover) {
text-decoration: underline;
color: white !important;
}

.v-footer {
background-color: #0063BF !important;
height: 100%;
padding: 0;
}

.row-margin {
margin: 3rem !important;
}
.small-row-margin {
margin: 1.5rem !important;
}
.col-margin {
margin-right: 5rem !important;
}
.small-col-margin {
margin-bottom: 2.5rem !important;
}
</style>
Loading