diff --git a/packages/Webkul/Shop/src/Http/routes.php b/packages/Webkul/Shop/src/Http/routes.php index 438e7e4fb..1e01e5df9 100644 --- a/packages/Webkul/Shop/src/Http/routes.php +++ b/packages/Webkul/Shop/src/Http/routes.php @@ -6,8 +6,8 @@ Route::group(['middleware' => ['web']], function () { 'view' => 'shop::store.home.index' ])->name('store.home'); - Route::get('/category', 'Webkul\Shop\Http\Controllers\CategoryController@index')->defaults('_config', [ - 'view' => 'shop::store.category.index' + Route::get('/product', 'Webkul\Shop\Http\Controllers\CategoryController@index')->defaults('_config', [ + 'view' => 'shop::store.product.index' ]); }); diff --git a/packages/Webkul/Shop/src/Resources/assets/images/4star.svg b/packages/Webkul/Shop/src/Resources/assets/images/4star.svg new file mode 100644 index 000000000..1c962e2da --- /dev/null +++ b/packages/Webkul/Shop/src/Resources/assets/images/4star.svg @@ -0,0 +1,13 @@ + + + + Star-4 + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/packages/Webkul/Shop/src/Resources/assets/images/icon-grid-view.svg b/packages/Webkul/Shop/src/Resources/assets/images/icon-grid-view.svg new file mode 100644 index 000000000..2412dfbb6 --- /dev/null +++ b/packages/Webkul/Shop/src/Resources/assets/images/icon-grid-view.svg @@ -0,0 +1,17 @@ + + + + icon-grid-view + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/Webkul/Shop/src/Resources/assets/images/icon-list-view.svg b/packages/Webkul/Shop/src/Resources/assets/images/icon-list-view.svg new file mode 100644 index 000000000..e6df3dc85 --- /dev/null +++ b/packages/Webkul/Shop/src/Resources/assets/images/icon-list-view.svg @@ -0,0 +1,19 @@ + + + + icon-list-view + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/Webkul/Shop/src/Resources/assets/images/icon-share.svg b/packages/Webkul/Shop/src/Resources/assets/images/icon-share.svg new file mode 100644 index 000000000..4e3860f01 --- /dev/null +++ b/packages/Webkul/Shop/src/Resources/assets/images/icon-share.svg @@ -0,0 +1,10 @@ + + + + icon-share + Created with Sketch. + + + + + \ No newline at end of file diff --git a/packages/Webkul/Shop/src/Resources/assets/images/jeans.jpg b/packages/Webkul/Shop/src/Resources/assets/images/jeans.jpg new file mode 100644 index 000000000..bd57eca44 Binary files /dev/null and b/packages/Webkul/Shop/src/Resources/assets/images/jeans.jpg differ diff --git a/packages/Webkul/Shop/src/Resources/assets/images/jeans_big.jpg b/packages/Webkul/Shop/src/Resources/assets/images/jeans_big.jpg new file mode 100644 index 000000000..6d636e5bf Binary files /dev/null and b/packages/Webkul/Shop/src/Resources/assets/images/jeans_big.jpg differ diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss b/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss index 94e53d359..33ed12732 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss @@ -10,10 +10,13 @@ $offer-color: #ff6472; //shop variables ends here //customer variables +$product-font-color: #242424; +$product-price-color: #FF6472; $sign-up-text-color: #5e5e5e; $login-text: #3a3a3a; $background-color: #ffffff; $color-black : black; $forgot-password-color: #0031f0; $profile-content-color: #5e5e5e; +$horizontal-rule-color: #E8E8E8; //customer variables ends here diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss index c914ee305..b1843f12f 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss @@ -738,6 +738,240 @@ section.slider-block { //customers page css ends here +// product pages css starts here + +section.product-detail { + font-size: 16px; + + div.category-breadcrumbs { + display: inline; + } + + div.layouter { + display:flex; + flex-flow: row; + margin-top: 2%; + + div.product-image-group { + display:flex; + flex-direction: row; + justify-content: flex-start; + margin-right: 2.5%; + + .side-group { + display: flex; + flex-direction: column; + margin-right: 4px; + } + + .product-hero-image { + display: block; + position: relative; + + .wishlist { + position: absolute; + top: 10px; + right: 12px; + } + + .share { + position: absolute; + top: 10px; + right: 45px; + } + } + } + + .details { + + .product-heading { + font-size: 24px; + color: $product-font-color; + margin-bottom: 14px; + } + + .rating { + color: $product-font-color; + margin-bottom: 14px; + } + + .price { + margin-bottom: 14px; + + .main-price { + font-size: 24px; + color: $product-price-color; + } + } + + .stock-status { + margin-bottom: 14px; + } + + .description { + margin-bottom: 14px; + } + + hr{ + border-top: 1px solid $horizontal-rule-color; + margin-bottom: 17px; + } + + .attributes { + display: block; + width: 100%; + + .attribute { + height: 39px; + margin-bottom: 20px; + + .title { + float: left; + height: 100%; + min-width: 130px; + padding-top: 9px; + } + + .values { + display: inline-flex; + + .colors { + margin-right:5px; + } + .colors:last-child { + margin-right: 0; + } + + .red { + height: 37px; + width: 37px; + background: red; + border: 1px solid $border-color; + border-radius: 2px; + } + + .blue { + height: 37px; + width: 37px; + background: blue; + border: 1px solid $border-color; + border-radius: 2px; + } + + .green { + height: 37px; + width: 37px; + background: green; + border: 1px solid $border-color; + border-radius: 2px; + } + + .size { + margin-right:5px; + line-height: 38px; + height: 37px; + width: 60px; + border: 1px solid $border-color; + border-radius: 2px; + text-align: center; + vertical-align: middle; + } + .size:last-child { + margin-right: 0; + } + + .quantity { + .values { + .control { + height: 37px !important; + width: 30px !important; + } + } + } + } + } + } + + .full-description { + font-size: 16px; + } + + .full-specification{ + + } + + .rating-reviews { + margin-top: 30px; + + .title{ + margin-bottom: 15px; + } + + .overall { + + .number{ + font-size: 34px; + } + + button { + float: right; + border-radius: 0px !important; + } + + margin-bottom: 5px; + } + + .reviews { + margin-top: 34px; + margin-bottom: 80px; + + .review { + margin-bottom: 25px; + + .stars { + margin-bottom: 15px; + } + .message { + margin-bottom: 10px; + } + } + .view-all { + margin-top:15px; + color: $logo-color; + margin-bottom:15px; + } + } + } + } + + } + + .related-products-wrapper { + margin-bottom: 80px; + + .title{ + margin-bottom: 22px; + text-align: center; + } + + .horizontal-rule { + height: 1px; + background: $horizontal-rule-color; + width: 148px; + margin-bottom: 24px; + margin-left:auto; + margin-right:auto; + } + + .related-products { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-gap: 10px; + } + + } +} + @media all and (max-width: 480px) { .header { // border: 1px solid black; diff --git a/packages/Webkul/Shop/src/Resources/views/store/category/index.blade.php b/packages/Webkul/Shop/src/Resources/views/store/category/index.blade.php deleted file mode 100644 index 3ab35b7a0..000000000 --- a/packages/Webkul/Shop/src/Resources/views/store/category/index.blade.php +++ /dev/null @@ -1,3 +0,0 @@ -@extends('shop::store.layouts.master') -@section('content-wrapper') -@endsection diff --git a/packages/Webkul/Shop/src/Resources/views/store/product/index.blade.php b/packages/Webkul/Shop/src/Resources/views/store/product/index.blade.php new file mode 100644 index 000000000..e3313bb42 --- /dev/null +++ b/packages/Webkul/Shop/src/Resources/views/store/product/index.blade.php @@ -0,0 +1,285 @@ +@extends('shop::store.layouts.master') +@section('content-wrapper') +
+
+ + Home > Men > Slit Open Jeans + +
+
+ +
+ +
+ + + + +
+ +
+ + + +
+ +
+ +
+ +
+ Rainbow creation Embroidered +
+
+ + 75 Ratings & 11 Reviews +
+
+ + $24.00 + + + $25.00 + + + 10% Off + +
+
+ InStock +
+
+
+ Bluetooth-enabled connectivity with NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers. +
+ +
+ +
+ +
+
Color
+ +
+
+
+
+
+
+ +
+
Size
+ +
+
XL
+
XXL
+
XXXL
+
+
+ +
+
Quantity
+ +
+
1
+
+
+ +
+ +
+ {{-- The elements below will be accordians --}} +
+

