Merge branch 'development' into 730-tabindex-und-autofokus-verwenden

app/Http/Controllers/MetaGerSearch.php

@@ -5,7 +5,6 @@ namespace App\Http\Controllers;
 use App;
 use App\MetaGer;
 use Illuminate\Http\Request;
-use LaravelLocalization;
 
 class MetaGerSearch extends Controller
 {
@@ -13,15 +12,15 @@ class MetaGerSearch extends Controller
     {
 
         $focus = $request->input("focus", "web");
-        
+
         if ($focus === "maps") {
             $searchinput = $request->input('eingabe', '');
             return redirect()->to('https://maps.metager.de/map/' . $searchinput . '/1240908.5493525574,6638783.2192695495,6');
         }
 
         /*if ($focus !== "angepasst" && $this->startsWith($focus, "focus_")) {
-            $metager->parseFormData($request);
-            return $metager->createView();
+        $metager->parseFormData($request);
+        return $metager->createView();
         }*/
 
         #die($request->header('User-Agent'));
@@ -35,7 +34,7 @@ class MetaGerSearch extends Controller
         # Die Quicktips als Job erstellen
         $quicktips = $metager->createQuicktips();
 
-        # Suche für alle zu verwendenden Suchmaschinen als Job erstellen, 
+        # Suche für alle zu verwendenden Suchmaschinen als Job erstellen,
         # auf Ergebnisse warten und die Ergebnisse laden
         $metager->createSearchEngines($request);
 
@@ -62,7 +61,7 @@ class MetaGerSearch extends Controller
 
     public function get($url)
     {
-	   $ctx = stream_context_create(array('http'=>array('timeout' => 2,)));
+        $ctx = stream_context_create(array('http' => array('timeout' => 2)));
         return file_get_contents($url, false, $ctx);
     }
 

app/Models/Quicktips/Quicktips.php

@@ -13,6 +13,7 @@ class Quicktips
     use DispatchesJobs;
 
     const QUICKTIP_URL = "https://quicktips.metager3.de/quicktips.xml";
+    //const QUICKTIP_URL = "http://localhost:63825/quicktips.xml";
     const QUICKTIP_NAME = "quicktips";
     const CACHE_DURATION = 60;
 
@@ -25,7 +26,7 @@ class Quicktips
 
     public function startSearch($search, $locale, $max_time)
     {
-        $url = self::QUICKTIP_URL . "?search=" . $search . "&locale=" . $locale;
+        $url = self::QUICKTIP_URL . "?search=" . $this->normalize_search($search) . "&locale=" . $locale;
 
         $hash = md5($url);
 
@@ -82,6 +83,7 @@ class Quicktips
         Redis::hdel('search.' . $hash, self::QUICKTIP_NAME);
         Cache::put($hash, $body, self::CACHE_DURATION);
         #}
+
         if ($body !== "") {
             return $body;
         } else {
@@ -168,4 +170,9 @@ class Quicktips
             return [];
         }
     }
+
+    public function normalize_search($search)
+    {
+        return urlencode($search);
+    }
 }

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

@@ -4,8 +4,9 @@
 @import "./result-saver.less";
 @import "./result.less";
 @import "./product.less";
-@result-width: 700px;
-@quicktip-width: 500px;
+//
+@resultpage-background-color: #FAFAFA;
+//
 @results-margin-left: @resultpage-leftbox-big-screen-margin-left;
 //
 @result-page-body-background-color: @background-color;
@@ -18,6 +19,24 @@
 @a-hover-color: @result-page-a-hover-color;
 @a-donation-hover-color: @result-page-a-hover-color;
 @product-shop-color: @result-page-product-shop-color;
+//
+@results-width-min: 500px;
+@results-width-max: 700px;
+@additions-width-min: 400px;
+@additions-width-max: 500px;
+//
+@resultpage-breakpoint-large: (@results-width-max + @additions-width-max + @padding-small-default * 4);
+@resultpage-breakpoint-small: (@results-width-min + @additions-width-min + @padding-small-default * 4);
+//
+@resultpage-leftbox-max-width: @results-width-max;
+@resultpage-leftbox-min-dist-left-right: @padding-small-default;
+@resultpage-leftbox-min-dist-top-bottom: @padding-small-default;
+@resultpage-leftbox-big-screen-margin-left: 50px;
+//
+@logo-size-breakpoint: (@results-width-min + @padding-small-default * 2);
+//
+@openSidebar-breakpoint: (@results-width-max + @padding-small-default * 2 + 60px);
+//
 #header-logo {
     z-index: 0;
     padding-right: 10px;
@@ -27,12 +46,24 @@
         font-size: 22px;
         display: inline-block;
     }
