Carousel with recommended products was added

Vilgefortzz · May 20, 2017 · 828a889 · 828a889
1 parent 77d7f49
commit 828a889
Show file tree

Hide file tree

Showing 10 changed files with 402 additions and 116 deletions.
diff --git a/database/seeds/ProductsTableSeeder.php b/database/seeds/ProductsTableSeeder.php
@@ -78,7 +78,7 @@ public function run()
 //        }
 
 //        foreach ($subcategories as $subcategory) {
-//            factory(Product::class, 1)->create([
+//            factory(Product::class, 2)->create([
 //                'subcategory_id' => $subcategory->id,
 //                'recommended' => true
 //            ]);

diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/images/sales_promotions_deals/deal_1.png b/public/images/sales_promotions_deals/deal_1.png
diff --git a/public/images/sales_promotions_deals/deal_2.png b/public/images/sales_promotions_deals/deal_2.png
diff --git a/public/images/sales_promotions_deals/promotion_1.png b/public/images/sales_promotions_deals/promotion_1.png
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
@@ -4,7 +4,10 @@
 // Variables
 @import "variables";
 
-// Recommended products list
+// Recommended products - carrousel
+@import "recommended_products_carousel";
+
+// Products list
 @import "products_list";
 
 // Categories side bar menu

diff --git a/resources/assets/sass/recommended_products_carousel.scss b/resources/assets/sass/recommended_products_carousel.scss
@@ -0,0 +1,143 @@
+#itemslider h4{
+  font-family: 'Josefin Sans', sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  margin: 10px auto 3px;
+}
+
+#itemslider h5{
+  font-family: 'Josefin Sans', sans-serif;
+  font-weight: bold;
+  font-size: 12px;
+  margin: 3px auto 2px;
+}
+
+#itemslider h6{
+  font-family: 'Josefin Sans', sans-serif;
+  font-weight: 300;;
+  font-size: 10px;
+  margin: 2px auto 5px;
+}
+
+.carousel-control {
+  background: none !important; filter: none !important; progid:none !important;
+}
+
+#slider-control img{
+  padding-top: 60%;
+  margin: 0 auto;
+}
+
+@media screen and (max-width: 992px){
+  #slider-control img {
+    padding-top: 70px;
+    margin: 0 auto;
+  }
+}
+
+.carousel-showmanymoveone .carousel-control {
+  width: 4%;
+  background-image: none;
+}
+
+.carousel-showmanymoveone .carousel-control.left {
+  margin-left: 5px;
+}
+
+.carousel-showmanymoveone .carousel-control.right {
+  margin-right: 5px;
+}
+
+.carousel-showmanymoveone .cloneditem-1,
+.carousel-showmanymoveone .cloneditem-2,
+.carousel-showmanymoveone .cloneditem-3,
+.carousel-showmanymoveone .cloneditem-4,
+.carousel-showmanymoveone .cloneditem-5 {
+  display: none;
+}
+
+@media all and (min-width: 768px) {
+  .carousel-showmanymoveone .carousel-inner > .active.left,
+  .carousel-showmanymoveone .carousel-inner > .prev {
+    left: -50%;
+  }
+  .carousel-showmanymoveone .carousel-inner > .active.right,
+  .carousel-showmanymoveone .carousel-inner > .next {
+    left: 50%;
+  }
+  .carousel-showmanymoveone .carousel-inner > .left,
+  .carousel-showmanymoveone .carousel-inner > .prev.right,
+  .carousel-showmanymoveone .carousel-inner > .active {
+    left: 0;
+  }
+  .carousel-showmanymoveone .carousel-inner .cloneditem-1 {
+    display: block;
+  }
+}
+
+@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
+  .carousel-showmanymoveone .carousel-inner > .item.active.right,
+  .carousel-showmanymoveone .carousel-inner > .item.next {
+    -webkit-transform: translate3d(50%, 0, 0);
+    transform: translate3d(50%, 0, 0);
+    left: 0;
+  }
+  .carousel-showmanymoveone .carousel-inner > .item.active.left,
+  .carousel-showmanymoveone .carousel-inner > .item.prev {
+    -webkit-transform: translate3d(-50%, 0, 0);
+    transform: translate3d(-50%, 0, 0);
+    left: 0;
+  }
+  .carousel-showmanymoveone .carousel-inner > .item.left,
+  .carousel-showmanymoveone .carousel-inner > .item.prev.right,
+  .carousel-showmanymoveone .carousel-inner > .item.active {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    left: 0;
+  }
+}
+
+@media all and (min-width: 992px) {
+  .carousel-showmanymoveone .carousel-inner > .active.left,
+  .carousel-showmanymoveone .carousel-inner > .prev {
+    left: -16.666%;
+  }
+  .carousel-showmanymoveone .carousel-inner > .active.right,
+  .carousel-showmanymoveone .carousel-inner > .next {
+    left: 16.666%;
+  }
+  .carousel-showmanymoveone .carousel-inner > .left,
+  .carousel-showmanymoveone .carousel-inner > .prev.right,
+  .carousel-showmanymoveone .carousel-inner > .active {
+    left: 0;
+  }
+  .carousel-showmanymoveone .carousel-inner .cloneditem-2,
+  .carousel-showmanymoveone .carousel-inner .cloneditem-3,
+  .carousel-showmanymoveone .carousel-inner .cloneditem-4,
+  .carousel-showmanymoveone .carousel-inner .cloneditem-5,
+  .carousel-showmanymoveone .carousel-inner .cloneditem-6  {
+    display: block;
+  }
+}
+
+@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
+  .carousel-showmanymoveone .carousel-inner > .item.active.right,
+  .carousel-showmanymoveone .carousel-inner > .item.next {
+    -webkit-transform: translate3d(16.666%, 0, 0);
+    transform: translate3d(16.666%, 0, 0);
+    left: 0;
+  }
+  .carousel-showmanymoveone .carousel-inner > .item.active.left,
+  .carousel-showmanymoveone .carousel-inner > .item.prev {
+    -webkit-transform: translate3d(-16.666%, 0, 0);
+    transform: translate3d(-16.666%, 0, 0);
+    left: 0;
+  }
+  .carousel-showmanymoveone .carousel-inner > .item.left,
+  .carousel-showmanymoveone .carousel-inner > .item.prev.right,
+  .carousel-showmanymoveone .carousel-inner > .item.active {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    left: 0;
+  }
+}
diff --git a/resources/views/info/faq.blade.php b/resources/views/info/faq.blade.php
@@ -15,28 +15,28 @@
                     <li id="faq_1" class="faq_group list-group-item">
                         <b>How can i buy products?</b>
                         <p id="answer_1" class="answer_group" hidden>
-                            Easily, add to cart your products and make an order
+                            Easily, add to cart your products and make an order.
                         </p>
                     </li>
 
                     <li id="faq_2" class="faq_group list-group-item">
                         <b>How you can contact with us?</b>
                         <p id="answer_2" class="answer_group" hidden>
-                            Via e-mail: shop@gmail.com or phone: 000 000 000
+                            Via e-mail: shop@gmail.com or phone: 000 000 000.
                         </p>
                     </li>
 
                     <li id="faq_3" class="faq_group list-group-item">
                         <b>When the product is broken. What could i do?</b>
                         <p id="answer_3" class="answer_group" hidden>
-                            Don't panic you can exchange the broken product to another or we can give your money back
+                            Don't panic you can exchange the broken product to another or we can give your money back.
                         </p>
                     </li>
 
                     <li id="faq_4" class="faq_group list-group-item">
                         <b>Are there any discount for having account?</b>
                         <p id="answer_4" class="answer_group" hidden>
-                            Yes, for users who have an account in our shop there is a 10% discount for all products
+                            Yes, for users who have an account in our shop there is a $20 discount when ordering.
                         </p>
                     </li>