bugfix entities gridrow, grid && improve graph design on homepage

2016-11-15 17:53:12 +01:00
parent a4574fe933
commit 1e9bdbac3f
13 changed files with 327 additions and 167 deletions
--- a/src/Jotunheimr/UserBundle/Resources/public/css/layout.css
+++ b/src/Jotunheimr/UserBundle/Resources/public/css/layout.css
@@ -16,16 +16,12 @@ main .checkbox {
    color: #FFFFFF;
 }

-.facebook {
-    border-bottom: 1px solid #3498db;
-    padding: 40px;
-    margin: 20px;
-}
-
 .fb-login {
-    background: #3498db;
+    display: block;
+    background: #1a6190;
    font: bold 22px 'Gloria Hallelujah', cursive;
-    color: #FFFFFF;
+    text-align: center;
+    color: #2c3e50;
    padding: 15px 20px;
    margin: 20px;

@@ -164,7 +160,7 @@ main .checkbox {
 }

 .graphic--kozakura {
-    fill: #3498db;
+    fill: #2c3e50;
    pointer-events: none;
    top: 1em;
    bottom: 0;
--- a/src/Jotunheimr/UserBundle/Resources/public/css/login.css
+++ b/src/Jotunheimr/UserBundle/Resources/public/css/login.css
@@ -1,5 +1,5 @@
 main {
-    background: url("/bundles/jotunheimruser/images/landscape-2.jpeg");
+    background: url('/bundles/mineseeker/images/homepage/header.jpg');
    background-size: cover;
    background-position: center center;
 }
@@ -15,19 +15,43 @@ main .login {
 }

 main .login .login-container {
-    background: #FFFFFF;
-    display: table;
+    background: #2980b9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
    padding: 1em;

-    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
+    -webkit-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3);
+}
+
+main .login .login-container .login-form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+    width: 50%;
+}
+
+main .login .login-container .login-item {
+    width: 50%;
+}
+
+main .login .login-container .login-item h2 {
+    text-align: center;
+}
+
+main .login .login-container .login-item:first-child {
+    border-right: 1px solid #3498db;
 }

 main .login h1 {
    display: block;
-    font: normal 40px 'Gloria Hallelujah', cursive;
+    font: normal 72px 'Gloria Hallelujah', cursive;
    text-align: center;
-    color: #3498db;
+    color: #2c3e50;
    margin-top: 0;
 }

