change markup for advertisements "sponsored"

metager/app/Http/Controllers/TilesController.php

@@ -117,7 +117,7 @@ class TilesController extends Controller
             try {
                 $result = json_decode($result);
                 foreach ($result->data as $result_tile) {
-                    $tiles[] = new Tile(title: $result_tile->title, image: $result_tile->image, image_alt: $result_tile->title . " Image", url: $result_tile->url, classes: "advertisement");
+                    $tiles[] = new Tile(title: $result_tile->title, image: $result_tile->image, image_alt: $result_tile->title . " Image", url: $result_tile->url, advertisement: true);
                 }
             } catch (Exception $e) {
                 Log::error($e);

metager/app/Models/Tile.php

@@ -17,6 +17,7 @@ class Tile implements \JsonSerializable
     public string $url;
     public string $classes = "";
     public string $image_classes = "";
+    public bool $advertisement = false;
     /**
      * 
      * @param string $title Title to show for the Tile
@@ -26,7 +27,7 @@ class Tile implements \JsonSerializable
      * @param string $classes Additional css classes to append for the tile
      * @param string $image_classes Additional css classes to append to the image of the tile
      */
-    public function __construct(string $title, string $image, string $image_alt, string $url, string $classes = "", string $image_classes = "")
+    public function __construct(string $title, string $image, string $image_alt, string $url, string $classes = "", string $image_classes = "", bool $advertisement = false)
     {
         $this->title = $title;
         try {
@@ -41,6 +42,7 @@ class Tile implements \JsonSerializable
         $this->url = $url;
         $this->classes = $classes;
         $this->image_classes = $image_classes;
+        $this->advertisement = $advertisement;
     }
 
     public function jsonSerialize()

metager/lang/de/tiles.php

+<?php
+
+return [
+    "sponsored" => "Gesponsert"
+];
\ No newline at end of file

metager/lang/en/tiles.php

+<?php
+
+return [
+    "sponsored" => "Sponsored"
+];
\ No newline at end of file

metager/resources/js/startpage/tiles.js

@@ -3,6 +3,7 @@
     let tile_count = tile_container.querySelectorAll("a").length;
 
     let advertisements = [];
+    let fetch_timeout = null;
     fetchAdvertisements().then(() => udpateInterface());
 
     async function fetchAdvertisements() {
@@ -12,9 +13,15 @@
         if (advertisements.length >= desired_tile_count - regular_tile_count) return;
         let update_url = document.querySelector("meta[name=tiles-update-url]").content;
         update_url += "&count=" + (desired_tile_count - tile_count);
-
-        return fetch(update_url).then(response => response.json()).then(response => {
-            advertisements = response;
+        return new Promise((resolve, reject) => {
+            if (fetch_timeout != null) return resolve();
+            fetch_timeout = setTimeout(() => {
+                fetch(update_url).then(response => response.json()).then(response => {
+                    advertisements = response;
+                    fetch_timeout = null;
+                    resolve();
+                }).catch(e => reject(e));
+            }, 500);
         });
     }
     function udpateInterface() {
@@ -47,6 +54,7 @@
         let client_width = document.querySelector("html").clientWidth;
 
         let desired_tile_count = 8;
+
         if (client_width > 9 * tile_width + 8 * tile_gap) {
             // Largest Screen Size => Up to 8 Tiles in one row
             desired_tile_count = max_tiles;
@@ -61,10 +69,13 @@
             desired_tile_count = 2;
         }
 
+        console.log(client_width, tile_width, tile_gap, desired_tile_count);
+        console.log("Six Tiles", tile_width * 6 + 5 * tile_gap);
         if (native_tile_count + min_advertisements > desired_tile_count) {
             desired_tile_count *= 2;
         }
 
+
         return desired_tile_count;
     }
     window.addEventListener("resize", e => {

metager/resources/less/metager/pages/startpage/tiles.less

@@ -7,16 +7,17 @@ div#tiles-container {
     div#tiles {
         flex-grow: 0;
         width: 100%;
-        @tile_width: 13ch;
-
-        @nine_row_width: calc(calc(9 * @tile_width) + calc(8 * 1rem));
-        @eight_row_width: calc(calc(8 * @tile_width) + calc(7 * 1rem));
-        @seven_row_width: calc(calc(7 * @tile_width) + calc(6 * 1rem));
-        @six_row_width: calc(calc(6 * @tile_width) + calc(5 * 1rem));
-        @five_row_width: calc(calc(5 * @tile_width) + calc(4 * 1rem));
-        @four_row_width: calc(calc(4 * @tile_width) + calc(3 * 1rem));
-        @three_row_width: calc(calc(3 * @tile_width) + calc(2 * 1rem));
-        @two_row_width: calc(calc(2 * @tile_width) + calc(1 * 1rem));
+        @tile_width: 115px;
+        @tile_gap: 16px;
+
+        @nine_row_width: calc(calc(9 * @tile_width) + calc(8 * @tile_gap));
+        @eight_row_width: calc(calc(8 * @tile_width) + calc(7 * @tile_gap));
+        @seven_row_width: calc(calc(7 * @tile_width) + calc(6 * @tile_gap));
+        @six_row_width: calc(calc(6 * @tile_width) + calc(5 * @tile_gap));
+        @five_row_width: calc(calc(5 * @tile_width) + calc(4 * @tile_gap));
+        @four_row_width: calc(calc(4 * @tile_width) + calc(3 * @tile_gap));
+        @three_row_width: calc(calc(3 * @tile_width) + calc(2 * @tile_gap));
+        @two_row_width: calc(calc(2 * @tile_width) + calc(1 * @tile_gap));
 
         @media(max-width: @nine_row_width) {
             width: @seven_row_width;
@@ -39,7 +40,7 @@ div#tiles-container {
         justify-content: center;
 
         padding-top: 8dvh;
-        gap: 1rem;
+        gap: @tile_gap;
         margin-inline: auto;
         height: max-content;
 
@@ -77,13 +78,18 @@ div#tiles-container {
 
             >div.title {
                 font-size: .8rem;
-                color: fade(@text-color, 40%);
+                color: fade(@text-color, 60%);
                 transition: color 0.5s;
                 width: @tile_width;
                 text-overflow: ellipsis;
                 overflow: hidden;
                 white-space: nowrap;
                 text-align: center;
+                line-height: 1;
+
+                >div.sub-title {
+                    height: 1em;
+                }
             }
 
             &:hover {
@@ -92,7 +98,11 @@ div#tiles-container {
                 }
 
                 >div.title {
-                    color: @text-color;
+                    >div.main-title {
+                        color: @text-color;
+                    }
+
+
                 }
             }
         }

metager/resources/views/parts/tile.blade.php

-<a href="{{$tile->url}}" class="{{ $tile->classes }}">
+<a href="{{$tile->url}}" class="{{ $tile->advertisement ? "advertisement " : "" }}{{ $tile->classes }}" {{ $tile->advertisement ? 'rel=nofollow target=_blank' : ''}}>
     <div class="image">
         <img src="{{$tile->image}}" alt="{{$tile->image_alt}}" class="{{$tile->image_classes}}">
     </div>
-    <div class="title">{{$tile->title}}</div>
+    <div class="title">
+        <div class="main-title">{{$tile->title}}</div>
+        <div class="sub-title">
+            @if($tile->advertisement)
+                @lang('tiles.sponsored')
+            @endif
+        </div>
+    </div>
 </a>
\ No newline at end of file