card-category.mustache cleanup

removed typos from resources-landing-page.json

fixed tag closures and removed second footer in test-resources-landing-page2.html

redid bookmark links for test-resources-landing-page2.html

fixed whitespace character issue in theme-light.scss that was causing compile-time errors in sass

updated viewFactory.ts with clearer wording for card-category.mustache tags

src/assets/conf/resources-landing-page.json

@@ -3,8 +3,7 @@
 
 
 
-
-"Human-Resources": {
+    "Human Resources": {
       "description": "Policies, recruitment, onboarding, benefits and compensation",
       "cards": [
         {
@@ -132,7 +131,7 @@
           "imagePath": "linkedinlogo_100x100.png",
           "urlText": "https://www.linkedin.com/company/jds-consulting-&-design",
           "altText": "LinkedIn icon"
-        },
+        }
       ]
     },
 
@@ -195,14 +194,14 @@
           "imagePath": "learning-center-icon4-100x100.png",
           "urlText": "https://learning.carolina.engineering/additional-resources/",
           "altText": "Learning Center icon"
-        }
+        },
         {
           "title": "Field Guide",
           "description": "This quick-reference guide helps engineering technicians find charts, tables, and third-party information, at-a-glance.",
           "imagePath": "learning-center-icon4-100x100.png",
           "urlText": "https://learning.carolina.engineering/additional-resources/",
           "altText": "Learning Center icon"
-         }
+        },
         {
           "title": "CAD Tech Study Guide",
           "description": "This guide presents lessons for drafters, each of which can help a drafter advance to CAD Tech II status.",
@@ -214,7 +213,6 @@
     },
 
 
-
     "Workflow": {
       "description": "Project management, assignments, status, client information, invoicing, data and engineering reports",
       "cards": [
@@ -255,6 +253,5 @@
         }
       ]
     }
-
   }
 }

src/assets/pages/styles/theme-base.scss

@@ -49,10 +49,10 @@ $enable-rounded: true !default;
 }
 
 html{
-  height:100%
+  height: 100%
 }
 
 body{
-  height:100%;
+  height: 100%;
 }
 

src/assets/pages/styles/theme-light.scss