@@ -37,20 +61,26 @@ main .login .form .input {
 }

 main .login .form .checkbox {
-    color: #3498db;
+    color: #2c3e50;
+}
+
+main .checkbox label, main .radio label {
+    font: bolder 18px "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }

 main .login .form .submit {
-    background: none;
+    background: #1a6190;
    display: block;
-    font: bold 22px 'Gloria Hallelujah', cursive;
-    color: #FFFFFF;
-    border: 2px solid #3498db;
-    padding: 10px 20px;
-    margin: 20px auto 0 auto;
+    font: bolder 22px "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: #2c3e50;
+    border: 0;
+    padding: 10px 70px;
+    margin: 20px auto 40px auto;

    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
 }

 main .login .form .submit:hover {
--- a/src/Jotunheimr/UserBundle/Resources/public/css/register.css
+++ b/src/Jotunheimr/UserBundle/Resources/public/css/register.css
@@ -1,5 +1,5 @@
 main {
-    background: url("/bundles/jotunheimruser/images/landscape-3.jpeg");
+    background: url('/bundles/mineseeker/images/homepage/header.jpg');
    background-size: cover;
    background-position: center center;
 }
--- a/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig
+++ b/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig
@@ -9,53 +9,64 @@

    <div class="login">
        <div class="login-container">
-            {#{% include('@JotunheimrUser/Social/facebook.html.twig') %}#}
-
            <h1>
                Sign in
            </h1>

-            <div class="form">
-                <form action="{{ path("fos_user_security_check") }}" method="post">
-                    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
+            <div class="login-form">
+                <div class="login-item">
+                    <div class="form">
+                        <form action="{{ path("fos_user_security_check") }}" method="post">
+                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>

-                    <div class="input input--kozakura">
-                        <input type="text" id="username" name="_username" value="{{ last_username }}"
-                               class="input__field input__field--kozakura"/>
-                        <label class="input__label input__label--kozakura" for="fos_user_registration_form_email">
+                            <div class="input input--kozakura">
+                                <input type="text" id="username" name="_username" value="{{ last_username }}"
+                                       class="input__field input__field--kozakura"/>
+                                <label class="input__label input__label--kozakura"
+                                       for="fos_user_registration_form_email">
                        <span class="input__label-content input__label-content--kozakura"
                              data-content="Username or Email">Username or Email</span>
-                        </label>
-                        <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
-                             preserveAspectRatio="none">
-                            <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
-                        </svg>
+                                </label>
+                                <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
+                                     preserveAspectRatio="none">
+                                    <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
+                                </svg>
+                            </div>
+
+                            <div class="input input--kozakura">
+                                <input type="password" id="password" name="_password"
+                                       class="input__field input__field--kozakura"/>
+                                <label class="input__label input__label--kozakura"
+                                       for="fos_user_registration_form_email">
+                                    <span class="input__label-content input__label-content--kozakura"
+                                          data-content="Password">Password</span>
+                                </label>
+                                <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
+                                     preserveAspectRatio="none">
+                                    <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
+                                </svg>
+                            </div>
+
+                            <div class="checkbox text-center">
+                                <label for="remember_me">
+                                    <input type="checkbox" id="remember_me" name="_remember_me" value="on"/>
+                                    {{ 'security.login.remember_me'|trans }}
+                                </label>
+                            </div>
+
+                            <div class="input-submit">
+                                <input class="submit" type="submit" id="_submit" name="_submit"
+                                       value="{{ 'security.login.submit'|trans }}"/>
+                            </div>
+                        </form>
                    </div>

-                    <div class="input input--kozakura">
-                        <input type="password" id="password" name="_password"
-                               class="input__field input__field--kozakura"/>
-                        <label class="input__label input__label--kozakura" for="fos_user_registration_form_email">
-                            <span class="input__label-content input__label-content--kozakura" data-content="Password">Password</span>
-                        </label>
-                        <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
-                             preserveAspectRatio="none">
-                            <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
-                        </svg>
-                    </div>
-
-                    <div class="checkbox text-center">
-                        <label for="remember_me">
-                            <input type="checkbox" id="remember_me" name="_remember_me" value="on"/>
-                            {{ 'security.login.remember_me'|trans }}
-                        </label>
-                    </div>
-
-                    <div class="input-submit">
-                        <input class="submit" type="submit" id="_submit" name="_submit"
-                               value="{{ 'security.login.submit'|trans }}"/>
-                    </div>
-                </form>
+                </div>
+                <div class="login-item">
+                    <a class="fb-login" href="{{ path('fos_user_registration_register') }}">Register a new account</a>
+                    <h2>or</h2>
+                    {% include('@JotunheimrUser/Social/facebook.html.twig') %}
+                </div>
            </div>
        </div>
    </div>
--- a/src/Jotunheimr/UserBundle/Resources/views/Social/facebook.html.twig
+++ b/src/Jotunheimr/UserBundle/Resources/views/Social/facebook.html.twig
@@ -1,38 +1,36 @@
-<div class="facebook">
-    <script>
-        window.fbAsyncInit = function () {
-            FB.init({
-                appId: '320599508311862',
-                xfbml: true,
-                version: 'v2.8'
-            });
-        };
+<script>
+    window.fbAsyncInit = function () {
+        FB.init({
+            appId: '320599508311862',
+            xfbml: true,
+            version: 'v2.8'
+        });
+    };

-        (function (d, s, id) {
-            var js, fjs = d.getElementsByTagName(s)[0];
-            if (d.getElementById(id)) {
-                return;
-            }
-            js = d.createElement(s);
-            js.id = id;
-            js.src = "//connect.facebook.net/en_US/sdk.js";
-            fjs.parentNode.insertBefore(js, fjs);
-        }(document, 'script', 'facebook-jssdk'));
-
-        function fbLogin() {
-            FB.getLoginStatus(function (response) {
-                if (response.status === 'connected') {
-                    document.location = "{{ url("hwi_oauth_service_redirect", {service: "facebook"}) }}";
-                } else {
-                    FB.login(function (response) {
-                        if (response.authResponse) {
-                            document.location = "{{ url("hwi_oauth_service_redirect", {service: "facebook"}) }}";
-                        }
-                    }, {scope: 'email'});
-                }
-            });
+    (function (d, s, id) {
+        var js, fjs = d.getElementsByTagName(s)[0];
+        if (d.getElementById(id)) {
+            return;
        }
-    </script>
+        js = d.createElement(s);
+        js.id = id;
+        js.src = "//connect.facebook.net/en_US/sdk.js";
+        fjs.parentNode.insertBefore(js, fjs);
+    }(document, 'script', 'facebook-jssdk'));

-    <a class="fb-login" href="#" onclick="fbLogin();"><i class="fa fa-facebook"></i> Enter w/ Facebook</a>
-</div>
+    function fbLogin() {
+        FB.getLoginStatus(function (response) {
+            if (response.status === 'connected') {
+                document.location = "{{ url("hwi_oauth_service_redirect", {service: "facebook"}) }}";
+            } else {
+                FB.login(function (response) {
+                    if (response.authResponse) {
+                        document.location = "{{ url("hwi_oauth_service_redirect", {service: "facebook"}) }}";
+                    }
+                }, {scope: 'email'});
+            }
+        });
+    }
+</script>
+
+<a class="fb-login" href="#" onclick="fbLogin();"><i class="fa fa-facebook"></i> Enter w/ Facebook</a>
--- a/src/Jotunheimr/UserBundle/Security/Core/User/MyFOSUBUserProvider.php
+++ b/src/Jotunheimr/UserBundle/Security/Core/User/MyFOSUBUserProvider.php
@@ -74,7 +74,8 @@ class MyFOSUBUserProvider extends BaseFOSUBProvider
        $user->setFacebookId($response->getUsername());
        $user->setEmail($response->getEmail());
        $user->setEmailCanonical($response->getEmail());
-        $user->setUsername($response->getUsername());
+        $user->setUsername($this->slugify($response->getRealName()));
+        $user->setUsernameCanonical($this->slugify($response->getRealName()));
        $user->setRealName($response->getRealName());
        $user->setNickName($response->getNickname());
        if ($empty) {
@@ -85,4 +86,27 @@ class MyFOSUBUserProvider extends BaseFOSUBProvider
        $this->em->persist($user);
        $this->em->flush();
    }
+
+    /**
+     * @param $text
+     * @return mixed|string
+     */
+    private function slugify($text)
+    {
+        $text = preg_replace('#[^\\pL\d]+#u', '-', $text);
+        $text = trim($text, '-');
+
+        if (function_exists('iconv')) {
+            $text = iconv('utf-8', 'us-ascii//TRANSLIT', $text);
+        }
+
+        $text = strtolower($text);
+        $text = preg_replace('#[^-\w]+#', '', $text);
+
+        if (empty($text)) {
+            return 'n-a';
+        }
+
+        return $text;
+    }
 }