Merge pull request #850 from abhishek-webkul/gli-1505

Added: Language dropdown on maintenance page
This commit is contained in:
Rohit Jain
2024-01-25 17:17:09 +05:30
committed by GitHub
4 changed files with 194 additions and 4 deletions

View File

@@ -795,6 +795,9 @@ class FrontControllerCore extends Controller
'HOOK_MAINTENANCE' => Hook::exec('displayMaintenance', array()),
'allowEmployee' => Configuration::get('PS_ALLOW_EMP'),
'maintenance' => $this->context->link->getAdminLink('AdminMaintenance', false),
'languages' => Language::getLanguages(true, $this->context->shop->id),
'lang_iso' => $this->context->language->iso_code,
'link' => $this->context->link,
));
// If the controller is a module, then getTemplatePath will try to find the template in the modules, so we need to instanciate a real frontcontroller
$front_controller = preg_match('/ModuleFrontController$/', get_class($this)) ? new FrontController() : $this;

View File

@@ -18,4 +18,18 @@ $(document).ready(function(){
$("input[type='radio'][name='PS_SHOP_ENABLE']").change(function() {
$("#conf_id_PS_ALLOW_EMP").toggle('slow');
});
});
// manage dropdowns
$(document).on('click', function (e) {
const closestDropdown = $(e.target).closest('.dropdown');
if (closestDropdown.length) {
if ($(e.target).closest('.dropdown-toggle').length) {
$('.dropdown').not(closestDropdown).removeClass('open');
closestDropdown.toggleClass('open');
}
} else {
$('.dropdown').removeClass('open');
}
});
});

View File

@@ -129,6 +129,154 @@ button[type='button'].cancel-login {
color: #FFF;
}
.header-container {
display: flex;
justify-content: center;
align-items: center;
margin-right: auto;
margin-left: auto;
position: relative;
}
.header-container.multilang .language-selector-wrap {
position: absolute;
right: 0;
}
@media (min-width: 768px) {
.header-container {
width: 750px;
}
}
@media (min-width: 992px) {
.header-container {
width: 970px;
}
}
@media (min-width: 1200px) {
.header-container {
width: 1170px;
}
}
.header-container img {
display: block;
max-height: 60px;
max-width: 100%;
margin: 0 auto;
}
.header-container .language-selector-wrap {
display: flex;
justify-content: end;
}
/* language-selector - start */
.dropdown {
position: relative;
}
.dropdown-toggle {
display: inline-block;
background-color: transparent;
padding: 0;
margin-bottom: 0;
font-size: 14px;
font-weight: bold;
color: #333;
line-height: 1.42857;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 0px;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.dropdown-toggle:focus {
outline: 0;
}
.dropdown-toggle .caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 0;
vertical-align: middle;
border-top-color: white;
border-top: 4px solid #000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-bottom: 0 dotted;
content: "";
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333333;
text-decoration: none;
white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #fff;
background-color: #337ab7;
outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: #777777;
pointer-events: none;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.open > .dropdown-menu {
display: block;
}
.open > a {
outline: 0;
}
/* language-selector - end */
#maintenance .logo {
padding: 12px;
text-align: center; }

View File

@@ -45,9 +45,34 @@
<body>
<div id="maintenance">
<div class="logo">
<img src="{$logo_url}" {if $logo_image_width}width="{$logo_image_width}" {/if}
{if $logo_image_height}height="{$logo_image_height}" {/if} alt="logo" />
<div class="header-container{if count($languages) > 1} multilang{/if}">
<div class="logo-container">
<img src="{$logo_url}" alt="logo" />
</div>
{if count($languages) > 1}
<div class="language-selector-wrap">
<div class="dropdown">
{foreach from=$languages item=language}
{if $language.iso_code == $lang_iso}
<button class="dropdown-toggle" type="button" data-toggle="dropdown">
{$language.name|regex_replace:'/\s\(.*\)$/':''}
<span class="caret"></span>
</button>
{/if}
{/foreach}
<ul class="dropdown-menu">
{foreach from=$languages item=language}
<li {if $language.iso_code == $lang_iso}class="disabled"{/if}>
<a href="{$link->getLanguageLink($language.id_lang)|escape:'html':'UTF-8'}" title="{$language.name}">
<span>{$language.name|regex_replace:'/\s\(.*\)$/':''}</span>
</a>
</li>
{/foreach}
</ul>
</div>
</div>
{/if}
</div>
<div class="margin-l-r">
{if isset($errors) && $errors}