Add stuff to the "About" menu

controversial · Feb 20, 2016 · 9ab12de · 9ab12de
1 parent 2d6ebfb
commit 9ab12de
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 21 deletions.
diff --git a/css/helpdialog.css b/css/helpdialog.css
@@ -79,6 +79,7 @@
 .menu button {
   height:33px;
   line-height:33px;
+  opacity:0.75;
 }
 .menu button > img {
   height:20px;
@@ -88,23 +89,20 @@
 
 .menu-page {
   display:none;
-
+  padding:20px;
 }
 
-#readme {
+.menu-content {
   position:absolute;
   width:100%;
   height:100%;
   top:0;
   left:0;
   padding:20px;
-  background-color: #fff;
+  background-color: #fff !important;
   overflow-y:auto;
 }
 
-#menu-readme {
-  padding:20px;
-}
 .menu button {
   position:absolute;
 }

diff --git a/index.html b/index.html
@@ -41,31 +41,54 @@
     <div id="modal-content" class="modal-content markdown-body">
       <!-- Main menu chooser (modeled after the iOS Settings app) -->
       <div class="menu menu-main" id="menu-main" menuname="Main">
-
         <ul>
           <li id="aboutActivator"><img src="assets/information.png"/> About</li>
           <li id="controlsActivator"><img src="assets/game-controller.png"/> Controls</li>
           <li class="menu-spacer"></li>
           <li id="readmeActivator"><img src="assets/GitHub.png"/>Github README</li>
         </ul>
-
       </div>
-      <!-- Not Implemented page -->
-      <div class="menu menu-page" id="menu-controls" menuname="Controls">
-        <button id="button3" type="button">Back to page 1</button>
-        <h1 style="margin-left:20px;">Not yet implemented.</h1>
+      <!-- About -->
+      <div class="menu menu-page" id="menu-about">
+        <div class="menu-content markdown-body">
+
+          <h1>Wikipedia Mapper</h1>
+
+          <p>A web app for visualizing the connection of wikipedia pages. </p>          
+          <p>Wikipedia Mapper works based on a concept of <b>nodes</b>, which are dots on the screen.</p>          
+          <p>Start by entering a topic into the text box at the top, and pressing <b>Go</b>. Let&#39;s say you entered <em>Cats</em>, a single node will be generated, labeled <em>Cat</em>. This is called the <b>central node</b></p>          
+          <p>Nodes can be <b>expanded</b>. On most platforms, this is a single click. If you&#39;re on a touch device, press and hold on the node. (See &ldquo;Controls&rdquo;)</p>          
+          <p>Expanding a node creates a new node for <b>each page</b> that  is linked to from the <b>first paragraph</b> of the article. These nodes will be <b>connected</b> to the node from which they were expanded. For example, expanding <em>Cat</em> will create eight nodes, including <em>Fur</em>, <em>Mammal</em>, <em>Carnivore</em>, and <em>Domestication</em>, and these will each be connected to <em>Cat</em>. </p>          
+          <p>Each new node can be expanded in the same way. This is how complex networks emerge.</p>          
+          <p>Other features include:</p>          
+          <ul>
+          <li>A &ldquo;Random Article&rdquo; button</li>
+          <li>Hover over a node to see the path that you took to get there</li>
+          <li>The color of a node indicates how bly it is connected to the central topic. Lighter colored nodes have looser connections to the central topic. </li>
+          </ul>          
+          <p>For more details, see the GitHub README in the Help menu.</p>
+
+        </div>
+        <button class="backbutton" type="button"><img src="assets/arrow-back.png"/> Back</button>
+      </div>
+      <!-- Controls -->
+      <div class="menu menu-page" id="menu-controls">
+        <h1>Controls</h1>
+        <button class="backbutton" type="button"><img src="assets/arrow-back.png"/> Back</button>
       </div>
+
       <!-- README page -->
-      <div class="menu menu-page" id="menu-readme" menuname="README">
-        <div id="readme"></div>
-        <button id="button4" type="button"><img src="assets/arrow-back.png"/> Back</button>
+      <div class="menu menu-page" id="menu-readme">
+        <div id="readme" class="menu-content"></div>
+        <button class="backbutton" type="button"><img src="assets/arrow-back.png"/> Back</button>
       </div>
     </div>
   </div>
 
 
   <!-- Will hold the network -->
   <div id="container" class="fullscreen">
+    <!-- Welcome message -->
     <div class="markdown-body" style="position:fixed;top:58px;padding:25px">
       <h1>Wikipedia Mapper</h1>
       <p>A tool for visualizing the connections between wikipedia pages.<br>

diff --git a/js/help.js b/js/help.js
@@ -12,6 +12,7 @@ requestPage("README.md",loadHTML); //Read README.md
 
 //Menu items
 var menuMain = document.getElementById("menu-main");
+var menuAbout = document.getElementById("menu-about");
 var menuControls = document.getElementById("menu-controls");
 var menuReadme = document.getElementById("menu-readme");
 
@@ -61,7 +62,7 @@ function animateReturn() {
 
 
 document.getElementById("aboutActivator").onclick=function(){
-  animatePage(menuControls);
+  animatePage(menuAbout);
 };
 
 document.getElementById("controlsActivator").onclick=function(){
@@ -73,8 +74,7 @@ document.getElementById("readmeActivator").onclick=function(){
 };
 
 
-var button3=document.getElementById("button3");
-button3.onclick=animateReturn;
-
-var button4=document.getElementById("button4");
-button4.onclick=animateReturn;
+backButtons=document.getElementsByClassName("backbutton")
+for (var i=0;i<backButtons.length;i++) {
+  backButtons[i].onclick=animateReturn;
+}