From 8360a323b6fb059a6d7735797390a008cc7cc263 Mon Sep 17 00:00:00 2001
From: Thomas Petchel <tpetchel@gmail.com>
Date: Wed, 25 Sep 2019 14:14:13 -0700
Subject: [PATCH] Add close button to modal windows

This helps make it easier for automation tools like Selenium to close modal windows.
---
 Tailspin.SpaceGame.Web/Views/Home/Index.cshtml   | 12 ++++++++++++
 Tailspin.SpaceGame.Web/Views/Home/Profile.cshtml |  3 +++
 Tailspin.SpaceGame.Web/wwwroot/css/site.css      |  3 +++
 Tailspin.SpaceGame.Web/wwwroot/css/site.min.css  |  2 +-
 Tailspin.SpaceGame.Web/wwwroot/css/site.scss     |  4 ++++
 gulpfile.js                                      |  2 +-
 6 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/Tailspin.SpaceGame.Web/Views/Home/Index.cshtml b/Tailspin.SpaceGame.Web/Views/Home/Index.cshtml
index aa0180040e5..f7c4c886074 100644
--- 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
index 5d30c1a5ff2..4fd4dc06abc 100644
--- 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="profile-modal-@Model.Rank" 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
index c1db5f59021..4b15dfb79dc 100644
--- 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
index ceec905e516..b779f0e82c0 100644
--- a/Tailspin.SpaceGame.Web/wwwroot/css/site.min.css
+++ b/Tailspin.SpaceGame.Web/wwwroot/css/site.min.css
@@ -1 +1 @@
-.download .image-cap,.intro{background-position:center top}body{color:#000;--link:#064EC0}a{color:var(--link)}h2{font-size:2.5rem;margin-bottom:2rem}section{text-align:center;padding:6rem 0;border-bottom:3px solid #000}.intro{height:350px;background-color:#666;background-image:url(/images/space-background.svg);background-size:1440px;background-repeat:no-repeat;background-attachment:fixed}.intro .title{width:20rem;margin-top:2rem}.intro p{color:#fff;font-weight:600;font-size:1.6rem;text-shadow:0 0 2px #000;margin-top:2rem}.download .image-cap{height:180px;background-size:800px;margin-top:-240px;background-image:url(/images/space-foreground.svg);background-repeat:no-repeat}.download .btn{margin-top:5rem;border:3px solid #000;font-weight:700}.screens{background:#666}.screens ul{padding:0}.screens ul li{display:inline-block;width:160px;height:100px;background:#eee;margin:.75rem .25rem .25rem}.screens ul li a{display:block;width:100%;height:100%}.screens ul li img{width:100%}.pic .modal-body p{margin-top:25px}.leaderboard h2{margin-bottom:4rem}.leaderboard ul{list-style:none;padding:0}.leaderboard .leader-nav .nav-buttons{border:1px solid #999;border-radius:10px;margin:0 1rem 1rem}.leaderboard .leader-nav .nav-buttons h4{background:#333;color:#fff;padding:1rem;margin:0;border-top-left-radius:10px;border-top-right-radius:10px}.leaderboard .leader-nav .nav-buttons li{padding:.5rem}.leaderboard .leader-scores .high-score:nth-child(1){background:#333;color:#fff;border-top-right-radius:1rem;border-top-left-radius:1rem;padding:1rem 0;border:none}.leaderboard .leader-scores .high-score:nth-last-child(2){border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.leaderboard .leader-scores .pagination{margin-top:1rem}.leaderboard .leader-scores .pagination>li>a{border-color:#999;color:var(--link)}.leaderboard .leader-scores .pagination>.active>a{background-color:var(--link);color:#fff}.leaderboard .high-score{border:1px solid #999;border-top-color:transparent;padding:2rem 0 .5rem}.leaderboard .avatar{width:2rem;height:2rem;overflow:hidden;background:gray;border-radius:99px;display:inline-block;margin-right:.5rem}.leaderboard .score-data a{display:inline-flex;align-items:center}@media only screen and (max-width:765px){.leader-scores .high-score{padding:2rem}}.profile .avatar{border-radius:999px;background-color:#ccc;background-size:cover;width:200px;height:200px;margin:1rem;overflow:hidden}.profile .avatar div{background-size:cover;width:100%;height:100%}.profile .content{padding:0 4rem}.profile .content h2{font-size:2rem}.profile .content ul{list-style:none;padding:0}.about{background:#eee}.about h2{margin-top:0}.about p{max-width:600px;margin:0 auto;padding:0 1rem}.social .share{display:inline-flex;align-items:center}.social .share ul{display:flex;list-style:none;padding:0}.social .share a{display:block;width:3rem;height:3rem;margin:.75rem}.social .share img{width:3rem;height:100%}
\ No newline at end of file
+.download .image-cap,.intro{background-position:center top}body{color:#000;--link:#064EC0}a{color:var(--link)}h2{font-size:2.5rem;margin-bottom:2rem}section{text-align:center;padding:6rem 0;border-bottom:3px solid #000}.intro{height:350px;background-color:#666;background-image:url(/images/space-background.svg);background-size:1440px;background-repeat:no-repeat;background-attachment:fixed}.intro .title{width:20rem;margin-top:2rem}.intro p{color:#fff;font-weight:600;font-size:1.6rem;text-shadow:0 0 2px #000;margin-top:2rem}.download .image-cap{height:180px;background-size:800px;margin-top:-240px;background-image:url(/images/space-foreground.svg);background-repeat:no-repeat}.download .btn{margin-top:5rem;border:3px solid #000;font-weight:700}.screens{background:#666}.screens ul{padding:0}.screens ul li{display:inline-block;width:160px;height:100px;background:#eee;margin:.75rem .25rem .25rem}.screens ul li a{display:block;width:100%;height:100%}.screens ul li img{width:100%}.pic .modal-body p{margin-top:25px}.leaderboard h2{margin-bottom:4rem}.leaderboard ul{list-style:none;padding:0}.leaderboard .leader-nav .nav-buttons{border:1px solid #999;border-radius:10px;margin:0 1rem 1rem}.leaderboard .leader-nav .nav-buttons h4{background:#333;color:#fff;padding:1rem;margin:0;border-top-left-radius:10px;border-top-right-radius:10px}.leaderboard .leader-nav .nav-buttons li{padding:.5rem}.leaderboard .leader-scores .high-score:nth-child(1){background:#333;color:#fff;border-top-right-radius:1rem;border-top-left-radius:1rem;padding:1rem 0;border:none}.leaderboard .leader-scores .high-score:nth-last-child(2){border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.leaderboard .leader-scores .pagination{margin-top:1rem}.leaderboard .leader-scores .pagination>li>a{border-color:#999;color:var(--link)}.leaderboard .leader-scores .pagination>.active>a{background-color:var(--link);color:#fff}.leaderboard .high-score{border:1px solid #999;border-top-color:transparent;padding:2rem 0 .5rem}.leaderboard .avatar{width:2rem;height:2rem;overflow:hidden;background:gray;border-radius:99px;display:inline-block;margin-right:.5rem}.leaderboard .score-data a{display:inline-flex;align-items:center}@media only screen and (max-width:765px){.leader-scores .high-score{padding:2rem}}.profile .avatar{border-radius:999px;background-color:#ccc;background-size:cover;width:200px;height:200px;margin:1rem;overflow:hidden}.profile .avatar div{background-size:cover;width:100%;height:100%}.profile .content{padding:0 4rem}.profile .content h2{font-size:2rem}.profile .content ul{list-style:none;padding:0}.about{background:#eee}.about h2{margin-top:0}.about p{max-width:600px;margin:0 auto;padding:0 1rem}.social .share{display:inline-flex;align-items:center}.social .share ul{display:flex;list-style:none;padding:0}.social .share a{display:block;width:3rem;height:3rem;margin:.75rem}.social .share img{width:3rem;height:100%}.no-border{border:none}
\ No newline at end of file
diff --git a/Tailspin.SpaceGame.Web/wwwroot/css/site.scss b/Tailspin.SpaceGame.Web/wwwroot/css/site.scss
index 703da427d29..7bd6ecaa7de 100644
--- 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;
+}
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index c0c8fa167b8..fd6869f1efa 100644
--- 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";