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
pull/1/head
David Tookey 5 years ago
parent 8de3abcc45
commit 31932e1295

@ -13,7 +13,7 @@
"clean": "gulp clean", "clean": "gulp clean",
"build": "gulp", "build": "gulp",
"start": "npm run build && electron ./build", "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", "dev": "npm run build && electron ./build --debug",
"package": "npm-run-all package:*", "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", "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",

@ -11,10 +11,8 @@
<script>require('popper.js')</script> <script>require('popper.js')</script>
<script>require('bootstrap')</script> <script>require('bootstrap')</script>
</head> </head>
<body hidden ONLOAD="$('body').removeAttr('hidden');"> <body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
<header> <header>
<div class="collapse bg-secondary" id="navbarHeader"> <div class="collapse bg-secondary" id="navbarHeader">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@ -63,8 +61,10 @@
</div> </div>
</main> </main>
</body>
<footer class="page-footer"> <footer class="page-footer">
<div class="container"> <div class="container" style="background:#ff0000">
<p class="float-left text-warning"> <p class="float-left text-warning">
<a href="Design3.html">Design 3</a> <a href="Design3.html">Design 3</a>
<p class="float-right text-warning"> <p class="float-right text-warning">
@ -72,7 +72,6 @@
</p> </p>
</div> </div>
</footer> </footer>
</body>
<script src="scripts/tsUtil.js"></script> <script src="scripts/tsUtil.js"></script>
<script>loadTSTarget("themes.js");</script> <script>loadTSTarget("themes.js");</script>
<script src="scripts/index_app.js"></script> <script src="scripts/index_app.js"></script>

@ -30,6 +30,14 @@
color: #searchfont; 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::-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 4 to 18 */
.form-control::-moz-placeholder { color: searchfont; } /* Mozilla Firefox 19+ */ .form-control::-moz-placeholder { color: searchfont; } /* Mozilla Firefox 19+ */

@ -19,3 +19,23 @@ $enable-rounded: true !default;
background-color: map-get($theme-colors, activecard); 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%;
}

@ -10,6 +10,11 @@ $theme-colors: (
"boxborder": #55555c, "boxborder": #55555c,
"activecardfont":#e1e4e8, "activecardfont":#e1e4e8,
"searchfont": #808080, "searchfont": #808080,
"webcardimagebackground": #aa33ff,
"paragraphtextcolor": #ffffff,
"headertextcolor": #aaaaaa
); );
@import "theme-base"; @import "theme-base";

@ -1,4 +1,3 @@
$theme-colors: ( $theme-colors: (
"primary": #2c2c2c, "primary": #2c2c2c,
"secondary": #e5e5e5, "secondary": #e5e5e5,
@ -7,11 +6,13 @@ $theme-colors: (
"warning": #700000, "warning": #700000,
"inactivecard": #ffffff, "inactivecard": #ffffff,
"activecard": #002752, "activecard": #002752,
"boxborder": #c0c2c6, "boxborder": #c0c2c6,
"activecardfont":#e1e4e8, "activecardfont":#e1e4e8,
"searchfont": #2c2c2c, "searchfont": #2c2c2c,
"webcardimagebackground": #000000,
"paragraphtextcolor": #000000,
"headertextcolor": #444444
); );
//$font-color: #000;
@import "theme-base"; @import "theme-base";

@ -1,10 +1,10 @@
<html lang="en"> <html lang="en">
<div class="col-md-4 web-card" id="{{{id}}}" > <div class="col-md-4 web-card" id="{{{id}}}" >
<div class="card mb-4 shadow-sm web-card-background"> <div class="card mb-4 shadow-sm web-card-background">
<div class="card-body"> <div class="card-body text-center">
<h7 class="card-text text-white" style="text-align:center">{{title}}</h7> <h7 class="card-text text-header" style="text-align:center">{{title}}</h7>
<p class="card-text text-success">{{description}} </p> <p class="card-text text-paragraph text-align-left">{{description}} </p>
<div class="d-flex justify-content-between align-items-center"> <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" <img class="rounded-circle mx-auto d-block img-fluid"
src="{{{imgPath}}}" alt="{{{altText}}}" src="{{{imgPath}}}" alt="{{{altText}}}"
style="max-height:50px"> style="max-height:50px">

Loading…
Cancel
Save