* app page: finished 'introduction' template page

* added related introduction.css and introduction.js

2 files changed, 66 insertions, 0 deletions

diff --git a/page/static/css/introduction.css b/page/static/css/introduction.css
new file mode 100644
index 0000000..58a6220
--- /dev/null
+++ b/page/static/css/introduction.css
@@ -0,0 +1,32 @@
+/*
+ * css for introduction template
+ */
+
+.navbar-bright {
+    background-color: #111155;
+    color: #fff;
+}
+
+.affix-top, .affix{
+    position: static;
+}
+
+@media (min-width: 979px) {
+    #sidebar.affix-top {
+        position: static;
+        margin-top: 30px;
+        width: 228px;
+    }
+
+    #sidebar.affix {
+        position: fixed;
+        top: 70px;
+        width: 228px;
+    }
+}
+
+#sidebar li.active {
+    border: 0 #eee solid;
+    border-left-width: 5px;
+}
+
diff --git a/page/static/js/introduction.js b/page/static/js/introduction.js
new file mode 100644
index 0000000..b0ff02c
--- /dev/null
+++ b/page/static/js/introduction.js
@@ -0,0 +1,34 @@
+/*
+ * js for introduction page
+ */
+
+$(document).ready(function() {
+    $('#sidebar').affix({
+        offset: {
+            top: 235
+        }
+    });
+
+    var $body = $(document.body);
+    var navHeight = $('.navbar').outerHeight(true) + 10;
+
+    $body.scrollspy({
+        target: '#sidebar-col',
+        offset: navHeight
+    });
+
+    /* smooth scrolling sections */
+    $('a[href*=#]:not([href=#])').click(function() {
+        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
+            var target = $(this.hash);
+            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
+            if (target.length) {
+                $('html,body').animate({
+                    scrollTop: target.offset().top - 50
+                }, 100);
+                return false;
+            }
+        }
+    });
+});
+