+    .screen-small {
+        display: none;
+    }
+    .screen-large {}
+    @media (max-width: @logo-size-breakpoint) {
+        .screen-large {
+            display: none;
+        }
+        .screen-small {
+            display: initial;
+        }
+    }
 }
 
 body {
-    &#resultBody {
+    &#resultpage-body {
         background-image: inherit;
-        background-color: #FAFAFA;
+        background-color: @resultpage-background-color;
     }
     &.quicktips {
         background-color: @quicktip-background-color;
@@ -186,7 +217,7 @@ a {
 }
 
 .description-container {
-    margin: 0!important;
+    margin: 0 !important;
 }
 
 .options-list>li {
@@ -211,7 +242,6 @@ a {
     display: none;
 }
 
-
 /* Hier der Style für die Bilder */
 
 #fit-width .masonry {
@@ -234,7 +264,6 @@ a {
     flex-wrap: wrap;
 }
 
-
 /* Placeholder für ladende Tabs */
 
 .loader {
@@ -284,7 +313,7 @@ a {
 }
 
 .lightslider {
-    overflow: visible!important;
+    overflow: visible !important;
 }
 
 #products {
@@ -317,7 +346,6 @@ a {
     }
 }
 
-
 /* New result style */
 
 .content-wrapper {
@@ -326,37 +354,178 @@ a {
 }
 
 #resultpage-container {
-    width: @result-width + @quicktip-width;
-    align-self: left;
-    display: flex;
-    justify-content: left;
-    margin-left: @results-margin-left;
-    background-color: #FAFAFA;
-    @media (max-width: (2 * @results-margin-left + @result-width + @quicktip-width - 1px)) {
-        width: @result-width;
+    margin: @padding-small-default;
+    display: grid;
+    grid-template-columns: @results-width-max @additions-width-max;
+    grid-template-areas: "searchbar ." "foki ." "results additions";
+    grid-column-gap: (@padding-small-default * 2);
+    grid-row-gap: @padding-small-default;
+    justify-items: stretch;
+    align-items: stretch;
+    /**/
+    background-color: @resultpage-background-color;
+    #research-bar-container {
+        grid-area: searchbar;
+        /**/
+        width: (@results-width-max + @padding-small-default * 2);
+        max-width: (@results-width-max + @padding-small-default * 2);
+    }
+    #research-bar-placeholder {
+        grid-area: searchbar;
+        /**/
+        max-width: @results-width-max;
+    }
+    #foki {
+        grid-area: foki;
+        /**/
+        max-width: @results-width-max;
+    }
+    #results-container {
+        grid-area: results;
+        /**/
+        max-width: @results-width-max;
+        .alert {
+            margin: @padding-small-default 0px;
+        }
+    }
+    #additions-container {
+        grid-area: additions;
+        /**/
+        //min-width: @additions-width-min;
+        max-width: @additions-width-max;
+        #search-settings {
+            display: none;
+        }
+    }
+    @media (max-width: @resultpage-breakpoint-large) {
+        @supports (display: grid) {
+            #research-bar-container {
+                width: ~"calc(60% - 1px)";
+            }
+            grid-template-columns:~"calc(60% - 8px)"~"calc(40% - 8px)";
+            grid-template-areas: "searchbar ." "foki ." "results additions";
+        }
+    }
+    @media (max-width: @resultpage-breakpoint-small) {
+        #research-bar-container {
+            width: 100%;
+        }
+        grid-template-columns: 100%;
+        grid-template-areas: "searchbar" "foki" "results";
         #additions-container {
             display: none;
-            float: right;
         }
     }
