From 34060ebf2ec6603e392f0dbf83cbdd632ec1cc58 Mon Sep 17 00:00:00 2001
From: peter <peter@binarity.cz>
Date: Fri, 1 Apr 2016 23:32:40 +0200
Subject: [PATCH] FEATURE #1525: responsive designs for small devices

---
 .../views/visitor/cwbs_template/about.html    | 14 ++--
 .../views/visitor/cwbs_template/contact.html  |  2 +-
 .../views/visitor/cwbs_template/galerie.html  |  2 +-
 .../views/visitor/cwbs_template/homepage.html | 56 +++++++-------
 .../visitor/cwbs_template/sortiment.html      | 76 +++++++++----------
 .../views/visitor/cwbs_template/style.css     | 39 ++++++++++
 6 files changed, 114 insertions(+), 75 deletions(-)

diff --git a/resources/views/visitor/cwbs_template/about.html b/resources/views/visitor/cwbs_template/about.html
index 1833dfc2..a78a9fa5 100644
--- a/resources/views/visitor/cwbs_template/about.html
+++ b/resources/views/visitor/cwbs_template/about.html
@@ -36,7 +36,7 @@
 </div>
 
 <div id="content">
-    <div class="white-wrapper backgrounded text-center">
+    <div class="white-wrapper backgrounded text-center p-lr-50-sm">
         <div class="row column text-center m-b-25">
             <h2 id="about">O nás</h2>
         </div>
@@ -68,11 +68,11 @@
             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
         </p>
     </div>
-</div>
-<div class="green-wrapper clearfix">
-    <div class="row column text-center" id="questions">
-        <h4 class="w-t">MÁTE DOTAZY? NEBO NÁM CHCETE ZASLAT RYCHLOU POPTÁVKU?</h4>
-        <a href="#" class="button secondary m-t-25  large rounded">RYCHLÝ FORMULÁŘ</a>
+    <div class="green-wrapper clearfix">
+        <div class="row column text-center" id="questions">
+            <h4 class="w-t">MÁTE DOTAZY? NEBO NÁM CHCETE ZASLAT RYCHLOU POPTÁVKU?</h4>
+            <a href="#" class="button secondary m-t-25  large rounded">RYCHLÝ FORMULÁŘ</a>
+        </div>
     </div>
 </div>
 <footer class="large">
@@ -112,7 +112,7 @@
             </li>
         </ul>
         <div class="clearfix"></div>
-        <ul class="menu">
+        <ul class="menu hide-for-small-only">
             <li><a href="#">Home</a></li>
             <li><a href="#">Sortiment</a></li>
             <li><a href="#">Doprodej</a></li>
diff --git a/resources/views/visitor/cwbs_template/contact.html b/resources/views/visitor/cwbs_template/contact.html
index bf24412a..b30fb84a 100644
--- a/resources/views/visitor/cwbs_template/contact.html
+++ b/resources/views/visitor/cwbs_template/contact.html
@@ -56,7 +56,7 @@
             <iframe class="column large-12 medium-6 p-lr-0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2560.626144078246!2d14.390829515545695!3d50.074562779425236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470b95000e41d5fb%3A0xf58ae0d8a9f480ed!2zxaB2w6lkc2vDoSAxMTI3LzI5LCBTbcOtY2hvdiwgMTUwIDAwIFByYWhhLVByYWhhIDU!5e0!3m2!1scs!2scz!4v1458938407867" width="100%" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
         </div>
         <div class="large-6 column green-wrapper p-25" id="contact-form">
-            <div class="column large-12 medium-8 medium-centered p-lr-0">
+            <div class="column large-12 medium-8 medium-centered p-lr-0 p-lr-50-sm">
                 <h6 class="text-center uppercase m-b-25 bold">Rychlý formulář</h6>
                 <div class="column medium-6">
                     <input type="text" class="rounded large" placeholder="jméno a příjmení">
diff --git a/resources/views/visitor/cwbs_template/galerie.html b/resources/views/visitor/cwbs_template/galerie.html
index f1c07490..b4c8dbc0 100644
--- a/resources/views/visitor/cwbs_template/galerie.html
+++ b/resources/views/visitor/cwbs_template/galerie.html
@@ -225,7 +225,7 @@
             </li>
         </ul>
         <div class="clearfix"></div>
-        <ul class="menu">
+        <ul class="menu hide-for-small-only">
             <li><a href="#">Home</a></li>
             <li><a href="#">Sortiment</a></li>
             <li><a href="#">Doprodej</a></li>
diff --git a/resources/views/visitor/cwbs_template/homepage.html b/resources/views/visitor/cwbs_template/homepage.html
index aa19e433..afd5347d 100644
--- a/resources/views/visitor/cwbs_template/homepage.html
+++ b/resources/views/visitor/cwbs_template/homepage.html
@@ -77,7 +77,7 @@
     </script>
 </div>
 <div id="content">
