Syndria98/aranroig.com
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

More IA fix with slop
Some checks failed
Build and Deploy Nuxt / build (push) Failing after 17s
Details

Browse Source
This commit is contained in:
BinarySandia04
2026-06-08 15:14:39 +02:00
parent c33ef60207
commit cae7de3a1f
2 changed files with 81 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/app/components/parts/site_options/LanguageSelector.vue
View File

@@ -35,16 +35,18 @@ const changeLocale = (lang) => {
<template> <template>
<div class="menu-container" ref="menuContainer"> <div class="menu-container" ref="menuContainer">
<button class="menu-button" @click="toggleDropdown">{{ $t("site_options.language_selector.dropdown") }} </button> <button class="menu-button" @click="toggleDropdown">{{ $t("site_options.language_selector.dropdown") }} ▾</button>
<div class="dropdown" v-show="dropdownVisible"> <Transition name="dropdown">
<div class="section"> <div class="dropdown" v-show="dropdownVisible">
<div :class="{'menu-item': true, 'active': locale === loc.code}" <div class="section">
v-for="loc in locales" @click="changeLocale(loc)"> <div :class="{'menu-item': true, 'active': locale === loc.code}"
{{ $t('locales.' + loc.code) }} v-for="loc in locales" @click="changeLocale(loc)">
{{ $t('locales.' + loc.code) }}
</div>
</div> </div>
</div> </div>
</div> </Transition>
</div> </div>
</template> </template>
@@ -63,8 +65,17 @@ const changeLocale = (lang) => {
background-color: #30363d; background-color: #30363d;
} }
} }
/* Dropdown transitions */
.dropdown-enter-active, .dropdown-leave-active {
transition: opacity 0.2s ease, transform 0.2s ease;
}
.dropdown-enter-from, .dropdown-leave-to {
opacity: 0;
transform: translateY(-8px);
}
.dropdown { .dropdown {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 50px; top: 50px;
right: 110px; right: 110px;

113
frontend/app/components/parts/site_options/ThemeSelector.vue
View File

@@ -30,58 +30,60 @@ onUnmounted(() => {
<template> <template>
<div class="menu-container" ref="menuContainer"> <div class="menu-container" ref="menuContainer">
<button class="menu-button" @click="toggleDropdown">{{ $t('site_options.theme_selector.dropdown') }} </button> <button class="menu-button" @click="toggleDropdown">{{ $t('site_options.theme_selector.dropdown') }} ▾</button>
<div class="dropdown" v-show="dropdownVisible"> <Transition name="dropdown">
<div class="two-columns"> <div class="dropdown" v-show="dropdownVisible">
<div class="section"> <div class="two-columns">
<div class="menu-section"> <div class="section">
<div class="menu-header"> <div class="menu-section">
{{ $t('site_options.theme_selector.dropdown') }} <div class="menu-header">
</div> {{ $t('site_options.theme_selector.dropdown') }}
</div> </div>
<div class="divider"></div> </div>
<div class="menu-section"> <div class="divider"></div>
<div :class="{'menu-item': true, 'active': theme === 'dark' }" @click="setTheme('dark')"> <div class="menu-section">
<div class="circle dark"></div> <div :class="{'menu-item': true, 'active': theme === 'dark' }" @click="setTheme('dark')">
{{ $t('themes.dark') }} <div class="circle dark"></div>
</div> {{ $t('themes.dark') }}
<div :class="{'menu-item': true, 'active': theme === 'light' }" @click="setTheme('light')"> </div>
<div class="circle light"></div> <div :class="{'menu-item': true, 'active': theme === 'light' }" @click="setTheme('light')">
{{ $t('themes.light') }} <div class="circle light"></div>
</div> {{ $t('themes.light') }}
</div> </div>
</div> </div>
<div class="section"> </div>
<div class="menu-section"> <div class="section">
<div class="menu-header"> <div class="menu-section">
{{ $t('site_options.theme_selector.dragon') }} <div class="menu-header">
</div> {{ $t('site_options.theme_selector.dragon') }}
</div> </div>
<div class="divider"></div> </div>
<div class="menu-section"> <div class="divider"></div>
<div :class="{'menu-item': true, 'active': accent === 'katlum' }" @click="setAccent('katlum')"> <div class="menu-section">
<div class="circle katlum"></div> <div :class="{'menu-item': true, 'active': accent === 'katlum' }" @click="setAccent('katlum')">
{{ $t('themes.accents.katlum') }} <div class="circle katlum"></div>
</div> {{ $t('themes.accents.katlum') }}
<div :class="{'menu-item': true, 'active': accent === 'solus' }" @click="setAccent('solus')"> </div>
<div class="circle solus"></div>Solus <div :class="{'menu-item': true, 'active': accent === 'solus' }" @click="setAccent('solus')">
</div> <div class="circle solus"></div>Solus
<!-- </div>
<div :class="{'menu-item': true, 'active': accent === 'silang' }" @click="setAccent('silang')"> <!--
<div class="circle silang"></div>Silang <div :class="{'menu-item': true, 'active': accent === 'silang' }" @click="setAccent('silang')">
</div> <div class="circle silang"></div>Silang
<div :class="{'menu-item': true, 'active': accent === 'nozt' }" @click="setAccent('nozt')"> </div>
<div class="circle nozt"></div>Nozt <div :class="{'menu-item': true, 'active': accent === 'nozt' }" @click="setAccent('nozt')">
</div> <div class="circle nozt"></div>Nozt
<div :class="{'menu-item': true, 'active': accent === 'albor' }" @click="setAccent('albor')"> </div>
<div class="circle albor"></div>Albor <div :class="{'menu-item': true, 'active': accent === 'albor' }" @click="setAccent('albor')">
</div> <div class="circle albor"></div>Albor
--> </div>
</div> -->
</div> </div>
</div>
</div>
</div> </div>
</div> </Transition>
</div> </div>
</template> </template>
@@ -146,9 +148,18 @@ onUnmounted(() => {
margin-right: 15px; margin-right: 15px;
} }
/* Dropdown transitions */
.dropdown-enter-active, .dropdown-leave-active {
transition: opacity 0.2s ease, transform 0.2s ease;
}
.dropdown-enter-from, .dropdown-leave-to {
opacity: 0;
transform: translateY(-8px);
}
/* Dropdown */ /* Dropdown */
.dropdown { .dropdown {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 50px; top: 50px;
right: 0; right: 0;