-    @media (max-width: (2 * @results-margin-left + @result-width - 1px)) {
+}
+
+#research-bar-container {
+    position: fixed;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    background-color: @resultpage-background-color;
+    padding: 8px 8px 0px 8px;
+    #research-bar {
+        background-color: white;
+        border: 1px solid #ccc;
+        border-bottom: 2px solid @metager-orange;
+        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
+        display: flex;
+        align-items: center;
+        padding: 4px;
+        .resultpage-searchbar {
+            .search-input-submit .search-input input {
+                border-bottom: 1px solid #ccc;
+            }
+            @media (max-width: @openSidebar-breakpoint) {
+                .search-focus-selector {
+                    border-top: none;
+                    border-radius: 5px;
+                }
+                .search-input-submit {
+                    border-radius: 5px;
+                }
+                >* {
+                    border-radius: 5px;
+                    min-height: 40px;
+                    &:not(:first-child) {
+                        border-left: 1px solid #aaa;
+                    }
+                }
+            }
+        }
+    }
+}
+
+#foki {
+    display: flex;
+    justify-content: left;
+    /*
+    @media (max-width: (@results-width-min + @additions-width-min - 1px)) {
         width: 100%;
-        justify-content: center;
+        max-width: none;
         margin: 0px;
-        padding: 0px @resultpage-leftbox-min-dist-left-right; // Verhindert, dass Text bei kleinen Bildschirmen an den Rand ragt
+        padding: @padding-small-default;
+        .scrollbox {
+            max-width: none;
+            margin: 0px;
+            #foki-box {
+                max-width: none;
+                margin: 0px;
+            }
+        }
     }
-    #results-container {
-        max-width: @result-width;
+    @media (max-width: (4 * @padding-small-default + @results-width-max + @additions-width-max - 1px)) {
+        padding-left: @padding-small-default;
+    }
+    @media (max-width: (@results-width-min + @additions-width-min - 1px)) {
         width: 100%;
-        .alert {
-            margin: 8px 0px;
+        max-width: 700px;
+        margin: 0px;
+        padding: @padding-small-default;
+        #research-bar {
+            max-width: none;
+            margin: 0px;
         }
     }
-    #additions-container {
-        padding-left: 50px;
-        width: @quicktip-width;
-        #search-settings {
-            display: none;
+    */
+    #foki-box {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        width: 100%;
+        max-width: @resultpage-leftbox-max-width;
+        background-color: white;
+        border: 1px solid #ccc;
+        -webkit-box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
+        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
+        overflow-x: visible;
+        padding: 10px;
+        @media (max-width: 700px) {
+            overflow-x: auto;
+        }
+        &>div {
+            padding: 0px 10px;
+            &>a {
+                color: black;
+            }
+            &.active>a {
+                border-bottom: 1px solid @metager-orange;
+                color: @metager-orange;
+            }
+            &:last-child {
+                padding-right: 20px
+            }
+        }
+        .edit-focus {
+            margin-left: 7px;
+        }
+        /* Scrollbar Style */
+        &::-webkit-scrollbar {
+            height: 0px;
+            /* remove scrollbar space */
+            background: transparent;
+            /* optional: just make scrollbar invisible */
         }
     }
 }
@@ -374,7 +543,43 @@ footer.resultPageFooter {
     max-width: 700px;
     margin-left: 50px;
     margin-top: 20px;
-    @media (max-width: (2 * @results-margin-left + @result-width - 1px)) {
+    @media (max-width: (2 * @results-margin-left + @results-width-max - 1px)) {
         margin: 20px 0 0 0;
     }
+}
+
+/* Searchbar Opener */
+
+#research-bar>.openSidebar {
+    display: none;
+    margin-right: 10px;
+    margin-left: 20px;
+}
+
+@media(max-width: @openSidebar-breakpoint) {
+    #resultpage-container>.openSidebar {
+        display: none;
+    }
+    #research-bar>.openSidebar {
+        display: initial;
+    }
+}
+
+/* Style-fixes for browsers that do not support grid layout */
+
+#resultpage-container {
+    #results-container {
+        float: left;
+        @media (max-width: @resultpage-breakpoint-small) {
+            float:none;
+        }
+    }
+    #additions-container {
+        float: left;
+        margin-left: 20px;
+        @supports (display: grid) {
+            float: none;
+            margin-left: 0px;
+        }
+    }
 }
\ No newline at end of file

resources/assets/less/metager/result.less

@@ -50,7 +50,7 @@
             }
         }
     }