@@ -10,7 +10,7 @@ $theme-colors: (
         "inactivecard": #ffffff,
         "activecard": #13a04a,
         "boxborder": #c0c2c6,
-        "activecardfont":#e1e4e8,
+        "activecardfont": #e1e4e8,
         "searchfont": #2c2c2c,
         "sidebarfill": #f6f6f6,
         "sidebartext": #545455,
@@ -19,14 +19,14 @@ $theme-colors: (
         "headertextcolor": #434344,
         "headertextcolorhover": #ffffff,
         "paragraphtextcolor": #434344,
-        "paragraphtextcolorhover":#ffffff,
+        "paragraphtextcolorhover": #ffffff,
         "themebuttonoutline": #434344,
         "categorybox": #ffffff,
-        "footertext:": #434344, 
+        "footertext": #434344,
 );
 
 .theme-button{
-  width:40px;
+  width: 40px;
   height: 30px;
   background-size: contain;
   background-color: transparent;

src/assets/pages/test-resources-landing-page2.html

@@ -18,7 +18,8 @@
 
 <div class="fixed-top d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-0 bg-primary border-top shadow-sm">
     <a class="navbar-brand text-navbartext my-0 mr-md-auto">
-    <img src="../images/JDS_faulkner_Logo_NoTextAtBottom.png" height="30" class="d-inline-block align-top" alt="JDSfaulkner logo">
+        <img src="../images/JDS_faulkner_Logo_NoTextAtBottom.png" height="30" class="d-inline-block align-top"
+             alt="JDSfaulkner logo">
         &nbsp;Steering Wheel
     </a>
     <nav class="my-2 my-md-0 mr-md-3">
@@ -49,31 +50,31 @@
                 </h6>
                 <ul class="nav flex-column mb-2 ml-4">
                     <li class="nav-item">
-                <a class="nav-link text-sidebartext" href="#Human-Resources-collapser">
+                        <a class="nav-link text-sidebartext" href="#human-resources-collapser">
                             <span data-feather="list-ul"></span>
                             Human Resources
                         </a>
                     </li>
                     <li class="nav-item">
-                <a class="nav-link text-sidebartext" href="#Marketing-collapser">
+                        <a class="nav-link text-sidebartext" href="#marketing-collapser">
                             <span data-feather="list-ul"></span>
                             Marketing
                         </a>
                     </li>
                     <li class="nav-item">
-                <a class="nav-link text-sidebartext" href="#Productivity-collapser">
+                        <a class="nav-link text-sidebartext" href="#productivity-collapser">
                             <span data-feather="list-ul"></span>
                             Productivity
                         </a>
                     </li>
                     <li class="nav-item">
-                <a class="nav-link text-sidebartext" href="#Training-collapser">
+                        <a class="nav-link text-sidebartext" href="#training-collapser">
                             <span data-feather="list-ul"></span>
                             Training
                         </a>
                     </li>
                     <li class="nav-item">
-                <a class="nav-link text-sidebartext" href="#Workflow-collapser">
+                        <a class="nav-link text-sidebartext" href="#workflow-collapser">
                             <span data-feather="list-ul"></span>
                             Workflow
                         </a>
@@ -102,15 +103,9 @@
                     </div>
                 </div>
             </div>
-
-
-<footer class="page-footer">
-    <div class="container">
-        <p class="float-right text-warning">
-            <a href="#">Back to top</a>
-        </p>
+        </main>
     </div>
-</footer>
+</div>
 
 
 <footer class="page-footer">
@@ -124,7 +119,6 @@
     </div>
 </footer>
 
-</main>
 </body>
 
 

src/assets/views/card-category.mustache

@@ -1,11 +1,11 @@
 <html lang="en">
 <div>
-    <div id="{{{category-id}}}-collapser" style="background-color:#a3a3a3;">
+    <div id="{{{category-key}}}-collapser" style="background-color:#a3a3a3;">
         <h4>{{{category-id-clean}}}</h4> <br/>
         <p class="text-#ffffff align-self-center">{{{category-description}}}</p>
     </div>
     <br>
-    <div id="{{{category-id}}}-container" class="{{{category-id}}}-collapse no-overflow row" style="display:none;"></div>
+    <div id="{{{category-key}}}-container" class="{{{category-key}}}-collapse no-overflow row" style="display:none;"></div>
 </div>
 <br>
 </html>

src/ts_source/themes.ts

@@ -16,12 +16,9 @@ export module Themes {
         // initToggle.addClass(getButtonClassFromAppTheme(initThemeEnum));
         initToggle.on("click", () => {
             let conf = Configurator.loadUserConfig(ConfigPaths.UserConfigName);
-            let toggle = $("#theme-toggle");
             let themeValue = conf['theme'];
             let currTheme = getThemeFromValue(themeValue);
             let opposite = getOppositeTheme(currTheme);
-            // toggle.removeClass(getButtonClassFromAppTheme(currTheme));
-            // toggle.addClass(getButtonClassFromAppTheme(opposite));
             applyTheme(opposite);
             conf['theme'] = opposite;
             Configurator.saveUserConfig(ConfigPaths.UserConfigName, conf);

src/ts_source/viewFactory.ts

@@ -48,24 +48,29 @@ export function buildWebCardsFromConfig(configName: string) {
         let containerElem = $(`#${containerName}`);
 
         let containerCategories = Object.keys(containerObject);
+
         for (let j = 0, m = containerCategories.length; j < m; j++) {
             let categoryMetaObjectKey = containerCategories[j];
             let categoryMetaObject = containerObject[categoryMetaObjectKey];
             let contentList = categoryMetaObject["cards"];//should be array of objects to render
             let categoryDescription = categoryMetaObject["description"];
-            let categoryKey = categoryMetaObjectKey.replace(/[\s,]/ig, '-');
-            let categoryObject = {"category-description": categoryDescription, "category-id": categoryKey, "category-id-clean":categoryMetaObjectKey};
+            let categoryKey = categoryMetaObjectKey.replace(/[\s,]/ig, '-').toLowerCase();
+            let categoryObject = {
+                "category-description": categoryDescription,
+                "category-key": categoryKey,
+                "category-id-clean": categoryMetaObjectKey
+            };
             let categoryWrapperRaw = loadTemplate("card-category.mustache", categoryObject, (x) => {
             });
             let categoryWrapper = $(categoryWrapperRaw);
 
             containerElem.append(categoryWrapper);
 
-            let view = $(`#${categoryMetaObjectKey}-container`);
-            let collapseButton = $(`#${categoryMetaObjectKey}-collapser`);
+            let view = $(`#${categoryKey}-container`);
+            let collapseButton = $(`#${categoryKey}-collapser`);
 
             collapseButton.on("click", () => {
-                let collapsable = $(`#${categoryMetaObjectKey}-container`);
+                let collapsable = $(`#${categoryKey}-container`);
                 if ("none" === collapsable.css('display')) {
                     collapsable.css("display", "");
                 } else {