dtookey
/
Engine_Rebuild
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

card-category.mustache cleanup

Browse Source 
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
pull/2/head
David Tookey 5 years ago
parent ae72db7221
commit 38702d1d3f
7 changed files with 106 additions and 113 deletions
Show Stats Download Patch File Download Diff File

23
src/assets/conf/resources-landing-page.json
Unescape Escape View File

@ -1,10 +1,9 @@
{ {
"grid-container": { "grid-container": {
"Human-Resources": { "Human Resources": {
"description": "Policies, recruitment, onboarding, benefits and compensation", "description": "Policies, recruitment, onboarding, benefits and compensation",
"cards": [ "cards": [
{ {
@ -68,7 +67,7 @@
"description": "Provide this form to HR if you would like to defer or change part of your compensation to the company’s SIMPLE IRA Plan.", "description": "Provide this form to HR if you would like to defer or change part of your compensation to the company’s SIMPLE IRA Plan.",
"imagePath": "pdf-icon3-100x100.png", "imagePath": "pdf-icon3-100x100.png",
"urlText": "../resources/Notice and Agreement.pdf", "urlText": "../resources/Notice and Agreement.pdf",
"altText": "PDF icon" "altText": "PDF icon"
} }
] ]
}, },
@ -124,18 +123,18 @@
"description": "Through Facebook, the company connects with the community by sharing content and interacting with the public.", "description": "Through Facebook, the company connects with the community by sharing content and interacting with the public.",
"imagePath": "facebooklogo_100x100.png", "imagePath": "facebooklogo_100x100.png",
"urlText": "https://www.facebook.com/JDSfaulkner/", "urlText": "https://www.facebook.com/JDSfaulkner/",
"altText": "Facebook icon" "altText": "Facebook icon"
}, },
{ {
"title": "LinkedIn", "title": "LinkedIn",
"description": "JDSfaulkner maintains a presence on LinkedIn for professional networking, posting job openings and receiving resumes.", "description": "JDSfaulkner maintains a presence on LinkedIn for professional networking, posting job openings and receiving resumes.",
"imagePath": "linkedinlogo_100x100.png", "imagePath": "linkedinlogo_100x100.png",
"urlText": "https://www.linkedin.com/company/jds-consulting-&-design", "urlText": "https://www.linkedin.com/company/jds-consulting-&-design",
"altText": "LinkedIn icon" "altText": "LinkedIn icon"
}, }
] ]
}, },
"Productivity": { "Productivity": {
"description": "Work tools, e-mail, calendar and cloud storage", "description": "Work tools, e-mail, calendar and cloud storage",
@ -195,27 +194,26 @@
"imagePath": "learning-center-icon4-100x100.png", "imagePath": "learning-center-icon4-100x100.png",
"urlText": "https://learning.carolina.engineering/additional-resources/", "urlText": "https://learning.carolina.engineering/additional-resources/",
"altText": "Learning Center icon" "altText": "Learning Center icon"
} },
{ {
"title": "Field Guide", "title": "Field Guide",
"description": "This quick-reference guide helps engineering technicians find charts, tables, and third-party information, at-a-glance.", "description": "This quick-reference guide helps engineering technicians find charts, tables, and third-party information, at-a-glance.",
"imagePath": "learning-center-icon4-100x100.png", "imagePath": "learning-center-icon4-100x100.png",
"urlText": "https://learning.carolina.engineering/additional-resources/", "urlText": "https://learning.carolina.engineering/additional-resources/",
"altText": "Learning Center icon" "altText": "Learning Center icon"
} },
{ {
"title": "CAD Tech Study Guide", "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.", "description": "This guide presents lessons for drafters, each of which can help a drafter advance to CAD Tech II status.",
"imagePath": "learning-center-icon4-100x100.png", "imagePath": "learning-center-icon4-100x100.png",
"urlText": "https://learning.carolina.engineering/additional-resources/", "urlText": "https://learning.carolina.engineering/additional-resources/",
"altText": "Learning Center icon" "altText": "Learning Center icon"
} }
] ]
}, },
"Workflow": { "Workflow": {
"description": "Project management, assignments, status, client information, invoicing, data and engineering reports", "description": "Project management, assignments, status, client information, invoicing, data and engineering reports",
"cards": [ "cards": [
{ {
@ -255,6 +253,5 @@
} }
] ]
} }
} }
} }

4
src/assets/pages/styles/theme-base.scss
Unescape Escape View File

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

8
src/assets/pages/styles/theme-light.scss
Unescape Escape View File

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

