Merge pull request #35 from WarnerMedia/f/NGTSK-147/application-refin…

…ement chore: Further clean-up of HTML and CSS (NGTSK-147)
WarnerMedia · Aug 26, 2022 · e11fa3e · e11fa3e
2 parents bf697c1 + 0b93d39
commit e11fa3e
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 34 deletions.
diff --git a/v1/iac/cfn/appconfig/configuration-version/hosted/feature-flag.yaml b/v1/iac/cfn/appconfig/configuration-version/hosted/feature-flag.yaml
@@ -153,7 +153,7 @@ Resources:
                         "status": "planned"
                     },
                     "attributes": {
-                        "version": {
+                        "featureVersion": {
                             "constraints": {
                                 "maximum": 9999,
                                 "minimum": 1,
@@ -170,13 +170,13 @@ Resources:
                 "header": {
                     "enabled": ${FlagHeader},
                     "backgroundColor": "#015cfe",
-                    "borderColor": "#04006c",
-                    "textColor": "#5128f2",
+                    "borderColor": "#5128f2",
+                    "textColor": "#04006c",
                     "enableLogin": true
                 },
                 "footer": {
                     "backgroundColor": "#015cfe",
-                    "borderColor": "#04006c",
+                    "borderColor": "#5128f2",
                     "copyright": [
                         "&copy; 2022",
                         "Some Company Name.",
@@ -192,11 +192,11 @@ Resources:
                         98,
                         123
                     ],
-                    "textColor": "#5128f2"
+                    "textColor": "#04006c"
                 },
                 "short-term-feature": {
                     "enabled": ${FlagShortTermFeature},
-                    "version": 1
+                    "featureVersion": 1
                 }
             },
             "version": "1"

diff --git a/v1/iac/cfn/appconfig/configuration-version/hosted/freeform-yaml.yaml b/v1/iac/cfn/appconfig/configuration-version/hosted/freeform-yaml.yaml
@@ -27,7 +27,7 @@ Parameters:
   ImageUrl:
     Type: "String"
     Description: "This is a sample image URL parameter for adding values to the profile configuration."
-    Default: "https://placekitten.com/g/300/300" # placeholder.com and placekitten.com are free services for placeholder images.
+    Default: "https://placekitten.com/300/300" # placeholder.com and placekitten.com are free services for placeholder images.
   Title:
     Type: "String"
     Description: "Title for the site."

diff --git a/v1/package.json b/v1/package.json
@@ -1,6 +1,6 @@
 {
   "name": "boilerplate-fargate-appconfig",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "This is a Fargate/AppConfig application boilerplate.",
   "main": "src/app.js",
   "type": "module",

diff --git a/v1/src/html/body/footer-old.html b/v1/src/html/body/footer-old.html
@@ -1,3 +1,5 @@
     <footer>
-      <p>Old Footer</p>
+
+      <p>&copy; 2021 Old Hardcoded Footer.  All Rights Reserved.</p>
+
     </footer>
diff --git a/v1/src/html/body/header-old.html b/v1/src/html/body/header-old.html
@@ -1,3 +1,5 @@
     <header>
-      <p>Old Header</p>
+
+      <h1>${config.body.title}</h1>
+
     </header>
diff --git a/v1/src/html/body/main.html b/v1/src/html/body/main.html
@@ -9,7 +9,10 @@ <h2>${config.body.subtitle}</h2>
         <li>Feature Flag</li>
       </ul>
 
-      <img src="${config.body.image}">
+      <figure>
+        <img src="${config.body.image}">
+        <figcaption>Random Picture of a Kitten</figcaption>
+      </figure>
 
       <p>The Freeform configuration is used to set things like the page title, header values, and content images.  This kind of configuration could serve many purposes, such as setting API URLs, CDN base paths, etc.</p>
 

diff --git a/v1/src/html/css/style-new.html b/v1/src/html/css/style-new.html
@@ -6,6 +6,7 @@
 
     body {
       background-color: white;
+      color: black;
       padding: 0px;
       margin: 0px;
     }
@@ -24,9 +25,20 @@
       padding: 0px 20px 0px 20px;
     }
 
-    img {
+    figure {
       float: right;
-      padding: 10px;
+      margin: 0px 20px 0px 20px;
+    }
+
+    figcaption {
+      text-align: center;
+    }
+
+    img {
+      border-radius: 5px;
+      border: 2px solid ${flags.header.borderColor};
+      margin: 2px 0px 2px 0px;
+      padding: 5px;
     }
 
     .container {
@@ -63,12 +75,12 @@
 
     header {
       border: 2px solid ${flags.header.borderColor};
-      background-color: ${flags.footer.backgroundColor};
+      background-color: ${flags.header.backgroundColor};
       border-top-left-radius:0px;
       border-top-right-radius:0px;
       border-top: 0px;
       margin-top: 0px;
-      text-color: ${flags.header.textColor};
+      color: ${flags.header.textColor};
     }
 
     footer {
@@ -78,7 +90,7 @@
       border-bottom-right-radius:0px;
       border-bottom: 0px;
       margin-bottom: 0px;
-      text-color: ${flags.footer.textColor};
+      color: ${flags.footer.textColor};
     }
 
   </style>
diff --git a/v1/src/html/css/style-old.html b/v1/src/html/css/style-old.html
@@ -1,15 +1,22 @@
 <style type="text/css">
+
     html {
       font-family: arial, sans-serif;
     }
 
     body {
       background-color: white;
+      color: black;
       padding: 0px;
       margin: 0px;
     }
 
-    h1, h2 {
+    h1 {
+      text-align: center;
+      padding: 0px 20px 0px 20px;
+    }
+
+    h2 {
       text-align: center;
       padding: 0px 20px 0px 20px;
     }
@@ -18,8 +25,21 @@
       padding: 0px 20px 0px 20px;
     }
 
+    figure {
+      float: right;
+      margin: 0px 20px 0px 20px;
+    }
+
+    figcaption {
+      text-align: center;
+    }
+
     img {
-      padding: 10px;
+      border-radius: 0px;
+      border-bottom: 1px solid black;
+      border-top: 1px solid black;
+      margin: 2px 0px 2px 0px;
+      padding: 5px;
     }
 
     .container {
@@ -30,45 +50,46 @@
 
     main {
       flex: 1 0 auto;
-      border-radius: 25px;
-      border: 2px solid #73AD21;
-      width: 600px;
+      /* border-radius: 25px;
+      border: 2px solid black; */
+      width: 800px;
       margin-left: auto;
       margin-right: auto;
       margin-top: 10px;
       margin-bottom: 10px;
-      padding-top: 20px;
-      padding-bottom: 20px;
+      padding-top: 10px;
+      padding-bottom: 10px;
     }
 
     header, footer {
       flex-shrink: 0;
-      border-radius: 25px;
-      border: 2px solid #73AD21;
-      width: 600px;
-      margin-left: auto;
-      margin-right: auto;
+      /* border-radius: 25px; */
+      width: 100%;
+      /* margin-left: auto;
+      margin-right: auto; */
       margin-top: 10px;
       margin-bottom: 10px;
       text-align: center;
-      padding-top: 20px;
-      padding-bottom: 20px;
+      padding-top: 10px;
+      padding-bottom: 10px;
     }
 
     header {
+      background-color: gray;
       border-top-left-radius:0px;
       border-top-right-radius:0px;
-      border-top: 0px;
+      border-bottom: 4px solid black;
       margin-top: 0px;
-      text-color: ${flags.header.textColor};
+      color: white;
     }
 
     footer {
-      background-color: ${flags.footer.backgroundColor};
+      background-color: gray;
       border-bottom-left-radius:0px;
       border-bottom-right-radius:0px;
-      border-bottom: 0px;
+      border-top: 4px solid black;
       margin-bottom: 0px;
+      color: white;
     }
 
   </style>