06e696f582
- Updated the VocabService to allow configurable timeout for responses, defaulting to 300 seconds if not set or invalid. - Modified AppHeader component to change ad format to horizontal and adjusted responsive settings for better display consistency. - Ensured proper height settings for ad elements to maintain layout integrity across different screen sizes.
467 lines
10 KiB
Vue
467 lines
10 KiB
Vue
<template>
|
|
<header class="app-header">
|
|
<div class="app-header__inner">
|
|
<div class="brand">
|
|
<div class="logo"><img src="/images/logos/logo.png" alt="YourPart" /></div>
|
|
<div class="brand-copy">
|
|
<strong>YourPart</strong>
|
|
<span>{{ $t('appShell.header.tagline') }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="header-ad" v-if="showHeaderAd">
|
|
<ins
|
|
class="adsbygoogle"
|
|
style="display:block"
|
|
data-ad-client="ca-pub-1104166651501135"
|
|
:data-ad-slot="adSlotId"
|
|
data-ad-format="horizontal"
|
|
data-full-width-responsive="false"
|
|
></ins>
|
|
</div>
|
|
<div class="header-meta">
|
|
<div class="header-meta__context">
|
|
<span class="header-pill">{{ $t('appShell.header.beta') }}</span>
|
|
<label class="header-lang">
|
|
<span class="header-lang__label">{{ $t('appShell.header.language') }}</span>
|
|
<select
|
|
class="header-lang__select"
|
|
:aria-label="$t('appShell.header.language')"
|
|
:value="language"
|
|
@change="onUiLanguageChange($event.target.value)"
|
|
>
|
|
<option v-for="opt in uiLocaleOptions" :key="opt.value" :value="opt.value">
|
|
{{ opt.nativeLabel }}
|
|
</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="connection-status" v-if="isLoggedIn">
|
|
<div class="status-indicator" :class="backendStatusClass">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">{{ $t('appShell.header.backend') }}</span>
|
|
</div>
|
|
<div class="status-indicator" :class="daemonStatusClass">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">{{ $t('appShell.header.daemon') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import apiClient from '@/utils/axios.js';
|
|
import { SUPPORTED_UI_LOCALES } from '@/i18n/supportedLocales.js';
|
|
|
|
export default {
|
|
name: 'AppHeader',
|
|
data() {
|
|
return {
|
|
adInitialized: false,
|
|
/** Endonyme: jede Sprache bezeichnet sich in ihrer eigenen Sprache. */
|
|
uiLocaleOptions: [
|
|
{ value: 'de', nativeLabel: 'Deutsch' },
|
|
{ value: 'en', nativeLabel: 'English' },
|
|
{ value: 'ceb', nativeLabel: 'Binisaya' },
|
|
{ value: 'es', nativeLabel: 'Español' },
|
|
{ value: 'fr', nativeLabel: 'Français' },
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(['isLoggedIn', 'user', 'language', 'connectionStatus', 'daemonConnectionStatus']),
|
|
backendStatusClass() {
|
|
return {
|
|
'status-connected': this.connectionStatus === 'connected',
|
|
'status-connecting': this.connectionStatus === 'connecting',
|
|
'status-disconnected': this.connectionStatus === 'disconnected',
|
|
'status-error': this.connectionStatus === 'error'
|
|
};
|
|
},
|
|
daemonStatusClass() {
|
|
return {
|
|
'status-connected': this.daemonConnectionStatus === 'connected',
|
|
'status-connecting': this.daemonConnectionStatus === 'connecting',
|
|
'status-disconnected': this.daemonConnectionStatus === 'disconnected',
|
|
'status-error': this.daemonConnectionStatus === 'error'
|
|
};
|
|
},
|
|
showHeaderAd() {
|
|
if (!this.adSlotId) {
|
|
return false;
|
|
}
|
|
const path = this.$route?.path || '';
|
|
// Anzeigen bevorzugt auf Bereichen mit dauerhaftem, inhaltlich starkem Content.
|
|
return (
|
|
path === '/' ||
|
|
path.startsWith('/blogs') ||
|
|
path.startsWith('/socialnetwork/forum') ||
|
|
path.startsWith('/socialnetwork/forumtopic') ||
|
|
path.startsWith('/socialnetwork/vocab/courses') ||
|
|
path.startsWith('/falukant/home')
|
|
);
|
|
},
|
|
adSlotId() {
|
|
const slot = String(import.meta.env.VITE_ADSENSE_HEADER_SLOT || '').trim();
|
|
return /^\d{6,}$/.test(slot) ? slot : '';
|
|
}
|
|
},
|
|
watch: {
|
|
showHeaderAd: {
|
|
immediate: true,
|
|
handler(next) {
|
|
if (next) {
|
|
this.$nextTick(() => this.initHeaderAd());
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
initHeaderAd() {
|
|
if (!this.showHeaderAd) return;
|
|
if (this.adInitialized) return;
|
|
if (typeof window === 'undefined' || !window.adsbygoogle) return;
|
|
try {
|
|
(window.adsbygoogle = window.adsbygoogle || []).push({});
|
|
this.adInitialized = true;
|
|
} catch (err) {
|
|
console.warn('AppHeader: adsense slot init failed', err);
|
|
}
|
|
},
|
|
async onUiLanguageChange(code) {
|
|
if (!SUPPORTED_UI_LOCALES.includes(code)) {
|
|
return;
|
|
}
|
|
await this.$store.dispatch('setLanguage', code);
|
|
this.applyI18nLocale(code);
|
|
if (!this.isLoggedIn || !this.user?.id) {
|
|
return;
|
|
}
|
|
try {
|
|
const { data } = await apiClient.post('/api/settings/filter', {
|
|
userid: this.user.id,
|
|
type: 'personal',
|
|
});
|
|
const langRow = data.find((s) => s.name === 'language');
|
|
if (!langRow?.options?.length) {
|
|
return;
|
|
}
|
|
const opt = langRow.options.find((o) => o.value === code);
|
|
if (!opt) {
|
|
return;
|
|
}
|
|
await apiClient.post('/api/settings/update', {
|
|
userid: this.user.id,
|
|
settingId: langRow.id,
|
|
value: opt.id,
|
|
});
|
|
} catch (err) {
|
|
console.warn('AppHeader: profile language could not be synced', err);
|
|
}
|
|
},
|
|
/** UI sofort auf neue Sprache umstellen, ohne Seiten-Reload (nur reaktives i18n). */
|
|
applyI18nLocale(code) {
|
|
const g = this.$i18n;
|
|
if (!g) {
|
|
return;
|
|
}
|
|
const loc = g.locale;
|
|
if (loc && typeof loc === 'object' && 'value' in loc) {
|
|
loc.value = code;
|
|
} else {
|
|
g.locale = code;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.app-header {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
padding: 6px 14px;
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 249, 240, 0.96) 0%, rgba(246, 236, 220, 0.98) 100%);
|
|
color: #2b1f14;
|
|
border-bottom: 1px solid rgba(93, 64, 55, 0.12);
|
|
box-shadow: 0 5px 14px rgba(93, 64, 55, 0.06);
|
|
}
|
|
|
|
.app-header__inner {
|
|
max-width: var(--shell-max-width);
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 16px;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.logo {
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 5px;
|
|
border-radius: 12px;
|
|
background:
|
|
linear-gradient(180deg, rgba(248, 162, 43, 0.18) 0%, rgba(255, 255, 255, 0.76) 100%);
|
|
border: 1px solid rgba(248, 162, 43, 0.22);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
|
|
}
|
|
|
|
.logo > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.brand-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.brand-copy strong {
|
|
font-size: 1rem;
|
|
line-height: 1.1;
|
|
color: #3a2a1b;
|
|
}
|
|
|
|
.brand-copy span {
|
|
font-size: 0.74rem;
|
|
color: rgba(95, 75, 57, 0.78);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.header-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.header-ad {
|
|
flex: 1 1 260px;
|
|
min-width: 180px;
|
|
max-width: 560px;
|
|
min-height: 54px;
|
|
max-height: 54px;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header-ad .adsbygoogle {
|
|
width: 100% !important;
|
|
height: 54px !important;
|
|
min-height: 54px !important;
|
|
max-height: 54px !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.header-ad :deep(iframe),
|
|
.header-ad :deep([id^="aswift_"]) {
|
|
height: 54px !important;
|
|
max-height: 54px !important;
|
|
}
|
|
|
|
.header-meta__context {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.header-pill {
|
|
padding: 5px 10px;
|
|
border-radius: 999px;
|
|
background: rgba(248, 162, 43, 0.14);
|
|
border: 1px solid rgba(248, 162, 43, 0.24);
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: #8a5411;
|
|
}
|
|
|
|
.header-lang {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin: 0;
|
|
font-size: 0.72rem;
|
|
color: rgba(95, 75, 57, 0.85);
|
|
}
|
|
|
|
.header-lang__label {
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.header-lang__select {
|
|
min-width: 7.5rem;
|
|
max-width: 11rem;
|
|
padding: 4px 8px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(93, 64, 55, 0.18);
|
|
background: rgba(255, 255, 255, 0.85);
|
|
color: #3a2a1b;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header-lang__select:focus {
|
|
outline: 2px solid rgba(248, 162, 43, 0.45);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.connection-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 28px;
|
|
padding: 0 10px;
|
|
border-radius: 999px;
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
border: 1px solid rgba(93, 64, 55, 0.1);
|
|
background: rgba(255, 255, 255, 0.62);
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.status-connected .status-dot {
|
|
background-color: #4caf50;
|
|
}
|
|
|
|
.status-connecting .status-dot {
|
|
background-color: #ff9800;
|
|
}
|
|
|
|
.status-disconnected .status-dot {
|
|
background-color: #f44336;
|
|
}
|
|
|
|
.status-error .status-dot {
|
|
background-color: #f44336;
|
|
}
|
|
|
|
.status-connected {
|
|
background-color: rgba(76, 175, 80, 0.12);
|
|
color: #245b2c;
|
|
}
|
|
|
|
.status-connecting {
|
|
background-color: rgba(255, 152, 0, 0.12);
|
|
color: #8b5e0d;
|
|
}
|
|
|
|
.status-disconnected {
|
|
background-color: rgba(244, 67, 54, 0.12);
|
|
color: #8f2c27;
|
|
}
|
|
|
|
.status-error {
|
|
background-color: rgba(244, 67, 54, 0.12);
|
|
color: #8f2c27;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.app-header {
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.app-header__inner {
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.header-ad {
|
|
order: 3;
|
|
width: 100%;
|
|
max-width: none;
|
|
flex: 1 1 100%;
|
|
min-height: 44px;
|
|
max-height: 44px;
|
|
}
|
|
|
|
.header-ad .adsbygoogle {
|
|
height: 44px !important;
|
|
min-height: 44px !important;
|
|
max-height: 44px !important;
|
|
}
|
|
|
|
.header-ad :deep(iframe),
|
|
.header-ad :deep([id^="aswift_"]) {
|
|
height: 44px !important;
|
|
max-height: 44px !important;
|
|
}
|
|
|
|
.header-meta {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.header-meta__context {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.brand-copy span {
|
|
font-size: 0.76rem;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.app-header__inner {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.brand {
|
|
width: 100%;
|
|
}
|
|
|
|
.header-meta {
|
|
gap: 8px;
|
|
}
|
|
|
|
.connection-status {
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.status-indicator {
|
|
min-height: 32px;
|
|
}
|
|
}
|
|
</style>
|