From 860d55bc38cfb4bf0b45929dd1bb3d059afabbb4 Mon Sep 17 00:00:00 2001 From: prashant-webkul Date: Mon, 1 Oct 2018 13:56:27 +0530 Subject: [PATCH] Layout normalized --- .../Shop/src/Resources/assets/sass/app.scss | 432 ++++++---------- .../src/Resources/assets/sass/components.scss | 22 + .../src/Resources/assets/sass/override.scss | 3 +- .../Resources/views/products/index.blade.php | 2 +- public/themes/default/assets/css/shop.css | 471 ++++++++---------- 5 files changed, 383 insertions(+), 547 deletions(-) diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss index 8a9d1a9cf..ee3dca1f3 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss @@ -7,7 +7,7 @@ //main store front layouting .main-container-wrapper { - max-width: 90%; + max-width: 1170px; width: auto; margin-left: auto; margin-right: auto; @@ -128,107 +128,83 @@ } } -//category page -.main { - .category-block { - display: flex; - flex-direction: row; - width: 100%; +//slider styles +section.slider-block { + display: block; + margin-left: auto; + margin-right: auto; + margin-bottom: 5%; - .category-block { - width: 100%; + div.slider-content { + position: relative; + height: 500px; + margin-left: auto; + margin-right: auto; + + + ul.slider-images { + + li{ + position: absolute; + visibility: hidden; + } + + li.show { + display:block; + visibility: visible; + width: 100%; + animation-name: example; + animation-duration: 4s; + } + + @keyframes example { + 0% {opacity: 0.1;} + 100% {opacity: 1;} + } + + li img { + height: 500px; + width:100%; + } + } + + div.slider-control { display: block; + position: absolute; + user-select: none; + bottom: 2%; + right: 2%; - .hero-image { - border: 1px solid green; - img { - width: 100%; - height: 400px; - } + .dark-left-icon { + background-color: #f2f2f2; + height: 48px; + width: 48px; + max-height: 100%; + max-width: 100%; + } + + .light-right-icon { + background-color: #000; + height: 48px; + width: 48px; + max-height: 100%; + max-width: 100%; } } } - - .top-toolbar { - width: 100%; - display: inline-block; - - .page-info { - float: left; - color: $font-color; - line-height: 45px; - - span:first-child { - display: inline; - } - - span:last-child { - display: none; - } - } - - .pager { - float: right; - - label { - margin-right: 5px; - } - - select { - background: #FFFFFF; - border: 1px solid #C7C7C7; - border-radius: 3px; - color: $font-color; - padding: 10px; - } - - .view-mode { - display: inline-block; - margin-right: 20px; - - a, span { - display: inline-block; - vertical-align: middle; - - &.grid-view { - margin-right: 10px; - } - } - - .sort-filter { - display: none; - } - } - - .sorter { - display: inline-block; - margin-right: 10px; - } - - .limiter { - display: inline-block; - } - } - } - - .reponsive-sorter-limiter { - display: none; - } - - .bottom-toolbar { - display: block; - margin-top: 40px; - margin-bottom: 40px; - text-align: center; - } } +//header navigation .header { margin-top: 16px; margin-bottom: 21px; user-select: none; + .search-suggestion { + display: none; + } + .header-top { margin-bottom: 16px; display: flex; @@ -379,10 +355,6 @@ } } - .search-suggestion { - display: none; - } - .header-bottom { height: 48px; margin-left: auto; @@ -502,183 +474,6 @@ } } -//slider styles -section.slider-block { - display: block; - margin-left: auto; - margin-right: auto; - margin-bottom: 5%; - - div.slider-content { - position: relative; - height: 500px; - margin-left: auto; - margin-right: auto; - - - ul.slider-images { - - li{ - //both combined are equivalent to display none - position: absolute; - visibility: hidden; - } - - li.show { - display:block; - visibility: visible; - width: 100%; - animation-name: example; - animation-duration: 4s; - } - - @keyframes example { - 0% {opacity: 0.1;} - 100% {opacity: 1;} - } - - li img { - height: 500px; - width:100%; - } - } - - div.slider-control { - display: block; - position: absolute; - user-select: none; - bottom: 2%; - right: 2%; - - - .dark-left-icon { - background-color: #f2f2f2; - height: 48px; - width: 48px; - max-height: 100%; - max-width: 100%; - } - - .light-right-icon { - background-color: #000; - height: 48px; - width: 48px; - max-height: 100%; - max-width: 100%; - } - } - } -} - -//layered filter wrapper styles -.layered-filter-wrapper { - width: 25%; - float: left; - padding-right: 20px; - min-height: 1px; - - .filter-title { - border-bottom: 1px solid $border-color; - color: $font-color; - padding: 10px 0; - } - - .filter-attributes { - .filter-attributes-item { - border-bottom: 1px solid $border-color; - padding-bottom: 10px; - - .filter-attributes-title { - padding: 10px 40px 0 10px; - color: #5E5E5E; - cursor: pointer; - position: relative; - - .remove-filter-link { - font-weight: 400; - color: $brand-color; - margin-right: 10px; - } - - .icon { - background-image: url('../images/arrow-down.svg') !important; - width: 10px; - height: 10px; - position: absolute; - right: 15px; - top: 14px; - } - } - - .filter-attributes-content { - padding: 10px; - display: none; - - ol.items { - padding: 0; - margin: 0; - list-style: none none; - - li.item { - padding: 8px 0; - color: #5E5E5E; - - .checkbox { - margin: 0; - - .checkbox-view { - height: 16px; - width: 16px; - background-image: url("../images/checkbox.svg"); - } - - input:checked + .checkbox-view { - background-image: url("../images/checkbox-checked.svg"); - } - } - } - } - - .price-range-wrapper { - margin-top: 21px; - } - } - - &.active { - .filter-attributes-content { - display: block; - } - - .filter-attributes-title .icon { - background-image: url('../images//arrow-up.svg') !important; - } - } - } - } -} - -//product page price styles -.product-price { - margin-bottom: 14px; - width: 100%; - font-weight: 600; - - .price-label { - font-size: 14px; - font-weight: 400; - } - - .regular-price { - color: #A5A5A5; - text-decoration: line-through; - margin-right: 10px; - } - - .special-price { - color: #FF6472; - } -} - //footer responsive with out media query. .footer { background-color: #f2f2f2; @@ -757,6 +552,105 @@ section.slider-block { } } +//category page +.main { + .category-block { + display: flex; + flex-direction: row; + width: 100%; + + .category-block { + width: 100%; + display: block; + + .hero-image { + border: 1px solid green; + display:block; + visibility: visible; + width: auto; + + img { + height: 400px; + width:100%; + } + } + } + } + + .top-toolbar { + width: 100%; + display: inline-block; + + .page-info { + float: left; + color: $font-color; + line-height: 45px; + + span:first-child { + display: inline; + } + + span:last-child { + display: none; + } + } + + .pager { + float: right; + + label { + margin-right: 5px; + } + + select { + background: #FFFFFF; + border: 1px solid #C7C7C7; + border-radius: 3px; + color: $font-color; + padding: 10px; + } + + .view-mode { + display: inline-block; + margin-right: 20px; + + a, span { + display: inline-block; + vertical-align: middle; + + &.grid-view { + margin-right: 10px; + } + } + + .sort-filter { + display: none; + } + } + + .sorter { + display: inline-block; + margin-right: 10px; + } + + .limiter { + display: inline-block; + } + } + } + + .reponsive-sorter-limiter { + display: none; + } + + .bottom-toolbar { + display: block; + margin-top: 40px; + margin-bottom: 40px; + text-align: center; + } +} + //customers page css goes here .content { padding-top: 15%; diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/components.scss b/packages/Webkul/Shop/src/Resources/assets/sass/components.scss index 2f4b93592..ed0966b8e 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/components.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/components.scss @@ -56,6 +56,28 @@ } } +//product page price styles +.product-price { + margin-bottom: 14px; + width: 100%; + font-weight: 600; + + .price-label { + font-size: 14px; + font-weight: 400; + } + + .regular-price { + color: #A5A5A5; + text-decoration: line-through; + margin-right: 10px; + } + + .special-price { + color: #FF6472; + } +} + //layered filter wrapper styles .layered-filter-wrapper { width: 25%; diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/override.scss b/packages/Webkul/Shop/src/Resources/assets/sass/override.scss index 832350426..3d17f7c8b 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/override.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/override.scss @@ -121,5 +121,4 @@ body { .mt-90 { margin-top: 90px; -} - +} \ No newline at end of file diff --git a/packages/Webkul/Shop/src/Resources/views/products/index.blade.php b/packages/Webkul/Shop/src/Resources/views/products/index.blade.php index cd241620d..1c7993190 100644 --- a/packages/Webkul/Shop/src/Resources/views/products/index.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/products/index.blade.php @@ -11,7 +11,7 @@
-
+
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css index aa3a21e79..9b6a6a971 100644 --- a/public/themes/default/assets/css/shop.css +++ b/public/themes/default/assets/css/shop.css @@ -247,6 +247,27 @@ body { white-space: nowrap; } +.product-price { + margin-bottom: 14px; + width: 100%; + font-weight: 600; +} + +.product-price .price-label { + font-size: 14px; + font-weight: 400; +} + +.product-price .regular-price { + color: #A5A5A5; + text-decoration: line-through; + margin-right: 10px; +} + +.product-price .special-price { + color: #FF6472; +} + .layered-filter-wrapper { width: 25%; float: left; @@ -330,7 +351,7 @@ body { } .main-container-wrapper { - max-width: 90%; + max-width: 1170px; width: auto; margin-left: auto; margin-right: auto; @@ -456,102 +477,83 @@ body { width: 100%; } -.main .category-block { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - width: 100%; -} - -.main .category-block .category-block { - width: 100%; +section.slider-block { display: block; + margin-left: auto; + margin-right: auto; + margin-bottom: 5%; } -.main .category-block .category-block .hero-image { - border: 1px solid green; +section.slider-block div.slider-content { + position: relative; + height: 500px; + margin-left: auto; + margin-right: auto; } -.main .category-block .category-block .hero-image img { - width: 100%; - height: 400px; +section.slider-block div.slider-content ul.slider-images li { + position: absolute; + visibility: hidden; } -.main .top-toolbar { - width: 100%; - display: inline-block; -} - -.main .top-toolbar .page-info { - float: left; - color: #242424; - line-height: 45px; -} - -.main .top-toolbar .page-info span:first-child { - display: inline; -} - -.main .top-toolbar .page-info span:last-child { - display: none; -} - -.main .top-toolbar .pager { - float: right; -} - -.main .top-toolbar .pager label { - margin-right: 5px; -} - -.main .top-toolbar .pager select { - background: #FFFFFF; - border: 1px solid #C7C7C7; - border-radius: 3px; - color: #242424; - padding: 10px; -} - -.main .top-toolbar .pager .view-mode { - display: inline-block; - margin-right: 20px; -} - -.main .top-toolbar .pager .view-mode a, .main .top-toolbar .pager .view-mode span { - display: inline-block; - vertical-align: middle; -} - -.main .top-toolbar .pager .view-mode a.grid-view, .main .top-toolbar .pager .view-mode span.grid-view { - margin-right: 10px; -} - -.main .top-toolbar .pager .view-mode .sort-filter { - display: none; -} - -.main .top-toolbar .pager .sorter { - display: inline-block; - margin-right: 10px; -} - -.main .top-toolbar .pager .limiter { - display: inline-block; -} - -.main .reponsive-sorter-limiter { - display: none; -} - -.main .bottom-toolbar { +section.slider-block div.slider-content ul.slider-images li.show { display: block; - margin-top: 40px; - margin-bottom: 40px; - text-align: center; + visibility: visible; + width: 100%; + -webkit-animation-name: example; + animation-name: example; + -webkit-animation-duration: 4s; + animation-duration: 4s; +} + +@-webkit-keyframes example { + 0% { + opacity: 0.1; + } + 100% { + opacity: 1; + } +} + +@keyframes example { + 0% { + opacity: 0.1; + } + 100% { + opacity: 1; + } +} + +section.slider-block div.slider-content ul.slider-images li img { + height: 500px; + width: 100%; +} + +section.slider-block div.slider-content div.slider-control { + display: block; + position: absolute; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + bottom: 2%; + right: 2%; +} + +section.slider-block div.slider-content div.slider-control .dark-left-icon { + background-color: #f2f2f2; + height: 48px; + width: 48px; + max-height: 100%; + max-width: 100%; +} + +section.slider-block div.slider-content div.slider-control .light-right-icon { + background-color: #000; + height: 48px; + width: 48px; + max-height: 100%; + max-width: 100%; } .header { @@ -563,6 +565,10 @@ body { user-select: none; } +.header .search-suggestion { + display: none; +} + .header .header-top { margin-bottom: 16px; display: -webkit-box; @@ -764,10 +770,6 @@ body { width: 24px; } -.header .search-suggestion { - display: none; -} - .header .header-bottom { height: 48px; margin-left: auto; @@ -890,188 +892,6 @@ body { right: 10px; } -section.slider-block { - display: block; - margin-left: auto; - margin-right: auto; - margin-bottom: 5%; -} - -section.slider-block div.slider-content { - position: relative; - height: 500px; - margin-left: auto; - margin-right: auto; -} - -section.slider-block div.slider-content ul.slider-images li { - position: absolute; - visibility: hidden; -} - -section.slider-block div.slider-content ul.slider-images li.show { - display: block; - visibility: visible; - width: 100%; - -webkit-animation-name: example; - animation-name: example; - -webkit-animation-duration: 4s; - animation-duration: 4s; -} - -@-webkit-keyframes example { - 0% { - opacity: 0.1; - } - 100% { - opacity: 1; - } -} - -@keyframes example { - 0% { - opacity: 0.1; - } - 100% { - opacity: 1; - } -} - -section.slider-block div.slider-content ul.slider-images li img { - height: 500px; - width: 100%; -} - -section.slider-block div.slider-content div.slider-control { - display: block; - position: absolute; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - bottom: 2%; - right: 2%; -} - -section.slider-block div.slider-content div.slider-control .dark-left-icon { - background-color: #f2f2f2; - height: 48px; - width: 48px; - max-height: 100%; - max-width: 100%; -} - -section.slider-block div.slider-content div.slider-control .light-right-icon { - background-color: #000; - height: 48px; - width: 48px; - max-height: 100%; - max-width: 100%; -} - -.layered-filter-wrapper { - width: 25%; - float: left; - padding-right: 20px; - min-height: 1px; -} - -.layered-filter-wrapper .filter-title { - border-bottom: 1px solid #E8E8E8; - color: #242424; - padding: 10px 0; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item { - border-bottom: 1px solid #E8E8E8; - padding-bottom: 10px; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title { - padding: 10px 40px 0 10px; - color: #5E5E5E; - cursor: pointer; - position: relative; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title .remove-filter-link { - font-weight: 400; - color: #0041FF; - margin-right: 10px; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title .icon { - background-image: url("../images/arrow-down.svg") !important; - width: 10px; - height: 10px; - position: absolute; - right: 15px; - top: 14px; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content { - padding: 10px; - display: none; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items { - padding: 0; - margin: 0; - list-style: none none; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item { - padding: 8px 0; - color: #5E5E5E; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox { - margin: 0; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox .checkbox-view { - height: 16px; - width: 16px; - background-image: url("../images/checkbox.svg"); -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox input:checked + .checkbox-view { - background-image: url("../images/checkbox-checked.svg"); -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content .price-range-wrapper { - margin-top: 21px; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item.active .filter-attributes-content { - display: block; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item.active .filter-attributes-title .icon { - background-image: url("../images//arrow-up.svg") !important; -} - -.product-price { - margin-bottom: 14px; - width: 100%; - font-weight: 600; -} - -.product-price .price-label { - font-size: 14px; - font-weight: 400; -} - -.product-price .regular-price { - color: #A5A5A5; - text-decoration: line-through; - margin-right: 10px; -} - -.product-price .special-price { - color: #FF6472; -} - .footer { background-color: #f2f2f2; padding-left: 10%; @@ -1145,6 +965,107 @@ section.slider-block div.slider-content div.slider-control .light-right-icon { text-align: center; } +.main .category-block { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + width: 100%; +} + +.main .category-block .category-block { + width: 100%; + display: block; +} + +.main .category-block .category-block .hero-image { + border: 1px solid green; + display: block; + visibility: visible; + width: auto; +} + +.main .category-block .category-block .hero-image img { + height: 400px; + width: 100%; +} + +.main .top-toolbar { + width: 100%; + display: inline-block; +} + +.main .top-toolbar .page-info { + float: left; + color: #242424; + line-height: 45px; +} + +.main .top-toolbar .page-info span:first-child { + display: inline; +} + +.main .top-toolbar .page-info span:last-child { + display: none; +} + +.main .top-toolbar .pager { + float: right; +} + +.main .top-toolbar .pager label { + margin-right: 5px; +} + +.main .top-toolbar .pager select { + background: #FFFFFF; + border: 1px solid #C7C7C7; + border-radius: 3px; + color: #242424; + padding: 10px; +} + +.main .top-toolbar .pager .view-mode { + display: inline-block; + margin-right: 20px; +} + +.main .top-toolbar .pager .view-mode a, .main .top-toolbar .pager .view-mode span { + display: inline-block; + vertical-align: middle; +} + +.main .top-toolbar .pager .view-mode a.grid-view, .main .top-toolbar .pager .view-mode span.grid-view { + margin-right: 10px; +} + +.main .top-toolbar .pager .view-mode .sort-filter { + display: none; +} + +.main .top-toolbar .pager .sorter { + display: inline-block; + margin-right: 10px; +} + +.main .top-toolbar .pager .limiter { + display: inline-block; +} + +.main .reponsive-sorter-limiter { + display: none; +} + +.main .bottom-toolbar { + display: block; + margin-top: 40px; + margin-bottom: 40px; + text-align: center; +} + .content { padding-top: 15%; padding-bottom: 15%;