Reduce data if client requests it

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;
+    }
+}

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;

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

src/pages/wishlists.php

@@ -24,6 +24,8 @@ $page->navigation();
     <div class="ui container">
         <h1 class="ui header"><?= $page->title ?></h1>
 
+        <?= $page->messages() ?>
+
         <div class="ui segment">
             <div class="ui form">
                 <div class="two fields">