add material design

app/static/css/lib/ripples.css

@@ -0,0 +1,40 @@
+.withripple {
+  position: relative;
+}
+.ripple-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 2px;
+}
+.ripple {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  margin-left: -10px;
+  margin-top: -10px;
+  border-radius: 100%;
+  background-color: rgba(0, 0, 0, 0.05);
+  -webkit-transform: scale(1);
+      -ms-transform: scale(1);
+          transform: scale(1);
+  -webkit-transform-origin: 50%;
+      -ms-transform-origin: 50%;
+          transform-origin: 50%;
+  opacity: 0;
+  pointer-events: none;
+}
+.ripple.ripple-on {
+  -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+          transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+  opacity: 1;
+}
+.ripple.ripple-out {
+  -webkit-transition: opacity 0.1s linear 0s !important;
+          transition: opacity 0.1s linear 0s !important;
+  opacity: 0;
+}

app/static/js/lib/material.js

@@ -0,0 +1,88 @@
+/* globals ripples */
+
+$(function (){
+
+    if (typeof ripples == "object") {
+        ripples.init( ".btn:not(.btn-link)," +
+                      ".card-image," +
+                      ".navbar a:not(.withoutripple)," +
+                      ".nav-tabs a:not(.withoutripple)," +
+                      ".withripple" );
+    }
+
+    var initInputs = function() {
+        // Add fake-checkbox to material checkboxes
+        $(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>");
+
+        // Add fake-radio to material radios
+        $(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>");
+
+        // Add elements for material inputs
+        $("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each( function() {
+            if ($(this).is(".bs-material")) { return; }
+            $(this).wrap("<div class=form-control-wrapper></div>");
+            $(this).after("<span class=material-input></span>");
+            if ($(this).hasClass("floating-label")) {
+                var placeholder = $(this).attr("placeholder");
+                $(this).attr("placeholder", null).removeClass("floating-label");
+                $(this).after("<div class=floating-label>" + placeholder + "</div>");
+            }
+            if ($(this).is(":empty") || $(this).val() === null || $(this).val() == "undefined" || $(this).val() === "") {
+                $(this).addClass("empty");
+            }
+
+            if ($(this).parent().next().is("[type=file]")) {
+                $(this).parent().addClass("fileinput");
+                var $input = $(this).parent().next().detach();
+                $(this).after($input);
+            }
+        });
+
+    };
+    initInputs();
+
+    // Support for "arrive.js" to dynamically detect creation of elements
+    // include it before this script to take advantage of this feature
+    // https://github.com/uzairfarooq/arrive/
+    if (document.arrive) {
+        document.arrive("input, textarea, select", function() {
+            initInputs();
+        });
+    }
+
+    $(document).on("change", ".checkbox input", function() {
+        $(this).blur();
+    });
+
+    $(document).on("keyup change", ".form-control", function() {
+        var self = $(this);
+        setTimeout(function() {
+            if (self.val() === "") {
+                self.addClass("empty");
+            } else {
+                self.removeClass("empty");
+            }
+        }, 1);
+    });
+    $(document)
+    .on("focus", ".form-control-wrapper.fileinput", function() {
+        $(this).find("input").addClass("focus");
+    })
+    .on("blur", ".form-control-wrapper.fileinput", function() {
+        $(this).find("input").removeClass("focus");
+    })
+    .on("change", ".form-control-wrapper.fileinput [type=file]", function() {
+        var value = "";
+        $.each($(this)[0].files, function(i, file) {
+            console.log(file);
+            value += file.name + ", ";
+        });
+        value = value.substring(0, value.length - 2);
+        if (value) {
+            $(this).prev().removeClass("empty");
+        } else {
+            $(this).prev().addClass("empty");
+        }
+        $(this).prev().val(value);
+    });
+});

app/static/js/lib/ripples.js

@@ -0,0 +1,181 @@
+/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
+/* globals CustomEvent */
+window.ripples = {
+    init : function(withRipple) {
+        "use strict";
+
+        // Cross browser matches function
+        function matchesSelector(domElement, selector) {
+            var matches = domElement.matches ||
+                domElement.matchesSelector ||
+                domElement.webkitMatchesSelector ||
+                domElement.mozMatchesSelector ||
+                domElement.msMatchesSelector ||
+                domElement.oMatchesSelector;
+            return matches.call(domElement, selector);
+        }
+
+        // animations time
+        var rippleOutTime = 100,
+            rippleStartTime = 500;
+
+        // Helper to bind events on dynamically created elements
+        var bind = function(events, selector, callback) {
+            if (typeof events === "string") {
+                events = [events];
+            }
+            events.forEach(function(event) {
+                document.addEventListener(event, function(e) {
+                    var target = (typeof e.detail !== "number") ? e.detail : e.target;
+
+                    if (matchesSelector(target, selector)) {
+                        callback(e, target);
+                    }
+                });
+            });
+        };
+
+        var rippleStart = function(e, target, callback) {
+
+            // Init variables
+            var $rippleWrapper      = target,
+                $el                 = $rippleWrapper.parentNode,
+                $ripple             = document.createElement("div"),
+                elPos               = $el.getBoundingClientRect(),
+                // Mouse pos in most cases
+                mousePos            = {x: e.clientX - elPos.left, y: ((window.ontouchstart) ? e.clientY - window.scrollY: e.clientY) - elPos.top},
+                scale               = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
+                rippleEnd           = new CustomEvent("rippleEnd", {detail: $ripple}),
+                _rippleOpacity      = 0.1,
+                refreshElementStyle;
+
+
+            // If multitouch is detected or some other black magic suff is happening...
+            if (e.touches) {
+                mousePos  = {x: e.touches[0].clientX - elPos.left, y:  e.touches[0].clientY - elPos.top};
+            }
+
+            console.log(mousePos);
+
+            $ripplecache = $ripple;
+
+            // Set ripple class
+            $ripple.className = "ripple";
+
+            // Move ripple to the mouse position
+            $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
+
+            // Get the clicked target's text color, this will be applied to the ripple as background-color.
+            var targetColor = window.getComputedStyle($el).color;
+
+            // Convert the rgb color to an rgba color with opacity set to __rippleOpacity__
+            targetColor = targetColor.replace("rgb", "rgba").replace(")",  ", " + _rippleOpacity + ")");
+
+            // Insert new ripple into ripple wrapper
+            $rippleWrapper.appendChild($ripple);
+
+            // Make sure the ripple has the class applied (ugly hack but it works)
+            refreshElementStyle = window.getComputedStyle($ripple).opacity;
+
+            // Let other funtions know that this element is animating
+            $ripple.dataset.animating = 1;
+
+            // Set scale value, background-color and opacity to ripple and animate it
+            $ripple.className = "ripple ripple-on";
+
+            // Prepare the style of the ripple
+            var rippleStyle = [
+                $ripple.getAttribute("style"),
+                "background-color: " + targetColor,
+                "-ms-transform: " + scale,
+                "-moz-transform" + scale,
+                "-webkit-transform" + scale,
+                "transform: " + scale
+            ];
+
+            // Apply the style
+            $ripple.setAttribute("style", rippleStyle.join(";"));
+
+            // This function is called when the animation is finished
+            setTimeout(function() {
+
+                // Let know to other functions that this element has finished the animation
+                $ripple.dataset.animating = 0;
+                document.dispatchEvent(rippleEnd);
+                if (callback) {
+                    callback();
+                }
+
+            }, rippleStartTime);
+
+        };
+
+        var rippleOut = function($ripple) {
+            // Clear previous animation
+            $ripple.className = "ripple ripple-on ripple-out";
+
+            // Let ripple fade out (with CSS)
+            setTimeout(function() {
+                $ripple.remove();
+            }, rippleOutTime);
+        };
+
+        // Helper, need to know if mouse is up or down
+        var mouseDown = false;
+        bind(["mousedown", "touchstart"], "*", function() {
+            mouseDown = true;
+        });
+        bind(["mouseup", "touchend"], "*", function() {
+            mouseDown = false;
+        });
+
+        // Append ripple wrapper if not exists already
+        var rippleInit = function(e, target) {
+            if (target.getElementsByClassName("ripple-wrapper").length === 0) {
+                target.className += " withripple";
+                var $rippleWrapper = document.createElement("div");
+                $rippleWrapper.className = "ripple-wrapper";
+                target.appendChild($rippleWrapper);
+                if (window.ontouchstart === null) {
+                    rippleStart(e, $rippleWrapper, function() {
+                        // FIXME: ugly fix for first touchstart event on mobile devices...
+                        $rippleWrapper.getElementsByClassName("ripple")[0].remove();
+                    });
+                }
+            }
+        };
+
+        var $ripplecache;
+
+        // Events handler
+        // init RippleJS and start ripple effect on mousedown
+        bind(["mouseover", "touchstart"], withRipple, rippleInit);
+
+        // start ripple effect on mousedown
+        bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {
+            // Start ripple only on left or middle mouse click and touch click
+            if (e.which === 0 || e.which === 1 || e.which === 2) {
+                rippleStart(e, $ripple);
+            }
+        });
+
+        // if animation ends and user is not holding mouse then destroy the ripple
+        bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
+
+            var $ripples = $ripple.parentNode.getElementsByClassName("ripple");
+
+            if (!mouseDown || ( $ripples[0] == $ripple && $ripples.length > 1)) {
+                rippleOut($ripple);
+            }
+        });
+
+        // Destroy ripple when mouse is not holded anymore if the ripple still exists
+        bind(["mouseup", "touchend"], ".ripple-wrapper", function() {
+            var $ripple = $ripplecache;
+            if ($ripple && $ripple.dataset.animating != 1) {
+                rippleOut($ripple);
+            }
+        });
+
+    }
+};

