static: re-add backdrop, format

passbook/static/static/src/api/user.ts

@@ -1,9 +1,7 @@
 export interface User {
-
     pk: number;
     username: string;
     name: string;
     is_superuser: boolean;
     email: boolean;
-
 }

passbook/static/static/src/elements/ActionButton.ts

@@ -11,11 +11,10 @@ import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css"
 const PRIMARY_CLASS = "pf-m-primary";
 const SUCCESS_CLASS = "pf-m-success";
 const ERROR_CLASS = "pf-m-danger";
-const PROGRESS_CLASS ="pf-m-in-progress";
+const PROGRESS_CLASS = "pf-m-in-progress";
 
 @customElement("pb-action-button")
 export class ActionButton extends LitElement {
-
     @property()
     url: string = "";
 
@@ -23,7 +22,7 @@ export class ActionButton extends LitElement {
     isRunning = false;
 
     static get styles() {
-        return [GlobalsStyle, ButtonStyle, SpinnerStyle]
+        return [GlobalsStyle, ButtonStyle, SpinnerStyle];
     }
 
     setLoading() {
@@ -68,7 +67,10 @@ export class ActionButton extends LitElement {
     }
 
     render() {
-        return html`<button class="pf-c-button pf-m-progress ${this.classList}" @click=${() => this.callAction()}>
+        return html`<button
+            class="pf-c-button pf-m-progress ${this.classList}"
+            @click=${() => this.callAction()}
+        >
             ${this.isRunning
                 ? html` <span class="pf-c-button__progress">
                       <span

passbook/static/static/src/elements/Sidebar.ts

@@ -122,15 +122,15 @@ export const ROOT_ITEMS: SidebarItem[] = [
         path: "/audit/audit/",
         condition: (sb: SideBar) => {
             return sb.user?.is_superuser!;
-        }
+        },
     },
     {
         name: "Administration",
         children: SIDEBAR_ITEMS,
         condition: (sb: SideBar) => {
             return sb.user?.is_superuser!;
-        }
+        },
-    }
+    },
 ];
 
 @customElement("pb-sidebar")
@@ -183,8 +183,8 @@ export class SideBar extends LitElement {
     constructor() {
         super();
         fetch("/api/v2beta/core/users/me/")
-            .then(r => r.json())
+            .then((r) => r.json())
-            .then(r => this.user = <User>r);
+            .then((r) => (this.user = <User>r));
         this.activePath = window.location.hash.slice(1, Infinity);
         window.addEventListener("hashchange", (e) => {
             this.activePath = window.location.hash.slice(1, Infinity);
@@ -196,7 +196,9 @@ export class SideBar extends LitElement {
             <a href="#/" class="pf-c-page__header-brand-link">
                 <div class="pf-c-brand pb-brand">
                     <img src="${this.brandLogo}" alt="passbook icon" />
-                    ${this.brandTitle ? html`<span>${this.brandTitle}</span>` : ""}
+                    ${this.brandTitle
+                        ? html`<span>${this.brandTitle}</span>`
+                        : ""}
                 </div>
             </a>
         </li>`;

passbook/static/static/src/pages/SiteShell.ts

@@ -97,7 +97,8 @@ export class SiteShell extends LitElement {
 
     render() {
         return html` ${this.loading
-                ? html` <div class="pf-l-bullseye">
+                ? html`<div class="pf-c-backdrop">
+                      <div class="pf-l-bullseye">
                           <div class="pf-l-bullseye__item">
                               <span
                                   class="pf-c-spinner pf-m-xl"
@@ -109,6 +110,7 @@ export class SiteShell extends LitElement {
                                   <span class="pf-c-spinner__tail-ball"></span>
                               </span>
                           </div>
+                      </div>
                   </div>`
                 : ""}
             <slot name="body"> </slot>`;