storefront header fixed

This commit is contained in:
prashant-webkul 2018-10-26 11:57:57 +05:30
parent cc9ad2c8ad
commit 74605cbeff
5 changed files with 73 additions and 52 deletions

View File

@ -655,13 +655,18 @@ section.slider-block {
flex-direction: row;
justify-content: flex-end;
align-items: center;
// cursor: pointer;
.currency-switcher {
float: right;
border-right: 2px solid $border-color;
cursor: pointer;
.dropdown-toggle {
line-height: 25px;
margin-left: 14px;
margin-right: 14px;
}
.dropdown-list {
width: 100px;
top: 37px;
@ -675,12 +680,20 @@ section.slider-block {
ul.account-dropdown-container {
float: right;
border-right: 2px solid $border-color;
cursor: pointer;
li.account-dropdown {
display: flex;
flex-direction: row;
margin-right: 14px;
margin-left: 14px;
margin-right: 14px;
.account {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.dropdown-list {
width: 300px;

View File

@ -7,6 +7,17 @@ return [
'new-products' => 'New Products'
],
'header' => [
'title' => 'Account',
'dropdown-text' => 'Manage Cart, Orders & Wishlist.',
'sign-in' => 'Sign In',
'sign-up' => 'Sign Up',
'profile' => 'Profile',
'wishlist' => 'Wishlist',
'cart' => 'Cart',
'logout' => 'Logout'
],
'footer' => [
'subscribe-newsletter' => 'Subscribe Newsletter',
'subscribe' => 'Subscribe',

View File

@ -26,9 +26,9 @@
<div class="right-content">
@if (core()->getCurrentChannel()->currencies->count() > 1)
<div class="currency-switcher">
<ul class="currency-switcher">
<div class="dropdown-toggle">
USD
{{ core()->getCurrentCurrencyCode() }}
<i class="icon arrow-down-icon active"></i>
</div>
@ -43,27 +43,25 @@
</ul>
</div>
</div>
</div>
</ul>
@endif
<ul class="account-dropdown-container">
<li class="account-dropdown">
<div class="dropdown-toggle">
<div style="display: inline-flex; align-items: center; cursor: pointer;">
<span class="icon account-icon" style="margin-top: 5px;"></span>
<i class="icon arrow-down-icon active"></i>
</div>
<div class="dropdown-toggle account">
<span class="icon account-icon"></span>
<i class="icon arrow-down-icon active"></i>
</div>
@guest('customer')
<div class="dropdown-list bottom-right" style="display: none;">
<div class="dropdown-container">
<label>Account</label><br/>
<span style="font-size: 12px;">Manage Cart, Orders & Wishlist.</span>
<label>{{ __('shop::app.header.title') }}</label><br/>
<span style="font-size: 12px;">{{ __('shop::app.header.dropdown-text') }}</span>
<ul class="account-dropdown-list">
<li><a class="btn btn-primary btn-sm" href="{{ route('customer.session.index') }}">Sign In</a></li>
<li><a class="btn btn-primary btn-sm" href="{{ route('customer.session.index') }}">{{ __('shop::app.header.sign-in') }}</a></li>
<li><a class="btn btn-primary btn-sm" href="{{ route('customer.register.index') }}">Sign Up</a></li>
<li><a class="btn btn-primary btn-sm" href="{{ route('customer.register.index') }}">{{ __('shop::app.header.sign-up') }}</a></li>
</ul>
</div>
@ -74,32 +72,27 @@
@auth('customer')
<div class="dropdown-list bottom-right" style="display: none; max-width: 230px;">
<div class="dropdown-container">
<label>Account</label>
<label>{{ __('shop::app.header.title') }}</label>
<ul>
<li><a href="{{ route('customer.profile.index') }}">Profile</a></li>
<li><a href="{{ route('customer.profile.index') }}">{{ __('shop::app.header.profile') }}</a></li>
<li><a href="{{ route('customer.wishlist.index') }}">Wishlist</a></li>
<li><a href="{{ route('customer.wishlist.index') }}">{{ __('shop::app.header.wishlist') }}</a></li>
<li><a href="{{ route('shop.checkout.cart.index') }}">Cart</a></li>
<li><a href="{{ route('shop.checkout.cart.index') }}">{{ __('shop::app.header.cart') }}</a></li>
<li><a href="{{ route('customer.session.destroy') }}">Logout</a></li>
<li><a href="{{ route('customer.session.destroy') }}">{{ __('shop::app.header.logout') }}</a></li>
</ul>
</div>
</div>
@endauth
</li>
</ul>
<ul class="cart-dropdown-container">
@inject ('productImageHelper', 'Webkul\Product\Helpers\ProductImage')
<li class="cart-dropdown">
<span class="icon cart-icon"></span>
@include('shop::checkout.cart.mini-cart')
</li>
</ul>
@ -109,22 +102,18 @@
<ul class="resp-account-dropdown-container">
<li class="account-dropdown">
<div class="dropdown-toggle">
<span class="icon account-icon"></span>
</div>
@guest
<div class="dropdown-list bottom-right" style="display: none;">
<div class="dropdown-container">
<label>Account</label>
<label>{{ __('shop::app.header.title') }}</label>
<ul>
<li><a href="{{ route('customer.session.index') }}">Sign In</a></li>
<li><a href="{{ route('customer.register.index') }}">Sign Up</a></li>
<li><a href="{{ route('customer.session.index') }}">{{ __('shop::app.header.sign-in') }}</a></li>
<li><a href="{{ route('customer.register.index') }}">{{ __('shop::app.header.sign-up') }}</a></li>
</ul>
</div>
</div>
@ -134,16 +123,16 @@
<div class="dropdown-list bottom-right" style="display: none;">
<div class="dropdown-container">
<label>Account</label>
<label>{{ __('shop::app.header.title') }}</label>
<ul>
<li><a href="{{ route('customer.profile.index') }}">Profile</a></li>
<li><a href="{{ route('customer.profile.index') }}">{{ __('shop::app.header.profile') }}</a></li>
<li><a href="{{ route('customer.wishlist.index') }}">Wishlist</a></li>
<li><a href="{{ route('customer.wishlist.index') }}">{{ __('shop::app.header.wishlist') }}</a></li>
<li><a href="{{ route('shop.checkout.cart.index') }}">Cart</a></li>
<li><a href="{{ route('shop.checkout.cart.index') }}">{{ __('shop::app.header.cart') }}</a></li>
<li><a href="{{ route('customer.session.destroy') }}">Logout</a></li>
<li><a href="{{ route('customer.session.destroy') }}">{{ __('shop::app.header.logout') }}</a></li>
</ul>
</div>

View File

@ -853,6 +853,12 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
cursor: pointer;
}
.header .header-top div.right-content .currency-switcher .dropdown-toggle {
line-height: 25px;
margin-left: 14px;
margin-right: 14px;
}
.header .header-top div.right-content .currency-switcher .dropdown-list {
width: 100px;
top: 37px;
@ -865,6 +871,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
.header .header-top div.right-content ul.account-dropdown-container {
float: right;
border-right: 2px solid #C7C7C7;
cursor: pointer;
}
.header .header-top div.right-content ul.account-dropdown-container li.account-dropdown {
@ -875,8 +882,24 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin-right: 14px;
margin-left: 14px;
margin-right: 14px;
}
.header .header-top div.right-content ul.account-dropdown-container li.account-dropdown .account {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header .header-top div.right-content ul.account-dropdown-container li.account-dropdown .dropdown-list {

File diff suppressed because one or more lines are too long