SplendidBear-Websites/MineSeeker
Private
Public Access
1
0
Fork 0
Code Pull Requests 1 Releases Activity

login and register form more design

Browse Source
This commit is contained in:
Root
2016-11-07 21:14:53 +01:00
parent 3f3605fbd8
commit c2e643671b
10 changed files with 91 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/Jotunheimr/UserBundle/Resources/public/css/layout.css
View File

@@ -1,12 +1,15 @@
main {
background: #34495e;
position: fixed;
width: 100%;
height: 100%;
}
main > div {
background: rgba(52, 73, 94, 0.9);
}
main .form {
border-top: 2px solid #3498db;
/*border-top: 2px solid #3498db;*/
}
main .checkbox {
@@ -14,7 +17,7 @@ main .checkbox {
}
.facebook {
border-top: 2px solid #3498db;
border-bottom: 1px solid #3498db;
padding: 40px;
margin: 20px;
}
@@ -112,12 +115,15 @@ main .checkbox {
}
.input__field--kozakura {
background: transparent;
width: 100%;
font-size: 1.55em;
color: #2F3238;
border-bottom: 1px solid #3498db;
padding: 0.25em 0.5em;
margin-top: 1.25em;
width: 100%;
background: transparent;
color: #2F3238;
font-size: 1.55em;
margin-bottom: 0.5em;
opacity: 0;
}

29
src/Jotunheimr/UserBundle/Resources/public/css/login.css
View File

@@ -1,3 +1,9 @@
main {
background: url("/bundles/jotunheimruser/images/landscape-2.jpeg");
background-size: cover;
background-position: center center;
}
main .login {
position: fixed;
display: flex;
@@ -8,11 +14,21 @@ main .login {
flex-direction: column;
}
main .login .login-container {
background: #FFFFFF;
display: table;
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);
}
main .login h1 {
display: block;
font: normal 40px 'Gloria Hallelujah', cursive;
text-align: center;
color: #FFFFFF;
color: #3498db;
margin-top: 0;
}
main .login .form .input {
@@ -20,12 +36,16 @@ main .login .form .input {
margin: 0 auto;
}
main .login .form .checkbox {
color: #3498db;
}
main .login .form .submit {
background: #3498db;
background: none;
display: block;
font: bold 22px 'Gloria Hallelujah', cursive;
color: #FFFFFF;
border: 0;
border: 2px solid #3498db;
padding: 10px 20px;
margin: 20px auto 0 auto;
@@ -34,8 +54,7 @@ main .login .form .submit {
}
main .login .form .submit:hover {
background: #FFFFFF;
color: #3498db;
background: #3498db;
-webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);

13
src/Jotunheimr/UserBundle/Resources/public/css/register.css
View File

@@ -1,3 +1,9 @@
main {
background: url("/bundles/jotunheimruser/images/landscape-3.jpeg");
background-size: cover;
background-position: center center;
}
main .register {
position: fixed;
display: flex;
@@ -21,11 +27,11 @@ main .register .form .input {
}
main .register .form .submit {
background: #3498db;
background: none;
display: block;
font: bold 22px 'Gloria Hallelujah', cursive;
color: #FFFFFF;
border: 0;
border: 2px solid #3498db;
padding: 10px 20px;
margin: 20px auto 0 auto;
@@ -34,8 +40,7 @@ main .register .form .submit {
}
main .register .form .submit:hover {
background: #FFFFFF;
color: #3498db;
background: #3498db;
-webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);

BIN
src/Jotunheimr/UserBundle/Resources/public/images/landscape-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 MiB

BIN
src/Jotunheimr/UserBundle/Resources/public/images/landscape-2.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 MiB

BIN
src/Jotunheimr/UserBundle/Resources/public/images/landscape-3.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 MiB

BIN
src/Jotunheimr/UserBundle/Resources/public/images/landscape-4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

6
src/Jotunheimr/UserBundle/Resources/views/Registration/register.html.twig
View File

@@ -4,12 +4,14 @@
{% block fos_user_content %}
<div class="register">
{% include('@JotunheimrUser/Social/facebook.html.twig') %}
<h1>
Sign up
</h1>
<div class="form">
{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }}
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
{#<input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>#}
<div class="input input--kozakura">
{{ form_widget(form.email, {'attr': {'class': 'input__field input__field--kozakura'}}) }}
@@ -67,8 +69,6 @@
</div>
{{ form_end(form) }}
</div>
{% include('@JotunheimrUser/Social/facebook.html.twig') %}
</div>
{% endblock fos_user_content %}

82
src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig
View File

@@ -8,54 +8,56 @@
{% endif %}
<div class="login">
<h1>
Sign in
</h1>
<div class="login-container">
{#{% include('@JotunheimrUser/Social/facebook.html.twig') %}#}
<div class="form">
<form action="{{ path("fos_user_security_check") }}" method="post">
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
<h1>
Sign in
</h1>
<div class="input input--kozakura">
<input type="text" id="username" name="_username" value="{{ last_username }}"
class="input__field input__field--kozakura" autofocus/>
<label class="input__label input__label--kozakura" for="fos_user_registration_form_email">
<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">
<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>
</div>
</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="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="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 class="input-submit">
<input class="submit" type="submit" id="_submit" name="_submit"
value="{{ 'security.login.submit'|trans }}"/>
</div>
</form>
</div>
</div>
{% include('@JotunheimrUser/Social/facebook.html.twig') %}
</div>
{% endblock fos_user_content %}

BIN
src/Mine/SeekerBundle/Resources/public/images/bg-mineseeker-outbg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB