Merge branch 'feature/style' into develop

Add a styled and mostly content-complete about page.

app.py

@@ -2,10 +2,10 @@
 Module to contain all the project's Flask server plumbing.
 """
 
-from json import dumps
+import datetime
 
+from json import dumps
 from flask import Flask, make_response, render_template, request
-
 from bitshift import assets
 from bitshift.database import Database
 from bitshift.languages import LANGS
@@ -13,6 +13,7 @@ from bitshift.query import parse_query, QueryParseException
 
 app = Flask(__name__)
 app.config.from_object("bitshift.config")
+app.jinja_env.globals.update(year=datetime.datetime.now().year)
 
 app_env = app.jinja_env
 app_env.line_statement_prefix = "="

static/js/about.js

@@ -0,0 +1,15 @@
+/*
+ * @file Implements a parallax effect on the about page.
+ */
+
+var lastVertPos = $(window).scrollTop();
+
+$(window).scroll(function(e){
+    var currVertPos = $(window).scrollTop();
+    var delta = currVertPos - lastVertPos;
+    $(".bg").each(function(){
+        $(this).css("top", parseFloat($(this).css("top")) -
+            delta * $(this).attr("speed") + "px");
+    });
+    lastVertPos = currVertPos;
+});

static/js/index.js

@@ -138,7 +138,6 @@ var searchResultsPage = 1;
 
 //Obtained by parsing python file with pygments
 var codeExample = '<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre> 1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n32\n33\n34\n35\n36\n37\n38\n39\n40</pre></div></td><td class="code"><div class="highlight"><pre><span class="sd">&quot;&quot;&quot;</span>\n<span class="sd">Module to contain all the project&#39;s Flask server plumbing.</span>\n<span class="sd">&quot;&quot;&quot;</span>\n\n<span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="n">Flask</span>\n<span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="n">render_template</span><span class="p">,</span> <span class="n">session</span>\n\n<span class="kn">from</span> <span class="nn">bitshift</span> <span class="kn">import</span> <span class="n">assets</span>\n<span class="c"># from bitshift.database import Database</span>\n<span class="c"># from bitshift.query import parse_query</span>\n\n<span class="hll"><span class="n">app</span> <span class="o">=</span> <span class="n">Flask</span><span class="p">(</span><span class="n">__name__</span><span class="p">)</span>\n</span><span class="hll"><span class="n">app</span><span class="o">.</span><span class="n">config</span><span class="o">.</span><span class="n">from_object</span><span class="p">(</span><span class="s">&quot;bitshift.config&quot;</span><span class="p">)</span>\n</span>\n<span class="hll"><span class="n">app_env</span> <span class="o">=</span> <span class="n">app</span><span class="o">.</span><span class="n">jinja_env</span>\n</span><span class="hll"><span class="n">app_env</span><span class="o">.</span><span class="n">line_statement_prefix</span> <span class="o">=</span> <span class="s">&quot;=&quot;</span>\n</span><span class="hll"><span class="n">app_env</span><span class="o">.</span><span class="n">globals</span><span class="o">.</span><span class="n">update</span><span class="p">(</span><span class="n">assets</span><span class="o">=</span><span class="n">assets</span><span class="p">)</span>\n</span>\n<span class="c"># database = Database()</span>\n\n<span class="hll"><span class="nd">@app.route</span><span class="p">(</span><span class="s">&quot;/&quot;</span><span class="p">)</span>\n</span><span class="k">def</span> <span class="nf">index</span><span class="p">():</span>\n    <span class="k">return</span> <span class="n">render_template</span><span class="p">(</span><span class="s">&quot;index.html&quot;</span><span class="p">)</span>\n\n<span class="hll"><span class="nd">@app.route</span><span class="p">(</span><span class="s">&quot;/search/&lt;query&gt;&quot;</span><span class="p">)</span>\n</span><span class="k">def</span> <span class="nf">search</span><span class="p">(</span><span class="n">query</span><span class="p">):</span>\n    <span class="c"># tree = parse_query(query)</span>\n    <span class="c"># database.search(tree)</span>\n    <span class="k">pass</span>\n\n<span class="hll"><span class="nd">@app.route</span><span class="p">(</span><span class="s">&quot;/about&quot;</span><span class="p">)</span>\n</span><span class="k">def</span> <span class="nf">about</span><span class="p">():</span>\n    <span class="k">return</span> <span class="n">render_template</span><span class="p">(</span><span class="s">&quot;about.html&quot;</span><span class="p">)</span>\n\n<span class="hll"><span class="nd">@app.route</span><span class="p">(</span><span class="s">&quot;/developers&quot;</span><span class="p">)</span>\n</span><span class="k">def</span> <span class="nf">developers</span><span class="p">():</span>\n    <span class="k">return</span> <span class="n">render_template</span><span class="p">(</span><span class="s">&quot;developers.html&quot;</span><span class="p">)</span>\n\n<span class="k">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="s">&quot;__main__&quot;</span><span class="p">:</span>\n<span class="hll">    <span class="n">app</span><span class="o">.</span><span class="n">run</span><span class="p">(</span><span class="n">debug</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span>\n</span></pre></div>\n</td></tr></table>'
-searchBar.onkeyup = typingTimer;
 
 var testCodelet = {
     'url': 'https://github.com/earwig/bitshift/blob/develop/app.py',

static/sass/_mixins.sass

@@ -15,6 +15,10 @@
     @include vendor(opacity, $opacity)
     filter: alpha(opacity=$opacity)
 
+@mixin delay($time)
+    transition-delay: $time
+    -webkit-transition-delay: $time
+
 .t1
     @include vendor(transition, all 0.1s ease-out)
 

static/sass/about.sass

@@ -0,0 +1,88 @@
+/*
+ Stylesheet for `templates/about.html`
+ */
+
+@import mixins
+@import variables
+
+div.bg
+    $img-height: 650px
+
+    position: fixed
+    width: 100%
+    left: 0
+    z-index: -1
+
+    &#img-1
+        background: url(../img/about/bg1.png) no-repeat
+        background-size: cover
+        height: 400px
+        top: -210px
+
+    &#img-2
+        background: url(../img/about/bg2.png) no-repeat
+        height: $img-height + 530
+        top: 550px
+
+    &#img-3
+        background: url(../img/about/bg3.png) no-repeat
+        background-size: cover
+        height: $img-height + 250
+        top: 1600px
+
+    &#img-4
+        background: url(../img/about/bg4.png) no-repeat
+        background-size: cover
+        height: $img-height + 300
+        top: 5450px
+
+div.section
+    background-color: white
+    border: 1px solid $baseColor2
+    height: 300px
+    margin-bottom: 200px
+    margin-top: 300px
+    padding-bottom: 50px
+    padding-top: 20px
+
+    &#top
+        margin-top: 0px
+
+    div.centered
+        font-size: 110%
+        line-height: 150%
+        margin-left: auto
+        margin-right: auto
+        width: 50%
+
+        &#how
+            b
+                font-family: monospace
+                font-size: 110%
+
+            ul
+                list-style: none
+
+                span
+                    color: $baseColor1
+                    font-weight: bold
+
+        h1
+            color: $baseColor1
+
+            span
+                color: $baseColor2
+
+        a
+            color: #727070
+            font-style: italic
+            text-decoration: none
+
+            &:hover
+                @extend .t3
+
+                color: #575757
+
+        span#title
+            color: $baseColor1
+            font-weight: bold

static/sass/index.sass

@@ -1,5 +1,5 @@
 /*
- Stylesheet for `index.html`.
+ Stylesheet for `templates/index.html`.
  */
 
 @import mixins

static/sass/main.sass

@@ -30,15 +30,21 @@ div#container
 
     div#footer
         @extend .t3
+        @include delay(1s)
 
         background-color: $baseColor1
-        bottom: 0
+        bottom: -30px
         height: 60px
-        padding-top: 12px
-        position: absolute
+        padding-top: 15px
+        position: fixed
         text-align: center
         width: 100%
 
+        &:hover
+            @include delay(0s)
+
+            bottom: 0
+
         *
             color: white
 

templates/about.html

@@ -1,11 +1,55 @@
 = extends "layout.html"
 
 = block title
-  About
+  about
 = endblock
 
-= block body
-  <div>
-    About us, son.
+= block head
+  {{ assets.tag("lib/jquery.min.js") }}
+  {{ assets.tag("main.css") }}
+  {{ assets.tag("about.css") }}
+  {{ assets.tag("about.js") }}
+= endblock
+
+= block after_body
+    <div id="img-1" class="bg" speed="-1.25"></div>
+  <div id="img-2" class="bg" speed="1.8"></div>
+  <div id="img-3" class="bg" speed="1.6"></div>
+  <div id="img-4" class="bg" speed="3.8"></div>
+
+  <div id="top" class="section">
+    <div class="centered">
+      <h1><span>&raquo;</span> What</h1>
+        <span id="title">bitshift</span> is an <a href="https://github.com/earwig/bitshift">open-source</a>
+        online source-code search engine, developed by programmers, for programmers. The engine currently aggregates
+        publicly-available code from two online frameworks &#8211; <a href="https://github.com/">GitHub</a> and <a
+        href="https://bitbucket.org/">Bitbucket</a> &#8211; but has the necessary infrastructure to quickly incorporate
+        others, like <a href="http://stackoverflow.com/">StackOverflow</a> and <a href="https://gitorious.org/">Gitorious</a>
+        <span id="title">bitshift</span> supports a robust query language, which allows users to search for specific
+        languages, files, dates of creation and last modifcation, and symbols (function, class, and variable names),
+        amongst other attributes.
+    </div>
+  </div>
+
+  <div class="section">
+    <div id="how" class="centered">
+      <h1><span>&raquo;</span> How</h1>
+      <span id="title">bitshift</span> has an extensive back-end, roughly divided into three sections:
+      <ul>
+        <li><span>indexer</span> : finds and downloads code on online frameworks</li>
+        <li><span>parser</span> : parses newly crawled code, identifying its symbols</li>
+        <li><span>database</span> : interprets and compiles user searches into database queries</li>
+      </ul>
+
+      The engine was developed over the span of four months, and is primarily implemented in <b>Python</b>, but has
+      parser in <b>Ruby</b>, <b>Java</b>, and a number of other languages.
+    </div>
+  </div>
+
+  <div class="section">
+    <div class="centered">
+      <h1><span>&raquo;</span> Who</h1>
+      Who who? <b>Us who.</b> <span style="font-size:70%;">More stuffs to come (photos and bios).</span>
+    </div>
   </div>
 = endblock

templates/index.html

@@ -108,6 +108,7 @@
       <li><span class="hotkey">j</span> <span class="seperator">:</span> move window down to the next result</li>
       <li><span class="hotkey">h</span> <span class="seperator">:</span> move to the previous symbol match</li>
       <li><span class="hotkey">l</span> <span class="seperator">:</span> move to the next symbol match</li>
+      <li><span class="hotkey">?</span> <span class="seperator">:</span> toggle help</li>
     </ul>
   </div>
 = endblock

templates/layout.html

@@ -41,7 +41,7 @@
         <a href="/about">about</a>
         <a href="/developers">developers</a>
         <p>
-          &copy; 2012-2013 bitshift. <span>All Rights Reserved.</span>
+          &copy; {{ year }} bitshift
         </p>
       </div>
     </div>