Revert-revert: Safari fixes (#14331)

* Reapply "web: Safari fixes merge branch (#14181)"

This reverts commit a41d45834c.

* web: Fix brand preference order. Adjust header height.
This commit is contained in:
Teffen Ellis
2025-05-02 21:26:40 +02:00
committed by GitHub
parent a06645d558
commit 61a26c02b7
37 changed files with 1483 additions and 851 deletions

View File

@ -95,7 +95,7 @@ export class NavigationButtons extends AKElement {
);
};
return html`<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg">
return html`<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-xl">
<button class="pf-c-button pf-m-plain" type="button" @click=${onClick}>
<pf-tooltip position="top" content=${msg("Open API drawer")}>
<i class="fas fa-code" aria-hidden="true"></i>
@ -116,7 +116,7 @@ export class NavigationButtons extends AKElement {
);
};
return html`<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg">
return html`<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-xl">
<button
class="pf-c-button pf-m-plain"
type="button"
@ -156,9 +156,7 @@ export class NavigationButtons extends AKElement {
}
renderImpersonation() {
if (!this.me?.original) {
return nothing;
}
if (!this.me?.original) return nothing;
const onClick = async () => {
await new CoreApi(DEFAULT_CONFIG).coreUsersImpersonateEndRetrieve();
@ -175,6 +173,14 @@ export class NavigationButtons extends AKElement {
</div>`;
}
renderAvatar() {
return html`<img
class="pf-c-page__header-tools-item pf-c-avatar pf-m-hidden pf-m-visible-on-xl"
src=${ifDefined(this.me?.user.avatar)}
alt="${msg("Avatar image")}"
/>`;
}
get userDisplayName() {
return match<UserDisplay | undefined, string | undefined>(this.uiConfig?.navbar.userDisplay)
.with(UserDisplay.username, () => this.me?.user.username)
@ -206,17 +212,13 @@ export class NavigationButtons extends AKElement {
</div>
${this.renderImpersonation()}
${this.userDisplayName != ""
? html`<div class="pf-c-page__header-tools-group">
<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md">
? html`<div class="pf-c-page__header-tools-group pf-m-hidden">
<div class="pf-c-page__header-tools-item pf-m-visible-on-2xl">
${this.userDisplayName}
</div>
</div>`
: nothing}
<img
class="pf-c-avatar"
src=${ifDefined(this.me?.user.avatar)}
alt="${msg("Avatar image")}"
/>
${this.renderAvatar()}
</div>`;
}
}