add basic design to userbundle && refactor

2016-11-06 21:27:12 +01:00
parent c936f4c643
commit 3f3605fbd8
10 changed files with 745 additions and 80 deletions
--- a/src/Jotunheimr/UserBundle/Resources/public/css/layout.css
+++ b/src/Jotunheimr/UserBundle/Resources/public/css/layout.css
@@ -0,0 +1,201 @@
+main {
+    background: #34495e;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+
+main .form {
+    border-top: 2px solid #3498db;
+}
+
+main .checkbox {
+    color: #FFFFFF;
+}
+
+.facebook {
+    border-top: 2px solid #3498db;
+    padding: 40px;
+    margin: 20px;
+}
+
+.fb-login {
+    background: #3498db;
+    font: bold 22px 'Gloria Hallelujah', cursive;
+    color: #FFFFFF;
+    padding: 15px 20px;
+    margin: 20px;
+
+    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+}
+
+.fb-login:hover {
+    background: #FFFFFF;
+    text-decoration: none;
+    color: #3498db;
+
+    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+}
+
+/** input */
+
+.input {
+    position: relative;
+    z-index: 1;
+    display: inline-block;
+    max-width: 350px;
+    width: calc(100% - 2em);
+    vertical-align: top;
+}
+
+.input__field {
+    position: relative;
+    display: block;
+    float: right;
+    padding: 0.8em;
+    width: 60%;
+    border: none;
+    border-radius: 0;
+    background: #f0f0f0;
+    color: #aaa;
+    font-weight: 400;
+    font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    -webkit-appearance: none; /* for box shadows to show on iOS */
+}
+
+.input__field:focus {
+    outline: none;
+}
+
+.input__label {
+    display: inline-block;
+    float: right;
+    padding: 0 1em;
+    width: 40%;
+    color: #696969;
+    font-weight: bold;
+    font-size: 70.25%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.input__label-content {
+    position: relative;
+    display: block;
+    padding: 1.6em 0;
+    width: 100%;
+}
+
+.graphic {
+    position: absolute;
+    top: 0;
+    left: 0;
+    fill: none;
+}
+
+.icon {
+    color: #ddd;
+    font-size: 150%;
+}
+
+/* Kozakura */
+.input--kozakura {
+    overflow: hidden;
+}
+
+.input__field--kozakura {
+    padding: 0.25em 0.5em;
+    margin-top: 1.25em;
+    width: 100%;
+    background: transparent;
+    color: #2F3238;
+    font-size: 1.55em;
+    opacity: 0;
+}
+
+.input__label--kozakura {
+    width: 100%;
+    text-align: left;
+    position: absolute;
+    top: 1em;
+    pointer-events: none;
+    overflow: hidden;
+    padding: 0 0.25em;
+    -webkit-transform: translate3d(1em, 2.75em, 0);
+    transform: translate3d(1em, 2.75em, 0);
+    -webkit-transition: -webkit-transform 0.3s;
+    transition: transform 0.3s;
+}
+
+.input__label-content--kozakura {
+    color: #FFFFFF;
+    padding: 0.4em 0 0.25em;
+    -webkit-transition: -webkit-transform 0.3s;
+    transition: transform 0.3s;
+}
+
+.input__label-content--kozakura::after {
+    content: attr(data-content);
+    position: absolute;
+    font-weight: 800;
+    top: 100%;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    color: #fff;
+    padding: 0.25em 0;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 0.85em;
+}
+
+.graphic--kozakura {
+    fill: #3498db;
+    pointer-events: none;
+    top: 1em;
+    bottom: 0;
+    height: 4.5em;
+    z-index: -1;
+    -webkit-transition: -webkit-transform 0.7s, fill 0.7s;
+    transition: transform 0.7s, fill 0.7s;
+    -webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
+    transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
+}
+
+.input__field--kozakura:focus,
+.input--filled .input__field--kozakura {
+    -webkit-transition: opacity 0s 0.35s;
+    transition: opacity 0s 0.35s;
+    opacity: 1;
+}
+
+.input__field--kozakura:focus + .input__label--kozakura,
+.input--filled .input__label--kozakura {
+    -webkit-transition-delay: 0.15s;
+    transition-delay: 0.15s;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.input__field--kozakura:focus + .input__label--kozakura .input__label-content--kozakura,
+.input--filled .input__label-content--kozakura {
+    -webkit-transition-delay: 0.15s;
+    transition-delay: 0.15s;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+}
+
+.input__field--kozakura:focus ~ .graphic--kozakura,
+.input--filled .graphic--kozakura {
+    fill: #fff;
+    -webkit-transform: translate3d(-66.6%, 0, 0);
+    transform: translate3d(-66.6%, 0, 0);
+}
--- a/src/Jotunheimr/UserBundle/Resources/public/css/login.css
+++ b/src/Jotunheimr/UserBundle/Resources/public/css/login.css
@@ -0,0 +1,42 @@
+main .login {
+    position: fixed;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+main .login h1 {
+    display: block;
+    font: normal 40px 'Gloria Hallelujah', cursive;
+    text-align: center;
+    color: #FFFFFF;
+}
+
+main .login .form .input {
+    display: block;
+    margin: 0 auto;
+}
+
+main .login .form .submit {
+    background: #3498db;
+    display: block;
+    font: bold 22px 'Gloria Hallelujah', cursive;
+    color: #FFFFFF;
+    border: 0;
+    padding: 10px 20px;
+    margin: 20px auto 0 auto;
+
+    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+}
+
+main .login .form .submit:hover {
+    background: #FFFFFF;
+    color: #3498db;
+
+    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+}
--- a/src/Jotunheimr/UserBundle/Resources/public/css/register.css
+++ b/src/Jotunheimr/UserBundle/Resources/public/css/register.css
@@ -0,0 +1,42 @@
+main .register {
+    position: fixed;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+main .register h1 {
+    display: block;
+    font: normal 40px 'Gloria Hallelujah', cursive;
+    text-align: center;
+    color: #FFFFFF;
+}
+
+main .register .form .input {
+    display: block;
+    margin: 0 auto;
+}
+
+main .register .form .submit {
+    background: #3498db;
+    display: block;
+    font: bold 22px 'Gloria Hallelujah', cursive;
+    color: #FFFFFF;
+    border: 0;
+    padding: 10px 20px;
+    margin: 20px auto 0 auto;
+
+    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+}
+
+main .register .form .submit:hover {
+    background: #FFFFFF;
+    color: #3498db;
+
+    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+}
--- a/src/Jotunheimr/UserBundle/Resources/public/js/circle.js
+++ b/src/Jotunheimr/UserBundle/Resources/public/js/circle.js
@@ -0,0 +1,126 @@
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+
+// MIT license
+
+(function () {
+    var lastTime = 0;
+    var vendors = ['ms', 'moz', 'webkit', 'o'];
+    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame']
+            || window[vendors[x] + 'CancelRequestAnimationFrame'];
+    }
+
+    if (!window.requestAnimationFrame)
+        window.requestAnimationFrame = function (callback, element) {
+            var currTime = new Date().getTime();
+            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+            var id = window.setTimeout(function () {
+                    callback(currTime + timeToCall);
+                },
+                timeToCall);
+            lastTime = currTime + timeToCall;
+            return id;
+        };
+
+    if (!window.cancelAnimationFrame)
+        window.cancelAnimationFrame = function (id) {
+            clearTimeout(id);
+        };
+}());
+
+(function () {
+
+    var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
+
+    // Main
+    initHeader();
+    addListeners();
+
+    function initHeader() {
+        width = window.innerWidth;
+        height = window.innerHeight;
+        target = {x: 0, y: height};
+
+        // largeHeader = document.getElementById('large-header');
+        // largeHeader.style.height = height + 'px';
+
+        canvas = document.getElementById('demo-canvas');
+        canvas.width = width;
+        canvas.height = height;
+        ctx = canvas.getContext('2d');
+
+        // create particles
+        circles = [];
+        for (var x = 0; x < width * 0.5; x++) {
+            var c = new Circle();
+            circles.push(c);
+        }
+        animate();
+    }
+
+    // Event handling
+    function addListeners() {
+        window.addEventListener('scroll', scrollCheck);
+        window.addEventListener('resize', resize);
+    }
+
+    function scrollCheck() {
+        if (document.body.scrollTop > height) animateHeader = false;
+        else animateHeader = true;
+    }
+
+    function resize() {
+        width = window.innerWidth;
+        height = window.innerHeight;
+        // largeHeader.style.height = height + 'px';
+        canvas.width = width;
+        canvas.height = height;
+    }
+
+    function animate() {
+        if (animateHeader) {
+            ctx.clearRect(0, 0, width, height);
+            for (var i in circles) {
+                circles[i].draw();
+            }
+        }
+        requestAnimationFrame(animate);
+    }
+
+    // Canvas manipulation
+    function Circle() {
+        var _this = this;
+
+        // constructor
+        (function () {
+            _this.pos = {};
+            init();
+            // console.log(_this);
+        })();
+
+        function init() {
+            _this.pos.x = Math.random() * width;
+            _this.pos.y = height + Math.random() * 100;
+            _this.alpha = 0.1 + Math.random() * 0.3;
+            _this.scale = 0.1 + Math.random() * 0.3;
+            _this.velocity = Math.random();
+        }
+
+        this.draw = function () {
+            if (_this.alpha <= 0) {
+                init();
+            }
+            _this.pos.y -= _this.velocity;
+            _this.alpha -= 0.0005;
+            ctx.beginPath();
+            ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 10, 0, 2 * Math.PI, false);
+            ctx.fillStyle = 'rgba(255,255,255,' + _this.alpha + ')';
+            ctx.fill();
+        };
+    }
+
+})();
--- a/src/Jotunheimr/UserBundle/Resources/public/js/register.js
+++ b/src/Jotunheimr/UserBundle/Resources/public/js/register.js
@@ -0,0 +1,114 @@
+/*!
+ * classie - class helper functions
+ * from bonzo https://github.com/ded/bonzo
+ *
+ * classie.has( elem, 'my-class' ) -> true/false
+ * classie.add( elem, 'my-new-class' )
+ * classie.remove( elem, 'my-unwanted-class' )
+ * classie.toggle( elem, 'my-class' )
+ */
+
+/*jshint browser: true, strict: true, undef: true */
+/*global define: false */
+
+(function (window) {
+
+    'use strict';
+
+    // class helper functions from bonzo https://github.com/ded/bonzo
+
+    function classReg(className) {
+        return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
+    }
+
+    // classList support for class management
+    // altho to be fair, the api sucks because it won't accept multiple classes at once
+    var hasClass, addClass, removeClass;
+
+    if ('classList' in document.documentElement) {
+        hasClass = function (elem, c) {
+            return elem.classList.contains(c);
+        };
+        addClass = function (elem, c) {
+            elem.classList.add(c);
+        };
+        removeClass = function (elem, c) {
+            elem.classList.remove(c);
+        };
+    }
+    else {
+        hasClass = function (elem, c) {
+            return classReg(c).test(elem.className);
+        };
+        addClass = function (elem, c) {
+            if (!hasClass(elem, c)) {
+                elem.className = elem.className + ' ' + c;
+            }
+        };
+        removeClass = function (elem, c) {
+            elem.className = elem.className.replace(classReg(c), ' ');
+        };
+    }
+
+    function toggleClass(elem, c) {
+        var fn = hasClass(elem, c) ? removeClass : addClass;
+        fn(elem, c);
+    }
+
+    var classie = {
+        // full names
+        hasClass: hasClass,
+        addClass: addClass,
+        removeClass: removeClass,
+        toggleClass: toggleClass,
+        // short names
+        has: hasClass,
+        add: addClass,
+        remove: removeClass,
+        toggle: toggleClass
+    };
+
+    // transport
+    if (typeof define === 'function' && define.amd) {
+        // AMD
+        define(classie);
+    } else {
+        // browser global
+        window.classie = classie;
+    }
+
+})(window);
+
+(function () {
+    // trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
+    if (!String.prototype.trim) {
+        (function () {
+            // Make sure we trim BOM and NBSP
+            var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
+            String.prototype.trim = function () {
+                return this.replace(rtrim, '');
+            };
+        })();
+    }
+
+    [].slice.call(document.querySelectorAll('input.input__field')).forEach(function (inputEl) {
+        // in case the input is already filled..
+        if (inputEl.value.trim() !== '') {
+            classie.add(inputEl.parentNode, 'input--filled');
+        }
+
+        // events:
+        inputEl.addEventListener('focus', onInputFocus);
+        inputEl.addEventListener('blur', onInputBlur);
+    });
+
+    function onInputFocus(ev) {
+        classie.add(ev.target.parentNode, 'input--filled');
+    }
+
+    function onInputBlur(ev) {
+        if (ev.target.value.trim() === '') {
+            classie.remove(ev.target.parentNode, 'input--filled');
+        }
+    }
+})();