app/templates/about.html

@@ -6,13 +6,13 @@
                 <div class="well">
                     <article role="article">
                         <header>
-                            <h1 class="entry-title">About Me</h1>
+                            <h1 class="entry-title text-primary">About Me</h1>
                         </header>
-                        <h2>defshine,Software Engineer</h2>
+                        <h2 class="text-info">defshine,Software Engineer</h2>
 
-                        <h3>Stack</h3>
+                        <h3 class="text-danger">Stack</h3>
                         <blockquote>
-                            <p>Java,Spring,Hiberante,MyBatis<br>
+                            <p class="text-info">Java,Spring,Hiberante,MyBatis<br>
                                 Python,Flask<br>
                                 MySql,MongoDB<br>
                                 jQuery,AngularJS<br>
@@ -27,11 +27,11 @@ <h4></h4>
 
                     <p></p>
                     <header>
-                        <h1 class="entry-title">About project</h1>
+                        <h1 class="entry-title text-primary">About project</h1>
                     </header>
-                    <h2>flaskblog</h2>
+                    <h2 class="text-primary">flaskblog</h2>
                     <blockquote>
-                        <p>A simple and small blog system based on Flask framework</p>
+                        <p class="text-info">A simple and small blog system based on Flask framework</p>
                     </blockquote>
                 </div>
             </div>
