FEATURE #1525: fully functional homepage design

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

@@ -16,19 +16,25 @@
 <body>
 
 <div class="top-bar homepage">
-
     <div class="top-bar-left">
         <ul class="menu">
             <li class="menu-text">
                 <a href="{{route('page.index')}}">
-                    <img src="@asset('images/cwbs_logo_medium.png')" alt="Custom Wristbands Logo">
+                    <img id="logo" src="@asset('images/cwbs_logo_medium.png')" alt="Custom Wristbands Logo">
                 </a>
             </li>
         </ul>
     </div>
     <div class="top-bar-right">
-        {{--CHYBI RESPONZIVNI MENU--}}
-        @widgetArea('mainMenu')
+        <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>
 @widgetArea('homepageSlider')
@@ -43,8 +49,8 @@
         </div>
     </div>
     <div class="white-wrapper clearfix">
-        <div class="row column" id="design">
-            <div class="columns medium-7">
+        <div class="row column medium-11 small-10 small-centered medium-centered " id="design">
+            <div class="columns medium-7 ">
                 @widgetArea('infoSirsi')
                 {{--<h6>Design a potisk</h6>--}}
                 {{--<p>--}}
@@ -152,6 +158,23 @@
     $ (function () {
         $ (document).foundation ();
     });
+
+    function showResponsiveMenu() {
+        var menuHolder = document.getElementById('responsive-menu');
+
+        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');
+
+        menuHolder.style.display="none";
+    }
+
+
 </script>
 </body>
 </html>