web/user: initial optimisation for smaller screens

see #1610

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-10-13 11:23:26 +02:00
parent 98907ec889
commit 178e8e7e43
2 changed files with 19 additions and 13 deletions

View File

@ -13,6 +13,7 @@ import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css"
import PFNotificationBadge from "@patternfly/patternfly/components/NotificationBadge/notification-badge.css"; import PFNotificationBadge from "@patternfly/patternfly/components/NotificationBadge/notification-badge.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
import { CurrentTenant, EventsApi } from "@goauthentik/api"; import { CurrentTenant, EventsApi } from "@goauthentik/api";
@ -56,6 +57,7 @@ export class UserInterface extends LitElement {
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [ return [
PFBase, PFBase,
PFDisplay,
PFBrand, PFBrand,
PFPage, PFPage,
PFAvatar, PFAvatar,
@ -155,7 +157,9 @@ export class UserInterface extends LitElement {
</div>` </div>`
: html``} : html``}
${config.enabledFeatures.notificationDrawer ${config.enabledFeatures.notificationDrawer
? html` ? html`<div
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
>
<button <button
class="pf-c-button pf-m-plain" class="pf-c-button pf-m-plain"
type="button" type="button"
@ -176,12 +180,10 @@ export class UserInterface extends LitElement {
> >
</span> </span>
</button> </button>
` </div> `
: html``} : html``}
${config.enabledFeatures.settings ${config.enabledFeatures.settings
? html` <div ? html` <div class="pf-c-page__header-tools-item">
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
>
<a <a
class="pf-c-button pf-m-plain" class="pf-c-button pf-m-plain"
type="button" type="button"
@ -191,18 +193,20 @@ export class UserInterface extends LitElement {
</a> </a>
</div>` </div>`
: html``} : html``}
<a <div class="pf-c-page__header-tools-item">
href="/flows/-/default/invalidation/" <a
class="pf-c-button pf-m-plain" href="/flows/-/default/invalidation/"
> class="pf-c-button pf-m-plain"
<i class="fas fa-sign-out-alt" aria-hidden="true"></i> >
</a> <i class="fas fa-sign-out-alt" aria-hidden="true"></i>
</a>
</div>
${until( ${until(
me().then((u) => { me().then((u) => {
if (!u.user.isSuperuser) return html``; if (!u.user.isSuperuser) return html``;
return html` return html`
<a <a
class="pf-c-button pf-m-primary pf-m-small" class="pf-c-button pf-m-primary pf-m-small pf-u-display-none pf-u-display-block-on-md"
href="/if/admin" href="/if/admin"
> >
${t`Admin interface`} ${t`Admin interface`}

View File

@ -12,6 +12,7 @@ import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-sta
import PFPage from "@patternfly/patternfly/components/Page/page.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css"; import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
import { Application, CoreApi } from "@goauthentik/api"; import { Application, CoreApi } from "@goauthentik/api";
@ -53,7 +54,7 @@ export class LibraryPage extends LitElement {
} }
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, PFEmptyState, PFPage, PFContent, PFGallery, AKGlobal].concat(css` return [PFBase, PFDisplay, PFEmptyState, PFPage, PFContent, PFGallery, AKGlobal].concat(css`
:host, :host,
main { main {
height: 100%; height: 100%;
@ -138,6 +139,7 @@ export class LibraryPage extends LitElement {
} }
}} }}
type="text" type="text"
class="pf-u-display-none pf-u-display-block-on-md"
autofocus autofocus
placeholder=${t`Search...`} placeholder=${t`Search...`}
/>` />`