hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix wide logo overlap issues

Browse source
This commit is contained in:
Henry Jameson 2026-05-05 21:05:56 +03:00
commit 99d9b57240
3 changed files with 48 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/desktop_nav/desktop_nav.scss
View file

@ -9,7 +9,7 @@
.inner-nav { .inner-nav {
display: grid; display: grid;
grid-template-rows: var(--navbar-height); grid-template-rows: var(--navbar-height);
grid-template-columns: 2fr auto 2fr; grid-template-columns: minmax(5em, 1fr) auto minmax(5em, 1fr);
grid-template-areas: "sitename logo actions"; grid-template-areas: "sitename logo actions";
box-sizing: border-box; box-sizing: border-box;
padding: 0 1.2em; padding: 0 1.2em;
@ -31,7 +31,7 @@
} }
&.-logoLeft .inner-nav { &.-logoLeft .inner-nav {
grid-template-columns: auto 2fr 2fr; grid-template-columns: auto minmax(5em, 1fr) minmax(5em, 1fr);
grid-template-areas: "logo sitename actions"; grid-template-areas: "logo sitename actions";
} }
@ -92,23 +92,18 @@
.actions { .actions {
grid-area: actions; grid-area: actions;
justify-content: flex-end;
text-align: right;
z-index: 1;
} }
.item { .item {
flex: 1;
line-height: var(--navbar-height); line-height: var(--navbar-height);
height: var(--navbar-height); height: var(--navbar-height);
overflow: hidden;
display: flex; display: flex;
flex-wrap: wrap;
&.right {
justify-content: flex-end;
text-align: right;
}
} }
.spacer { .spacer {
width: 1em; min-width: 1em;
} }
} }

78
src/components/desktop_nav/desktop_nav.vue
View file

@ -32,48 +32,50 @@
> >
</router-link> </router-link>
<div class="item right actions"> <div class="item right actions">
<search-bar <SearchBar
v-if="currentUser || !privateMode" v-if="currentUser || !privateMode"
@toggled="onSearchBarToggled" @toggled="onSearchBarToggled"
@click.stop @click.stop
/> />
<button <template v-if="searchBarHidden">
class="button-unstyled nav-icon" <button
:title="$t('nav.preferences')" class="button-unstyled nav-icon"
@click.stop="openSettingsModal('user')" :title="$t('nav.preferences')"
> @click.stop="openSettingsModal('user')"
<FAIcon >
fixed-width <FAIcon
class="fa-scale-110 fa-old-padding" fixed-width
icon="cog" class="fa-scale-110 fa-old-padding"
/> icon="cog"
</button> />
<button </button>
v-if="currentUser && currentUser.role === 'admin'" <button
class="button-unstyled nav-icon" v-if="currentUser && currentUser.role === 'admin'"
target="_blank" class="button-unstyled nav-icon"
:title="$t('nav.administration')" target="_blank"
@click.stop="openSettingsModal('admin')" :title="$t('nav.administration')"
> @click.stop="openSettingsModal('admin')"
<FAIcon >
fixed-width <FAIcon
class="fa-scale-110 fa-old-padding" fixed-width
icon="tachometer-alt" class="fa-scale-110 fa-old-padding"
/> icon="tachometer-alt"
</button> />
<span class="spacer" /> </button>
<button <span class="spacer" />
v-if="currentUser" <button
class="button-unstyled nav-icon" v-if="currentUser"
:title="$t('login.logout')" class="button-unstyled nav-icon"
@click.stop.prevent="logout" :title="$t('login.logout')"
> @click.stop.prevent="logout"
<FAIcon >
fixed-width <FAIcon
class="fa-scale-110 fa-old-padding" fixed-width
icon="sign-out-alt" class="fa-scale-110 fa-old-padding"
/> icon="sign-out-alt"
</button> />
</button>
</template>
</div> </div>
</div> </div>
<teleport to="#modal"> <teleport to="#modal">

10
src/components/search_bar/search_bar.vue
View file

@ -51,8 +51,6 @@
class="cancel-icon fa-scale-110 fa-old-padding" class="cancel-icon fa-scale-110 fa-old-padding"
/> />
</button> </button>
<span class="spacer" />
<span class="spacer" />
</template> </template>
</div> </div>
</template> </template>
@ -61,18 +59,14 @@
<style lang="scss"> <style lang="scss">
.SearchBar { .SearchBar {
display: inline-flex; display: flex;
align-items: baseline; align-items: baseline;
vertical-align: baseline; vertical-align: baseline;
justify-content: flex-end; justify-content: flex-end;
&.-expanded {
width: 100%;
}
.search-bar-input, .search-bar-input,
.search-button { .search-button {
height: 29px; height: 2em;
} }
.search-bar-input { .search-bar-input {