FEATURE #1525: functional contact form template

resources/views/visitor/cwbs/assets/style.css

@@ -144,6 +144,7 @@ footer a:hover {color: #46c1be;}
     #responsive-menu {display: none;}
     .top-bar-right .menu.hide-for-large {font-size: 1.5rem; position: absolute; right: 0; top: 25px;}
     #logo {width: 175px; height: auto;}
+    .top-bar-right {margin-top: 0;}
 
     .orbit.header .orbit-next, .orbit.header .orbit-previous {font-size: 0.7rem; transform: translateY(-20%);}
     .orbit.header .orbit-slide {height: 600px}

resources/views/visitor/cwbs/defaultLayout.blade.php

@@ -0,0 +1,119 @@
+<!doctype html>
+<html>
+<head>
+    <title>Custom Wristbands.cz</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+    <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,300,500,700&subset=latin-ext,latin' rel='stylesheet'
+          type='text/css'>
+    <link href="@asset('foundation.min.css')" type="text/css" rel="stylesheet">
+    <script src="@asset('vendor/jquery.min.js')" type="text/javascript"></script>
+    <script src="@asset('foundation.min.js')" type="text/javascript"></script>
+    <link href="@asset('layout.css')" type="text/css" rel="stylesheet">
+    <link href="@asset('style.css')" type="text/css" rel="stylesheet">
+</head>
+<body>
+
+<div class="top-bar">
+    <div class="top-bar-left">
+        <ul class="menu">
+            <li class="menu-text">
+                <a href="{{route('page.index')}}">
+                    <img id="logo" src="@asset('images/cwbs_logo_medium.png')" alt="Custom Wristbands Logo">
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="top-bar-right">
+        <ul class="menu pull-right hide-for-large">
+            <li>
+                <a href="#" onclick="showResponsiveMenu()" id="show-menu">MENU<i class="fa fa-fw fa-2x fa-navicon"></i></a>
+            </li>
+        </ul>
+        <div id="responsive-menu">
+            <a href="#" id="unload-menu" class="hide-for-large" onclick="hideResponsiveMenu();"><i class="fa fa-fw fa-2x fa-mail-reply"></i></a>
+            @widgetArea('mainMenu')
+        </div>
+    </div>
+</div>
+
+<div id="content">
+    @yield('content')
+</div>
+<footer class="large">
+    <div class="row text-center">
+        <ul class="menu social-icons">
+            <li>
+                <a href="#" target="_blank">
+                    <span class="fa-stack fa-lg">
+                        <i class="fa fa-circle fa-stack-2x"></i>
+                        <i class="fa fa-facebook fa-stack-1x w-t"></i>
+                    </span>
+                </a>
+            </li>
+            <li>
+                <a href="#" target="_blank">
+                    <span class="fa-stack fa-lg">
+                        <i class="fa fa-circle fa-stack-2x"></i>
+                        <i class="fa fa fa-google-plus fa-stack-1x w-t"></i>
+                    </span>
+                </a>
+            </li>
+            <li>
+                <a href="#" target="_blank">
+                    <span class="fa-stack fa-lg">
+                        <i class="fa fa-circle fa-stack-2x"></i>
+                        <i class="fa fa-instagram fa-stack-1x w-t"></i>
+                    </span>
+                </a>
+            </li>
+            <li>
+                <a href="#" target="_blank">
+                    <span class="fa-stack fa-lg">
+                        <i class="fa fa-circle fa-stack-2x"></i>
+                        <i class="fa fa-pinterest-p fa-stack-1x w-t"></i>
+                    </span>
+                </a>
+            </li>
+        </ul>
+        <div class="clearfix"></div>
+        @widgetArea('mainMenu')
+        <div class="clearfix"></div>
+        <hr>
+        <p>
+            @widgetArea('footer')
+        </p>
+    </div>
+
+</footer>
+<script type="text/javascript">
+    $ (function () {
+        $ (document).foundation ();
+    });
+
+    var menuHolder = document.getElementById('responsive-menu');
+
+    function showResponsiveMenu() {
+        menuHolder.style.display="block";
+        menuHolder.style.height = document.documentElement.clientHeight + 'px';
+        menuHolder.style.height = window.innerHeight + 'px';
+        menuHolder.style.height = '100%;';
+    }
+
+    function hideResponsiveMenu() {
+        menuHolder.style.display="none";
+    }
+
+    window.onresize = function() {
+        if(window.innerWidth >= 1023) {
+            menuHolder.style.display="block";
+            menuHolder.style.height = "auto";
+        } else {
+            hideResponsiveMenu();
+        }
+    };
+
+</script>
+</body>
+</html>

resources/views/visitor/cwbs/homepageLayout.blade.php

@@ -159,21 +159,27 @@
         $ (document).foundation ();
     });
 