Description

+ Bluetooth-enabled connectivity with NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers + + Bluetooth-enabled connectivity with NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm d rivers. Bluetooth-enabled connectivity with NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers + + NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers +
+
+
+

Specification

+
+ +
+ +
+
+ Ratings & Reviews +
+
+ + 4.3 + + + + + + + +
+ 24,330 Ratings & 104 Reviews +
+
+
+
+
+ Awesome +
+
+ +
+
+ NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers +
+
+ + By John Doe + + + , 25, June 2018 + +
+
+
+
+ Awesome +
+
+ +
+
+ NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers +
+
+ + By John Doe + + + , 25, June 2018 + +
+
+
+
+ Awesome +
+
+ +
+
+ NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers +
+
+ + By John Doe + + + , 25, June 2018 + +
+
+
View All
+
+
+
+
+
+ +
+ +
+ We found other products you might like! +
+ +
+ +
+ +
+
+ +
+
+ Red Black Tees +
+
+ $65.00 +
+
+ + + +
+
+ + +
+
+
+
+ +
+
+ Red Black Tees +
+
+ $65.00 +
+
+ + + +
+
+ + +
+
+
+
+ +
+
+ Red Black Tees +
+
+ $65.00 +
+
+ + + +
+
+ + +
+
+
+
+ +
+
+ Red Black Tees +
+
+ $65.00 +
+
+ + + +
+
+ + +
+
+
+
+ + +
+@endsection diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/_variables.scss b/packages/Webkul/Ui/src/Resources/assets/sass/_variables.scss index 818cbb080..afe55ad04 100644 --- a/packages/Webkul/Ui/src/Resources/assets/sass/_variables.scss +++ b/packages/Webkul/Ui/src/Resources/assets/sass/_variables.scss @@ -4,4 +4,8 @@ $danger-color: #FC6868; $success-color: #4CAF50; $warning-color: #FFC107; $control-border-color: #C7C7C7; -$border-color: rgba(162, 162, 162, 0.2); \ No newline at end of file +$border-color: rgba(162, 162, 162, 0.2); +$filter-toggle-color : #8e8e8e; +$color-white: #ffffff; +$color-black: #000000; +$color-black-shade : #000311; \ No newline at end of file diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss index d305f96bf..f11967d58 100644 --- a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss +++ b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss @@ -225,7 +225,7 @@ h2 { padding: 10px; border-bottom: solid 1px #d3d3d3; color: $font-color; - vertical-align: top; + vertical-align: middle; &.actions { text-align: right; @@ -683,22 +683,6 @@ h2 { .dropdown-filters { display: inline-flex; - // .column-filter { - // margin-right: 5px; - - // .control { - // font-family: "montserrat", sans-serif; - // padding-left: 5px; - // height: 36px; - // width: 150px; - // border: 2px solid $control-border-color; - // border-radius: 3px; - // background-color: white; - // color: #8e8e8e; - // font-size: 14px; - // } - // } - .more-filters { margin-right: 5px; @@ -714,7 +698,7 @@ h2 { border: 2px solid $control-border-color; border-radius: 2px; background-color: white; - color: #8e8e8e; + color: $filter-toggle-color; font-size: 14px; .dropdown-header { @@ -735,8 +719,8 @@ h2 { li.filter-column-dropdown { .filter-column-select { width: 100%; - background: #fff; - border: 2px solid #c7c7c7; + background: $color-white; + border: 2px solid $control-border-color; border-radius: 3px; height: 36px; display: inline-block; @@ -753,8 +737,8 @@ h2 { } li { select { - background: #fff; - border: 2px solid #c7c7c7; + background: $color-white; + border: 2px solid $control-border-color; border-radius: 3px; height: 36px; max-width: 100%; @@ -833,7 +817,7 @@ h2 { display: inline-flex; background: #e7e7e7; padding-left: 5px; - color: #000311; + color: $color-black-shade; vertical-align: middle; .f-value { @@ -882,6 +866,12 @@ h2 { cursor: pointer; } } + + td.action { + a:first-child { + margin-right:8px; + } + } } } .pagination {