From 613268a4e1ce4cf764c398af0950931570b8afbc Mon Sep 17 00:00:00 2001 From: dtookey Date: Thu, 3 Dec 2020 13:10:07 -0500 Subject: [PATCH] implemented first help overlay --- src/assets/pages/resources-landing-page.html | 5 +++-- src/assets/pages/styles/theme-base.scss | 13 ++++++++++++- src/assets/views/help-overlay.mustache | 7 +++++++ src/ts_source/help.ts | 16 ++++++++++++++++ src/ts_source/templates.ts | 2 +- 5 files changed, 39 insertions(+), 4 deletions(-) create mode 100644 src/assets/views/help-overlay.mustache create mode 100644 src/ts_source/help.ts diff --git a/src/assets/pages/resources-landing-page.html b/src/assets/pages/resources-landing-page.html index 92d1dc0..e35f9c1 100644 --- a/src/assets/pages/resources-landing-page.html +++ b/src/assets/pages/resources-landing-page.html @@ -26,7 +26,7 @@
- About the Resource Center + About the Resource Center Searches Categories Resources @@ -160,8 +160,9 @@ - + + \ No newline at end of file diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss index 40763e8..8953e1a 100644 --- a/src/assets/pages/styles/theme-base.scss +++ b/src/assets/pages/styles/theme-base.scss @@ -155,4 +155,15 @@ body { color: map-get($theme-colors, feedbackmessagehint) !important; } - +.overlay-custom { + position: fixed; /* Sit on top of the page content */ + width: 100%; /* Full width (cover the whole page) */ + height: 100%; /* Full height (cover the whole page) */ + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0,0,0,0.5); /* Black background with opacity */ + z-index: 2000; /* Specify a stack order in case you're using a different order for other elements */ + cursor: pointer; /* Add a pointer on hover */ +} diff --git a/src/assets/views/help-overlay.mustache b/src/assets/views/help-overlay.mustache new file mode 100644 index 0000000..4cd5439 --- /dev/null +++ b/src/assets/views/help-overlay.mustache @@ -0,0 +1,7 @@ + +
+

+ HELLO FROM THE HELP SCREEN +

+
+ \ No newline at end of file diff --git a/src/ts_source/help.ts b/src/ts_source/help.ts new file mode 100644 index 0000000..2930368 --- /dev/null +++ b/src/ts_source/help.ts @@ -0,0 +1,16 @@ +import {loadTemplate} from "./templates"; + +let $ = require('jquery') + +console.log("we got it loaded") + +export function openHelpOverlay(resourceName: string){ + let body = $("body"); + let loadedTemplate = loadTemplate("help-overlay.mustache", {}, (x)=>{}); + let content = $(loadedTemplate); + body.append(content) +} + +export function closeOverlay(){ + $("#help-overlay").remove(); +} \ No newline at end of file diff --git a/src/ts_source/templates.ts b/src/ts_source/templates.ts index 0681c68..2b50932 100644 --- a/src/ts_source/templates.ts +++ b/src/ts_source/templates.ts @@ -20,7 +20,7 @@ export function cacheTemplates() { }); } -export function loadTemplate(filename: string, obj: object, cb: TemplateCallbackType) { +export function loadTemplate(filename: string, obj: object, cb: TemplateCallbackType): string { let contents = templateCache[filename]; if (!contents) throw new Error("No such template: " + filename); let rendered = Mustache.render(contents, obj)