Merge branch '1154-add-breakpoints-for-image-search' into 'development'

Resolve "Add Breakpoints for image search"

Closes #1154

See merge request !1918

app/MetaGer.php

@@ -93,19 +93,19 @@ class MetaGer
             $tmp = file_get_contents(config_path() . "/blacklistUrl.txt");
             $this->urlsBlacklisted = explode("\n", $tmp);
         }
-        
+
         # Versuchen Blacklists einzulesen
         if (file_exists(config_path() . "/adBlacklistDomains.txt")) {
             $tmp = file_get_contents(config_path() . "/adBlacklistDomains.txt");
             $this->adDomainsBlacklisted = explode("\n", $tmp);
         }
 
-        if(file_exists(config_path() . "/adBlacklistUrl.txt")){
+        if (file_exists(config_path() . "/adBlacklistUrl.txt")) {
             $tmp = file_get_contents(config_path() . "/adBlacklistUrl.txt");
             $this->adUrlsBlacklisted = explode("\n", $tmp);
         }
 
-        if(file_exists(config_path() . "/blacklistDescriptionUrl.txt")){
+        if (file_exists(config_path() . "/blacklistDescriptionUrl.txt")) {
             $tmp = file_get_contents(config_path() . "/blacklistDescriptionUrl.txt");
             $this->blacklistDescriptionUrl = explode("\n", $tmp);
         }
@@ -172,6 +172,7 @@ class MetaGer
                         ->with('errors', $this->errors)
                         ->with('apiAuthorized', $this->apiAuthorized)
                         ->with('metager', $this)
+                        ->with('imagesearch', true)
                         ->with('browser', (new Agent())->browser());
                 default:
                     return view('resultpages.resultpage_images')
@@ -185,6 +186,7 @@ class MetaGer
                         ->with('browser', (new Agent())->browser())
                         ->with('quicktips', $quicktipResults)
                         ->with('focus', $this->fokus)
+                        ->with('imagesearch', true)
                         ->with('resultcount', count($this->results));
             }
         } else {
@@ -292,7 +294,7 @@ class MetaGer
         if (!empty($timings)) {
             $timings["prepareResults"]["validated results"] = microtime(true) - $timings["starttime"];
         }
-        
+
         $this->duplicationCheck();
         if (!empty($timings)) {
             $timings["prepareResults"]["duplications checked"] = microtime(true) - $timings["starttime"];
@@ -301,8 +303,8 @@ class MetaGer
         $newResults = [];
         foreach ($this->ads as $ad) {
             if (($ad->strippedHost !== "" && (in_array($ad->strippedHost, $this->adDomainsBlacklisted) ||
-                in_array($ad->strippedLink, $this->adUrlsBlacklisted))) || ($ad->strippedHostAnzeige !== "" && (in_array($ad->strippedHostAnzeige, $this->adDomainsBlacklisted) ||
-                in_array($ad->strippedLinkAnzeige, $this->adUrlsBlacklisted)))
+                    in_array($ad->strippedLink, $this->adUrlsBlacklisted))) || ($ad->strippedHostAnzeige !== "" && (in_array($ad->strippedHostAnzeige, $this->adDomainsBlacklisted) ||
+                    in_array($ad->strippedLinkAnzeige, $this->adUrlsBlacklisted)))
             ) {
                 continue;
             }
@@ -387,15 +389,15 @@ class MetaGer
             if (strpos($link, "http://") === 0) {
                 $link = substr($link, 7);
             }
-    
+
             if (strpos($link, "https://") === 0) {
                 $link = substr($link, 8);
             }
-    
+
             if (strpos($link, "www.") === 0) {
                 $link = substr($link, 4);
             }
-    
+
             $link = trim($link, "/");
 
             if (isset($arr[$link])) {
@@ -403,7 +405,7 @@ class MetaGer
                 $arr[$link]->gefVonLink[] = $this->results[$i]->gefVonLink[0];
 
                 // The duplicate might already be an adgoal partnershop
-                if($this->results[$i]->partnershop){
+                if ($this->results[$i]->partnershop) {
                     # Den Link hinzufügen:
                     $arr[$link]->logo = $this->results[$i]->logo;
                     $arr[$link]->image = $this->results[$i]->image;
@@ -414,7 +416,7 @@ class MetaGer
                 array_splice($this->results, $i, 1);
                 $i--;
                 if ($arr[$link]->new === true || $this->results[$i]->new === true) {
-                    $arr[$link]->changed = true; 
+                    $arr[$link]->changed = true;
                 }
             } else {
                 $arr[$link] = &$this->results[$i];
@@ -427,16 +429,17 @@ class MetaGer
      * @param Boolean $wait Wait for Results?
      * @return Boolean whether or not all Admitad Objects are finished
      */
-    public function parseAffiliates(&$affiliates){
+    public function parseAffiliates(&$affiliates)
+    {
         $wait = false;
         $finished = true;
-        if(!$this->javascript){
+        if (!$this->javascript) {
             $wait = true;
         }
         foreach ($affiliates as $affiliate) {
             $affiliate->fetchAffiliates($wait);
             $affiliate->parseAffiliates($this->results);
-            if(!$affiliate->finished){
+            if (!$affiliate->finished) {
                 $finished = false;
             }
         }
@@ -653,7 +656,7 @@ class MetaGer
     {
         if ($this->canCache()) {
             foreach ($this->engines as $engine) {
-                if(Cache::has($engine->hash)){
+                if (Cache::has($engine->hash)) {
                     $engine->cached = true;
                     $engine->retrieveResults($this, Cache::get($engine->hash));
                 }
@@ -794,31 +797,31 @@ class MetaGer
     public function sumaIsDisabled($suma)
     {
         return
-        isset($suma['disabled'])
-        && $suma['disabled']->__toString() === "1";
+            isset($suma['disabled'])
+            && $suma['disabled']->__toString() === "1";
     }
 
     public function sumaIsOverture($suma)
     {
         return
-        $suma["name"]->__toString() === "overture"
-        || $suma["name"]->__toString() === "overtureAds";
+            $suma["name"]->__toString() === "overture"
+            || $suma["name"]->__toString() === "overtureAds";
     }
 
     public function sumaIsNotAdsuche($suma)
     {
         return
-        $suma["name"]->__toString() !== "qualigo"
-        && $suma["name"]->__toString() !== "similar_product_ads"
-        && $suma["name"]->__toString() !== "overtureAds";
+            $suma["name"]->__toString() !== "qualigo"
+            && $suma["name"]->__toString() !== "similar_product_ads"
+            && $suma["name"]->__toString() !== "overtureAds";
     }
 
     public function requestIsCached($request)
     {
         return
-        $request->filled('next')
-        && Cache::has($request->input('next'))
-        && unserialize(Cache::get($request->input('next')))['page'] > 1;
+            $request->filled('next')
+            && Cache::has($request->input('next'))
+            && unserialize(Cache::get($request->input('next')))['page'] > 1;
     }
 
     public function getCachedEngines($request)
@@ -866,7 +869,7 @@ class MetaGer
                 break;
             }
             $answer = Redis::brpop($enginesToWaitFor, 2);
-            
+
             if ($answer === null) {
                 continue;
             } else {
@@ -1125,7 +1128,7 @@ class MetaGer
     public function createQuicktips()
     {
         # Die quicktips werden als job erstellt und zur Abarbeitung freigegeben
-        if (!$this->dummy) {
+        if (!$this->dummy && $this->getFokus() !== "bilder") {
             $quicktips = new \App\Models\Quicktips\Quicktips($this->q, LaravelLocalization::getCurrentLocale(), $this->getTime(), $this->sprueche);
             return $quicktips;
         } else {
@@ -1278,7 +1281,7 @@ class MetaGer
             }
         }
         foreach (Cookie::get() as $key => $value) {
-            if ((stripos($key, $this->fokus.'_blpage') === 0) && (stripos($value, '*.') === false)) {
+            if ((stripos($key, $this->fokus . '_blpage') === 0) && (stripos($value, '*.') === false)) {
                 $this->hostBlacklist[] = $value;
             }
         }
@@ -1320,7 +1323,7 @@ class MetaGer
             }
         }
         foreach (Cookie::get() as $key => $value) {
-            if (stripos($key, $this->fokus.'_blpage') === 0 && stripos($value, '*.') === 0) {
+            if (stripos($key, $this->fokus . '_blpage') === 0 && stripos($value, '*.') === 0) {
                 $this->domainBlacklist[] = str_replace("*.", "", $value);
             }
         }
@@ -1371,7 +1374,7 @@ class MetaGer
         $words = preg_split("/\s+/si", $tmp);
         $newQ = $this->q;
         foreach ($words as $word) {
-            if(preg_match("/^-[a-zA-Z0-9]/", $word)){
+            if (preg_match("/^-[a-zA-Z0-9]/", $word)) {
                 $this->stopWords[] = substr($word, 1);
                 $newQ = str_ireplace($word, "", $newQ);
             }
@@ -1910,15 +1913,18 @@ class MetaGer
         return $this->headerPrinted;
     }
 
-    public function isDummy(){
+    public function isDummy()
+    {
         return $this->dummy;
     }
 
-    public function jsEnabled() {
+    public function jsEnabled()
+    {
         return $this->javascript;
     }
-    
-    public function setJsEnabled(bool $bool){
+
+    public function setJsEnabled(bool $bool)
+    {
         $this->javascript = $bool;
     }
     /**

app/Models/parserSkripte/BingBilder.php

@@ -80,28 +80,10 @@ class BingBilder extends Searchengine
     {
         $url = $result->image;
 
-        // all images get cropped to a width of 400 px
-        // We will calculate the height after cropping
-        // All Images in a row get 250px 
-        // If the height after cropping is a multiple of that plus the gap between rows
-        // we will allow the image to span up to three rows
-        $newWidth = 400;
-        $newHeight = 250;
-        $heightMultiplier = 1; // Can be 1..3 in the end
-        $gapPixels = 8;
-
-        $width = $result->imageDimensions["width"];
-        $height = $result->imageDimensions["height"];
-
-        $heightAfterCrop = $height * (400 / $width);
-        $heightMultiplier = max(1, min(3, floor($heightAfterCrop / 250)));
-
-        $newHeight = $newHeight * $heightMultiplier + (($heightMultiplier - 1) * $gapPixels);
+        $newHeight = 150;
 
         $requestDataBing = [
-            "w" => $newWidth,
             "h" => $newHeight,
-            "c" => 7, // Smart Cropping
         ];
 
         $requestDataBing = http_build_query($requestDataBing, "", "&", PHP_QUERY_RFC3986);
@@ -110,9 +92,6 @@ class BingBilder extends Searchengine
         $requestData = [];
         $requestData["url"] = $url;
         $link = action('Pictureproxy@get', $requestData);
-        return [
-            "link" => $link,
-            "height-multiplier" => $heightMultiplier
-        ];
+        return $link;
     }
 }

resources/less/metager/general/cards.less

@@ -7,8 +7,7 @@
     margin-top: 4px;
     margin-bottom: 4px;
 
-    @media(min-width: @screen-mobile) {
-        padding: .8rem;
+    @media(min-width: (@screen-mobile+1)) {
         box-shadow: none;
         background-color: inherit;
         border: 0;

resources/less/metager/pages/resultpage/quicktips.less

@@ -25,7 +25,9 @@
     }
 
     .quicktip {
-        .card;
+
+        box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.24);
+        border: 1px solid @border-color ;
         position: relative;
 
         details[open=""] .quicktip-extender {

resources/less/metager/pages/resultpage/result-page.less

@@ -214,27 +214,59 @@ a {
 
 /* Hier der Style für die Bilder */
 
-.image-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 8px;
-    margin-bottom: 16px;
+.imagesearch {
+    #resultpage-container {
+        grid-template-areas:
+            "whitespace searchbar"
+            "whitespace foki"
+            "whitespace options"
+            "results results"
+            "footer footer";
+        grid-template-columns: minmax(0, 150px) minmax(800px, 1770px);
+
+        @media(max-width: 800px) {
+            grid-template-columns: 0 1fr 0;
+            grid-template-areas:
+                "searchbar searchbar searchbar"
+                "foki foki foki"
+                "options options options"
+                "results results results"
+                "footer footer footer";
+        }
 
-    >.image {
-        &.height-2 {
-            grid-row: span 2;
+        margin: 0;
+        gap: 0;
+
+        #additions-container {
+            display: none;
         }
 
-        &.height-3 {
-            grid-row: span 3;
+        #options {
+            margin: 8px 0;
         }
 
-        >a {
-            display: block;
+        #results-container {
+            max-width: initial;
+            padding: 8px;
 
-            >div {
-                >img {
-                    width: 100%;
+            .image-container {
+                display: flex;
+                align-items: center;
+                gap: 16px;
+                flex-wrap: wrap;
+
+                >.image {
+                    flex-grow: 1;
+
+                    >a {
+                        display: block;
+
+                        >div {
+                            >img {
+                                width: 100%;
+                            }
+                        }
+                    }
                 }
             }
         }
@@ -583,20 +615,7 @@ a {
         align-items: center;
         margin-left: -8px;
 
-        @media(max-width: 350px) {
-            flex-direction: row-reverse;
-            flex-wrap: wrap-reverse;
-            justify-content: space-around;
 
-            >div {
-                margin-top: 8px;
-                margin-bottom: 8px;
-            }
-
-            #filter-toggle {
-                flex-direction: column;
-            }
-        }
 
         >div {
             margin-left: 8px;

resources/less/metager/parts/sidebar.less

@@ -15,42 +15,52 @@
     color: @text-color;
     transition: 0.5s;
     border-left: none;
+
     .sidebar-logo {
-        > span {
+        >span {
             display: block;
             margin: 20px;
             padding: 10px 0;
             text-align: center;
             border-radius: 10px;
+
             >img {
                 width: 10em;
             }
         }
     }
+
     .sidebar-list {
         padding-left: 0;
         list-style: none;
         margin-left: -5px;
+
         &>li {
             width: 100%;
+
             &:hover {
                 background-color: @sidebar-list-hover-color;
             }
+
             &>label,
             &>a {
                 padding: 10px 0px;
+
                 &:focus {
                     outline: none;
                 }
+
                 &>i.fa {
                     width: 30px;
                     text-align: center;
                     margin-right: 7px;
                 }
+
                 &>img {
                     filter: invert(@icon-color);
                 }
             }
+
             &>label {
                 font-size: 1.1em;
                 font-weight: normal;
@@ -60,12 +70,15 @@
                 line-height: 20px;
                 display: inline-block;
                 width: 100%;
-                &:hover, &:focus {
+
+                &:hover,
+                &:focus {
                     color: red;
                 }
             }
         }
     }
+
     .metager-dropdown-content {
         display: none;
         min-width: 160px;
@@ -75,6 +88,7 @@
         z-index: 30;
         overflow: hidden;
         transition: 0.5s ease;
+
         &>li>a {
             display: block;
             font-size: .9em;
@@ -84,10 +98,12 @@
             font-weight: normal;
             line-height: 1.42857143;
             margin-left: 2px;
+
             &:hover {
                 text-decoration: none;
             }
         }
+
         label:after {
             #navbar-static-pages {
                 z-index: 40;
@@ -95,6 +111,7 @@
             }
         }
     }
+
     a {
         font-size: 1.1em;
         line-height: 20px;
@@ -103,10 +120,13 @@
         display: inline-block;
         width: 100%;
         color: @text-color;
-        &:hover, &:focus {
+
+        &:hover,
+        &:focus {
             color: red;
         }
     }
+
     p {
         width: 90%;
         text-align: center;
@@ -120,57 +140,70 @@
         font-size: 30px;
         line-height: 35px;
     }
+
     .caret {
         position: absolute;
         left: 90%;
         margin-top: 8px;
     }
+
     input.sidebarCheckbox {
         display: none;
+
         &:checked {
             &~.metager-dropdown-content {
                 display: initial;
                 max-height: 1000px;
                 padding: 0px 0px 0px 0px;
             }
+
             &~label>.caret {
                 border-top: 0 solid;
                 border-bottom: 4px solid;
                 transition: border-top .1s, border-bottom .1s .1s;
             }
         }
+
         &:not(:checked) {
             &~.metager-dropdown-content {
                 padding: 0px 0;
             }
         }
     }
+
     input#nav0:checked~& {
         border-left: 1px solid LightGray;
     }
+
     hr {
         margin: 0px;
         border-color: #e0e0e0;
     }
 }
 
+@media(max-height: 635px) {
+    .sidebar .sidebar-logo {
+        display: none;
+    }
+}
+
 @media (max-width: @screen-mobile) {
     .sidebar {
         padding-top: 15px;
         right: -90%;
         width: 90%;
         overflow: auto;
+
         .sidebar-list {
             max-height: 1000px;
         }
-        .sidebar-logo {
-            display: none;
-        }
+
         ul.metager-dropdown-content {
             position: inherit;
             width: 100%;
         }
     }
+
     .sidebar-opener {
         // Make the open and close button bigger, so it is easier to hit
         @sidebar-opener-mobile-magnification: 10px;
@@ -178,6 +211,7 @@
         top: (@sidebar-opener-position-top - @sidebar-opener-mobile-magnification);
         right: (@sidebar-opener-position-right - @sidebar-opener-mobile-magnification);
     }
+
     .sidebar-opener-placeholder {
         display: initial;
     }
@@ -188,6 +222,7 @@
 // Top right starting position of the sidebar icon
 @sidebar-opener-position-top: 22px;
 @sidebar-opener-position-right: 25px;
+
 .sidebar-opener {
     position: fixed;
     top: @sidebar-opener-position-top;
@@ -199,9 +234,11 @@
     border-radius: 5px;
     color: grey;
     background-color: transparent;
+
     &:after {
         content: "≡";
     }
+
     &:hover {
         color: @metager-orange;
     }
@@ -213,7 +250,7 @@
 }
 
 /* Sidebar toggle checkbox */
-#sidebarToggle  {
+#sidebarToggle {
     display: none;
 }
 
@@ -221,72 +258,86 @@
     &~.sidebar {
         right: 0px;
     }
+
     &~.sidebar-opener {
         &:after {
             content: "×";
         }
     }
 }
+
 #sidebar-img-app {
-    height:20px;
-    margin-right:13px;
-    margin-left:13px;
+    height: 20px;
+    margin-right: 13px;
+    margin-left: 13px;
 }
+
 #sidebar-img-lock {
     height: 20px;
     margin-right: 10px;
     margin-left: 10px;
 }
-#sidebar-img-help{
-    height:20px;
+