Izzy Start Journey Screen Pull Request

elements/app-hax/app-hax.js

@@ -3,17 +3,21 @@ import { toJS, autorun } from "mobx";
 import { localStorageSet, localStorageGet } from "@haxtheweb/utils/utils.js";
 import "@haxtheweb/simple-tooltip/simple-tooltip.js";
 import { SimpleColors } from "@haxtheweb/simple-colors/simple-colors.js";
-import { store } from "./lib/v1/AppHaxStore.js";
+import { store } from "./lib/v2/AppHaxStore.js";
 import { I18NMixin } from "@haxtheweb/i18n-manager/lib/I18NMixin.js";
-import { AppHaxAPI } from "./lib/v1/AppHaxBackendAPI.js";
+import { AppHaxAPI } from "./lib/v2/AppHaxBackendAPI.js";
 import { SimpleTourManager } from "@haxtheweb/simple-popover/lib/simple-tour.js";
 import { SuperDaemonInstance } from "@haxtheweb/super-daemon/super-daemon.js";
 import "@haxtheweb/simple-toolbar/lib/simple-toolbar-button.js";
 import "@haxtheweb/simple-colors-shared-styles/simple-colors-shared-styles.js";
-import "./lib/v1/AppHaxRouter.js";
-import "./lib/v1/app-hax-label.js";
-import "./lib/v1/app-hax-top-bar.js";
+import "./lib/v2/AppHaxRouter.js";
+import "./lib/v2/app-hax-label.js";
+import "./lib/v2/app-hax-top-bar.js";
 import { SimpleTourFinder } from "@haxtheweb/simple-popover/lib/SimpleTourFinder.js";
+import "./lib/v2/app-hax-use-case.js";
+import "./lib/v2/app-hax-use-case-filter.js";
+import "./lib/v2/app-hax-search-results.js";
+import "./lib/v2/app-hax-scroll-button.js";
 
 const logoutBtn = new URL("./lib/assets/images/Logout.svg", import.meta.url)
   .href;
@@ -472,7 +476,6 @@ Window size: ${globalThis.innerWidth}x${globalThis.innerHeight}
       const badDevice = toJS(store.badDevice);
       if (badDevice === false) {
         import("@haxtheweb/rpg-character/rpg-character.js");
-        import("./lib/random-word/random-word.js");
       } else if (badDevice === true) {
         globalThis.document.body.classList.add("bad-device");
       }
