ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adapt to different logo sizes, including fixes for Safari

Browse Source
This commit is contained in:
Maximilian Harz 2024-10-27 15:33:05 +01:00
parent dbd7f94f59
commit c16ad813aa
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
webapp/components/HeaderMenu/HeaderMenu.vue
View File

@ -109,7 +109,7 @@
<div v-else class="mobil-header-box"> <div v-else class="mobil-header-box">
<!-- logo, hamburger--> <!-- logo, hamburger-->
<ds-flex style="align-items: center"> <ds-flex style="align-items: center">
<ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px"> <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" class="logo-container">
<div @click="toggleMobileMenu ? toggleMobileMenuView() : ''"> <div @click="toggleMobileMenu ? toggleMobileMenuView() : ''">
<a <a
v-if="LOGOS.LOGO_HEADER_CLICK.externalLink" v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
@ -136,12 +136,12 @@
<chat-notification-menu /> <chat-notification-menu />
</div> </div>
<!-- notification menu --> <!-- notification menu -->
<div style="display: inline-flex; padding-right: 20px"> <div style="display: inline-flex; padding-right: clamp(10px, 2.5vw, 20px)">
<notification-menu /> <notification-menu />
</div> </div>
</client-only> </client-only>
<!-- hamburger menu --> <!-- hamburger menu -->
<base-button icon="bars" @click="toggleMobileMenuView" circle /> <base-button icon="bars" @click="toggleMobileMenuView" circle class="hamburger-button" />
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
<!-- search, filter --> <!-- search, filter -->
@ -368,6 +368,7 @@ export default {
} }
.main-navigation-flex { .main-navigation-flex {
align-items: center; align-items: center;
flex-wrap: nowrap !important;
} }
.main-navigation-right { .main-navigation-right {
display: flex; display: flex;
@ -379,6 +380,10 @@ export default {
.ds-flex-item.mobile-hamburger-menu { .ds-flex-item.mobile-hamburger-menu {
margin-left: auto; margin-left: auto;
text-align: right; text-align: right;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-end;
} }
.mobile-menu { .mobile-menu {
margin: 0 20px; margin: 0 20px;
@ -397,4 +402,10 @@ export default {
.hide-mobile-menu { .hide-mobile-menu {
display: none; display: none;
} }
.logo-container {
max-width: calc(100vw - 140px) !important;
}
.hamburger-button {
flex-shrink: 0;
}
</style> </style>

1
webapp/components/Logo/Logo.vue
View File

@ -113,6 +113,7 @@ export default {
.ds-logo-svg { .ds-logo-svg {
height: auto; height: auto;
fill: #000000; fill: #000000;
max-width: 100%;
} }
</style> </style>