From 3f3605fbd8bdfd67d498a03ff69e7112a2fadff1 Mon Sep 17 00:00:00 2001 From: Lang Date: Sun, 6 Nov 2016 21:27:12 +0100 Subject: [PATCH] add basic design to userbundle && refactor --- .../Resources/public/css/layout.css | 201 ++++++++++++++++++ .../UserBundle/Resources/public/css/login.css | 42 ++++ .../Resources/public/css/register.css | 42 ++++ .../UserBundle/Resources/public/js/circle.js | 126 +++++++++++ .../Resources/public/js/register.js | 114 ++++++++++ .../views/Registration/register.html.twig | 96 +++++++-- .../Resources/views/Security/login.html.twig | 112 ++++++---- .../Resources/views/Social/facebook.html.twig | 38 ++++ .../Resources/views/layout.html.twig | 10 +- .../Core/User/MyFOSUBUserProvider.php | 44 ++-- 10 files changed, 745 insertions(+), 80 deletions(-) create mode 100644 src/Jotunheimr/UserBundle/Resources/public/css/layout.css create mode 100644 src/Jotunheimr/UserBundle/Resources/public/css/login.css create mode 100644 src/Jotunheimr/UserBundle/Resources/public/css/register.css create mode 100644 src/Jotunheimr/UserBundle/Resources/public/js/circle.js create mode 100644 src/Jotunheimr/UserBundle/Resources/public/js/register.js create mode 100644 src/Jotunheimr/UserBundle/Resources/views/Social/facebook.html.twig diff --git a/src/Jotunheimr/UserBundle/Resources/public/css/layout.css b/src/Jotunheimr/UserBundle/Resources/public/css/layout.css new file mode 100644 index 0000000..e5a43d7 --- /dev/null +++ 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); +} diff --git a/src/Jotunheimr/UserBundle/Resources/public/css/login.css b/src/Jotunheimr/UserBundle/Resources/public/css/login.css new file mode 100644 index 0000000..160e280 --- /dev/null +++ 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); +} diff --git a/src/Jotunheimr/UserBundle/Resources/public/css/register.css b/src/Jotunheimr/UserBundle/Resources/public/css/register.css new file mode 100644 index 0000000..8b85dfc --- /dev/null +++ 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); +} diff --git a/src/Jotunheimr/UserBundle/Resources/public/js/circle.js b/src/Jotunheimr/UserBundle/Resources/public/js/circle.js new file mode 100644 index 0000000..8b7de14 --- /dev/null +++ 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(); + }; + } + +})(); diff --git a/src/Jotunheimr/UserBundle/Resources/public/js/register.js b/src/Jotunheimr/UserBundle/Resources/public/js/register.js new file mode 100644 index 0000000..1810bd8 --- /dev/null +++ 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'); + } + } +})(); \ No newline at end of file diff --git a/src/Jotunheimr/UserBundle/Resources/views/Registration/register.html.twig b/src/Jotunheimr/UserBundle/Resources/views/Registration/register.html.twig index 5c0bcb7..20d4414 100644 --- a/src/Jotunheimr/UserBundle/Resources/views/Registration/register.html.twig +++ b/src/Jotunheimr/UserBundle/Resources/views/Registration/register.html.twig @@ -3,26 +3,90 @@ {% trans_default_domain 'FOSUserBundle' %} {% block fos_user_content %} - {{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }} +
+

+ Sign up +

+
+ {{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }} + - {{ form_label(form.email) }} - {{ form_widget(form.email) }} - {{ form_errors(form.email) }} +
+ {{ form_widget(form.email, {'attr': {'class': 'input__field input__field--kozakura'}}) }} + + + + + {{ form_errors(form.email) }} +
- {{ form_label(form.username) }} - {{ form_widget(form.username) }} - {{ form_errors(form.username) }} +
+ {{ form_widget(form.username, {'attr': {'class': 'input__field input__field--kozakura'}}) }} + + + + + {{ form_errors(form.username) }} +
- {{ form_label(form.plainPassword.first) }} - {{ form_widget(form.plainPassword.first) }} - {{ form_errors(form.plainPassword.first) }} +
+ {{ form_widget(form.plainPassword.first, {'attr': {'class': 'input__field input__field--kozakura'}}) }} + + + + + {{ form_errors(form.plainPassword.first) }} +
- {{ form_label(form.plainPassword.second) }} - {{ form_widget(form.plainPassword.second) }} - {{ form_errors(form.plainPassword.second) }} +
+ {{ form_widget(form.plainPassword.second, {'attr': {'class': 'input__field input__field--kozakura'}}) }} + + + + + {{ form_errors(form.plainPassword.second) }} +
-
- +
+ +
+ {{ form_end(form) }} +
+ + {% include('@JotunheimrUser/Social/facebook.html.twig') %}
- {{ form_end(form) }} {% endblock fos_user_content %} + +{% block javascripts %} + {{ parent() }} + + {% javascripts + '@JotunheimrUserBundle/Resources/public/js/register.js' %} + + {% endjavascripts %} +{% endblock %} + +{% block stylesheets %} + {{ parent() }} + + {% stylesheets filter='cssrewrite' + '@JotunheimrUserBundle/Resources/public/css/font-awesome/css/font-awesome.min.css' + '@JotunheimrUserBundle/Resources/public/css/register.css' %} + + {% endstylesheets %} +{% endblock %} diff --git a/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig b/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig index 1d5a06d..1e15d4d 100644 --- a/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig +++ b/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig @@ -3,59 +3,77 @@ {% trans_default_domain 'FOSUserBundle' %} {% block fos_user_content %} - - - Facebook Connect Button (Dialog) - {% if error %} {{ error.messageKey|trans(error.messageData, 'security') }} {% endif %} -
- +
{% endblock fos_user_content %} + +{% block javascripts %} + {{ parent() }} + + {% javascripts + '@JotunheimrUserBundle/Resources/public/js/register.js' %} + + {% endjavascripts %} +{% endblock %} + +{% block stylesheets %} + {{ parent() }} + + {% stylesheets filter='cssrewrite' + '@JotunheimrUserBundle/Resources/public/css/font-awesome/css/font-awesome.min.css' + '@JotunheimrUserBundle/Resources/public/css/login.css' %} + + {% endstylesheets %} +{% endblock %} diff --git a/src/Jotunheimr/UserBundle/Resources/views/Social/facebook.html.twig b/src/Jotunheimr/UserBundle/Resources/views/Social/facebook.html.twig new file mode 100644 index 0000000..aac24f2 --- /dev/null +++ b/src/Jotunheimr/UserBundle/Resources/views/Social/facebook.html.twig @@ -0,0 +1,38 @@ + diff --git a/src/Jotunheimr/UserBundle/Resources/views/layout.html.twig b/src/Jotunheimr/UserBundle/Resources/views/layout.html.twig index 1b3a5b2..2e96dba 100644 --- a/src/Jotunheimr/UserBundle/Resources/views/layout.html.twig +++ b/src/Jotunheimr/UserBundle/Resources/views/layout.html.twig @@ -7,11 +7,13 @@ {% block stylesheets %} {% stylesheets filter='cssrewrite' + '@JotunheimrUserBundle/Resources/public/css/layout.css' '@JotunheimrAdminBundle/Resources/public/js/vendor/bootstrap/css/bootstrap.min.css' %} {% endstylesheets %} {% endblock %} +