extended html element to cover entire screen area.

modified web-card.mustache to have theme-based text color. added devtools to 0-run-fast.ps1. added web-card formatting stuff to resources-landing-page.scss
5 years ago · 31932e1295
parent 8de3abcc45
commit 31932e1295
7 changed files with 46 additions and 13 deletions
--- a/package.json
+++ b/package.json
@ -13,7 +13,7 @@
    "clean": "gulp clean",
    "build": "gulp",
    "start": "npm run build && electron ./build",
-    "start-fast": "gulp runFast && electron ./build",
+    "start-fast": "gulp runFast && electron ./build --debug",
    "dev": "npm run build && electron ./build --debug",
    "package": "npm-run-all package:*",
    "package:mac": "electron-packager ./build --overwrite --platform=darwin --arch=x64 --out=out --icon=assets/images/app.icns --osx-sign.identity='Developer ID Application: GitHub' --extend-info=assets/mac/info.plist",
--- a/src/assets/pages/resources-landing-page.html
+++ b/src/assets/pages/resources-landing-page.html
@ -11,10 +11,8 @@
    <script>require('popper.js')</script>
    <script>require('bootstrap')</script>
 </head>
-<body hidden ONLOAD="$('body').removeAttr('hidden');">
-
+<body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
 <header>
-    
    <div class="collapse bg-secondary" id="navbarHeader">
        <div class="container">
            <div class="row">
@ -63,8 +61,10 @@
    </div>
 </main>

+</body>
+
 <footer class="page-footer">
-    <div class="container">
+    <div class="container" style="background:#ff0000">
        <p class="float-left text-warning">
            <a href="Design3.html">Design 3</a>
        <p class="float-right text-warning">
@ -72,7 +72,6 @@
        </p>
    </div>
 </footer>
-</body>
 <script src="scripts/tsUtil.js"></script>
 <script>loadTSTarget("themes.js");</script>
 <script src="scripts/index_app.js"></script>
--- a/src/assets/pages/styles/resources-landing-page.scss
+++ b/src/assets/pages/styles/resources-landing-page.scss
@ -30,6 +30,14 @@
    color: #searchfont;
 }

+.card-image-background{
+  display: flex;
+}
+
+.text-align-left{
+  text-align: left;
+}
+
 .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+ */
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@ -19,3 +19,23 @@ $enable-rounded: true !default;
  background-color: map-get($theme-colors, activecard);
 }

+.web-card-image-background{
+  background-color: map-get($theme-colors, webcardimagebackground);
+  border-radius: 50%;
+}
+
+.text-header {
+  color: map-get($theme-colors, headertextcolor);
+}
+
+.text-paragraph{
+  color: map-get($theme-colors, paragraphtextcolor);
+}
+
+html{
+  height:100%
+}
+
+body{
+  height:100%;
+}
--- a/src/assets/pages/styles/theme-dark.scss
+++ b/src/assets/pages/styles/theme-dark.scss
@ -10,6 +10,11 @@ $theme-colors: (
        "boxborder": #55555c,
        "activecardfont":#e1e4e8,
        "searchfont": #808080,
+        "webcardimagebackground": #aa33ff,
+        "paragraphtextcolor": #ffffff,
+        "headertextcolor": #aaaaaa
 );

+
+
@import "theme-base";
--- a/src/assets/pages/styles/theme-light.scss
+++ b/src/assets/pages/styles/theme-light.scss
@ -1,4 +1,3 @@
-
 $theme-colors: (
        "primary": #2c2c2c,
        "secondary": #e5e5e5,
@ -7,11 +6,13 @@ $theme-colors: (
        "warning": #700000,
        "inactivecard": #ffffff,
        "activecard": #002752,
-        "boxborder": #c0c2c6, 
+        "boxborder": #c0c2c6,
        "activecardfont":#e1e4e8,
        "searchfont": #2c2c2c,
+        "webcardimagebackground": #000000,
+        "paragraphtextcolor": #000000,
+        "headertextcolor": #444444
 );

-//$font-color: #000;

@import "theme-base";
--- a/src/assets/views/web-card.mustache
+++ b/src/assets/views/web-card.mustache
@ -1,10 +1,10 @@
 <html lang="en">
 <div class="col-md-4 web-card" id="{{{id}}}" >
    <div class="card mb-4 shadow-sm web-card-background">
-        <div class="card-body">
-            <h7 class="card-text text-white" style="text-align:center">{{title}}</h7>
-            <p class="card-text text-success">{{description}} </p>
-            <div class="d-flex justify-content-between align-items-center">
+        <div class="card-body  text-center">
+            <h7 class="card-text text-header" style="text-align:center">{{title}}</h7>
+            <p class="card-text text-paragraph text-align-left">{{description}} </p>
+            <div class="d-inline-block mx-auto justify-content-between align-items-center web-card-image-background">
                <img class="rounded-circle mx-auto d-block img-fluid"
                     src="{{{imgPath}}}" alt="{{{altText}}}"
                     style="max-height:50px">