-    <div class="row column text-center m-t-25">
+    <div class="row column text-center m-t-25 p-lr-50-sm">
         <h2 id="assortment">Náš sortiment</h2>
         <hr>
         <p class="text-center">
@@ -91,7 +91,7 @@
 
         </p>
     </div>
-    <div class="row m-b-25 m-t-25" data-equalizer data-equalize-on="medium">
+    <div class="row m-b-25 m-t-25 p-lr-50-sm" data-equalizer data-equalize-on="medium">
         <div class="column text-center small-12 medium-6 large-3" data-equalizer-watch>
             <img class="thumbnail" src="http://placehold.it/250x250">
             <h5 class="assortment-h5">Silikonové náramky</h5>
@@ -281,7 +281,7 @@
             <a href="#" class="button secondary m-t-25  large rounded">RYCHLÝ FORMULÁŘ</a>
         </div>
     </div>
-    <div class="white-wrapper clearfix">
+    <div class="white-wrapper clearfix p-lr-50-sm">
         <div class="row column" id="design">
             <div class="columns medium-7">
                 <h6>Design a potisk</h6>
@@ -336,58 +336,58 @@
                 <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span><i class="fa fa-fw fa-2x fa-chevron-left"></i></button>
                 <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span><i class="fa fa-fw fa-2x fa-chevron-right"></i></button>
                 <li class="orbit-slide is-active row p-lr-15">
-                    <div class="column medium-3">
-                        <img src=" http://placehold.it/250x250">.
-                    </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
+                        <img src=" http://placehold.it/250x250">
+                    </div>
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
                 </li>
                 <li class="orbit-slide row p-lr-15">
-                    <div class="column medium-3">
-                        <img src=" http://placehold.it/250x250">.
-                    </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
+                        <img src=" http://placehold.it/250x250">
+                    </div>
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
                 </li>
                 <li class="orbit-slide row p-lr-15">
-                    <div class="column medium-3">
-                        <img src=" http://placehold.it/250x250">.
-                    </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
+                        <img src=" http://placehold.it/250x250">
+                    </div>
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
                 </li>
                 <li class="orbit-slide row p-lr-15">
-                    <div class="column medium-3">
-                        <img src=" http://placehold.it/250x250">.
-                    </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
+                        <img src=" http://placehold.it/250x250">
+                    </div>
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
                 </li>
@@ -432,7 +432,7 @@
             </li>
         </ul>
         <div class="clearfix"></div>
-        <ul class="menu">
+        <ul class="menu hide-for-small-only">
             <li><a href="#" class="active">Home</a></li>
             <li><a href="#">Sortiment</a></li>
             <li><a href="#">Doprodej</a></li>
diff --git a/resources/views/visitor/cwbs_template/sortiment.html b/resources/views/visitor/cwbs_template/sortiment.html
index 1d451eed..15430ffd 100644
--- a/resources/views/visitor/cwbs_template/sortiment.html
+++ b/resources/views/visitor/cwbs_template/sortiment.html
@@ -40,18 +40,18 @@
         <div class="row column text-center m-b-25">
             <h2 id="assortment">Silikonové náramky</h2>
         </div>
-        <div class="row text-center">
-            <div class="product-category column medium-4 text-right">
-                <a href="#" class="button success large long rounded active">S debossem</a>
+        <div class="row text-center assorment-holder">
+            <div class="product-category column medium-4 small-12 text-right">
+                <a href="#" class="button success large long rounded active small-extra-large">S debossem</a>
             </div>
-            <div class="product-category column medium-4">
-                <a href="#" class="button success large long rounded">S embossem</a>
+            <div class="product-category column medium-4 small-12">
+                <a href="#" class="button success large long rounded small-extra-large">S embossem</a>
             </div>
-            <div class="product-category column medium-4 text-left">
-                <a href="#" class="button success large long rounded">S potiskem</a>
+            <div class="product-category column medium-4 small-12 text-left">
+                <a href="#" class="button success large long rounded small-extra-large">S potiskem</a>
             </div>
             <div class="clearfix"></div>
-            <p class="m-b-25 m-t-50">
+            <p class="m-b-25 m-t-50 p-lr-50-sm">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore<br>
                 magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br>
                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>
@@ -64,69 +64,69 @@
                 <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span><i class="fa fa-fw fa-2x fa-chevron-left"></i></button>
                 <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span><i class="fa fa-fw fa-2x fa-chevron-right"></i></button>
                 <li class="orbit-slide is-active row p-lr-15">
-                    <div class="column medium-3">
-                        <img src=" http://placehold.it/250x250">.
-                    </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
+                        <img src=" http://placehold.it/250x250">
+                    </div>
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
                 </li>
                 <li class="orbit-slide row p-lr-15">
-                    <div class="column medium-3">
-                        <img src=" http://placehold.it/250x250">.
-                    </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
+                        <img src=" http://placehold.it/250x250">
+                    </div>
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
                 </li>
                 <li class="orbit-slide row p-lr-15">