-    function showResponsiveMenu() {
     var menuHolder = document.getElementById('responsive-menu');
 
+    function showResponsiveMenu() {
         menuHolder.style.display="block";
         menuHolder.style.height = document.documentElement.clientHeight + 'px';
         menuHolder.style.height = window.innerHeight + 'px';
         menuHolder.style.height = '100%;';
-
     }
-    function hideResponsiveMenu() {
-        var menuHolder = document.getElementById('responsive-menu');
 
+    function hideResponsiveMenu() {
         menuHolder.style.display="none";
     }
 
+    window.onresize = function() {
+        if(window.innerWidth >= 1023) {
+            menuHolder.style.display="block";
+            menuHolder.style.height = "auto";
+        } else {
+            hideResponsiveMenu();
+        }
+    };
 
 </script>
 </body>

resources/views/visitor/cwbs/modules/ContactForm/contact.blade.php

@@ -0,0 +1,67 @@
+@extendVisitor('defaultLayout')
+@section('content')
+    <div class="grey-wrapper p-b-0">
+        <div class="row column text-center m-b-25 show-for-large">
+            <h2>Kontakt</h2>
+        </div>
+        <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>{{$page->module_settings->companyName}}</b></p>
+                <p class="contact-p">
+                    {!! nl2br($page->module_settings->address) !!}
+                    <br>
+                    <br>
+                    -<br>
+                    tel.: {{$page->module_settings->phone}}<br>
+                    e-mail: <a href="mailto:{{$page->module_settings->email}}">{{$page->module_settings->email}}</a></p>
+                <br>
+            </div>
+            <iframe class="column large-12 medium-6 p-lr-0" src="https://www.google.cz/maps/place/50°04'29.''N+14°23'34.8''E" style="border:0" allowfullscreen="" frameborder="0" height="250" width="100%"></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 p-lr-50-sm">
+                <h6 class="text-center uppercase m-b-25 bold">Rychlý formulář</h6>
+                <form id="form-{{$page->id}}">
+                    {!! csrf_field() !!}
+                    <div class="column medium-6">
+                        <input class="rounded large" placeholder="jméno a příjmení" name="name" type="text">
+                        <input class="rounded large" placeholder="e-mail" name="email" type="text">
+                    </div>
+                    <div class="column medium-6">
+                        <input class="rounded large" placeholder="telefon" name="phone" type="text">
+                        <input class="rounded large" placeholder="počet kusů" name="pieces" type="text">
+                    </div>
+                    <div class="column medium-12">
+                        <textarea class="rounded large" placeholder="zpráva" name="message"></textarea>
+                    </div>
+                    <div class="column medium-4">
+                        <input class="rounded large" placeholder="2+5=?" type="text" name="intCaptcha">
+                    </div>
+                    <div class="column medium-6 right">
+                        <a href="#" class="button expanded long secondary rounded" id="formSend">ODESLAT</a>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <script type="text/javascript">
+            $('#formSend').click(function() {
+                this.value = 'Odesílám...';
+                $.ajax({
+                    url: "{{route('email.send', ['formId' => $page->id])}}",
+                    method: 'post',
+                    data: $('#form-{{$page->id}}').serialize()
+                }).done(function(resp) {
+                    if(resp.status == true) {
+                        alert('Úspešne ste nám odoslali správu. Odpovieme Vám čo najskôr!');
+                        window.top.location.reload();
+                    } else {
+                        alert(resp.message);
+                    }
+                    this.value="ODESLAT";
+                });
+            });
+        </script>
+        <div class="clearfix"></div>
+    </div>
+@endsection