Merge pull request #83 from dataforgoodfr/fix/observable-firefox-issue

Fix clicking on film or series on firefox
dataforgoodfr · May 24, 2024 · 29e4d71 · 29e4d71
2 parents 7c73aff + c913332
commit 29e4d71
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 84 deletions.
diff --git a/observable/src/films.md b/observable/src/films.md
@@ -75,55 +75,34 @@ const content =
             title
           )}&original_title=${encodeURIComponent(original_title || title)}`;
           const imageUrl = `${baseTmdbImageUrl}${poster_path}`;
-          const imageHtml = html`<div
-            style="background-color:white; display:flex; align-items:center; justify-content: center;"
+          const tooltip = original_title.length > 0 ? original_title : title;
+          return html`<div
+            x-data="{tooltip: '${tooltip.replace(/'/g, "\\'")}'}"
+            class="card"
+            style="max-width:220px; display: flex; flex-direction: column; align-items: center; justify-content: between;"
           >
-            <object data="${imageUrl}">
-              <img
-                src="${brokenImageElement.currentSrc}"
-                style="width:46x; height:46px"
-              />
-            </object>
-          </div>`;
-          if (original_title.length > 0) {
-            return html`<div
-              x-data="{tooltip: '${original_title.replace(/'/g, "\\'")}'}"
-              class="card"
-              style="max-width:220px; display: flex; flex-direction: column; align-items: center; justify-content: between;"
+            <h2
+              style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;"
             >
-              <h2
-                style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;"
-              >
-                ${title}
-              </h2>
-              <h3>${production_year}</h3>
-              <a
-                href="${tallyUrl}"
-                style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; align-items: center;"
-                x-tooltip="tooltip"
-                >${imageHtml}</a
-              >
-            </div>`;
-          } else {
-            return html`<div
-              x-data="{tooltip: '${title.replace(/'/g, "\\'")}'}"
-              class="card"
-              style="max-width:220px; display: flex; flex-direction: column; align-items: center;  justify-content: between;"
+              ${title}
+            </h2>
+            <h3>${production_year}</h3>
+            <div
+              style="display:flex; position:relative; width: 100%; align-items:center; justify-content: center;"
             >
-              <h2
-                style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;"
-              >
-                ${title}
-              </h2>
-              <h3>${production_year}</h3>
+              <object data="${imageUrl}">
+                <img
+                  src="${brokenImageElement.currentSrc}"
+                  style="width:46x; height:46px"
+                />
+              </object>
               <a
                 href="${tallyUrl}"
-                style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; align-items: center;"
+                style="display: block; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 5;"
                 x-tooltip="tooltip"
-                >${imageHtml}</a
-              >
-            </div>`;
-          }
+              ></a>
+            </div>
+          </div>`;
         }
       )
     : "";

diff --git a/observable/src/series.md b/observable/src/series.md
@@ -73,53 +73,33 @@ const content =
           name
         )}&original_name=${encodeURIComponent(original_name || name)}`;
         const imageUrl = `${baseTmdbImageUrl}${poster_path}`;
-        const imageHtml = html`<div
-          style="background-color:white; display:flex; align-items:center; justify-content: center;"
+        const tooltip = original_name.length > 0 ? original_name : name;
+        return html`<div
+          x-data="{tooltip: '${tooltip.replace(/'/g, "\\'")}'}"
+          class="card"
+          style="max-width:220px; display: flex; flex-direction: column; align-items: center; justify-content: between;"
         >
-          <object data="${imageUrl}">
-            <img
-              src="${brokenImageElement.currentSrc}"
-              style="width:46x; height:46px"
-            />
-          </object>
-        </div>`;
-        if (original_name.length > 0) {
-          return html`<div
-            x-data="{tooltip: '${original_name.replace(/'/g, "\\'")}'}"
-            class="card"
-            style="max-width:220px; display: flex; flex-direction: column; align-items: center; justify-content: between;"
+          <h2
+            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;"
           >
-            <h2
-              style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;"
-            >
-              ${name}
-            </h2>
-            <a
-              href="${tallyUrl}"
-              style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; align-items: center;"
-              x-tooltip="tooltip"
-              >${imageHtml}</a
-            >
-          </div>`;
-        } else {
-          return html`<div
-            x-data="{tooltip: '${name.replace(/'/g, "\\'")}'}"
-            class="card"
-            style="max-width:220px; display: flex; flex-direction: column; align-items: center; justify-content: between;"
+            ${name}
+          </h2>
+          <div
+            style="display:flex; position:relative; width: 100%; align-items:center; justify-content: center;"
           >
-            <h2
-              style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;"
-            >
-              ${name}
-            </h2>
+            <object data="${imageUrl}">
+              <img
+                src="${brokenImageElement.currentSrc}"
+                style="width:46x; height:46px"
+              />
+            </object>
             <a
               href="${tallyUrl}"
-              style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; align-items: center;"
+              style="display: block; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 5;"
               x-tooltip="tooltip"
-              >${imageHtml}</a
-            >
-          </div>`;
-        }
+            ></a>
+          </div>
+        </div>`;
       })
     : "";
 ```