Project-Pro/wyczarujprezent.pl
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor social login button styles and update text for Facebook login

Browse Source 
- Updated CSS for social login buttons to improve layout and hover effects.
- Changed the text for the Facebook login button from "Sign in with Facebook" to "Zaloguj się za pomocą Facebook" for localization.
- Adjusted JavaScript to reflect the new button text.
This commit is contained in:
Jacek Pyziak
2025-10-31 00:29:49 +01:00
parent c32410eefd
commit d4df30d692
6 changed files with 6988 additions and 869 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
modules/leoquicklogin/views/templates/front/sociallogin_form.tpl
View File

@@ -1,4 +1,4 @@
{*
{*
* @Module Name: Leo Quick Login
* @Website: leotheme.com.com - prestashop template provider
* @author Leotheme <leotheme@gmail.com>
@@ -13,8 +13,8 @@
<!--
<div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="false" scope="public_profile,email" onlogin="checkLoginState();"></div>
-->
<button class="btn social-login-bt facebook-login-bt" onclick="doFbLogin();"><span class="fa fa-facebook"></span>{if $show_button_text}{l s='Sign in with Facebook' mod='leoquicklogin'}{/if}</button>
<button class="btn social-login-bt facebook-login-bt" onclick="doFbLogin();"><span class="fa fa-facebook"></span>{if $show_button_text}{l s='Zaloguj się za pomocą Facebook' mod='leoquicklogin'}{/if}</button>
{/if}
<!--
<div class="g-signin2" data-scope="profile email" data-longtitle="true" data-theme="dark" data-onsuccess="googleSignIn" data-onfailure="googleFail"></div>

717
modules/thecheckout/views/css/front.less.css
View File

File diff suppressed because one or more lines are too long

107
modules/thecheckout/views/css/includes/social-login-page.css
View File

@@ -9,64 +9,63 @@
*/
#tc-social-logins {
display: flex;
justify-content: center;
margin-bottom: 15px;
& .tc-social-login-btn {
margin: 0 2px;
cursor: not-allowed;
position: relative;
text-align: left;
border-radius: 4px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #3c4043;
border: 1px solid #dadce0;
padding: 11px 11px 8px 40px;
font-size: 14px;
font-family: "Roboto", sans-serif;
font-weight: 500;
max-width: 100%;
width: 240px;
display: none;
&.enabled {
cursor: pointer;
display: inline-block;
}
display: flex;
justify-content: center;
margin-bottom: 15px;
& span.social-logo {
position: absolute;
display: inline-block;
left: 0;
padding: 8px 7px 7px 8px;
top: 1px;
bottom: 1px;
text-align: center;
& .facebook-logo {
background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='266.893px' height='266.895px' viewBox='0 0 266.893 266.895' enable-background='new 0 0 266.893 266.895' xml:space='preserve'%3e%3cpath id='Blue_1_' fill='%233C5A99' d='M248.082,262.307c7.854,0,14.223-6.369,14.223-14.225V18.812 c0-7.857-6.368-14.224-14.223-14.224H18.812c-7.857,0-14.224,6.367-14.224,14.224v229.27c0,7.855,6.366,14.225,14.224,14.225 H248.082z'/%3e%3cpath id='f' fill='%23FFFFFF' d='M182.409,262.307v-99.803h33.499l5.016-38.895h-38.515V98.777c0-11.261,3.127-18.935,19.275-18.935 l20.596-0.009V45.045c-3.562-0.474-15.788-1.533-30.012-1.533c-29.695,0-50.025,18.126-50.025,51.413v28.684h-33.585v38.895h33.585 v99.803H182.409z'/%3e%3c/svg%3e");
}
& .tc-social-login-btn {
margin: 0 2px;
cursor: not-allowed;
position: relative;
text-align: left;
border-radius: 4px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #3c4043;
border: 1px solid #dadce0;
padding: 0 11px 0 40px;
font-size: 14px;
font-family: "Roboto", sans-serif;
font-weight: 500;
max-width: 100%;
width: 240px;
display: none;
height: 40px;
& > span {
display: inline-block;
width: 21px;
height: 21px;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
}
&:hover {
border-color: #d2e3fc;
background-color: #f8faff;
}
&.enabled {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
}
& span.social-logo {
position: absolute;
display: inline-block;
left: 0;
padding: 8px 7px 7px 8px;
top: 1px;
bottom: 1px;
text-align: center;
& .facebook-logo {
background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='266.893px' height='266.895px' viewBox='0 0 266.893 266.895' enable-background='new 0 0 266.893 266.895' xml:space='preserve'%3e%3cpath id='Blue_1_' fill='%233C5A99' d='M248.082,262.307c7.854,0,14.223-6.369,14.223-14.225V18.812 c0-7.857-6.368-14.224-14.223-14.224H18.812c-7.857,0-14.224,6.367-14.224,14.224v229.27c0,7.855,6.366,14.225,14.224,14.225 H248.082z'/%3e%3cpath id='f' fill='%23FFFFFF' d='M182.409,262.307v-99.803h33.499l5.016-38.895h-38.515V98.777c0-11.261,3.127-18.935,19.275-18.935 l20.596-0.009V45.045c-3.562-0.474-15.788-1.533-30.012-1.533c-29.695,0-50.025,18.126-50.025,51.413v28.684h-33.585v38.895h33.585 v99.803H182.409z'/%3e%3c/svg%3e");
}
&>span {
display: inline-block;
width: 21px;
height: 21px;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
}
&:hover {
border-color: #d2e3fc;
background-color: #f8faff;
}
}
}

2
modules/thecheckout/views/js/includes/social-login-page.js
View File

@@ -10,7 +10,7 @@
document.addEventListener('DOMContentLoaded', function(event) {
$('#login-form').before('<div id="tc-social-logins">' +
'<div id="tc-facebook-signin" class="tc-social-login-btn"><span class="social-logo"><span class="facebook-logo"></span></span>'+i18_signInWithFB+'</div>' +
'<div id="tc-facebook-signin" class="tc-social-login-btn"><span class="social-logo"><span class="facebook-logo"></span></span>Zaloguj się za pomocą Facebook</div>' +
'<div id="tc-google-signin"></div>' +
'</div>')
});

2
modules/thecheckout/views/templates/front/blocks/login-form.tpl
View File

@@ -43,7 +43,7 @@
{/if}
{if $z_tc_config->social_login_fb && $z_tc_config->social_login_fb_app_id && $z_tc_config->social_login_fb_app_secret}
{*<div class="fb-login-button" data-max-rows="1" data-onlogin="fb_checkLoginState();" data-size="medium" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="false"></div>*}
<div id="tc-facebook-signin" class="tc-social-login-btn"><span class="social-logo"><span class="facebook-logo"></span></span>{l s='Sign in with Facebook' mod='thecheckout'}</div>
<div id="tc-facebook-signin" class="tc-social-login-btn"><span class="social-logo"><span class="facebook-logo"></span></span>{l s='Zaloguj się za pomocą Facebook' mod='thecheckout'}</div>
{/if}
{if $z_tc_config->social_login_google && $z_tc_config->social_login_google_client_id && $z_tc_config->social_login_google_client_secret}
{*Google+ login <div class="g-signin2" data-onsuccess="tc_onSignIn"></div>*}