lemmynet/lemmy-ui

The official web app for lemmy.

lemmy-ui's Issues

Make a contributing.md

iframe support?

Hello, I have been recently trying to put Lemmy in an iframe like this:

<iframe src="https://dev.lemmy.ml" title="Lemmy"></iframe>

However, it does not work. Does Lemmy not have iframe support or am I doing it wrong? If it does not have iframe support, is it planned in the future?

Apologies in advance for any misunderstandings

URL search is broken

Partially a URI encode / decode issue.

Fix https / secure issue with env.ts

Add https flag.

Disable forms, buttons when javascript is disabled.

Right now all the buttons / forms are available, they need to be disabled until javascript is enabled in some way, maybe with a css class.

These categories don't support modifications / aren't translated.

These categories don't support modifications on the front end and aren't added to the translation effort, maybe we should add them.

LemmyNet/lemmy#907

Custom emojis?

See if there's a way to add custom emojis to twemoji.

Don't use transparent cards.

It looks better / more stark w/ the regular background.

Re-join rooms on reconnect.

Screen reader support / aria tags

Better accesibility: make Lemmy easier for color-blind individuals

I noticed this might be a problem when I was using Lemmy on my phone in gray-scale, and I wasn't able to whether or not I voted on a post. I suppose this wouldn't be a problem if I switched from the default "Darkly" theme, but I think websites should be accessible by default.

Image of an upvoted post

That same image, but desaturated.

Page loading error

When trying to use Lemmy, I have experienced loading errors for most events including page loads, comment replies, profile view, etc. The loading wheel starts spinning and never comes back and the page does not load. This happens consistently on mobile and inconsistently on desktop.

One workaround has been to reload the page, which seems to reset the connection, but this is not an option on comment replies, logins, posts.

Mobile is iOS with same issues in Safari, DDG browser, Firefox.
Desktop is Firefox.
Desktop connection is possibly not super low-latency.

PING dev.lemmy.ml (5.196.14.162) 56(84) bytes of data.
0/ 19 ( 0%) lost; 369/ 371/ 379ms; last: 369ms
0/ 19 ( 0%) lost; 369/ 371/ 379/ 3ms (last 19)

I have attached
lemmy-firefox-console.log
output from Firefox console if you would like it. If nobody else is experiencing this, than it might very well be my setup and I have no desire for unnecessary time to be spent on it.

Add license to Javascript files

This would make Lemmy compatible with LibreJS.

Originally mentioned in this post. The methods how to do that are outlined in the GNU LibreJS documentation.

@dessalines comment on that post:

That seems pretty easy to add, this site uses AGPLv3 so we could add a magnet link in there. Sounds like a good first PR.

Clicking on notification should not reload page

This happens when you are viewing a post and get a new notification for a comment in the same post. Clicking the notification causes a page reload, when it could just scroll to the new comment without reloading or anything.

Comment delete confirm modal

Right now if you delete a comment it is just disappear form the comment section. I think it would be better to show a modal to the user to confirm the delete action.

Add i18next support to modlog page.

Requires some complicated interpolations for all the modlog actions.

Set up docker publish.

Wrong UI in light mode for mobile devices in the community tab

just compare these 2 pictures :

In light mode, some parts of the table are truncated

Dont show "banned" icon on frontpage or community overview

It just stands out too much compared to the rest of the page (see screenshot below). I think it would be enough to show the icon only in the post view. Alternatively we could make the colour less bright.

Remember scroll position when going back/forward

Basically when you use the forward/back functions in your browser history, it scrolls you back to the page. This is pretty annoying if you want to continue going through the list of posts for example. It should remember the position instead (horizontal and vertical).

Force page reload after server update

I noticed that any UI changes after Lemmy updates only become visible once you manually reload the page (F5). It would be nice if we could somehow trigger a page reload so this is done automatically.

Improve post action / comments bar.

This could be improved a lot.

"Create post" button in community sidebar doesnt preselect community

1. go to any community
2. click "create post"
3. look at community dropdown, expecting the current community to be preselected
4. instead, the dropdown is set to "select a community"

Add Content Security Policy

https://infosec.mozilla.org/guidelines/web_security#content-security-policy

This was previously discussed in LemmyNet/lemmy#208, but now might be a good time to actually set it up.

Edit: more requests: https://git.radicallyopensecurity.com/nlnet/off-ngid-lemmy/-/issues/22

Get themes to work.

Add emoji reactions to posts, comments.

Fix saved / starred

Follow some of webhint's recommendations.

Do some of the front-end fixes webhint suggests:

https://webhint.io/scanner/58d9f5cc-2909-4c6d-9079-a88c9db394ed

Create post from a community bug.

Various usability issues and improvements

Here is list of small things that could improve usability of the UI. I can fix them later if there is any interest. Feel free to suggest more

General

• Aria tags are missing. I would add them to global components like hamburger menu button at least
• Open Graph tags seem to be completely missing. This is pretty important for content focused site
• Spinner when switching pages is quite small and not centered. There is nothing interesting on the screen at that point anyway, just make it bigger and centered
• Contrast seems pretty bad. In the heading especially. But I am no expert here
• Footer could use some centering and padding to better separate it from content

Login/register page

• Labels are not associated with input fields, so clicking on labels does not focus input fields
• Forgot password button is disabled but does not have disabled cursor on hover
• Buttons seem to be clickable multiple times when in loading state (causing multiple submit), they should be disabled
• HTML5 autofill attributes are missing
• Login button changes width when in loading state, this is little bit ugly
• Forgot password button does not have type="button, this could cause issues with triggering submit even of the form. However currently the button is disabled, so this does not manifest

Landing page