-    .result-body {
+    .resultpage-body {
         margin-top: 20px;
         .result-description {
             margin-bottom: 3px;

resources/assets/less/metager/searchbar.less

@@ -24,9 +24,6 @@
         display: -ms-flexbox;
         display: flex;
         max-width: 600px;
-        @media (max-width: @screen-xs-max) {
-            max-width: initial;
-        }
     }
     .search-input {
         -webkit-box-flex: 1;
@@ -79,6 +76,9 @@
     }
     .search-input-submit {
         border-radius: 5px;
+        @media (max-width: @screen-xs-max) {
+            max-width: initial;
+        }
     }
     .search-submit {
         border-left: 1px solid #aaa;
@@ -104,159 +104,19 @@
     }
 }
 
-.resultpage-searchbar {
-    padding: 5px;
-    .search-input-submit .search-input input {
-        border-bottom: 1px solid #ccc;
-    }
-    @media (max-width: @screen-xs-max) {
-        .search-focus-selector {
-            border-top: none;
-            border-radius: 5px;
-        }
-        .search-input-submit {
-            border-radius: 5px;
-        }
-        >* {
-            border-radius: 5px;
-            min-height: 40px;
-            &:not(:first-child) {
-                border-left: 1px solid #aaa;
-            }
-        }
-        *:not(.search-submit) {
-            width: 100%;
-        }
-    }
-}
-
-@resultpage-leftbox-max-width: @result-width;
-@resultpage-leftbox-min-dist-left-right: 8px;
-@resultpage-leftbox-min-dist-top-bottom: 8px;
-@resultpage-leftbox-big-screen-margin-left: 50px;
-header {
-    padding-top: @resultpage-leftbox-min-dist-top-bottom;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    position: fixed;
-    z-index: 100; // Makes the header larger, so it correctly covers the non scrolling parts below
-    width: @resultpage-leftbox-max-width + @resultpage-leftbox-big-screen-margin-left + 10;
-    padding-left: @resultpage-leftbox-big-screen-margin-left;
-    background-color: inherit;
-    @media (max-width: 799px) {
-        width: 100%;
-        max-width: 799px;
-        margin: 0px;
-        padding: @resultpage-leftbox-min-dist-top-bottom @resultpage-leftbox-min-dist-left-right 0px @resultpage-leftbox-min-dist-left-right;
-        -webkit-box-pack: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-    }
-    #research-bar {
-        width: 100%;
-        max-width: @resultpage-leftbox-max-width;
-        padding: 0px 30px 0px 10px;
-        background-color: white;
-        border: 1px solid #ccc;
-        border-bottom: 2px solid @metager-orange;
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        -webkit-box-pack: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        -webkit-box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
-        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
-        @media (max-width: 799px) {
-            margin: 0px @resultpage-leftbox-min-dist-left-right;
-        }
-    }
-}
-
 header:nth-child(1) {
     @media (max-width: 1400px) {
         position: relative;
     }
 }
 
-#foki {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: left;
-    -ms-flex-pack: left;
-    justify-content: left;
-    margin-left: @resultpage-leftbox-big-screen-margin-left;
-    padding-top: 8px;
-    width: @resultpage-leftbox-max-width;
-    @media (max-width: 799px) {
-        width: 100%;
-        margin: 0px;
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-pack: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        padding: @resultpage-leftbox-min-dist-top-bottom @resultpage-leftbox-min-dist-left-right 0px @resultpage-leftbox-min-dist-left-right;
-    }
-    #foki-box {
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        width: 100%;
-        max-width: @resultpage-leftbox-max-width;
-        background-color: white;
-        border: 1px solid #ccc;
-        -webkit-box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
-        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
-        overflow-x: visible;
-        padding: 10px;
-        @media (max-width: 700px) {
-            overflow-x: auto;
-        }
-        &>div {
-            padding: 0px 10px;
-            &>a {
-                color: black;
-            }
-            &.active>a {
-                border-bottom: 1px solid @metager-orange;
-                color: @metager-orange;
-            }
-            &:last-child {
-                padding-right: 20px
-            }
-        }
-        .edit-focus {
-            margin-left: 7px;
-        }
-        /* Scrollbar Style */
-        &::-webkit-scrollbar {
-            height: 0px;
-            /* remove scrollbar space */
-            background: transparent;
-            /* optional: just make scrollbar invisible */
-        }
-    }
-}
-
 /* Scrollbar Style */
 
 @scrollfade-color: white;
 .scrollbox {
     position: relative;
     width: 100%;
-    max-width: @result-width;
+    max-width: @results-width-max;
     .foki-scrollfade {
         &-left,
         &-right {
@@ -295,10 +155,11 @@ header:nth-child(1) {
 
 #search-delete-btn {
     position: absolute;
-    right: 0;
-    bottom: 0px;
+    right: 2px;
+    bottom: 1px;
+    width: auto;
     border: none;
-    background-color: transparent;
+    background-color: white;
     font-size: 25px;
     font-weight: normal;
 }
\ No newline at end of file

resources/assets/less/metager/sidebar.less

@@ -142,11 +142,13 @@ input#sideBarToggle:checked {
     }
 }
 
-label#openSidebar {
-    position: fixed;
-    top: 23px;
-    right: 25px;