162
src/assets/pages/test-resources-landing-page2.html
Unescape Escape View File

@ -18,113 +18,107 @@
<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"> <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"> <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"
&nbsp;Steering Wheel alt="JDSfaulkner logo">
&nbsp;Steering Wheel
</a> </a>
<nav class="my-2 my-md-0 mr-md-3"> <nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-navbartext" href="#">Help</a> <a class="p-2 text-navbartext" href="#">Help</a>
<a class="p-2 text-navbartext" href="#">Feedback</a> <a class="p-2 text-navbartext" href="#">Feedback</a>
</nav> </nav>
<a class="btn btn-outline-themebuttonoutline" id="theme-toggle">Theme</a> <a class="btn btn-outline-themebuttonoutline" id="theme-toggle">Theme</a>
</div> </div>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<nav class="col-md-2 d-none d-md-block bg-sidebarfill sidebar"> <nav class="col-md-2 d-none d-md-block bg-sidebarfill sidebar">
<div class="sidebar-sticky"> <div class="sidebar-sticky">
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active text-sidebartext" href="#"> <a class="nav-link active text-sidebartext" href="#">
<span data-feather="home"></span> <span data-feather="home"></span>
Top <span class="sr-only">(current)</span> Top <span class="sr-only">(current)</span>
</a> </a>
</li> </li>
</ul> </ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-sidebartext"> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-sidebartext">
<span>Resource Categories</span> <span>Resource Categories</span>
<a class="d-flex align-items-center" href="#"> <a class="d-flex align-items-center" href="#">
</a> </a>
</h6> </h6>
<ul class="nav flex-column mb-2 ml-4"> <ul class="nav flex-column mb-2 ml-4">
<li class="nav-item"> <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> <span data-feather="list-ul"></span>
Human Resources Human Resources
</a> </a>
</li> </li>
<li class="nav-item"> <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> <span data-feather="list-ul"></span>
Marketing Marketing
</a> </a>
</li> </li>
<li class="nav-item"> <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> <span data-feather="list-ul"></span>
Productivity Productivity
</a> </a>
</li> </li>
<li class="nav-item"> <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> <span data-feather="list-ul"></span>
Training Training
</a> </a>
</li> </li>
<li class="nav-item"> <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> <span data-feather="list-ul"></span>
Workflow Workflow
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
</nav> </nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 text-navbartext"> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 text-navbartext">
<div class="justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 text-navbartext"> <div class="justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 text-navbartext">
<div class="album py-5 bg-secondary text-navbartext">
<div class="container text-navbartext">
<input class="form-control form-control-dark w-100 bg-info border border-boxborder text-searchfont"
placeholder="Search (What kind of resource are you looking for?)"
aria-label="Search">
</div>
<div class="album py-5 bg-secondary text-navbartext">
<div class="container bg-secondary text-navbartext">
<div id="grid-container">
</div>
</div>
</div>
</div>
</div>
<div class="album py-5 bg-secondary text-navbartext">
<div class="container text-navbartext">
<input class="form-control form-control-dark w-100 bg-info border border-boxborder text-searchfont"
placeholder="Search (What kind of resource are you looking for?)"
aria-label="Search">
</div>
<footer class="page-footer">
<div class="container"> <div class="album py-5 bg-secondary text-navbartext">
<p class="float-right text-warning"> <div class="container bg-secondary text-navbartext">
<a href="#">Back to top</a> <div id="grid-container">
</p> </div>
</div>
</div>
</div>
</div>
</main>
</div> </div>
</footer> </div>
<footer class="page-footer"> <footer class="page-footer">
<div class="container"> <div class="container">
<p class="float-left"> <p class="float-left">
<a href="resources-landing-page.html">Back to original layout</a> <a href="resources-landing-page.html">Back to original layout</a>
</p> </p>
<p class="float-right"> <p class="float-right">
<a href="#">Back to top</a> <a href="#">Back to top</a>
</p> </p>
</div> </div>
</footer> </footer>
</main>
</body> </body>

4
src/assets/views/card-category.mustache
Unescape Escape View File

@ -1,11 +1,11 @@
<html lang="en"> <html lang="en">
<div> <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/> <h4>{{{category-id-clean}}}</h4> <br/>
<p class="text-#ffffff align-self-center">{{{category-description}}}</p> <p class="text-#ffffff align-self-center">{{{category-description}}}</p>
</div> </div>
<br> <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> </div>
<br> <br>
</html> </html>

3
src/ts_source/themes.ts
Unescape Escape View File

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

15
src/ts_source/viewFactory.ts
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save