• Upvote/downvote buttons have tooltips of arrow-up and arrow-down
• I would add meaninful tooltips to upvote button/downvote button/score label/upvotes and downvotes labels
• Upvote/downvote labels could trigger upvote/downvote on click as well
• Next/prev buttons are quite small and insignificant on mobile

Comments page

• Empty comments page should show some zero-data element saying something like "Nobody has commented anything yet, be the first!", just to signal to the user that everything is loaded correctly, but there is no content.
• Empty comments page should not show comment filters
• Collapse thread button should
  • Be a button element, not span
  • Have a tooltip
• Tooltip on posted at label ("8 days ago") should have better formatting than default UTC one, something like "2019-1-2 18:23:35" would be much more readable than current one (which includes microseconds)
• Same things upvotes and downvotes as on landing page
• Primary buttons like "post" and "subscribe" could use some color to focus direction to them
• Community name in the sidenav could be a link to community
• What is this for I don't know. Do not display boxes with no content or show a label that there is no content
  
• View source button should be a button, not span
• Single word preview overflows
  
• IMHO post should be scoped below community in url, so you would know the community from the url (https://dev.lemmy.ml/post/29256 tells yo nothing about where you are), but that is little bit off topic
• When writing a reply, "Post" should have color to indicate primary action
• When seeing it for the first time on mobile I had issues separating the comments page from the sidenav and footer. Maybe some color separation? Maybe bigger margins?

Search page /search

• I would like to see quick search in navbar or some other global element
• Next button is visible before I have searched anything. It should only be visible if next page is actually available
• The form is not at all aligned or stretched. This is not consistent with other forms from the navbar
• There should be labels around dropdowns
  
• Add autofocus to the text input. Most common action will be - go to search, write stuff, press enter

Communities page

• Make subscribe be a button, not span
• It would be great if the whole row was clickable, not just the community name
• I don't really see a point of having the subscribe button on this page. Who is going to sub a community without getting looking at the content first anyway?
• On the other hand there are other interesting statistics about a community that could be shown. Like last post, posts per day, comments per day, posts/comments in last month and so on.
• Header sorting should have buttons, not just th
• There is no spinner when going to next page, but "prev" button appears before data is loaded

Add Microformats

microformats are extensions to HTML for marking up people, organizations, events, locations, blog posts, products, reviews, resumes, recipes etc. Sites use microformats to publish a standard API that is consumed and used by search engines, aggregators, and other tools.

--From the indieweb website

Microformats are simple HTML markup that describe the content. Marking up users, posts, and comments would allow interoperability with indieweb site/tools.

Within the fediverse, Plume, Prismo, and Mastodon all have support for microformats.

Add Nord theme

It's pretty.

Make /c/Local, and not /c/All, the default view for not-logged-in users.

Right now, unlogged in users will by default see /c/all. But after federation, /c/all could potentially be filled with a lot of garbage. It'd be better to have local posts be the default view.

Subscribe on community page not working.

Adding support for join messages.

Update fusebox to v4, change to typescript, fix dist folder copying / prod build.

LemmyNet/lemmy#528

A newer version of yarn appears to have broke the prod front end build node fuse prod. Some tasks:

• Upgrade to fusebox v4.
• Upgrade the fuse.js file to a typescript file, fuse.ts
• Make sure its putting files in the dist folder correctly.

Remote follow communities on the front end.

Needs two components:

• A remote_community_follow.tsx. Example Needs a form with your user actor_id / @user@instance, which redirects to:
• An authorize follow page, which has:
  • Mastos url: https://mastodon.social/authorize_interaction?uri=https://instance/users/aaron.
  • It gets this authorize_interaction url from webfinger ostatus:

{
      "rel": "http://ostatus.org/schema/1.0/subscribe",
      "template": "https://mastodon.social/authorize_interaction?uri={uri}"
    }

Page reload flashes default theme

This can be very noticable when a theme different from the default lightly is configured. Usually the page reload is almost instant, but sometimes it takes a second or more for the correct theme to be applied, so that buttons flash up in green. Sometimes even the background stays white for a noticable time before darkly is applied.

This problem only started to happen after the isomorphic ui rewrite, not before.

Happens with Firefox and Firefox Android.

[Bug?] Voting on comments causes them to jump around due to ranking.

Follow google pagespeed's recommendations

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fdev.lemmy.ml%2F&tab=desktop

• Defer css loading, etc.

Verify valid url on post-form

use validURL

Opengraph tags.

Fix opengraph tags.

Don't use darkly as "browser default theme".

If your theme is set as darkly right now, it treats it as "browser default", and won't load a theme after the initial page load.

Change to lemmy-ui

Add Mastodon-style custom profile fields / Add `rel="me"` to all links in bio.

Can be either links or plaintext. Mastodon allows a maximum of 4 such fields. Example:

Get external translations git submodule working.

Replying to private message from inbox is broken.

materia theme - can't see community selection text when creating a post

Issue Summary

See title

Steps to Reproduce

1. Switch to materia theme and save
2. Click on "create post"
3. Click on "select a community" dropdown

Technical details

• The issue seems to stem from the selectr-selected class (link) having a background-color of --secondary and a color of --white.

• This is not an issue with any other theme as they all have non-white secondary colors.

• It's an issue specific to how we use the materia bootstrap theme css from LemmyNet/lemmy#478

• This isn't an issue on the "create community" page, or any other dropdown I've seen. This is because the dropdown for create a post isn't a select (which get's bootstrap theme) but rather a custom selector with search capabilities.

Not really sure if it's worth the effort to try to fix this when there are so many other great themes but wanted to flag it.

I can make a separate ticket for this but there's also this issue with materia about not being able to see the button text at the top of the profile page until you hover: