From 5e51edcd48dd40aa94fe52e3f3f9bc3b32929dd2 Mon Sep 17 00:00:00 2001
From: peter <peter@binarity.cz>
Date: Fri, 1 Apr 2016 19:34:50 +0200
Subject: [PATCH] FEATURE #1525: Added responsive version of contacts page for
 1000px

---
 .../views/visitor/cwbs_template/contact.html  | 60 ++++++++++---------
 .../views/visitor/cwbs_template/style.css     |  8 ++-
 2 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/resources/views/visitor/cwbs_template/contact.html b/resources/views/visitor/cwbs_template/contact.html
index 3328a5a8..bf24412a 100644
--- a/resources/views/visitor/cwbs_template/contact.html
+++ b/resources/views/visitor/cwbs_template/contact.html
@@ -37,42 +37,44 @@
 
 <div id="content">
     <div class="grey-wrapper p-b-0">
-        <div class="row column text-center m-b-25">
+        <div class="row column text-center m-b-25 show-for-large">
             <h2>Kontakt</h2>
         </div>
-        <div class="medium-6 column p-lr-0">
-            <div class="text-right">
+        <div class="medium-12 large-6 column columns p-lr-0 contact-detail">
+            <div class="column text-right large-12 medium-6 p-lr-0">
+                <h2 class="hide-for-large">Kontakt</h2>
                 <p class="contact-p green-text"><b>CUSTOM WRISTBANDS s.r.o.</b></p>
-                <p class="contact-p">Pražská 222/22</p>
-                <p class="contact-p">120 00 Praha 2</p>
-                <p class="contact-p">IČ: 012 345 67</p>
+                <p class="contact-p">Pražská 222/22<br>
+                120 00 Praha 2<br>
+                IČ: 012 345 67<br>
                 <br>
-                <p class="contact-p">-</p>
-                <p class="contact-p">tel.: +420 606 666 111</p>
-                <p class="contact-p">e-mail: <a href="mailto:">info@cw.cz</a></p>
+                -<br>
+                tel.: +420 606 666 111<br>
+                e-mail: <a href="mailto:">info@cw.cz</a></p>
                 <br>
-                <iframe 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="240" frameborder="0" style="border:0" allowfullscreen></iframe>
             </div>
-
+            <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="medium-6 column green-wrapper p-25" id="contact-form">
-            <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í">
-                <input type="text" class="rounded large" placeholder="e-mail">
-            </div>
-            <div class="column medium-6">
-                <input type="text" class="rounded large" placeholder="telefon">
-                <input type="text" class="rounded large" placeholder="počet kusů">
-            </div>
-            <div class="column medium-12">
-                <textarea class="rounded large" placeholder="zpráva"></textarea>
-            </div>
-            <div class="column medium-4">
-                <input type="text" class="rounded large" placeholder="2+5=?">
-            </div>
-            <div class="column medium-6 right">
-                <a href="#" class="button expanded long secondary rounded">ODESLAT</a>
+        <div class="large-6 column green-wrapper p-25" id="contact-form">
+            <div class="column large-12 medium-8 medium-centered p-lr-0">
+                <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í">
+                    <input type="text" class="rounded large" placeholder="e-mail">
+                </div>
+                <div class="column medium-6">
+                    <input type="text" class="rounded large" placeholder="telefon">
+                    <input type="text" class="rounded large" placeholder="počet kusů">
+                </div>
+                <div class="column medium-12">
+                    <textarea class="rounded large" placeholder="zpráva"></textarea>
+                </div>
+                <div class="column medium-4">
+                    <input type="text" class="rounded large" placeholder="2+5=?">
+                </div>
+                <div class="column medium-6 right">
+                    <a href="#" class="button expanded long secondary rounded">ODESLAT</a>
+                </div>
             </div>
         </div>
         <div class="clearfix"></div>
diff --git a/resources/views/visitor/cwbs_template/style.css b/resources/views/visitor/cwbs_template/style.css
index ebb50ced..11f1f9a1 100644
--- a/resources/views/visitor/cwbs_template/style.css
+++ b/resources/views/visitor/cwbs_template/style.css
@@ -19,7 +19,7 @@ a:hover {text-decoration: underline;}
 .button.success {background-color: #46c1be;}
 .button.success:hover, .button.success:focus, .button.success:active, .button.success.active {background-color: #4D4D4F;}
 .button.large, .button.expanded {font-size:0.9rem; padding: 0.9em 2.4em; font-weight: 700; margin-bottom: 0;}
-.button.large.long {padding: 0.9em 4em;}
+.button.large.long {padding: 0.9em 4em; text-transform: uppercase;}
 .button.expanded.long {height: 3rem; padding: 1em 4em;}
 .w-t {color: #ffffff}
 .green-text {color: #46c1be !important;}
@@ -121,7 +121,7 @@ img.thumbnail:focus, img.thumbnail:hover {box-shadow: none; border-color: #fffff
 
 .image-bullet {margin-right: 7px; position: relative; top: -3px;}
 .contact-p {margin-bottom: 0; padding-right: 50px; line-height: 1rem; font-weight: 300;}
-#content p.contact-p.green-text {color: #46c1be !important;}
+#content p.contact-p.green-text>b {color: #46c1be !important;}
 
 footer {padding-top: 50px;}
 footer .menu {display: inline-block;}
@@ -144,5 +144,9 @@ footer a:hover {color: #46c1be;}
     .assortment-p {text-align: left; padding-left: 175px; font-size: 0.75rem; width: 100%;}
     .assortment-more-btn {text-align: left; padding-left: 175px; display: block;}
     img.thumbnail {float: left; width: 150px; height: auto;}
+
+    .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;}
 }