generated from Seekra/repository-template
feat(language-switch-in-footer): show the dropdown menu above instead of below the button
This commit is contained in:
@@ -71,7 +71,15 @@ const open = function () {
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<ul v-if="isOpen" ref="languageDropdown" class="language-dropdown" role="listbox">
|
<ul
|
||||||
|
v-if="isOpen"
|
||||||
|
ref="languageDropdown"
|
||||||
|
class="language-dropdown"
|
||||||
|
role="listbox"
|
||||||
|
:style="{
|
||||||
|
bottom: 'calc(var(--offset) + 2 * var(--trigger-padding-y) + 1em)' // easier to add auto adaption to the available space
|
||||||
|
}"
|
||||||
|
>
|
||||||
<li
|
<li
|
||||||
v-for="lang in SUPPORTED_LANGUAGES"
|
v-for="lang in SUPPORTED_LANGUAGES"
|
||||||
:key="lang"
|
:key="lang"
|
||||||
@@ -119,9 +127,9 @@ const open = function () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.language-dropdown {
|
.language-dropdown {
|
||||||
|
--offset: 6px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: calc(100% + 6px);
|
|
||||||
background-color: var(--light-bg);
|
background-color: var(--light-bg);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|||||||
Reference in New Issue
Block a user