@@ -716,7 +719,7 @@ Window size: ${globalThis.innerWidth}x${globalThis.innerHeight}
 
   // eslint-disable-next-line class-methods-use-this
   login() {
-    import("./lib/v1/app-hax-site-login.js").then(() => {
+    import("./lib/v2/app-hax-site-login.js").then(() => {
       const p = globalThis.document.createElement("app-hax-site-login");
       if (this.querySelector('[slot="externalproviders"]')) {
         const cloneSlot = this.querySelector(
@@ -764,6 +767,9 @@ Window size: ${globalThis.innerWidth}x${globalThis.innerHeight}
         #home {
           display: inline-flex;
         }
+        #wt {
+          border: solid 1px var(--simple-colors-default-theme-accent-12, var(--accent-color));
+        }
         simple-toolbar-button {
           min-width: 48px;
           margin: 0;
@@ -859,13 +865,18 @@ Window size: ${globalThis.innerWidth}x${globalThis.innerHeight}
           }
         }
         .label {
-          text-align: center;
+          display: inline-flex;
+          text-align: flex-start;
+          align-items: center;
         }
         app-hax-label {
           animation: 0.8s ease-in-out 0s scrollin;
           -webkit-animation: 0.8s ease-in-out 0s scrollin;
-          display: block;
+          display: flex;
+          align-self: flex-start;
           overflow: hidden;
+          margin-left: 24px;
+          margin-right: 24px;
         }
         app-hax-label h1 {
           font-weight: normal;
@@ -933,29 +944,6 @@ Window size: ${globalThis.innerWidth}x${globalThis.innerHeight}
           font-family: "Press Start 2P", sans-serif;
           font-size: 12px;
         }
-
-        random-word:not(:defined) {
-          display: none;
-        }
-        random-word {
-          transform: rotate(25deg);
-          position: absolute;
-          right: 10px;
-          top: 120px;
-          padding: 12px;
-          font-size: 12px;
-          border: 4px solid var(--simple-colors-default-theme-grey-12);
-          background-color: var(--simple-colors-default-theme-yellow-5);
-          color: var(--simple-colors-default-theme-grey-12);
-          width: 100px;
-          word-wrap: break-word;
-          text-align: center;
-          cursor: pointer;
-          user-select: none;
-          opacity: 1;
-          visibility: visible;
-          transition: all 0.3s ease-in-out;
-        }
         #helpbtn {
           --simple-icon-height: 50px;
           --simple-icon-width: 50px;
@@ -991,15 +979,13 @@ Window size: ${globalThis.innerWidth}x${globalThis.innerHeight}
           }
         }
         @media (max-width: 640px) {
-          random-word {
-            display: none;
-          }
           .content {
             margin-top: 4px;
           }
           .start-journey {
             padding-top: 0;
           }
+
           app-hax-site-button {
             --app-hax-site-button-font-size: 12px;
           }
@@ -1048,15 +1034,15 @@ Window size: ${globalThis.innerWidth}x${globalThis.innerHeight}
     if (store.AppHaxAPI && this.basePath) {
       store.AppHaxAPI.basePath = this.basePath;
     }
-    import("./lib/v1/app-hax-steps.js");
-    import("./lib/v1/app-hax-site-button.js");
+    import("./lib/v2/app-hax-steps.js");
+    import("./lib/v2/app-hax-site-button.js");
     import("wired-elements/lib/wired-button.js");
-    import("./lib/v1/app-hax-toast.js");
-    import("./lib/v1/app-hax-wired-toggle.js");
-    import("./lib/v1/app-hax-search-bar.js");
-    import("./lib/v1/app-hax-search-results.js");
-    import("./lib/v1/app-hax-user-menu.js");
-    import("./lib/v1/app-hax-user-menu-button.js");
+    import("./lib/v2/app-hax-toast.js");
+    import("./lib/v2/app-hax-wired-toggle.js");
+    import("./lib/v2/app-hax-search-bar.js");
+    import("./lib/v2/app-hax-search-results.js");
+    import("./lib/v2/app-hax-user-menu.js");
+    import("./lib/v2/app-hax-user-menu-button.js");
     this.dispatchEvent(
       new CustomEvent("app-hax-loaded", {
         composed: true,
@@ -1163,10 +1149,6 @@ Window size: ${globalThis.innerWidth}x${globalThis.innerHeight}
             data-event="super-daemon"
             show-text-label
           ></simple-toolbar-button>
-          <app-hax-search-bar
-            slot="center"
-            ?disabled="${this.isNewUser}"
-          ></app-hax-search-bar>
           <wired-button
             elevation="1"
             slot="right"
@@ -1288,21 +1270,12 @@ Window size: ${globalThis.innerWidth}x${globalThis.innerHeight}
                 : ``}
             </app-hax-label>
           </div>
-          <random-word
-            key="${this.isNewUser ? `new` : `return`}"
-            .phrases="${this.phrases}"
-            @click="${this.getNewWord}"
-          ></random-word>
+
           <section class="content">${this.appBody(this.appMode)}</section>
         </confetti-container>
       </main>`;
   }
 
-  getNewWord() {
-    this.shadowRoot.querySelector("random-word").getNewWord();
-    store.appEl.playSound("click");
-  }
-
   appBody(routine) {
     let template = html``;
     switch (routine) {
@@ -1320,21 +1293,15 @@ Window size: ${globalThis.innerWidth}x${globalThis.innerHeight}
     }
     return template;
   }
-
+
+  //EDIT HERE
   templateHome() {
-    return html`<div class="start-journey">
-        <a
-          href="createSite-step-1"
-          @click="${this.startJourney}"
-          tabindex="-1"
-          title="${this.t.startNewJourney}"
-        >
-          <app-hax-site-button
-            label="&gt; ${this.t.startNewJourney}"
-          ></app-hax-site-button>
-        </a>
+    return html`
+    <div class="start-journey">
+      <app-hax-use-case-filter></app-hax-use-case-filter>
       </div>
-      <app-hax-search-results></app-hax-search-results>`;
+
+      `;
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -1408,4 +1375,4 @@ globalThis.AppHax.requestAvailability = () => {
     globalThis.AppHax.instance = globalThis.document.querySelector(AppHax.tag);
   }
   return globalThis.AppHax.instance;
-};
+};

elements/app-hax/demo/home.html

@@ -242,4 +242,4 @@ <h2>Get involved!</h2>
     <p>HAX is supported by a collaboration of multiple Penn State colleges and departmens.</p>
   </footer>
   </body>
-</html>
+</html>

elements/app-hax/demo/index.html

@@ -31,7 +31,7 @@
         padding: 0;
         font-family: 'Press Start 2P', sans-serif;
         overflow-x: hidden;
-        background-image: url('../lib/assets/images/LMGridBox.svg');
+        background-image: url('../lib/assets/images/LMBackgroundImage.svg');
         background-repeat: repeat;
         background-position: center center;
         background-size: auto, 20% auto, 20% auto;
@@ -51,16 +51,15 @@
       }
       body.dark-mode {
         background-color: black;
-        background-image: url('../lib/assets/images/DMGridBox.svg');
+        background-image: url('../lib/assets/images/DMBackgroundImage.svg');
         --app-hax-accent-color: white;
         --app-hax-background-color: black;
       }
       body.app-loaded:not(.bad-device) {
-        background-image: url('../lib/assets/images/LMGridBox.svg'), url('../lib/assets/images/DesignLightModeLeft.svg'), url('../lib/assets/images/DesignLightModeRight.svg');
-        background-repeat: repeat, repeat-y, repeat-y;
-        background-position: center center, top left, top right;
-        background-size: auto, 20% auto, 20% auto;
-        background-attachment: fixed, fixed, fixed;
+        background-image: url('../lib/assets/images/LMBackgroundImage.svg'), url('../lib/assets/images/DesignLightModeLeft.svg'), url('../lib/assets/images/DesignLightModeRight.svg');
+        background-position: top;
+        background-size: auto;
+
       }
       div[slot="externalproviders"] {
         display: none;
@@ -69,9 +68,8 @@
         display: unset;
       }
       body.app-loaded.dark-mode {
-        background-image: url('../lib/assets/images/DMGridBox.svg'), url('../lib/assets/images/DesignDarkModeLeft.svg'), url('../lib/assets/images/DesignDarkModeRight.svg');
+        background-image: url('../lib/assets/images/DMBackgroundImage.svg'), url('../lib/assets/images/DesignDarkModeLeft.svg'), url('../lib/assets/images/DesignDarkModeRight.svg');
       }
-
       #loading {
         font-family: 'Press Start 2P', sans-serif;
         text-align: center;
@@ -382,4 +380,4 @@
       };
         </script>
           </body>
-</html>
+</html>

elements/app-hax/demo/sites.json

@@ -25,6 +25,7 @@
             "name": "ist402",
             "created": 1565898366,
             "updated": 1615262120,
+            "category": ["Course"],
             "git": {
               "autoPush": false,
               "branch": "master",
@@ -81,6 +82,7 @@
             "name": "acctg211",
             "created": 1610048864,
             "updated": 1612555993,
+            "category": ["Blog"],
             "version": "2.0.9",
             "domain": "",
             "logo": "",
@@ -149,6 +151,7 @@
             "name": "geodz511",
             "created": 1569349769,
             "updated": 1640014827,
+            "category": ["Course"],
             "git": {
               "vendor": "github",
               "branch": "master",
@@ -206,6 +209,7 @@
             "logo": "assets/banner.jpg",
             "created": 1635276018,
             "updated": 1635276048,
+            "category": ["Brochure"],
             "git": {}
           },
           "theme": {
@@ -246,6 +250,7 @@
             "name": "ist210",
             "created": 1592403069,
             "updated": 1598281185,
+            "category": ["Course"],
             "git": {
               "autoPush": false,
               "branch": "",
@@ -296,6 +301,7 @@
         "author": "",
         "description": "",
         "license": "by-sa",
+        "category": ["Blog"],
         "metadata": {
           "author": {
             "image": "",
@@ -308,6 +314,7 @@
             "logo": "assets/banner.jpg",
             "created": 1594994550,
             "updated": 1595266163,
+            "category": ["Course"],
             "git": {
               "autoPush": false,
               "branch": "",
@@ -369,6 +376,7 @@
             "logo": "assets/banner.jpg",
             "created": 1629208877,
             "updated": 1642013655,
+            "category": ["Course"],
             "git": {
               "autoPush": false,
               "branch": "",
@@ -425,6 +433,7 @@
             "logo": "assets/banner.jpg",
             "created": 1644856484,
             "updated": 1644856484,
+            "category": ["Course"],
             "git": {}
           },
           "theme": {
@@ -459,7 +468,8 @@
           "domain": null,
           "site": {
             "created": 1558624482,
-            "updated": 1558624504
+            "updated": 1558624504,
+            "category": ["Course"]
           },
           "theme": {
             "element": "learn-two-theme",