-                    <div class="column medium-3">
-                        <img src=" http://placehold.it/250x250">.
-                    </div>
-                    <div class="column medium-3">
+                    <div class="column medium- small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
+                        <img src=" http://placehold.it/250x250">
+                    </div>
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
                 </li>
                 <li class="orbit-slide row p-lr-15">
-                    <div class="column medium-3">
-                        <img src=" http://placehold.it/250x250">.
-                    </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
-                    <div class="column medium-3">
+                    <div class="column medium-3 small-6">
+                        <img src=" http://placehold.it/250x250">
+                    </div>
+                    <div class="column medium-3 small-6">
                         <img src=" http://placehold.it/250x250">
                     </div>
                 </li>
             </ul>
         </div>
     </div>
-</div>
-<div class="green-wrapper clearfix">
-    <div class="row column text-center" id="questions">
-        <h4 class="w-t">MÁTE DOTAZY? NEBO NÁM CHCETE ZASLAT RYCHLOU POPTÁVKU?</h4>
-        <a href="#" class="button secondary m-t-25  large rounded">RYCHLÝ FORMULÁŘ</a>
+    <div class="green-wrapper clearfix">
+        <div class="row column text-center" id="questions">
+            <h4 class="w-t">MÁTE DOTAZY? NEBO NÁM CHCETE ZASLAT RYCHLOU POPTÁVKU?</h4>
+            <a href="#" class="button secondary m-t-25  large rounded">RYCHLÝ FORMULÁŘ</a>
+        </div>
     </div>
 </div>
 <footer class="large">
@@ -166,7 +166,7 @@
             </li>
         </ul>
         <div class="clearfix"></div>
-        <ul class="menu">
+        <ul class="menu hide-for-small-only">
             <li><a href="#">Home</a></li>
             <li><a href="#" class="active">Sortiment</a></li>
             <li><a href="#">Doprodej</a></li>
diff --git a/resources/views/visitor/cwbs_template/style.css b/resources/views/visitor/cwbs_template/style.css
index 11f1f9a1..c539506d 100644
--- a/resources/views/visitor/cwbs_template/style.css
+++ b/resources/views/visitor/cwbs_template/style.css
@@ -149,4 +149,43 @@ footer a:hover {color: #46c1be;}
     #content .contact-detail h2{text-align: center; font-size: 1rem; font-weight: 500; margin-bottom: 25px; margin-top: 25px;}
     #content .contact-p {text-align: center; padding-right: 0; font-size: 0.8rem; line-height: 1.1;}
 }
+@media (max-width:639px) {
+    .orbit.header .orbit-next, .orbit.header .orbit-previous {font-size: 0.7rem; transform: translateY(-20%);}
+    .orbit.header .orbit-slide {height: 500px}
+    .orbit.header .orbit-slide:before { top: 35%; height: 45%;}
+    .orbit.header .orbit-slide .img {height: 500px;}
+    .orbit.header .orbit-slide h2 {top: 42%; padding: 20px 100px; line-height: 0.9;}
+    .orbit.header .orbit-slide h3 {display: none;}
+    .orbit.header .orbit-bullets {display: none;}
+    #chevron-down {display: none;}
+
+    .assortment-h5 {text-align: left; padding-left: 185px; font-size: 1.3rem;}
+    .assortment-p {text-align: left; padding-left: 185px; font-size: 0.75rem; width: 100%;}
+    .assortment-more-btn {text-align: left; padding-left: 185px; display: block;}
+    img.thumbnail {float: left; width: 150px; height: auto;}
+
+    #content h4 {font-size: 1rem; line-height: 1; width: 50%; float: left; padding-left: 30px; padding-right: 30px; text-align: left;}
+    #questions .button { margin-top: 7px !important;}
+
+    #design h6, #design p {text-align: center;}
+    .design-ul-block {width: 95%; margin: auto;}
+    #design .design-ul-block li h6, #design .design-ul-block li p {text-align: left;}
+
+    .contact-detail {text-align: center; margin-top: -50px;}
+    #content .contact-detail h2{text-align: center; font-size: 1rem; font-weight: 500; margin-bottom: 25px; margin-top: 25px;}
+    #content .contact-p {text-align: center; padding-right: 0; font-size: 0.8rem; line-height: 1.1;}
+
+
+    .orbit.footer .orbit-slide {height: 500px;}
+    .orbit.footer .orbit-slide .small-6{margin-bottom: 10px; float: left;}
+    .orbit.footer .orbit-slide .small-6:nth-child(even):after{}
+    .orbit.footer .orbit-slide .img {height: 530px;}
+
+    .assorment-holder .small-12 {text-align: center !important; margin-bottom: 15px;}
+    .small-extra-large {font-size: 1.2rem !important; width: 80%;}
+
+    footer {padding-top: 20px;}
+
+    .p-lr-50-sm {padding-left: 50px; padding-right: 50px;}
+}