From 614b78d3a2ac43fc80bd38d1666fcf6480b9cf6d Mon Sep 17 00:00:00 2001
From: devansh bawari <devansh.bawari419@webkul.com>
Date: Tue, 29 Dec 2020 13:05:09 +0530
Subject: [PATCH] Bootstrap 4 Conversion Completed

---
 .../js/UI/components/product-quick-view.vue   |  78 ++++-----
 .../src/Resources/assets/sass/app.scss        |  13 +-
 .../Resources/assets/sass/components/app.scss |   1 +
 .../Resources/assets/sass/components/rtl.scss |  77 +++------
 .../views/shop/UI/particals.blade.php         |  81 ++++-----
 .../shop/checkout/cart/mini-cart.blade.php    |   2 +-
 .../layouts/top-nav/locale-currency.blade.php |   4 +-
 .../layouts/top-nav/login-section.blade.php   | 157 +++++++++---------
 8 files changed, 191 insertions(+), 222 deletions(-)

diff --git a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/product-quick-view.vue b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/product-quick-view.vue
index 18739fbc8..c852993b3 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/product-quick-view.vue
+++ b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/product-quick-view.vue
@@ -2,50 +2,52 @@
     <div class="modal-parent scrollable">
         <div class="cd-quick-view">
             <template v-if="showProductDetails || true">
-                <div class="col-lg-6 product-gallery">
-                    <ul class="cd-slider" type="none">
-                        <carousel-component
-                            slides-per-page="1"
-                            navigation-enabled="hide"
-                            :slides-count="product.galleryImages.length">
+                <div class="row">
+                    <div class="col-lg-6">
+                        <ul class="cd-slider" type="none">
+                            <carousel-component
+                                slides-per-page="1"
+                                navigation-enabled="hide"
+                                :slides-count="product.galleryImages.length">
 
-                                <slide
-                                    :key="index"
-                                    :slot="`slide-${index}`"
-                                    title=" "
-                                    v-for="(image, index) in product.galleryImages">
+                                    <slide
+                                        :key="index"
+                                        :slot="`slide-${index}`"
+                                        title=" "
+                                        v-for="(image, index) in product.galleryImages">
 
-                                    <li class="selected" @click="showProductDetails = false">
-                                        <img :src="image.medium_image_url" :alt="product.name" />
-                                    </li>
-                                </slide>
-                        </carousel-component>
-                    </ul>
-                </div>
-
-                <div class="col-lg-6 fs16">
-                    <h2 class="fw6 quick-view-name">{{ product.name }}</h2>
-
-                    <div class="product-price" v-html="product.priceHTML"></div>
-
-                    <div
-                        class="product-rating"
-                        v-if="product.totalReviews && product.totalReviews > 0">
-
-                        <star-ratings :ratings="product.avgRating"></star-ratings>
-                        <a class="pl10 unset active-hover" :href="`${$root.baseUrl}/reviews/${product.slug}`">
-                            {{ __('products.reviews-count', {'totalReviews': product.totalReviews}) }}
-                        </a>
+                                        <li class="selected" @click="showProductDetails = false">
+                                            <img :src="image.medium_image_url" :alt="product.name" />
+                                        </li>
+                                    </slide>
+                            </carousel-component>
+                        </ul>
                     </div>
 
-                    <div class="product-rating" v-else>
-                        <span class="fs14" v-text="product.firstReviewText"></span>
-                    </div>
+                    <div class="col-lg-6 fs16">
+                        <h2 class="fw6 quick-view-name">{{ product.name }}</h2>
 
-                    <p class="pt14 fs14 description-text" v-html="product.shortDescription"></p>
+                        <div class="product-price" v-html="product.priceHTML"></div>
 
