show help in modal dialog, add footer, other spacing adjustments

calvinjc · Mar 25, 2016 · 03147bf · 03147bf
1 parent c69d518
commit 03147bf
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 38 deletions.
diff --git a/help.html b/help.html
diff --git a/index.html b/index.html
@@ -11,13 +11,28 @@
     <script src="./libs/bootstrap/bootstrap.min.js"></script>
     <script src="./libs/handlebars.js"></script>
     <script src="./libs/underscore.js"></script>
+    <script src="./libs/showdown.js"></script>
     <script src="sequence.js"></script>
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
     <div class="container-fluid">
-        <h1 class="title">Sequence Board Game Assistant</h1> <a href="help.html" >description / help</a>
+        <h1 class="title">Sequence Board Game Assistant</h1>
+        <button type="button" id="descriptionBtn" class="btn" data-toggle="modal" data-target=".bs-example-modal-lg">Description / Help</button>
+        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="App Description">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <div id="description-content" class="modal-body">
+                        <a href="https://github.com/calvinjc/sequence_assistant">https://github.com/calvinjc/sequence_assistant</a>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="row">
             <div class="col-sm-10 col-md-6">
                 <div id="gameBoardDiv"></div>
@@ -79,10 +94,10 @@ <h4>Options:</h4>
         {{/if}}
         <br/>
         <div class="hand">
-        <h4>Hand:</h4>
-        {{#each hand}}
-            <button class="hand-card btn">{{this}}</button>
-        {{/each}}
+            <h4>Hand:</h4>
+            {{#each hand}}
+                <button class="hand-card btn">{{this}}</button>
+            {{/each}}
         </div>
     </script>
 
@@ -121,5 +136,12 @@ <h2 class="hand-header">Add a card to your hand:</h2>
 
     </script>
 
+    <nav class="navbar navbar-default navbar-bottom">
+        <div class="container">
+            <p class="navbar-text">
+                <a href="https://github.com/calvinjc/sequence_assistant">View it on GitHub</a>
+            </p>
+        </div>
+    </nav>
 </body>
 </html>
diff --git a/sequence.js b/sequence.js
@@ -31,6 +31,16 @@ $(document).ready(function(){
         renderBoard();
     });
 
+    $("#descriptionBtn").click(function() {
+        $.ajax({
+            url: "README.md",
+            context: document.body,
+            success: function(readMeHTML){
+                var converter = new showdown.Converter();
+                $("#description-content").html(converter.makeHtml(readMeHTML));
+            }
+        });
+    });
 });
 
 renderBoard = function() {

diff --git a/style.css b/style.css
@@ -1,3 +1,7 @@
+body, html {
+    height: 100%;
+}
+
 .title {
     display: inline-block;
     margin-right: 20px;
@@ -19,6 +23,9 @@
     color: #eeeeee;
 }
 
+.game-cell{
+    height: 57px;
+}
 
 .game-cell.R {
     background-color: #ff0000;
@@ -44,6 +51,7 @@
     margin-top: 0px;
 }
 .hand {
+    height: 69px;
     margin-bottom: 10px;
 }
 
@@ -56,3 +64,30 @@
     padding-left: 0px;
     padding-right: 0px;
 }
+
+.container-fluid {
+    min-height: 100%;
+    overflow: auto;
+    padding-bottom: 62px; /* this needs to be bigger than footer height*/
+}
+
+.navbar.navbar-bottom {
+    position: relative;
+    margin-top: -52px; /* negative value of footer height */
+    margin-bottom: 0px;
+    clear:both;
+}
+
+@media (max-width: 991px) {
+    #descriptionBtn {
+        margin-bottom: 15px;
+    }
+}
+
+@media (min-width: 992px) {
+    #descriptionBtn {
+        float: right;
+        margin-top: 20px;
+        margin-right: 15px;
+    }
+}