diff --git a/src/assets/css/default.css b/src/assets/css/default.css index 72346e6c..98acb096 100644 --- a/src/assets/css/default.css +++ b/src/assets/css/default.css @@ -260,3 +260,15 @@ button.item { .ui.selection.dropdown.wishlists.visible { z-index: calc(var(--dimmerZIndex) + 2); } + +/** + * Messages + */ +.ui.message.reduce-data { + display: none; +} +@media (prefers-reduced-data: reduce) { + .ui.message.reduce-data { + display: flex; + } +} diff --git a/src/assets/css/wish-card.css b/src/assets/css/wish-card.css index 17b99859..f3ef7155 100644 --- a/src/assets/css/wish-card.css +++ b/src/assets/css/wish-card.css @@ -82,6 +82,11 @@ height: 100%; } +@media (prefers-reduced-data: reduce) { + .wishlist .ui.card > .image > :is(svg, img.preview) { + display: none; + } +} .wishlist .ui.card > .image > svg { color: #f0f0f0; diff --git a/src/classes/page.php b/src/classes/page.php index dddef72a..6de0fbc1 100644 --- a/src/classes/page.php +++ b/src/classes/page.php @@ -41,11 +41,11 @@ class Page public const PAGE_WISHLISTS_SAVED = '/?page=wishlists-saved'; public const PAGE_WISHLISTS = '/?page=wishlists'; - public static function message(string $content = '', string $header = '', string $type = ''): string + public static function message(string $content = '', string $header = '', string $type = '', string $class = ''): string { ob_start(); - $containerClasses = array('ui', 'message'); + $containerClasses = array('ui', 'message', $class); $iconClasses = array('ui', 'icon'); switch ($type) { @@ -93,24 +93,24 @@ class Page return ob_get_clean(); } - public static function error(string $content, string $header = ''): string + public static function error(string $content, string $header = '', string $class = ''): string { - return self::message($content, $header, 'error'); + return self::message($content, $header, 'error', $class); } - public static function warning(string $content, string $header = ''): string + public static function warning(string $content, string $header = '', string $class = ''): string { - return self::message($content, $header, 'warning'); + return self::message($content, $header, 'warning', $class); } - public static function info(string $content, string $header = ''): string + public static function info(string $content, string $header = '', string $class = ''): string { - return self::message($content, $header, 'info'); + return self::message($content, $header, 'info', $class); } - public static function success(string $content, string $header = ''): string + public static function success(string $content, string $header = '', string $class = ''): string { - return self::message($content, $header, 'success'); + return self::message($content, $header, 'success', $class); } /** @@ -255,6 +255,15 @@ class Page $this->scripts['html-2-canvas-1'] = 'node_modules/html2canvas/dist/html2canvas.min.js'; $this->scripts['html-2-canvas-2'] = 'src/assets/js/html2canvas.js'; } + + /** + * Reduce data mode + */ + $this->messages[] = self::info( + __('Your device is set to reduce data, some content has been disabled.'), + __('Reducing data'), + 'reduce-data' + ); } public function header(): void diff --git a/src/pages/wishlists.php b/src/pages/wishlists.php index 71f83144..4ec65c19 100644 --- a/src/pages/wishlists.php +++ b/src/pages/wishlists.php @@ -24,6 +24,8 @@ $page->navigation();

title ?>

+ messages() ?> +