FEATURE #2351 @30m: modify responsive version

templates/PragueTennisCamp/Resources/assets/css/app.css

@@ -17,6 +17,10 @@ a {
 	color: #FF7F11;
 }
 
+a:hover {
+	color: #983628;
+}
+
 /** HEADER **/
 header.top-bar {
 	background: #3F3F37;
@@ -52,6 +56,11 @@ header.top-bar h1 a {
 	background: #FF7F11;
 }
 
+.menu a:hover {
+	background: #983628;
+	transition: background 400ms linear;
+}
+
 .logo {
 	max-height: 25px;
 	margin: 0 15px;
@@ -59,7 +68,6 @@ header.top-bar h1 a {
 
 /** END HEADER **/
 
-
 .stripe {
 	width: 100%;
 }
@@ -90,7 +98,7 @@ header.top-bar h1 a {
 
 .orbit .stripe {
 	height: 20px;
-	background: rgba(255,127,17, 0.3);
+	background: rgba(255, 127, 17, 0.3);
 	position: absolute;
 	left: 0;
 	right: 0;
@@ -114,6 +122,7 @@ header.top-bar h1 a {
 .trainee-team {
 	margin-top: 2em;
 }
+
 .trainee-team .thumbnail {
 	max-height: 150px;
 }
@@ -132,12 +141,24 @@ header.top-bar h1 a {
 	border: solid 1px #CCC;
 }
 
-
 #footer {
+	margin-bottom: 150px;
+}
+
+#footer-widgets {
 	border-top: solid 2px #FF7F11;
 	background: #3F3F37;
-	margin-bottom: 150px;
 	padding: 1em;
 	border-radius: 0 0 5px 5px;
 	color: #EEF4D4;
 }
+
+#binarity {
+	margin-top: 2em;
+}
+
+@media screen and (max-width: 639px) {
+	.menu > li {
+		display: block !important;
+	}
+}

templates/PragueTennisCamp/Resources/views/modules/contactform/visitor/default.blade.php

@@ -1,11 +1,10 @@
 @extendVisitor('defaultLayout')
 
 @section('topMenu')
-    <div class="top-bar-right">
+    @include(\App\CMS\Helpers\Template::name('commonHeader'))
-        @widgetArea('mainMenu')
-    </div>
 @endsection
 
+
 @section('content')
 
     <div class="row content-container">

templates/PragueTennisCamp/Resources/views/modules/staticpages/visitor/default.blade.php

@@ -1,18 +1,7 @@
 @extendVisitor('defaultLayout')
 
 @section('topMenu')
-    <div class="top-bar-left hide-for-small-only">
+    @include(\App\CMS\Helpers\Template::name('commonHeader'))
-        <h1 class="text-center">
-            <a href="{{route('page.index')}}">
-                <img class="logo" src="@asset('visitor/images/logo.png')" alt="">
-                {{setting('pageName')}}
-            </a>
-        </h1>
-    </div>
-
-    <div class="top-bar-right">
-        @widgetArea('mainMenu')
-    </div>
 @endsection
 
 @section('content')

templates/PragueTennisCamp/Resources/views/modules/staticpages/visitor/homepage.blade.php

@@ -1,14 +1,23 @@
 @extendVisitor('defaultLayout', ['test' => 1])
 
 @section('topMenu')
-    <div class="hide-for-small-only">
+    <h1 class="text-center">
-        <h1 class="text-center">
+        <a href="{{route('page.index')}}">
-            <a href="{{route('page.index')}}">
+            <img class="logo" src="@asset('visitor/images/logo.png')" alt="">
-                <img class="logo" src="@asset('visitor/images/logo.png')" alt="">
+            {{setting('pageName')}}
-                {{setting('pageName')}}
+        </a>
-            </a>
+    </h1>
-        </h1>
+
+    <div class="title-bar text-right" data-responsive-toggle="main-menu" data-hide-for="medium">
+        <button class="menu-icon" type="button" data-toggle></button>
     </div>
+
+    <header class="hide-for-small hide-for-medium hide-for-large top-bar centered text-center">
+        <div id="main-menu">
+            @widgetArea('mainMenu')
+        </div>
+    </header>
+
 @endsection
 
 @section('content')
@@ -29,11 +38,9 @@
                     <button @if($i == 0) class="is-active" @endif data-slide="{{$i}}"></button>
                 @endforeach
             </nav>
-
-            {{--<div class="stripe orbit-top"></div>--}}
-            {{--<div class="stripe orbit-bottom"></div>--}}
         </div>
-        <header class="top-bar centered text-center">
+
+        <header class="hide-for-small-only top-bar centered text-center">
             @widgetArea('mainMenu')
         </header>
     @endif

templates/PragueTennisCamp/Resources/views/visitor/commonHeader.blade.php

@@ -0,0 +1,19 @@
+<div class="title-bar text-right" data-responsive-toggle="main-menu" data-hide-for="medium">
+    <button class="menu-icon" type="button" data-toggle></button>
+</div>
+
+<div id="main-menu">
+    <div class="top-bar-left hide-for-medium-only hide-for-small-only">
+        <h1 class="text-center">
+            <a href="{{route('page.index')}}">
+                <img class="logo" src="@asset('visitor/images/logo.png')" alt="">
+                {{setting('pageName')}}
+            </a>
+        </h1>
+    </div>
+
+    <div class="top-bar-right">
+        @widgetArea('mainMenu')
+    </div>
+</div>
+

templates/PragueTennisCamp/Resources/views/visitor/defaultLayout.blade.php

@@ -45,10 +45,10 @@
 <div class="clearfix"></div>
 
 
-<footer id="footer" class="row">
+<footer class="row" id="footer">
-    <div id="footer-widgets text-center">
+        <div id="footer-widgets" class=" text-center">
-        @widgetArea('footer')
+            @widgetArea('footer')
-    </div>
+        </div>
     <div id="binarity" class="text-right">
         <a target="_blank" href="https://www.binarity.cz/"> binarity s.r.o.</a>
     </div>