Commits

Sean Wilkinson committed 0a220f5

Finished migrating from Twitter Bootstrap 2.3.1 to 3.0.0

Comments (0)

Files changed (3)

 $(CACHE_DIR)/bootstrap.js: | $(CACHE_DIR)
 	@   $(call download-url, "http://goo.gl/Brc6pW")
 
+$(CACHE_DIR)/bootstrap-theme.css: | $(CACHE_DIR)
+	@   $(call download-url, "http://goo.gl/qlEB6G")
+
 $(CACHE_DIR)/coffeescript.js: | $(CACHE_DIR)
 	@   $(call download-url, "http://goo.gl/2RqIb")
 
 	@   $(CP) $< $@
 
 $(CACHE_DIR)/style-min.css:                                                 \
-    $(CACHE_DIR)/style.css                                                  \
     $(CACHE_DIR)/bootstrap.css                                              \
+    $(CACHE_DIR)/bootstrap-theme.css                                        \
+    $(CACHE_DIR)/style.css                                                  \
     | $(CACHE_DIR)
 	@   $(call minify-css, $^, $@)
 

src/browser-client/index.html

 
     <meta name="application-name" content="QMachine">
     <meta name="msapplication-navbutton-color" content="navy">
-    <meta name="msapplication-starturl" content="QM_WWW_URL">
+    <meta name="msapplication-starturl" content="http://localhost:8177">
     <meta name="msapplication-task" content="name=Source Code;action-uri=https://github.com/wilkinson/qmachine;icon-uri=https://github.com/favicon.ico">
     <meta name="msapplication-tooltip"
         content="The World's Most Relaxed Supercomputer">
 
   <body>
 
-    <div class="centered">
+    <div class="text-center">
       <noscript>This page requires JavaScript.</noscript>
     </div>
 
-    <nav class="navbar navbar-default" role="navigation">
-      <div class="navbar-header">
-        <button type="button" class="navbar-toggle"
-            data-toggle="collapse" data-target=".navbar-collapse">
-          <span class="sr-only">Toggle navigation</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-        <a class="navbar-brand" href="https://www.qmachine.org">QMachine</a>
-      </div>
-      <div class="collapse navbar-collapse">
-        <ul class="nav navbar-nav">
-          <li><a href="https://github.com/wilkinson/qmachine">Code</a></li>
-          <li><a href="http://status.qmachine.org">Status</a></li>
-          <li class="dropdown"><a href="#" class="dropdown-toggle"
-              data-toggle="dropdown">Version<b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li><a href="https://www.qmachine.org">Latest</a></li>
-              <li><a href="https://v1.qmachine.org">Version 1</a></li>
-            </ul>
-          </li>
-          <li><a href="//www.youtube.com/playlist?list=PLijUCyE0Z0-8nLL5qJ__v-VB3ZoRxSubg">Videos</a></li>
-          <li><a href="https://wiki.qmachine.org">Wiki</a></li>
-        </ul>
+    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle"
+              data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="https://www.qmachine.org">QMachine</a>
+        </div>
+        <div class="collapse navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li><a href="https://github.com/wilkinson/qmachine">Code</a></li>
+            <li><a href="http://status.qmachine.org">Status</a></li>
+            <li class="dropdown"><a href="#" class="dropdown-toggle"
+                data-toggle="dropdown">Version<b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="https://www.qmachine.org">Latest</a></li>
+                <li><a href="https://v1.qmachine.org">Version 1</a></li>
+              </ul>
+            </li>
+            <li><a href="//www.youtube.com/playlist?list=PLijUCyE0Z0-8nLL5qJ__v-VB3ZoRxSubg">Videos</a></li>
+            <li><a href="https://wiki.qmachine.org">Wiki</a></li>
+          </ul>
+        </div>
       </div>
     </nav>
 
     <div class="container">
-      <div class="centered hero-unit">
+      <div class="jumbotron text-center">
         <h1>HPC + WWW&nbsp;= QM</h1>
-        <br>
-        <p>
+        <p class="lead">
           Mix High Performance Computing with the World Wide Web and you'll get
-          QMachine, a web service that can use ordinary browsers to execute
-          distributed workflows &mdash; without installing anything.
+          QMachine, a web service that can incorporate ordinary browsers into a
+          World Wide Computer &mdash; without&nbsp;installing&nbsp;anything.
         </p>
         <a class="btn btn-primary"
             href="http://wilkinson.github.io/qmachine/">Learn more &raquo;</a>
       </div>
