merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor css

This commit is contained in:
jitendra 2018-10-18 10:25:45 +05:30
parent b02d87626a
commit ef69538ccb
12 changed files with 349 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
packages/Webkul/Shop/src/Resources/assets/sass/app.scss vendored
View File

@ -17,7 +17,113 @@
display: block;
}
// product card, requires no changes for responsiveness.
.product-grid-4 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
grid-auto-rows: auto;
grid-column-gap: 48px;
grid-row-gap: 15px;
}
.product-grid-3 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
grid-gap: 27px;
grid-auto-rows: auto;
}
@media only screen and (max-width: 854px) {
.product-grid-4 {
grid-template-columns: 29.5% 29.5% 29.5%;
grid-column-gap: 35px;
}
}
@media only screen and (max-width: 653px) {
.product-grid-4 {
grid-template-columns: 48.5% 48.5%;
grid-column-gap: 17px;
}
}
.product-card {
position: relative;
.product-image {
max-height: 350px;
max-width: 280px;
margin-bottom: 10px;
background: #F2F2F2;
img {
display: block;
width: 100%;
}
}
.product-name {
margin-bottom: 14px;
width: 100%;
color: $font-color;
a {
color: $font-color;
}
}
.product-description {
display: none;
}
.product-ratings {
width: 100%;
.icon {
width: 16px;
height: 16px;
}
}
.cart-wish-wrap {
display: inline-flex;
justify-content: flex-start;
align-items: center;
height: 40px;
.addtocart {
margin-right: 10px;
text-transform: uppercase;
}
.add-to-wishlist {
margin-top: 5px;
}
}
.sticker {
border-radius: 100px;
position: absolute;
top: 10px;
left: 10px;
text-transform: uppercase;
padding: 4px 13px;
font-size: 14px;
color: #fff;
&.sale {
background: #FF6472;
}
&.new {
background: #2ED04C;
}
}
}
.product-list {
min-height: 200px;
.product-card {
width: 100%;
display: inline-block;
@ -43,6 +149,12 @@
margin-bottom: 0;
}
}
&.empty {
h2 {
font-size: 20px;
}
}
}
section.featured-products {
@ -182,11 +294,8 @@ section.slider-block {
//responsive css for slider
@media only screen and (max-width: 770px) {
section.slider-block {
div.slider-content {
div.slider-control {
display: flex;
justify-content:space-between;
@ -997,6 +1106,7 @@ section.product-detail {
width: 49%;
background: black;
white-space: nowrap;
text-transform: uppercase;
}
.buynow {
@ -1004,6 +1114,7 @@ section.product-detail {
width: 49%;
float:right;
white-space: nowrap;
text-transform: uppercase;
}
}
}

82
packages/Webkul/Shop/src/Resources/assets/sass/components.scss vendored
View File

@ -1,86 +1,4 @@
.product-card {
.product-image {
max-height: 350px;
max-width: 280px;
margin-bottom: 10px;
background: #F2F2F2;
img {
display: block;
width: 100%;
}
}
.product-name {
margin-bottom: 14px;
width: 100%;
color: $font-color;
a {
color: $font-color;
}
}
.product-description {
display: none;
}
.product-ratings {
width: 100%;
.icon {
width: 16px;
height: 16px;
}
}
.cart-wish-wrap {
display: inline-flex;
justify-content: flex-start;
align-items: center;
height: 40px;
.addtocart {
margin-right: 10px;
text-transform: uppercase;
}
.add-to-wishlist {
margin-top: 5px;
}
}
}
// product card, requires no changes for responsiveness.
.product-grid-4 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
grid-auto-rows: auto;
grid-column-gap: 48px;
grid-row-gap: 15px;
}
.product-grid-3 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
grid-gap: 27px;
grid-auto-rows: auto;
}
@media only screen and (max-width: 854px) {
.product-grid-4 {
grid-template-columns: 29.5% 29.5% 29.5%;
grid-column-gap: 35px;
}
}
@media only screen and (max-width: 653px) {
.product-grid-4 {
grid-template-columns: 48.5% 48.5%;
grid-column-gap: 17px;
}
}
@media only screen and (max-width: 425px) {
.product-card {

17
packages/Webkul/Shop/src/Resources/lang/en/app.php
View File

@ -4,11 +4,7 @@ return [
'home' => [
'page-title' => 'Bagisto - Home',
'featured-products' => 'Featured Products',
'new-products' => 'New Products',
'product-card' => [
'add-to-cart' => 'ADD TO CART'
]
'new-products' => 'New Products'
],
'footer' => [
@ -198,7 +194,13 @@ return [
'up-sell-title' => 'We found other products you might like!',
'reviews-title' => 'Ratings & Reviews',
'write-review-btn' => 'Write Review',
'choose-option' => 'Choose an option'
'choose-option' => 'Choose an option',
'sale' => 'Sale',
'new' => 'New',
'empty' => 'No products available in this category.',
'add-to-cart' => 'Add To Cart',
'buy-now' => 'Buy Now',
'whoops' => 'Whoops!'
],
'wishlist' => [
@ -219,7 +221,8 @@ return [
],
'title' => 'Shopping Cart',
'empty' => 'Shopping Cart Is Empty',
'empty' => 'Your shopping cart is empty.',
'update-cart' => 'Update Cart',
'continue-shopping' => 'Continue Shopping',
'proceed-to-checkout' => 'Proceed To Checkout',
'remove' => 'Remove',

21
packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php
View File

@ -22,7 +22,9 @@
<form action="{{ route('shop.checkout.cart.update') }}" method="POST" @submit.prevent="onSubmit">
<div class="cart-item-list" style="margin-top: 0">
@csrf
@foreach($cart->items as $item)
<?php
@ -76,11 +78,14 @@
</div>
@endforeach
</div>
<div class="misc-controls">
<a href="{{ route('shop.home.index') }}" class="link">{{ __('shop::app.checkout.cart.continue-shopping') }}</a>
<div>
<input type="submit" class="btn btn-lg btn-primary" value="Update Cart" />
<button type="submit" class="btn btn-lg btn-primary">
{{ __('shop::app.checkout.cart.update-cart') }}
</button>
@if (!cart()->hasError())
<a href="{{ route('shop.checkout.onepage.index') }}" class="btn btn-lg btn-primary">
@ -96,9 +101,21 @@
@include('shop::checkout.total.summary', ['cart' => $cart])
</div>
</div>
@else
<div class="title">
{{ __('shop::app.checkout.cart.empty') }}
{{ __('shop::app.checkout.cart.title') }}
</div>
<div class="cart-content">
<p>
{{ __('shop::app.checkout.cart.empty') }}
</p>
<p style="display: inline-block;">
<a style="display: inline-block;" href="{{ route('shop.home.index') }}" class="btn btn-lg btn-primary">{{ __('shop::app.checkout.cart.continue-shopping') }}</a>
</p>
</div>
@endif

7
packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<html lang="{{ app()->getLocale() }}">
<head>
@ -13,12 +13,15 @@
@yield('head')
@section('seo')
<meta name="description" content="{{ core()->getCurrentChannel()->description }}"/>
@show
@yield('css')
</head>
<body>
<div id="app">
<flash-wrapper ref='flashes'></flash-wrapper>

4
packages/Webkul/Shop/src/Resources/views/products/add-to-cart.blade.php
View File

@ -1 +1,3 @@
<button class="btn btn-lg btn-primary addtocart">{{ __('shop::app.home.product-card.add-to-cart') }}</button>
<button class="btn btn-lg btn-primary addtocart">
{{ __('shop::app.products.add-to-cart') }}
</button>

4
packages/Webkul/Shop/src/Resources/views/products/buy-now.blade.php
View File

@ -1 +1,3 @@
<button class="btn btn-lg btn-primary buynow">BUY NOW!</button>
<button class="btn btn-lg btn-primary buynow">
{{ __('shop::app.products.buy-now') }}
</button>

84
packages/Webkul/Shop/src/Resources/views/products/index.blade.php
View File

@ -1,40 +1,64 @@
@extends('shop::layouts.master')
@section('content-wrapper')
@section('page_title')
{{ $category->meta_title ?? $category->name }}
@stop
@section('seo')
<meta name="description" content="{{ $category->meta_description }}"/>
<meta name="description" content="{{ $category->meta_keywords }}"/>
@stop
@section('content-wrapper')
@inject ('productRepository', 'Webkul\Product\Repositories\ProductRepository')
@inject ('productRepository', 'Webkul\Product\Repositories\ProductRepository')
<div class="main">
<div class="category-container">
@include ('shop::products.list.layered-navigation')
<div class="category-block">
<div class="hero-image mb-35">
<img src="https://images.pexels.com/photos/428338/pexels-photo-428338.jpeg?cs=srgb&dl=adolescent-casual-cute-428338.jpg&fm=jpg" />
<img src="https://images.pexels.com/photos/428338/pexels-photo-428338.jpeg?cs=srgb&dl=adolescent-casual-cute-428338.jpg&fm=jpg" />
</div>
<?php $products = $productRepository->findAllByCategory($category->id); ?>
@if ($products->count())
@include ('shop::products.list.toolbar')
@include ('shop::products.list.toolbar')
@inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
@inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
@if ($toolbarHelper->getCurrentMode() == 'grid')
<div class="product-grid-3">
@foreach ($products as $product)
@include ('shop::products.list.card', ['product' => $product])
@endforeach
@if ($toolbarHelper->getCurrentMode() == 'grid')
<div class="product-grid-3">
@foreach ($products as $product)
@include ('shop::products.list.card', ['product' => $product])
@endforeach
</div>
@else
<div class="product-list">
@foreach ($products as $product)
@include ('shop::products.list.card', ['product' => $product])
@endforeach
</div>
@endif
<div class="bottom-toolbar">
{{ $products->appends(request()->input())->links() }}
</div>
@else
<div class="product-list">
@foreach ($products as $product)
@include ('shop::products.list.card', ['product' => $product])
@endforeach
</div>
@endif
<div class="bottom-toolbar">
{{ $products->appends(request()->input())->links() }}
</div>
<div class="product-list empty">
<h2>{{ __('shop::app.products.whoops') }}</h2>
<p>
{{ __('shop::app.products.empty') }}
</p>
</div>
@endif
</div>
</div>
</div>
@ -48,42 +72,42 @@
var sortLimit = document.getElementsByClassName('reponsive-sorter-limiter')[0];
var layerFilter = document.getElementsByClassName('responsive-layred-filter')[0];
if(sort && filter){
if(sort && filter) {
sort.addEventListener("click", sortFilter);
filter.addEventListener("click", sortFilter);
}
function sortFilter(){
function sortFilter() {
var className = document.getElementById(this.id).className;
if(className === 'icon sort-icon'){
if(className === 'icon sort-icon') {
sort.classList.remove("sort-icon");
sort.classList.add("icon-menu-close-adj");
filter.classList.remove("icon-menu-close-adj");
filter.classList.add("filter-icon");
sortLimit.style.display ="flex";
sortLimit.style.justifyContent="space-between";
sortLimit.style.display = "flex";
sortLimit.style.justifyContent = "space-between";
layerFilter.style.display ="none";
}else if(className === 'icon filter-icon'){
} else if(className === 'icon filter-icon') {
filter.classList.remove("filter-icon");
filter.classList.add("icon-menu-close-adj");
sort.classList.remove("icon-menu-close-adj");
sort.classList.add("sort-icon");
layerFilter.style.display ="block";
sortLimit.style.display ="none";
}else{
layerFilter.style.display = "block";
sortLimit.style.display = "none";
} else {
sort.classList.remove("icon-menu-close-adj");
sort.classList.add("sort-icon");
filter.classList.remove("icon-menu-close-adj");
filter.classList.add("filter-icon");
sortLimit.style.display ="none";
layerFilter.style.display ="none";
sortLimit.style.display = "none";
layerFilter.style.display = "none";
}
}
});

10
packages/Webkul/Shop/src/Resources/views/products/list/card.blade.php
View File

@ -4,6 +4,12 @@
<?php $productBaseImage = $productImageHelper->getProductBaseImage($product); ?>
@if($product->new)
<div class="sticker new">
{{ __('shop::app.products.new') }}
</div>
@endif
<div class="product-image">
<a href="{{ route('shop.products.index', $product->url_key) }}" title="{{ $product->name }}">
<img src="{{ $productBaseImage['medium_image_url'] }}" />
@ -32,7 +38,7 @@
@include ('shop::products.add-to', ['product' => $product])
@else
@if($product->type == "configurable")
<a href="{{ route('cart.add.configurable', $product->url_key) }}" class="btn btn-lg btn-primary addtocart">{{ __('shop::app.home.product-card.add-to-cart') }}</a>
<a href="{{ route('cart.add.configurable', $product->url_key) }}" class="btn btn-lg btn-primary addtocart">{{ __('shop::app.products.add-to-cart') }}</a>
@include('shop::products.wishlist')
@else
<div class="cart-wish-wrap">
@ -41,7 +47,7 @@
<input type="hidden" name="product" value="{{ $product->id }}">
<input type="hidden" name="quantity" value="1">
<input type="hidden" value="false" name="is_configurable">
<button class="btn btn-lg btn-primary addtocart">{{ __('shop::app.home.product-card.add-to-cart') }}</button>
<button class="btn btn-lg btn-primary addtocart">{{ __('shop::app.products.add-to-cart') }}</button>
</form>
@include('shop::products.wishlist')
</div>

4
packages/Webkul/Shop/src/Resources/views/products/price.blade.php
View File

@ -12,6 +12,10 @@
@if ($priceHelper->haveSpecialPrice($product))
<div class="sticker sale">
{{ __('shop::app.products.sale') }}
</div>
<span class="regular-price">{{ core()->currency($product->price) }}</span>
<span class="special-price">{{ core()->currency($priceHelper->getSpecialPrice($product)) }}</span>

15
packages/Webkul/Shop/src/Resources/views/products/view.blade.php
View File

@ -1,14 +1,20 @@
@extends('shop::layouts.master')
@section('page_title')
{{ $product->name }}
{{ $product->meta_title ?? $product->name }}
@stop
@section('seo')
<meta name="description" content="{{ $product->meta_description }}"/>
<meta name="description" content="{{ $product->meta_keywords }}"/>
@stop
@section('content-wrapper')
<section class="product-detail">
<div class="category-breadcrumbs">
<!--<div class="category-breadcrumbs">
<span class="breadcrumb">Home</span> > <span class="breadcrumb">Men</span> > <span class="breadcrumb">Slit Open Jeans</span>
</div>
</div>-->
<div class="layouter">
<form method="POST" action="{{ route('cart.add', $product->id) }}" @submit.prevent="onSubmit">
@csrf()
@ -23,13 +29,12 @@
<span>{{ $product->name }}</span>
</div>
{{-- @include ('shop::products.review', ['product' => $product]) --}}
@include ('shop::products.review', ['product' => $product])
@include ('shop::products.price', ['product' => $product])
@include ('shop::products.view.stock')
<div class="description">
{{ $product->short_description }}
</div>

205
public/themes/default/assets/css/shop.css vendored
View File

@ -120,92 +120,6 @@
height: 18px;
}
.product-card .product-image {
max-height: 350px;
max-width: 280px;
margin-bottom: 10px;
background: #F2F2F2;
}
.product-card .product-image img {
display: block;
width: 100%;
}
.product-card .product-name {
margin-bottom: 14px;
width: 100%;
color: #242424;
}
.product-card .product-name a {
color: #242424;
}
.product-card .product-description {
display: none;
}
.product-card .product-ratings {
width: 100%;
}
.product-card .product-ratings .icon {
width: 16px;
height: 16px;
}
.product-card .cart-wish-wrap {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 40px;
}
.product-card .cart-wish-wrap .addtocart {
margin-right: 10px;
text-transform: uppercase;
}
.product-card .cart-wish-wrap .add-to-wishlist {
margin-top: 5px;
}
.product-grid-4 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
grid-auto-rows: auto;
grid-column-gap: 48px;
grid-row-gap: 15px;
}
.product-grid-3 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
grid-gap: 27px;
grid-auto-rows: auto;
}
@media only screen and (max-width: 854px) {
.product-grid-4 {
grid-template-columns: 29.5% 29.5% 29.5%;
grid-column-gap: 35px;
}
}
@media only screen and (max-width: 653px) {
.product-grid-4 {
grid-template-columns: 48.5% 48.5%;
grid-column-gap: 17px;
}
}
@media only screen and (max-width: 425px) {
.product-card {
font-size: 90%;
@ -616,6 +530,119 @@ body {
display: block;
}
.main-container-wrapper .product-grid-4 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
grid-auto-rows: auto;
grid-column-gap: 48px;
grid-row-gap: 15px;
}
.main-container-wrapper .product-grid-3 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
grid-gap: 27px;
grid-auto-rows: auto;
}
@media only screen and (max-width: 854px) {
.main-container-wrapper .product-grid-4 {
grid-template-columns: 29.5% 29.5% 29.5%;
grid-column-gap: 35px;
}
}
@media only screen and (max-width: 653px) {
.main-container-wrapper .product-grid-4 {
grid-template-columns: 48.5% 48.5%;
grid-column-gap: 17px;
}
}
.main-container-wrapper .product-card {
position: relative;
}
.main-container-wrapper .product-card .product-image {
max-height: 350px;
max-width: 280px;
margin-bottom: 10px;
background: #F2F2F2;
}
.main-container-wrapper .product-card .product-image img {
display: block;
width: 100%;
}
.main-container-wrapper .product-card .product-name {
margin-bottom: 14px;
width: 100%;
color: #242424;
}
.main-container-wrapper .product-card .product-name a {
color: #242424;
}
.main-container-wrapper .product-card .product-description {
display: none;
}
.main-container-wrapper .product-card .product-ratings {
width: 100%;
}
.main-container-wrapper .product-card .product-ratings .icon {
width: 16px;
height: 16px;
}
.main-container-wrapper .product-card .cart-wish-wrap {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 40px;
}
.main-container-wrapper .product-card .cart-wish-wrap .addtocart {
margin-right: 10px;
text-transform: uppercase;
}
.main-container-wrapper .product-card .cart-wish-wrap .add-to-wishlist {
margin-top: 5px;
}
.main-container-wrapper .product-card .sticker {
border-radius: 100px;
position: absolute;
top: 10px;
left: 10px;
text-transform: uppercase;
padding: 4px 13px;
font-size: 14px;
color: #fff;
}
.main-container-wrapper .product-card .sticker.sale {
background: #FF6472;
}
.main-container-wrapper .product-card .sticker.new {
background: #2ED04C;
}
.main-container-wrapper .product-list {
min-height: 200px;
}
.main-container-wrapper .product-list .product-card {
width: 100%;
display: inline-block;
@ -642,6 +669,10 @@ body {
margin-bottom: 0;
}
.main-container-wrapper .product-list.empty h2 {
font-size: 20px;
}
.main-container-wrapper section.featured-products {
display: block;
margin-bottom: 5%;
@ -1685,6 +1716,7 @@ section.product-detail div.layouter form div.product-image-group .add-to-buttons
width: 49%;
background: black;
white-space: nowrap;
text-transform: uppercase;
}
section.product-detail div.layouter form div.product-image-group .add-to-buttons .buynow {
@ -1692,6 +1724,7 @@ section.product-detail div.layouter form div.product-image-group .add-to-buttons
width: 49%;
float: right;
white-space: nowrap;
text-transform: uppercase;
}
section.product-detail div.layouter form .details {