@@ -42,7 +42,7 @@ <h2>flaskblog</h2>
         <footer>
             <div class="row">
                 <div class="col-lg-12">
-                    <p>Copyright &copy; defshine 2014</p>
+                    <p class="text-info">Copyright &copy; defshine 2014</p>
                 </div>
             </div>
         </footer>

app/templates/base.html

@@ -3,11 +3,16 @@
     <title>{{ title }}-flaskblog</title>
     <link href="/static/css/lib/bootstrap.css" rel="stylesheet">
     <link href="/static/css/index.css" rel="stylesheet">
+    <link href="/static/css/lib/material.css" rel="stylesheet">
+    <link href="/static/css/lib/ripples.css" rel="stylesheet">
+    <link href="/static/css/lib/material-wfont.css" rel="stylesheet">
     <script type="text/javascript" src="{{ url_for('static', filename='js/lib/jquery-1.11.1.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('static', filename='js/lib/bootstrap.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/lib/material.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/lib/ripples.js') }}"></script>
 </head>
 <body>
-
+<div class="bs-component">
 <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 
     <div class="container">
@@ -39,6 +44,7 @@
         </div>
     </div>
 </div>
+</div>
 {% block content %}
 {% endblock %}
 

app/templates/blog.html

@@ -2,9 +2,9 @@
 {% block blog_content %}
 <div class="blog-list-container-left-blog">
 
-    <h2 class="post-title" data-key="{{ post.post_id }}">{{ post.post_title }}</h2>
+    <h2 class="post-title text-primary" data-key="{{ post.post_id }}">{{ post.post_title }}</h2>
 
-    <div>
+    <div class="text-info">
         <span class="lead">by Admin</span>
         <span class="glyphicon glyphicon-time"></span> Posted on {{ post.post_date }}
     </div>