Add close button to modal windows

This helps make it easier for automation tools like Selenium to close modal windows.
obeyda · Sep 25, 2019 · 8360a32 · 8360a32
1 parent 4c81891
commit 8360a32
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 2 deletions.
diff --git a/Tailspin.SpaceGame.Web/Views/Home/Index.cshtml b/Tailspin.SpaceGame.Web/Views/Home/Index.cshtml
@@ -216,6 +216,9 @@
 <div class="modal fade" id="test-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
+            <div class="modal-header no-border">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+            </div>
             <div class="modal-body">
                 modal
             </div>
@@ -227,6 +230,9 @@
 <div class="modal fade pic-01" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
+            <div class="modal-header no-border">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+            </div>
             <div class="modal-body text-center">
                 <img src="/images/space-game-placeholder.svg" width="100%" alt="">
                 <p>Gamescreen example</p>
@@ -239,6 +245,9 @@
 <div class="modal fade social-media" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
+            <div class="modal-header no-border">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+            </div>
             <div class="modal-body text-center">
                 Social media example
             </div>
@@ -250,6 +259,9 @@
 <div class="modal fade" id="pretend-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
+            <div class="modal-header no-border">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+            </div>
             <div class="modal-body text-center">
                 This link is for example purposes and goes nowhere. 😐
             </div>

diff --git a/Tailspin.SpaceGame.Web/Views/Home/Profile.cshtml b/Tailspin.SpaceGame.Web/Views/Home/Profile.cshtml
@@ -5,6 +5,9 @@
 <div class="modal fade profile" id="[email protected]" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
+            <div class="modal-header no-border">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+            </div>
             <div class="modal-body">
                 <div class="row">
                     <div class="col-sm-4">

diff --git a/Tailspin.SpaceGame.Web/wwwroot/css/site.css b/Tailspin.SpaceGame.Web/wwwroot/css/site.css
@@ -176,3 +176,6 @@ section {
   .social .share img {
     width: 3rem;
     height: 100%; }
+
+.no-border {
+  border: none; }
diff --git a/Tailspin.SpaceGame.Web/wwwroot/css/site.min.css b/Tailspin.SpaceGame.Web/wwwroot/css/site.min.css
diff --git a/Tailspin.SpaceGame.Web/wwwroot/css/site.scss b/Tailspin.SpaceGame.Web/wwwroot/css/site.scss
@@ -253,3 +253,7 @@ section {
         }
     }
 }
+
+.no-border {
+    border: none;
+}
diff --git a/gulpfile.js b/gulpfile.js
@@ -8,7 +8,7 @@ const gulp = require("gulp"),
       uglify = require("gulp-uglify");
 
 const paths = {
-  webroot: "./wwwroot/"
+  webroot: "./Tailspin.SpaceGame.Web/wwwroot/"
 };
 
 paths.js = paths.webroot + "js/**/*.js";
-Original file line number
+Diff line change
@@ Expand Up / @@ -253,3 +253,7 @@ section { @@
             }
         }
     }
+    .no-border {
+        border: none;
+    }