From 28265246852c72494a407f5225503d67fccf9e50 Mon Sep 17 00:00:00 2001
From: Rob Loach <robloach@gmail.com>
Date: Wed, 17 Aug 2016 02:11:26 -0400
Subject: [PATCH 1/2] Add Bootstrap styles to emscripten

---
 emscripten/webplayer.css  |  7 ---
 emscripten/webplayer.html | 96 ++++++++++++++++++++++++++++++---------
 2 files changed, 74 insertions(+), 29 deletions(-)
diff --git a/emscripten/webplayer.css b/emscripten/webplayer.css
index 7d24e4e63e..42de3c4458 100644
--- a/emscripten/webplayer.css
+++ b/emscripten/webplayer.css
@@ -3,12 +3,6 @@
  *
  * This provides the basic styling for the RetroArch web player.
  */
-.webplayer {
-  padding-right: 0;
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
-}
 textarea.webplayer {
   border: 0px;
   font-family: 'Share Tech Mono';
@@ -18,7 +12,6 @@ textarea.webplayer {
   resize:none;
   color:black;
 }
-div.webplayer,
 h1 {
   text-align: left;
 }
diff --git a/emscripten/webplayer.html b/emscripten/webplayer.html
index 179080e02d..2e591009af 100644
--- a/emscripten/webplayer.html
+++ b/emscripten/webplayer.html
@@ -4,34 +4,86 @@
    <meta charset="utf-8">
    <title>RetroArch Web Player</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
+   <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="webplayer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
-   <hr/>
-   <div class="webplayer_border" id="canvas_div" style="display: none">
-      <canvas class="webplayer" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()"></canvas>
+   <nav class="navbar navbar-static-top navbar-light bg-faded">
+      <div class="container">
+         <a class="navbar-brand" href="#">RetroArch</a>
+         <ul class="nav navbar-nav">
+           <li class="nav-item active">
+               <a class="nav-link" href="#">Gambatte <span class="sr-only">(current)</span></a>
+            </li>
+         </ul>
+      </div>
+   </nav>
+   <div class="jumbotron">
+      <div class="container">
+         <div class="webplayer_border" id="canvas_div" style="display: none">
+            <canvas class="webplayer" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()"></canvas>
+         </div>
+      </div>
    </div>
-   <hr/>
-   <div class="webplayer webplayer_border" id="openrom">
-      <button id="btnLoad" onclick="document.getElementById('rom').click()">Upload Content</button>
-      <input style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('btnLoad').click();" onchange="selectFiles(event.target.files)" multiple />
-      <button id="btnStart" onclick="startRetroArch()">Start RetroArch</button>
-      <button id="btnAuth" onclick="dropboxInit()">Use DropBox</button>
-   </div>
-   <hr/>
-   <div class="webplayer">
-      <input type="checkbox" id="resize"><label for="resize">Resize canvas</label>
-      <input type="checkbox" id="pointerLock" checked><label for="pointerLock">Lock/hide mouse pointer</label>
-      <input type="button" value="Fullscreen" onclick="Module.requestFullScreen(document.getElementById('pointerLock').checked, document.getElementById('resize').checked)"><br>
-      <input type="checkbox" id="vsync"><label for="vsync" id="vsync-label">Enable V-sync (can only be done before loading game)</label><br>
-      <input type="checkbox" id="sdl2"><label for="sdl2" id="sdl2-label">Enable SDL2</label><br>
-      <input type="textbox" id="latency" size="3" maxlength="3" value="96"> <label for="latency" id="latency-label">Audio latency (ms) (increase if you hear pops at fullspeed, can only be done before loading game)</label>
+   <div class="container">
+      <div class="row">
+         <div class="col-sm-12 form-group btn-group text-xs-center" id="openrom">
+            <button class="btn btn-secondary" id="btnLoad" onclick="document.getElementById('rom').click()">Upload Content</button>
+            <input class="btn btn-secondary" style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('btnLoad').click();" onchange="selectFiles(event.target.files)" multiple />
+            <button class="btn btn-primary" id="btnStart" onclick="startRetroArch()">Start RetroArch</button>
+            <button class="btn btn-secondary" id="btnAuth" onclick="dropboxInit()">Use DropBox</button>
+         </div>
+      </div>
+      <div class="row">
+         <div class="col-sm-12">
+            <h2>Settings</h2>
+         </div>
+      </div>
+      <div class="row">
+         <div class="col-sm-6">
+            <div class="form-group">
+               <div class="form-check">
+                  <label class="form-check-label">
+                     <input class="form-check-input" type="checkbox" id="resize"> Resize canvas
+                  </label>
+               </div>
+               <div class="form-check">
+                  <label class="form-check-label">
+                     <input class="form-check-input" type="checkbox" id="pointerLock" checked> Lock/hide mouse pointer
+                  </label>
+               </div>
+               <div class="form-check">
+                  <label class="form-check-label">
+                     <input class="form-check-input" type="checkbox" id="vsync"> Enable V-sync (can only be done before loading game)
+                  </label>
+               </div>
+               <div class="form-check">
+                  <label class="form-check-label">
+                     <input class="form-check-input" type="checkbox" id="sdl2"> Enable SDL2
+                  </label>
+               </div>
+            </div>
+         </div>
+         <div class="col-sm-6">
+            <div class="form-group">
+               <label for="latency" id="latency-label" placeholder="Audio Latency (ms)">Audio Latency (ms)</label>
+               <input class="form-control" type="number" value="96" id="latency">
+               <small class="form-text text-muted">Increase if you hear pops at fullspeed, can only be done before loading game</small>
+            </div>
+            <div class="form-group">
+               <input class="btn btn-info" type="button" value="Fullscreen" onclick="Module.requestFullScreen(document.getElementById('pointerLock').checked, document.getElementById('resize').checked)">
+            </div>
+         </div>
+      </div>
+      <div class="row">
+         <div class="col-sm-12">
+            <textarea class="webplayer" id="output" rows="15"></textarea>
+         </div>
+      </div>
    </div>
 
-   <hr/>
-   <textarea class="webplayer" id="output" rows="15"></textarea>
-   <hr>
-
+   <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js"></script>
    <script src="browserfs.js"></script>
    <script src="webplayer.js"></script>

From 01665b5387242472b0c57d0942f1ecc5a68e4033 Mon Sep 17 00:00:00 2001
From: Rob Loach <robloach@gmail.com>
Date: Wed, 17 Aug 2016 02:13:51 -0400
Subject: [PATCH 2/2] Add Tether for Bootstrap support

---
 emscripten/webplayer.html | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/emscripten/webplayer.html b/emscripten/webplayer.html
index 2e591009af..eb7dbc1a16 100644
--- a/emscripten/webplayer.html
+++ b/emscripten/webplayer.html
@@ -34,11 +34,6 @@
             <button class="btn btn-secondary" id="btnAuth" onclick="dropboxInit()">Use DropBox</button>
          </div>
       </div>
-      <div class="row">
-         <div class="col-sm-12">
-            <h2>Settings</h2>
-         </div>
-      </div>
       <div class="row">
          <div class="col-sm-6">
             <div class="form-group">
@@ -83,6 +78,7 @@
    </div>
 
    <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
+   <script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.4/js/tether.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js"></script>
    <script src="browserfs.js"></script>
