Merge branch '311-mobile-styles-per-media-queries' into 'development'

Resolve "Mobile-Styles per media-queries"

Closes #311

See merge request !569

resources/assets/less/default.less

 @import "./bootstrap/bootstrap.less";
 @import "./metager/metager.less";
 
-@import "./bootstrap/variables.less";
 @import "./variables-default.less";
 
 /*input[type=text]:focus, textarea:focus, input[type=email]:focus, input[type=tel]:focus {

resources/assets/less/metager/result-page.less

@@ -37,8 +37,17 @@ border-radius: 0;
 /* Hier der Style für unsere Suchleiste */
 
 .navbar-resultpage {
+    right: initial;
+    left: initial;
     margin-bottom: 0px;
 }
+ 
+@media (max-width: @screen-xs-max) {
+    .navbar-resultpage {
+        right: 0px!important;
+        left: 0px!important;
+    }
+}
 
 .tab-pane .alert {
     margin: 10px 0;
@@ -50,14 +59,22 @@ border-radius: 0;
     padding-left: 49px;
 }
 
-.navbar-resultpage div {
+.navbar-resultpage .container {
     padding: 0px;
     margin: 0px;
 }
+
+.navbar-resultpage .logo {
+    padding-top: 0px;
+}
 .navbar-resultpage .input-group {
     margin: 0px 5px;
 }
 
+.dense-col {
+    padding: 0px
+}
+
 /* Logo */
 
 .logo {
@@ -117,14 +134,6 @@ nav .input-group {
 
 .navbar-resultpage {
     background-color: white;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    //height: 60px;
-    z-index: 500;
-    width: 80%;
-    left: 50%;
-    margin-left: -40%;
 }
 
 .logo h1 {
@@ -148,10 +157,8 @@ nav .input-group {
 }
 
 .content-wrapper {
-    width: 80%;
-    margin: 0 auto;
+    padding: 0px;
     padding-top: 52px;
-    /* padding: 10px; */
     background-color: white;
     -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.3);

resources/assets/less/variables-default.less

@@ -16,4 +16,11 @@
 @link-hover-decoration: underline;
 
 
-@font-size-base:          14px;
\ No newline at end of file
+@font-size-base:          14px;
+
+
+@screen-md:                  1200px;
+@container-desktop:            (1100px + @grid-gutter-width);
+
+@screen-lg:                  1500px;
+@container-large-desktop:      (1400px + @grid-gutter-width);
\ No newline at end of file

resources/views/layouts/researchandtabs.blade.php

@@ -8,15 +8,15 @@
                 </div>
         </div>
         @endif
-<div class="content-wrapper">
-        <header id="research">
-            <nav class="navbar navbar-default navbar-resultpage">
-                <div class="container-fluid">
+<div class="content-wrapper container">
+        <header id="research" class="row">
+            <nav class="navbar navbar-default  navbar-fixed-top navbar-resultpage">
+                <div class="container">
                 <div class="row">
-                    <div class="col-xs-3 logo">
+                    <div class="col-xs-3 logo dense-col">
                         <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1>M<span class="hidden-xs">eta</span>G<span class="hidden-xs">er</span></h1></a>
                     </div>
-                    <div class="col-xs-9">
+                    <div class="col-xs-9 dense-col">
                         <form method="{{ Request::method() }}" accept-charset="UTF-8" class="form" id="submitForm">
                             <div class="input-group">
                                 <input autocomplete="off" class="form-control" form="submitForm" id="eingabeTop" name="eingabe" placeholder="Suchbegriffe erweitern/verändern, oder völlig neue Suche:" tabindex="1" type="text" value="{{ $eingabe }}" required />
@@ -128,7 +128,7 @@
         @endif
         </ul>
         </header>
-        <div class="tab-content container-fluid">
+        <main class="tab-content row">
 
             @if( $metager->getFokus() === "web" )
             <div role="tabpanel" class="tab-pane active" id="web">
@@ -213,5 +213,5 @@
                 </div>
             </div>
             @endif
-        </div>
+        </main>
     </div>