+    </div>
+
+    <div class="container">
       <div class="row">
-        <div class="centered span6">
+        <div class="col-md-6 text-center">
           <h2>Submitter Example</h2>
           <p>
             Open your browser's developer console and enter the following:
           </p>
-          <p>
-            <code>QM.puts(QM.submit(2, "(x) -&gt; x + 2"));</code>
-          </p>
+          <p><code>QM.puts(QM.submit(2, function (x) { return x + 2; }))</code></p>
           <p>
             You may need to volunteer to run it, though!
           </p>
         </div>
-        <div class="centered span6">
+        <div class="col-md-6 text-center">
           <h2>Volunteer Example</h2>
           <p>
             Check the box below to volunteer your machine's resources as part
             of QM's crowdsourced supercomputer. To specify a "box", edit the
             text.
           </p>
-          <form class="navbar-form">
-            <input type="text" id="QM-box-input" class="centered" size="32"
-                pattern="^[\w\-]+" required>
+          <form class="form-inline" role="form">
+            <div class="form-group text-center">
+              <label class="sr-only" for="QM-box-input">box</label>
+              <input type="text" id="QM-box-input"
+                  class="form-control text-center" pattern="^[\w\-]+"
+                  required size="32">
+            </div>
             <input type="checkbox" id="QM-volunteer-input">
           </form>
         </div>
       </div>
       <hr>
       <div id="world-map" style="width: 100%"></div>
-      <div class="centered">
+      <div class="text-center">
         <h2>World Wide Computing</h2>
         Since April 2013, QMachine's API server has received more than 1.3
         million calls from visitors representing more than 80 countries!
     </div>
 
     <footer class="footer">
-      <div class="centered container">
+      <div class="container text-center">
         <p>
           &copy;
           <a href="http://seanwilkinson.info">Sean Wilkinson</a> 2010-2013<br>

src/browser-client/style.css

  *  This file declares some of the presentation-layer settings for the browser
  *  client's graphical user interface (GUI) -- the webpage, "index.html". This
  *  file will be concatenated and/or minified along with Twitter Bootstrap as
- *  part of "style-min.css", which means that some or all of these settings may
- *  be overridden by Twitter Bootstrap's defaults. Consequently, I have removed
- *  some of my original rules simply to reduce the file size.
+ *  part of "style-min.css".
  *
  *  NOTE: I truly hate "slashstar" comments because I have never found a way to
  *  write them that doesn't make me want to claw my eyes out. If you have any
  */
 
 @media all {
- /* These rules will be applied for to the page for all devices, but they can
-  * be overridden by other device-specific settings I may have specified. */
+
+ /* Twitter Bootstrap's fixed navbar overlays other content unless you add
+  * padding to the top of the body, and by default the navbar is 50px high. */
+
+    body {
+        padding-bottom: 10px;
+        padding-top: 70px;
+    }
+
+ /* The next two rules are what happens when your upstream author removes a
+  * feature you like -- you paste it back in and disparage them for it, haha.
+  * In this case, support for ":invalid" pseudo-selectors was removed from
+  * Twitter Bootstrap 3.x by this commit: http://git.io/1AHLzg). */
+
+    input:focus:invalid,
+    textarea:focus:invalid,
+    select:focus:invalid {
+        color: #b94a48;
+        border-color: #ee5f5b;
+    }
+
+    input:focus:invalid:focus,
+    textarea:focus:invalid:focus,
+    select:focus:invalid:focus {
+        border-color: #e9322d;
+        -webkit-box-shadow: 0 0 6px #f8b9b7;
+        box-shadow: 0 0 6px #f8b9b7;
+    }
+
+ /* The next rule has also been carried over manually from Bootstrap 2.3.1. */
+
+    code {
+        background-color: #f7f7f9;
+        border: 1px solid #e1e1e8;
+    }
+
+ /* Heaven forbid that someone thinks QMachine isn't working because they have
+  * actually turned JavaScript off, but just in case ... */
+
     noscript {
         color: red;
         font-size: 200%;
     }
-    .centered {
-        text-align: center;
+
+ /* Finally, we supplement the ".lead" class by padding its top to match its
+  * bottom's padding. */
+
+    .lead {
+        margin-top: 20px;
     }
+
 }
 
 /*- vim:set syntax=css: */