-                    <div class="product-actions">
-                        <vnode-injector :nodes="getDynamicHTML(product.addToCartHtml)"></vnode-injector>
+                        <div
+                            class="product-rating"
+                            v-if="product.totalReviews && product.totalReviews > 0">
+
+                            <star-ratings :ratings="product.avgRating"></star-ratings>
+                            <a class="pl10 unset active-hover" :href="`${$root.baseUrl}/reviews/${product.slug}`">
+                                {{ __('products.reviews-count', {'totalReviews': product.totalReviews}) }}
+                            </a>
+                        </div>
+
+                        <div class="product-rating" v-else>
+                            <span class="fs14" v-text="product.firstReviewText"></span>
+                        </div>
+
+                        <p class="pt14 fs14 description-text" v-html="product.shortDescription"></p>
+
+                        <div class="product-actions">
+                            <vnode-injector :nodes="getDynamicHTML(product.addToCartHtml)"></vnode-injector>
+                        </div>
                     </div>
                 </div>
 
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
index 0307f6d61..ba7c608cb 100755
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
@@ -195,6 +195,7 @@ body {
             display: table;
             min-width: 150px;
             cursor: pointer;
+            float: right;
             text-align: right;
             padding-top: 5px;
 
@@ -482,6 +483,7 @@ header {
     .mini-cart-container {
         height: 50px;
         padding: 5px 17px;
+        display: inline-block;
 
         #mini-cart {
             .mini-cart-content {
@@ -511,15 +513,14 @@ header {
                     }
                 }
             }
-
-            // transform: scale(1) rotateZ(-180deg);
-            // transition: transform .15s,opacity .15s;
         }
+    }
 
-        ~ .compare-btn,
-        ~ .wishlist-btn {
+    .left-wrapper {
+        float: right;
+
+        .compare-btn, .wishlist-btn {
             height: 50px;
-            float: right;
             font-size: 18px;
             font-weight: 600;
             padding: 10px 16px 6px 16px;
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
index efc3b18f6..c7670f2c9 100755
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
@@ -837,6 +837,7 @@
                     }
 
                     a {
+                        display: block;
                         padding: 10px 15px;
                     }
                 }
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/rtl.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/rtl.scss
index f37402930..5e959cea0 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/rtl.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/rtl.scss
@@ -44,6 +44,7 @@ body {
                         }
 
                         .select-icon {
+                            top: 12px;
                             left: 8px;
                         }
                     }
@@ -57,10 +58,18 @@ body {
             }
 
             .mini-cart-container {
-                ~ .compare-btn,
-                ~ .wishlist-btn {
-                    float: left;
+                #mini-cart {
+                    .badge {
+                        top: -8px;
+                        left: 73%;
+                    }
+                }
+            }
 
+            .left-wrapper {
+                float: left;
+
+                .compare-btn, .wishlist-btn {
                     .badge-container {
                         .badge {
                             top: -28px;
@@ -68,21 +77,6 @@ body {
                         }
                     }
                 }
-
-                ~ .wishlist-btn , ~ .compare-btn {
-                    .badge-container {
-                        .badge {
-                            left: 20px;
-                        }
-                    }
-                }
-
-                #mini-cart {
-                    .badge {
-                        top: -8px;
-                        left: 73%;
-                    }
-                }
             }
         }
 
@@ -109,8 +103,8 @@ body {
             }
         }
 
-        .main-content-wrapper .vc-header
-
+        .main-content-wrapper
+        .vc-header
         .mini-cart-container {
             #mini-cart {
                 .badge {
@@ -123,30 +117,6 @@ body {
                     vertical-align: top;
                 }
             }
-
-            ~ .compare-btn,
-            ~ .wishlist-btn {
-                .badge-container {
-                    top: -6px;
-                    left: 20px;
-                    vertical-align: top;
-
-                    .badge {
-                        top: 0;
-                        left: 0;
-                    }
-                }
-            }
-
-            ~ .compare-btn {
-                left: 15%;
-                float: left;
-                position: relative;
-            }
-
-            ~ .wishlist-btn {
-                float: right;
-            }
         }
 
         .form-container {
@@ -190,15 +160,20 @@ body {
         #top {
             #account {
                 .welcome-content {
+                    float: left;
+
                     i {
                         text-align: left;
                     }
                 }
 
                 + .account-modal {
-                    left: 0;
-                    right: 0;
-                    margin-left: 0;
+                    width: 100% !important;
+                    right: unset;
+
+                    .modal-content {
+                        float: left;
+                    }
                 }
             }
 
@@ -207,14 +182,6 @@ body {
                     right: 20px;
                 }
             }
