dinislage/PrestaShop
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

// login flip

Browse Source
This commit is contained in:
Kevin Granger committed 2013-10-14 16:34:02 +02:00
1 parent 6d3a15ef5b
commit 3f22a6b6c9
4 files changed
+124 -130
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

admin-dev/themes/default/css/admin-theme.css
+37 -27
View File
@@ -9566,41 +9566,51 @@ textarea {
font-size: 1.5em; } font-size: 1.5em; }
/* line 1, admin-theme/_admin-login.sass */ /* line 1, admin-theme/_admin-login.sass */
.flip-container { #login-panel {
perspective: 1000; } margin: 0 auto;
width: 420px; }
/* line 4, admin-theme/_admin-login.sass */ /* line 5, admin-theme/_admin-login.sass */
.flip-container:hover .flipper, .flip-container.hover .flipper { #login-panel .flip-container {
transform: rotateY(180deg); } height: 500px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px; }
/* line 8, admin-theme/_admin-login.sass */ /* line 8, admin-theme/_admin-login.sass */
.flip-container, .front, .back { #login-panel .flip-container.flip .flipper {
width: 420px; -webkit-transform: rotateY(180deg);
height: 420px; } -moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
/* line 14, admin-theme/_admin-login.sass */ -o-transform: rotateY(180deg);
.flipper { transform: rotateY(180deg); }
transition: 0.6s; /* line 13, admin-theme/_admin-login.sass */
#login-panel .flipper {
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
position: relative; } position: relative; }
/* line 18, admin-theme/_admin-login.sass */
/* line 19, admin-theme/_admin-login.sass */ #login-panel .front, #login-panel .back {
.front, .back { -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; } left: 0; }
/* line 24, admin-theme/_admin-login.sass */
/* line 26, admin-theme/_admin-login.sass */ #login-panel .front {
.front {
z-index: 2; } z-index: 2; }
/* line 27, admin-theme/_admin-login.sass */
/* line 29, admin-theme/_admin-login.sass */ #login-panel .back {
.back { -webkit-transform: rotateY(180deg);
transform: rotateY(180deg); } -moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
/* line 32, admin-theme/_admin-login.sass */ -o-transform: rotateY(180deg);
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
transform: rotateY(180deg); } transform: rotateY(180deg); }
/* line 1, admin-theme/_admin-carrier-wizard.sass */ /* line 1, admin-theme/_admin-carrier-wizard.sass */
admin-dev/themes/default/css/admin-theme/_admin-login.sass
+22 -29
View File
@@ -1,35 +1,28 @@
.flip-container #login-panel
perspective: 1000 margin: 0 auto
.flip-container:hover .flipper,
.flip-container.hover .flipper
transform: rotateY(180deg)
.flip-container,
.front,
.back
width: 420px width: 420px
height: 420px
.flipper .flip-container
transition: 0.6s height: 500px
transform-style: preserve-3d @include perspective(1000px)
position: relative &.flip .flipper
@include rotateY(180deg)
.front, .flip-container, .front, .back
.back
backface-visibility: hidden
position: absolute
top: 0
left: 0
.front .flipper
z-index: 2 @include transition-duration(0.6s)
@include transform-style(preserve-3d)
position: relative
.back .front, .back
transform: rotateY(180deg) @include backface-visibility(hidden)
position: absolute
top: 0
left: 0
.flip-container:hover .flipper, .front
.flip-container.hover .flipper, z-index: 2
.flip-container.flip .flipper
transform: rotateY(180deg) .back
@include rotateY(180deg)
admin-dev/themes/default/template/controllers/login/content.tpl
+55 -60
View File
@@ -28,38 +28,37 @@
var label_errors = '{l s='errors'}'; var label_errors = '{l s='errors'}';
var label_error = '{l s='error'}'; var label_error = '{l s='error'}';
</script> </script>
<div id="login-panel">
<div id="container"> <div id="login-header" class="panel">
<div class="row"> <h1 class="text-center">
<div id="login" class="flip-container col-md-4 col-md-offset-4 panel"> <img width="40px" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjEycHgiIGhlaWdodD0iNzkycHgiIHZpZXdCb3g9IjAgMCA2MTIgNzkyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MTIgNzkyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjA0LDg2Yy0zNiwyMy00Nyw2MS00MiwxMjBsLTI3LDNDMTMxLDE0NywxNjEsOTgsMjA0LDg2eiBNMjQ1LDc4YzY0LDgsMTAwLDM1LDExNSwxMDVsLTE2OSwyMEMxODUsMTQwLDE5OSwxMDUsMjQ1LDc4eg0KCSBNMjgwLDY0YzcyLDAsMTIwLDI1LDEzNSwxMTJsLTI3LDNDMzc1LDExMiwzNDEsNzYsMjgwLDY0eiBNNDQyLDE3NEM0MjksNTQsMzE0LDE5LDI0MCw1NmMtODMtMi0xNDAsNzMtMTMzLDE1N2wtOTYsMTBsNTgsNTUwDQoJbDI2MS0yNmMtNDctNTMtMTAwLTEzMy0xMjQtMTUyYy0yNy0yMy0zMC0zMS0yMy00NWMxMi0xNCwyNC0xMiw0NSw0bDQ4LDM3bDcsMzZsMTQtMWwtMzctMjMxYy00LTI0LDEtMzUsMTktNDBjMTgtMiwyNyw3LDMxLDM0DQoJbDIzLDE0MWwxOC0yYy03LTUwLTMtNTcsMTctNjJjMTktMywyOCwxMCwzNSw2NGwxNy0xYy01LTUwLTEtNTcsMTktNjBjMjItMSwyNSwxMiwzMiw2NWwxNiwyYy00LTQwLTQtNTEsMTgtNTNjMjEsMCwyNSwxNCwzMSw1OA0KCWMxNSwxMDAsMTMsMTU0LTYsMTgzbDcyLTdsLTU4LTU1NUw0NDIsMTc0eiIvPg0KPC9zdmc+DQo="/>
<div class="flipper"> PRESTASHOP
<div class="front"> </h1>
<h1 class="text-center"> <hr/>
<img width="40px" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjEycHgiIGhlaWdodD0iNzkycHgiIHZpZXdCb3g9IjAgMCA2MTIgNzkyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MTIgNzkyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjA0LDg2Yy0zNiwyMy00Nyw2MS00MiwxMjBsLTI3LDNDMTMxLDE0NywxNjEsOTgsMjA0LDg2eiBNMjQ1LDc4YzY0LDgsMTAwLDM1LDExNSwxMDVsLTE2OSwyMEMxODUsMTQwLDE5OSwxMDUsMjQ1LDc4eg0KCSBNMjgwLDY0YzcyLDAsMTIwLDI1LDEzNSwxMTJsLTI3LDNDMzc1LDExMiwzNDEsNzYsMjgwLDY0eiBNNDQyLDE3NEM0MjksNTQsMzE0LDE5LDI0MCw1NmMtODMtMi0xNDAsNzMtMTMzLDE1N2wtOTYsMTBsNTgsNTUwDQoJbDI2MS0yNmMtNDctNTMtMTAwLTEzMy0xMjQtMTUyYy0yNy0yMy0zMC0zMS0yMy00NWMxMi0xNCwyNC0xMiw0NSw0bDQ4LDM3bDcsMzZsMTQtMWwtMzctMjMxYy00LTI0LDEtMzUsMTktNDBjMTgtMiwyNyw3LDMxLDM0DQoJbDIzLDE0MWwxOC0yYy03LTUwLTMtNTcsMTctNjJjMTktMywyOCwxMCwzNSw2NGwxNy0xYy01LTUwLTEtNTcsMTktNjBjMjItMSwyNSwxMiwzMiw2NWwxNiwyYy00LTQwLTQtNTEsMTgtNTNjMjEsMCwyNSwxNCwzMSw1OA0KCWMxNSwxMDAsMTMsMTU0LTYsMTgzbDcyLTdsLTU4LTU1NUw0NDIsMTc0eiIvPg0KPC9zdmc+DQo="/> <h4 class="text-center">{$shop_name}</h4>
PRESTASHOP <div id="error" class="hide alert alert-danger">
</h1> {if isset($errors)}
<h4 class="text-center">{$shop_name}</h4> <h4>
<hr/> {if $nbErrors > 1}
<div id="error" class="hide alert alert-danger"> {l s='There are %d errors.' sprintf=$nbErrors}
{if isset($errors)} {else}{l s='There is %d error.' sprintf=$nbErrors}
<h4>
{if $nbErrors > 1}
{l s='There are %d errors.' sprintf=$nbErrors}
{else}{l s='There is %d error.' sprintf=$nbErrors}
{/if}
</h4>
<ol>
{foreach from=$errors item="error"}
<li>{$error}</li>
{/foreach}
</ol>
{/if}
</div>
{if isset($warningSslMessage)}
<div class="alert alert-warning">{$warningSslMessage}</div>
{/if} {/if}
</h4>
<ol>
{foreach from=$errors item="error"}
<li>{$error}</li>
{/foreach}
</ol>
{/if}
</div>
{if isset($warningSslMessage)}
<div class="alert alert-warning">{$warningSslMessage}</div>
{/if}
</div>
<div class="flip-container">
<div class="flipper">
<div class="front panel">
{if !isset($wrong_folder_name) && !isset($wrong_install_name)} {if !isset($wrong_folder_name) && !isset($wrong_install_name)}
<form action="#" id="login_form" method="post"> <form action="#" id="login_form" method="post">
<div class="form-group"> <div class="form-group">
@@ -105,7 +104,7 @@
</div> </div>
</div> </div>
<hr/> <hr/>
<div class="form-group"> <div class="panel-footer">
<button name="submitLogin" type="submit" tabindex="4" class="btn btn-default btn-lg btn-block ladda-button" data-style="slide-up" data-spinner-color="black" > <button name="submitLogin" type="submit" tabindex="4" class="btn btn-default btn-lg btn-block ladda-button" data-style="slide-up" data-spinner-color="black" >
<span class="ladda-label"> <span class="ladda-label">
<i class="icon-ok text-success"></i> <i class="icon-ok text-success"></i>
@@ -116,8 +115,8 @@
<input type="hidden" name="redirect" id="redirect" value="{$redirect}"/> <input type="hidden" name="redirect" id="redirect" value="{$redirect}"/>
</form> </form>
</div> </div>
<div class="back">
<div class="back panel">
<form action="#" id="forgot_password_form" method="post" class="hide"> <form action="#" id="forgot_password_form" method="post" class="hide">
<div class="alert alert-info"> <div class="alert alert-info">
<h4 class="text-center"> <h4 class="text-center">
@@ -143,9 +142,9 @@
</div> </div>
</div> </div>
<hr/> <hr/>
<div class="form-group"> <div class="panel-footer">
<button href="#" class="btn btn-default show-login-form" tabindex="3"> <button href="#" class="btn btn-default show-login-form" tabindex="3">
<i class="icon-caret-left text-danger"></i> <i class="icon-caret-left"></i>
{l s='Back to login'} {l s='Back to login'}
</button> </button>
<button class="btn btn-default pull-right" name="submitLogin" type="submit" tabindex="2"> <button class="btn btn-default pull-right" name="submitLogin" type="submit" tabindex="2">
@@ -156,9 +155,8 @@
</form> </form>
</div> </div>
</div> </div>
{else} {else}
<div class="col-lg-12"> <div class="alert alert-danger">
<p>{l s='For security reasons, you cannot connect to the Back Office until after you have:'}</p> <p>{l s='For security reasons, you cannot connect to the Back Office until after you have:'}</p>
<ul> <ul>
{if isset($wrong_install_name) && $wrong_install_name == true} {if isset($wrong_install_name) && $wrong_install_name == true}
@@ -175,29 +173,26 @@
</p> </p>
</div> </div>
{/if} {/if}
</div>
<div class="col-md-4 col-md-offset-4">
<p class="text-center text-muted">
<a href="http://www.prestashop.com">
&copy; PrestaShop 2005-{$smarty.now|date_format:"%Y"} - All rights reserved.
</a>
</p>
<p class="text-center">
<a class="link-social link-twitter" href="#" title="Twitter">
<i class="icon-twitter"></i>
</a>
<a class="link-social link-facebook" href="#" title="Facebook">
<i class="icon-facebook"></i>
</a>
<a class="link-social link-github" href="#" title="Github">
<i class="icon-github"></i>
</a>
<a class="link-social link-google" href="#" title="Google">
<i class="icon-google-plus"></i>
</a>
</p>
</div> </div>
</div> </div>
</div> <div id="login-footer">
<p class="text-center text-muted">
<a href="http://www.prestashop.com">
&copy; PrestaShop 2005-{$smarty.now|date_format:"%Y"} - All rights reserved.
</a>
</p>
<p class="text-center">
<a class="link-social link-twitter" href="#" title="Twitter">
<i class="icon-twitter"></i>
</a>
<a class="link-social link-facebook" href="#" title="Facebook">
<i class="icon-facebook"></i>
</a>
<a class="link-social link-github" href="#" title="Github">
<i class="icon-github"></i>
</a>
<a class="link-social link-google" href="#" title="Google">
<i class="icon-google-plus"></i>
</a>
</p>
</div>
js/login.js
+10 -14
View File
@@ -1,6 +1,6 @@
$(document).ready(function() { $(document).ready(function() {
// Initialize events // Initialize events
$("#login_form").validate({ $("#login_form, #forgot_password_form").validate({
rules: { rules: {
"email":{ "email":{
"email": true, "email": true,
@@ -72,25 +72,21 @@ function feedbackSubmit() {
l = Ladda.create( document.querySelector( 'button[type=submit]' ) ); l = Ladda.create( document.querySelector( 'button[type=submit]' ) );
} }
function displayForgotPassword() { function displayForgotPassword() {
$('#error').hide(); $('#error').hide();
$("#login").find('.flip-container').toggleClass("flip");
document.querySelector("#login").toggle("flip"); $("#forgot_password_form").removeClass('hide');
$('#email_forgot').select();
$('#login_form').fadeOut('fast', function () {
$("#forgot_password_form").removeClass('hide').fadeIn('fast');
// Focus on email address forgot field
$('#email_forgot').select();
});
} }
function displayLogin() { function displayLogin() {
$('#error').hide(); $('#error').hide();
$('#forgot_password_form').fadeOut('fast', function () { $("#login").find('.flip-container').toggleClass("flip");
$('#login_form').fadeIn('fast'); //$('#login_form').fadeIn('fast');
// Focus on email address field $('#email').select();
$('#email').select();
});
return false; return false;
} }