added reactive theming to the title bar for resources

5 years ago · 07677b4e19
parent 9e0ff71395
commit 07677b4e19
4 changed files with 17 additions and 6 deletions
--- a/src/assets/pages/styles/test-resources-landing-page2.scss
+++ b/src/assets/pages/styles/test-resources-landing-page2.scss
@ -128,8 +128,8 @@ body {
 .form-control::-webkit-input-placeholder { color: searchfont; }  /* WebKit, Blink, Edge */
 .form-control:-moz-placeholder { color: searchfont; }  /* Mozilla Firefox 4 to 18 */
 .form-control::-moz-placeholder { color: searchfont; }  /* Mozilla Firefox 19+ */
-.form-control:-ms-input-placeholder { color: searchfont; }  /* Internet Explorer 10-11 */
-.form-control::-ms-input-placeholder { color: searchfont; }  /* Microsoft Edge */
+
+

 .footer {
  padding-top: 3rem;
@ -141,4 +141,3 @@ body {
 .footer p {
  margin-bottom: .25rem;
 }
-
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@ -56,3 +56,13 @@ body{
  height: 100%;
 }

+.category-header {
+  border: 1px solid black;
+  border-radius: 5px;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.category-header.active {
+  background-color: white;
+}
--- a/src/assets/views/card-category.mustache
+++ b/src/assets/views/card-category.mustache
@ -1,11 +1,10 @@
 <html lang="en">
 <div>
-    <div id="{{{category-key}}}-collapser" style="border-radius: 5px; background-color:rgba(112, 112, 112, 0.05); border-style: solid; border-width: 1px; border-color: #000000">
-        <h4>{{{category-id-clean}}}</h4> <br/>
+    <div id="{{{category-key}}}-collapser" class="category-header">
+        <h4>{{{category-id-clean}}}</h4>
        <p class="text-#000000 align-self-center">{{{category-description}}}</p>
    </div>
    <br>
    <div id="{{{category-key}}}-container" class="{{{category-key}}}-collapse no-overflow row" style="display:none;"></div>
 </div>
-<br>
 </html>
--- a/src/ts_source/viewFactory.ts
+++ b/src/ts_source/viewFactory.ts
@ -71,10 +71,13 @@ export function buildWebCardsFromConfig(configName: string) {

            collapseButton.on("click", () => {
                let collapsable = $(`#${categoryKey}-container`);
+                let collapseButton = $(`#${categoryKey}-collapser`);
                if ("none" === collapsable.css('display')) {
                    collapsable.css("display", "");
+                    collapseButton.addClass("active");
                } else {
                    collapsable.css("display", "none");
+                    collapseButton.removeClass("active");
                }
            });