-
-            #account {
-                + .account-modal {
-                    .modal-content {
-                        float: left;
-                    }
-                }
-            }
         }
 
         #cart-modal-content {
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php
index 8c9ff9d61..ef291a99f 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php
@@ -125,50 +125,51 @@
                 </div>
 
                 <div class="col-lg-7 col-md-12 vc-full-screen">
-                    {!! view_render_event('bagisto.shop.layout.header.cart-item.before') !!}
-                        @include('shop::checkout.cart.mini-cart')
-                    {!! view_render_event('bagisto.shop.layout.header.cart-item.after') !!}
+                    <div class="left-wrapper">
+                        @php
+                            $showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
 
-                    @php
-                        $showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;
+                            $showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;
+                        @endphp
 
-                        $showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
+                        {!! view_render_event('bagisto.shop.layout.header.wishlist.before') !!}
+                            @if($showWishlist)
+                                <a class="wishlist-btn unset" :href="`{{ route('customer.wishlist.index') }}`">
+                                    <i class="material-icons">favorite_border</i>
+                                    <div class="badge-container" v-if="wishlistCount > 0">
+                                        <span class="badge" v-text="wishlistCount"></span>
+                                    </div>
+                                    <span>{{ __('shop::app.layouts.wishlist') }}</span>
+                                </a>
+                            @endif
+                        {!! view_render_event('bagisto.shop.layout.header.wishlist.after') !!}
 
-                    @endphp
+                        {!! view_render_event('bagisto.shop.layout.header.compare.before') !!}
+                            @if ($showCompare)
+                                <a
+                                    class="compare-btn unset"
+                                    @auth('customer')
+                                        href="{{ route('velocity.customer.product.compare') }}"
+                                    @endauth
 
-                    {!! view_render_event('bagisto.shop.layout.header.compare.before') !!}
-                        @if ($showCompare)
-                            <a
-                                class="compare-btn unset"
-                                @auth('customer')
-                                    href="{{ route('velocity.customer.product.compare') }}"
-                                @endauth
+                                    @guest('customer')
+                                        href="{{ route('velocity.product.compare') }}"
+                                    @endguest
+                                    >
 
-                                @guest('customer')
-                                    href="{{ route('velocity.product.compare') }}"
-                                @endguest
-                                >
+                                    <i class="material-icons">compare_arrows</i>
+                                    <div class="badge-container" v-if="compareCount > 0">
+                                        <span class="badge" v-text="compareCount"></span>
+                                    </div>
+                                    <span>{{ __('velocity::app.customer.compare.text') }}</span>
+                                </a>
+                            @endif
+                        {!! view_render_event('bagisto.shop.layout.header.compare.after') !!}
 
-                                <i class="material-icons">compare_arrows</i>
-                                <div class="badge-container" v-if="compareCount > 0">
-                                    <span class="badge" v-text="compareCount"></span>
-                                </div>
-                                <span>{{ __('velocity::app.customer.compare.text') }}</span>
-                            </a>
-                        @endif
-                    {!! view_render_event('bagisto.shop.layout.header.compare.after') !!}
-
-                    {!! view_render_event('bagisto.shop.layout.header.wishlist.before') !!}
-                        @if($showWishlist)
-                            <a class="wishlist-btn unset" :href="`{{ route('customer.wishlist.index') }}`">
-                                <i class="material-icons">favorite_border</i>
-                                <div class="badge-container" v-if="wishlistCount > 0">
-                                    <span class="badge" v-text="wishlistCount"></span>
-                                </div>
-                                <span>{{ __('shop::app.layouts.wishlist') }}</span>
-                            </a>
-                        @endif
-                    {!! view_render_event('bagisto.shop.layout.header.wishlist.after') !!}
+                        {!! view_render_event('bagisto.shop.layout.header.cart-item.before') !!}
+                            @include('shop::checkout.cart.mini-cart')
+                        {!! view_render_event('bagisto.shop.layout.header.cart-item.after') !!}
+                    </div>
                 </div>
             </div>
         </div>
