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 => this.user = <User>r);
+            .then((r) => r.json())
+            .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>`;
@@ -204,10 +206,10 @@ export class SideBar extends LitElement {
 
     renderItem(item: SidebarItem): TemplateResult {
         if (item.condition) {
-           const result = item.condition(this);
-           if (!result) {
-               return html``;
-           }
+            const result = item.condition(this);
+            if (!result) {
+                return html``;
+            }
         }
         return html` <li
             class="pf-c-nav__item ${item.children

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

@@ -97,17 +97,19 @@ export class SiteShell extends LitElement {
 
     render() {
         return html` ${this.loading
-                ? html` <div class="pf-l-bullseye">
-                      <div class="pf-l-bullseye__item">
-                          <span
-                              class="pf-c-spinner pf-m-xl"
-                              role="progressbar"
-                              aria-valuetext="Loading..."
-                          >
-                              <span class="pf-c-spinner__clipper"></span>
-                              <span class="pf-c-spinner__lead-ball"></span>
-                              <span class="pf-c-spinner__tail-ball"></span>
-                          </span>
+                ? 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"
+                                  role="progressbar"
+                                  aria-valuetext="Loading..."
+                              >
+                                  <span class="pf-c-spinner__clipper"></span>
+                                  <span class="pf-c-spinner__lead-ball"></span>
+                                  <span class="pf-c-spinner__tail-ball"></span>
+                              </span>
+                          </div>
                       </div>
                   </div>`
                 : ""}