From 178e8e7e43762ded01e4ab85a67ffaa2134edee8 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Wed, 13 Oct 2021 11:23:26 +0200
Subject: [PATCH] web/user: initial optimisation for smaller screens

see #1610

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/interfaces/UserInterface.ts | 28 ++++++++++++++++------------
 web/src/user/LibraryPage.ts         |  4 +++-
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/web/src/interfaces/UserInterface.ts b/web/src/interfaces/UserInterface.ts
index df8282d21..c3308825d 100644
--- a/web/src/interfaces/UserInterface.ts
+++ b/web/src/interfaces/UserInterface.ts
@@ -13,6 +13,7 @@ import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css"
 import PFNotificationBadge from "@patternfly/patternfly/components/NotificationBadge/notification-badge.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
 
 import { CurrentTenant, EventsApi } from "@goauthentik/api";
 
@@ -56,6 +57,7 @@ export class UserInterface extends LitElement {
     static get styles(): CSSResult[] {
         return [
             PFBase,
+            PFDisplay,
             PFBrand,
             PFPage,
             PFAvatar,
@@ -155,7 +157,9 @@ export class UserInterface extends LitElement {
                                       </div>`
                                     : html``}
                                 ${config.enabledFeatures.notificationDrawer
-                                    ? html`
+                                    ? html`<div
+                                          class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
+                                      >
                                           <button
                                               class="pf-c-button pf-m-plain"
                                               type="button"
@@ -176,12 +180,10 @@ export class UserInterface extends LitElement {
                                                   >
                                               </span>
                                           </button>
-                                      `
+                                      </div> `
                                     : html``}
                                 ${config.enabledFeatures.settings
-                                    ? html` <div
-                                          class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
-                                      >
+                                    ? html` <div class="pf-c-page__header-tools-item">
                                           <a
                                               class="pf-c-button pf-m-plain"
                                               type="button"
@@ -191,18 +193,20 @@ export class UserInterface extends LitElement {
                                           </a>
                                       </div>`
                                     : html``}
-                                <a
-                                    href="/flows/-/default/invalidation/"
-                                    class="pf-c-button pf-m-plain"
-                                >
-                                    <i class="fas fa-sign-out-alt" aria-hidden="true"></i>
-                                </a>
+                                <div class="pf-c-page__header-tools-item">
+                                    <a
+                                        href="/flows/-/default/invalidation/"
+                                        class="pf-c-button pf-m-plain"
+                                    >
+                                        <i class="fas fa-sign-out-alt" aria-hidden="true"></i>
+                                    </a>
+                                </div>
                                 ${until(
                                     me().then((u) => {
                                         if (!u.user.isSuperuser) return html``;
                                         return html`
                                             <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"
                                             >
                                                 ${t`Admin interface`}
diff --git a/web/src/user/LibraryPage.ts b/web/src/user/LibraryPage.ts
index a170d0017..8a5769359 100644
--- a/web/src/user/LibraryPage.ts
+++ b/web/src/user/LibraryPage.ts
@@ -12,6 +12,7 @@ import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-sta
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
 
 import { Application, CoreApi } from "@goauthentik/api";
 
@@ -53,7 +54,7 @@ export class LibraryPage extends LitElement {
     }
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFEmptyState, PFPage, PFContent, PFGallery, AKGlobal].concat(css`
+        return [PFBase, PFDisplay, PFEmptyState, PFPage, PFContent, PFGallery, AKGlobal].concat(css`
             :host,
             main {
                 height: 100%;
@@ -138,6 +139,7 @@ export class LibraryPage extends LitElement {
                                       }
                                   }}
                                   type="text"
+                                  class="pf-u-display-none pf-u-display-block-on-md"
                                   autofocus
                                   placeholder=${t`Search...`}
                               />`