@@ -449,10 +450,10 @@
                                             this.__('shop.general.alert.error'),
                                             "{{ __('shop::app.common.error') }}"
                                         );
-                                    });                                    
+                                    });
                                 } else {
                                         imageInput.value = '';
-                                        
+
                                         window.showAlert(
                                             `alert-danger`,
                                             this.__('shop.general.alert.error'),
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/checkout/cart/mini-cart.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/checkout/cart/mini-cart.blade.php
index f3e72a0b5..df0db3e4b 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/checkout/cart/mini-cart.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/checkout/cart/mini-cart.blade.php
@@ -1,4 +1,4 @@
-<div class="mini-cart-container float-right">
+<div class="mini-cart-container">
     <mini-cart
         view-cart="{{ route('shop.checkout.cart.index') }}"
         cart-text="{{ __('shop::app.minicart.view-cart') }}"
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/layouts/top-nav/locale-currency.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/layouts/top-nav/locale-currency.blade.php
index ad71940b1..fd7ebd6d7 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/layouts/top-nav/locale-currency.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/layouts/top-nav/locale-currency.blade.php
@@ -25,7 +25,7 @@
 @endphp
 
 {!! view_render_event('bagisto.shop.layout.header.locale.before') !!}
-    <div class="float-left">
+    <div class="d-inline-block">
         <div class="dropdown">
             @php
                 $localeImage = null;
@@ -79,7 +79,7 @@
 {!! view_render_event('bagisto.shop.layout.header.currency-item.before') !!}
 
     @if (core()->getCurrentChannel()->currencies->count() > 1)
-        <div class="float-left">
+        <div class="d-inline-block">
             <div class="dropdown">
                <select
                     class="btn btn-link dropdown-toggle control locale-switcher styled-select"
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/layouts/top-nav/login-section.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/layouts/top-nav/login-section.blade.php
index 91fd52f51..1ee8cde56 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/layouts/top-nav/login-section.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/layouts/top-nav/login-section.blade.php
@@ -6,8 +6,7 @@
     <script type="text/x-template" id="login-header-template">
         <div class="dropdown">
             <div id="account">
-
-                <div class="welcome-content float-right" @click="togglePopup">
+                <div class="d-inline-block welcome-content" @click="togglePopup">
                     <i class="material-icons align-vertical-top">perm_identity</i>
                     <span class="text-center">
                         @guest('customer')
@@ -23,91 +22,89 @@
             </div>
 
             <div class="account-modal sensitive-modal hide mt5">
-                <!--Content-->
-                    @guest('customer')
-                        <div class="modal-content">
-                            <!--Header-->
-                            <div class="modal-header no-border pb0">
-                                <label class="fs18 grey">{{ __('shop::app.header.title') }}</label>
+                @guest('customer')
+                    <div class="modal-content">
+                        <!-- header -->
+                        <div class="modal-header no-border pb0">
+                            <label class="fs18 grey">{{ __('shop::app.header.title') }}</label>
 
-                                <button type="button" class="close disable-box-shadow" data-dismiss="modal" aria-label="Close">
-                                    <span aria-hidden="true" class="white-text fs20" @click="togglePopup">×</span>
-                                </button>
+                            <button type="button" class="close disable-box-shadow" data-dismiss="modal" aria-label="Close">
+                                <span aria-hidden="true" class="white-text fs20" @click="togglePopup">×</span>
+                            </button>
+                        </div>
+
+                        <!-- body -->
+                        <div class="pl10 fs14">
+                            <p>{{ __('shop::app.header.dropdown-text') }}</p>
+                        </div>
+
+                        <!-- footer -->
+                        <div class="modal-footer">
+                            <div>
+                                <a href="{{ route('customer.session.index') }}">
+                                    <button
+                                        type="button"
+                                        class="theme-btn fs14 fw6">
+
+                                        {{ __('shop::app.header.sign-in') }}
+                                    </button>
+                                </a>
                             </div>
 
-                            <!--Body-->
-                            <div class="pl10 fs14">
-                                <p>{{ __('shop::app.header.dropdown-text') }}</p>
-                            </div>
-
-                            <!--Footer-->
-                            <div class="modal-footer">
-                                <div>
-                                    <a href="{{ route('customer.session.index') }}">
-                                        <button
-                                            type="button"
-                                            class="theme-btn fs14 fw6">
-
-                                            {{ __('shop::app.header.sign-in') }}
-                                        </button>
-                                    </a>
-                                </div>
-
-                                <div>
-                                    <a href="{{ route('customer.register.index') }}">
-                                        <button
-                                            type="button"
-                                            class="theme-btn fs14 fw6">
-                                            {{ __('shop::app.header.sign-up') }}
-                                        </button>
-                                    </a>
-                                </div>
+                            <div>
+                                <a href="{{ route('customer.register.index') }}">
+                                    <button
+                                        type="button"
+                                        class="theme-btn fs14 fw6">
+                                        {{ __('shop::app.header.sign-up') }}
+                                    </button>
+                                </a>
                             </div>
                         </div>
-                    @endguest
+                    </div>
+                @endguest
 
-                    @auth('customer')
-                        <div class="modal-content customer-options">
-                            <div class="customer-session">
-                                <label class="">
-                                    {{ auth()->guard('customer')->user()->first_name }}
-                                </label>
-                            </div>
-
-                            <ul type="none">
-                                <li>
-                                    <a href="{{ route('customer.profile.index') }}" class="unset">{{ __('shop::app.header.profile') }}</a>
-                                </li>
-
-                                <li>
-                                    <a href="{{ route('customer.orders.index') }}" class="unset">{{ __('velocity::app.shop.general.orders') }}</a>
-                                </li>
-
-                                @php
-                                    $showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;
-
-                                    $showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
-                                @endphp
-
-                                @if ($showWishlist)
-                                    <li>
-                                        <a href="{{ route('customer.wishlist.index') }}" class="unset">{{ __('shop::app.header.wishlist') }}</a>
-                                    </li>
-                                @endif
-
-                                @if ($showCompare)
-                                    <li>
-                                        <a href="{{ route('velocity.customer.product.compare') }}" class="unset">{{ __('velocity::app.customer.compare.text') }}</a>
-                                    </li>
-                                @endif
-
-                                <li>
-                                    <a href="{{ route('customer.session.destroy') }}" class="unset">{{ __('shop::app.header.logout') }}</a>
-                                </li>
-                            </ul>
+                @auth('customer')
+                    <div class="modal-content customer-options">
+                        <div class="customer-session">
+                            <label class="">
+                                {{ auth()->guard('customer')->user()->first_name }}
+                            </label>
                         </div>
-                    @endauth
-                <!--/.Content-->
+
+                        <ul type="none">
+                            <li>
+                                <a href="{{ route('customer.profile.index') }}" class="unset">{{ __('shop::app.header.profile') }}</a>
+                            </li>
+
+                            <li>
+                                <a href="{{ route('customer.orders.index') }}" class="unset">{{ __('velocity::app.shop.general.orders') }}</a>
+                            </li>
+
+                            @php
+                                $showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;
+
+                                $showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
+                            @endphp
+
+                            @if ($showWishlist)
+                                <li>
+                                    <a href="{{ route('customer.wishlist.index') }}" class="unset">{{ __('shop::app.header.wishlist') }}</a>
+                                </li>
+                            @endif
+
+                            @if ($showCompare)
+                                <li>
+                                    <a href="{{ route('velocity.customer.product.compare') }}" class="unset">{{ __('velocity::app.customer.compare.text') }}</a>
+                                </li>
+                            @endif
+
+                            <li>
+                                <a href="{{ route('customer.session.destroy') }}" class="unset">{{ __('shop::app.header.logout') }}</a>
+                            </li>
+                        </ul>
+                    </div>
+                @endauth
             </div>
         </div>
     </script>