Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

'External link' and 'image' icons are too similar #2421

Open
4 tasks done
remram44 opened this issue Apr 12, 2024 · 2 comments
Open
4 tasks done

'External link' and 'image' icons are too similar #2421

remram44 opened this issue Apr 12, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@remram44
Copy link
Contributor

Requirements

  • This is a bug report, and if not, please post to https://lemmy.ml/c/lemmy_support instead.
  • Please check to see if this issue already exists.
  • It's a single bug. Do not report multiple bugs in one issue.
  • It's a frontend issue, not a backend issue; Otherwise please create an issue on the backend repo instead.

Summary

When scrolling, I want to expand images by clicking on them, but sometimes I am taken to a completely different site because it was an external link.

This happens because the two icons are WAY too similar to easily tell apart, especially since they are overlaid on the post's image.

screenshot

I recommend either putting the external/image icon outside of the post's image or at least make them more different (perhaps different colors?)

Steps to Reproduce

  1. Browse lemmy
  2. Click on images to expand them
  3. Sooner or later you'll mess up and end up loading a completely different site, from which you might not be able to easily come back (back button is unreliable nowadays)

Technical Details

Mostly a problem on phones where the icon is a couple millimeters wide, but also on desktop.

screenshot

Lemmy Instance Version

Footer says BE: 0.19.3

Lemmy Instance URL

https://lemmy.ml
@remram44 remram44 added the bug Something isn't working label Apr 12, 2024
@remram44
Copy link
Contributor Author

Here's my workaround userscript, which disables clicks on thumbnails entirely if not expanding: 
// ==UserScript==
// @name         Fix links on Lemmy
// @namespace    http://tampermonkey.net/
// @version      2024-04-12
// @description  Disables clicks on all thumbnails except the ones that will expand, preventing unwanted navigation
// @author       You
// @match        https://lemmy.ml/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=lemmy.ml
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let interval;

    function fixOne(elem) {
        elem.removeAttribute('href');
        elem.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); });
    }

    function fixList(elems) {
        if(elems.length > 0) {
            clearInterval(interval);
            [].forEach.call(elems, fixOne);
        }
    }

    function doit() {
        fixList(document.querySelectorAll('a.text-body'));
        fixList(document.querySelectorAll('a.thumbnail'));
    }

    interval = setInterval(doit, 2000);
})();

@travis-jeans
Copy link

travis-jeans commented Jan 8, 2025 •
edited
Loading

The little icons have a shared CSS class .mini-overlay. One thing I did was make the background opaque so they are easier to see. This example is from the custom theme RBlind-Dark.css from RBlind-Lemmy-Themes.

  • Remove the opacity from the mini overlay so the icons have higher contrast. Added .mini-overlay { background: var(--bs-gray-900); background-color: var(--bs-gray-900); }

Image Description: Close up on an image post and link post with the mini overlay in the top right corner and square behind the icon black.
mini-overlay-example

@travis-jeans travis-jeans mentioned this issue Jan 8, 2025
Open
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@remram44 @travis-jeans