From 92bfd84d2a8660178da675f0a77d300486101d54 Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@suma-ev.de>
Date: Fri, 19 Jul 2024 11:50:47 +0200
Subject: [PATCH] change markup for advertisements "sponsored"
---
.../app/Http/Controllers/TilesController.php | 2 +-
metager/app/Models/Tile.php | 4 ++-
metager/lang/de/tiles.php | 5 +++
metager/lang/en/tiles.php | 5 +++
metager/resources/js/startpage/tiles.js | 17 +++++++--
.../less/metager/pages/startpage/tiles.less | 36 ++++++++++++-------
metager/resources/views/parts/tile.blade.php | 11 ++++--
7 files changed, 60 insertions(+), 20 deletions(-)
create mode 100644 metager/lang/de/tiles.php
create mode 100644 metager/lang/en/tiles.php
diff --git a/metager/app/Http/Controllers/TilesController.php b/metager/app/Http/Controllers/TilesController.php
index 16473dd8c..042efe00a 100644
--- a/metager/app/Http/Controllers/TilesController.php
+++ b/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);
diff --git a/metager/app/Models/Tile.php b/metager/app/Models/Tile.php
index b64ff38b5..54eb28758 100644
--- a/metager/app/Models/Tile.php
+++ b/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()
diff --git a/metager/lang/de/tiles.php b/metager/lang/de/tiles.php
new file mode 100644
index 000000000..e3f477425
--- /dev/null
+++ b/metager/lang/de/tiles.php
@@ -0,0 +1,5 @@
+<?php
+
+return [
+ "sponsored" => "Gesponsert"
+];
\ No newline at end of file
diff --git a/metager/lang/en/tiles.php b/metager/lang/en/tiles.php
new file mode 100644
index 000000000..1d11df8e5
--- /dev/null
+++ b/metager/lang/en/tiles.php
@@ -0,0 +1,5 @@
+<?php
+
+return [
+ "sponsored" => "Sponsored"
+];
\ No newline at end of file
diff --git a/metager/resources/js/startpage/tiles.js b/metager/resources/js/startpage/tiles.js
index cb6e9fd17..f1fe94634 100644
--- a/metager/resources/js/startpage/tiles.js
+++ b/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 => {
diff --git a/metager/resources/less/metager/pages/startpage/tiles.less b/metager/resources/less/metager/pages/startpage/tiles.less
index 099680cd0..96a8fb8bf 100644
--- a/metager/resources/less/metager/pages/startpage/tiles.less
+++ b/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;
+ }
+
+
}
}
}
diff --git a/metager/resources/views/parts/tile.blade.php b/metager/resources/views/parts/tile.blade.php
index 9d8bd6d47..ebe3a635c 100644
--- a/metager/resources/views/parts/tile.blade.php
+++ b/metager/resources/views/parts/tile.blade.php
@@ -1,6 +1,13 @@
-<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
--
GitLab