In the mod creation page, the placeholder.png doesn't match the other file, placeholder.svg.

This could be directly fixed in the bucket?

Some of the Featured Versions download buttons are squished when a page is loaded in Safari.
This seems to only happen when the mod page is reloaded or loaded directly from a link to that page, and it doesn't happen when I navigate to it.

This seems to go away when flex-shrink is set to 0.

Before setting flex-shrink to 0:

After setting flex-shrink to 0:

I am using Safari 14 on macOS Big Sur.

The username on the bottom left should be clickable

Before authors can submit mods/modpacks directly to modrinth, there needs to be a robust moderation interface which will allow staff to support and moderate authors (and commenters).

Some of the things that this needs to account for:

• IP banning
• account banning
• account / ip histories
• approval queues
• spam blacklist
• DMCA removal
• Comment Removal
• Tag / Category Editing
• Marking Mods as deprecated / abandoned
• Completely disabling mods if found to be harmful (unapproval)
• GDPR account removal / sanitization of accidentally disclosed PII
• account renames
• username / mod name blacklist

I would love to have the option for an endless scroller

i would make a pr my self but currently i don't have much time to add it my self

On the versions page, the mod version name should be clickable (and obviously so: underlined when hover or something)

For example, pressing back on a URL like https://modrinth.com/mods?q=&f=host%3Amodrinth might take you to https://modrinth.com/mods and you need to press back a second time to go back to the page you were actually at before.

This occurs on the user pages

While other people will see your new username, you won't see it until you reload the page since UI elements (including the setting to change your username, if you leave the settings page and come back) will continue to display your old username until you fully reload the page.

We should have a basic description of the project and link to the website from a README in this repo. It may also be a good idea to document the basic setup for the frontend so that people can figure out how to run it and contribute.

Device: Xiaomi Redmi Note 8 PRO, Android 10 (MIUI 12.0.49), Chrome 87.0.4280

Mod creation:

• Markdown preview formatting isn't great
• Icon preview must not be cropped: don't use object-fit: cover;
• Icon selection button breaks when text wraps
• Version creation popup is broken on narrow screens
• You can scroll the background behind the popup
• Padding on the bottom of the version creation popup is still broken
• Version creation only allows for one file to be uploaded
  • Looks like it should allow more: "1 file selected"
  • Doesn't tell you what file you have selected
• No obvious way of exiting the version creation popup
  • This should have an x button that deletes the version if there
    isn't any info, saves it if it has info (It could save either way)
  • It would be nice if clicking on the background did the same
• Created versions list should have table headings
• Extras info is too wide
• Most fields are missing descriptions on what they can contain:
  • This information should not go in title text or placeholder text
• Markdown preview bugs:
  • doesn't style links correctly
  • doesn't style images correctly

This is a non-exhaustive list of things that need to be implemented before we can consider the site to be minimally functional:

• Mod Creation
• Mod Management (Edit, Delete)
• User Management (Edit, Delete)
• Moderation System
  • Approving mods, queue of unapproved mods
  • Reporting and banning systems
• Fix all the broken links: make basic "WIP" page for planned pages
• GDPR compliance, TOS, privacy policy, etc

Non basic functionality, may come later:

• Modpack Creation
• Modpack Management
• Following users / mods

Previously, mods hosted on one platform or the other would show an icon indicating them as such and one could filter for only mods on one platform; this is no longer the case with the beta.

Issue is, it's not even used for the mod name, so in LambdaBetterGrass I had multiple <h2> because ## of markdown for my description, and as there's no other higher-level headers search engines will take this as the main keyword/point of interest and leads to situation like this:

Really not great in my opinion :P

In the mod list, the rows are composed of nested flexboxes, which look pretty broken in Safari (on both macOS and iOS):

The boxes seem to shrink to be smaller than their content, similar to this SO post. It turns out their fix works here too: applying flex-shrink: 0 to the too-small boxes.

I'm not sure where in the code this goes, just that it works to affect the selectors .project-card .info .top and .project-card .info .bottom (adding flex-shrink: 0).

There are other places where this breaks, most similarly the dashboard and the profile. There might be others, but these are the ones I've found so far. I wish there was an easier fix than working around it in every place it happens, but perhaps one could just generally apply this to flex containers in the codebase?

So this is what I've found so far:

All the issues not marked as solve in this issue, was split into other issues. Don't update these checkboxes

General:

• Categories drop-down not as long as the fields above/below it (now #139)
• On linux using firefox can't drag files to the icon's "choose image or drag it here"
• All the drop-downs but supported environments are lowercase, while supported environments are uppercase. However, when you go to edit, the selected options for supported environments are lowercase, but all the options are still capitalistic (now #140)
• New: When you click reset icon, the file selector still says 1 file selected (now #141)
• New: The "Edit Mod" / "Create mod" header has a huge amount of padding and a small save/create button. It just feels very off. It's also inconsistent with the dashboard's header scale.

Description:

• With how focusing works, the box probably shouldn't be a grey box when unselected.
• Due to the limited with, while the markdown preview is nice, it isn't a great way to actually see what it'll look like to people. A "preview" button that would allow you to see how the page will look without officially creating the mod would be very useful. Though this should probably be it's own issue.
• The link to the markdown formatting guide isn't colored nor underlined
• Should say somewhere that non script/iframe html tags are also supported.

Versions:

• - Can't upload files †
• - Version names just don't show
• - Add a version button should have more spacing between it and the "Upload Versions" title
• - Status is blank
• - There probably should be a title above the remove/edit buttons. Maybe "Actions"
• - When version names were showing, the space allocated to them were minimal, while mod loader has a huge amount of space.
• - There's no checkbox for showing/not showing snapshot versions (now #142)
• - No way to edit a version after it's been published

Edit-specific:

• - License url is gone
• - Can't manage version is edit screen
• - Description isn't saved

† So it might be uploading, but since there was a (I think fixed) problem with being unable to create a mod with a version, I didn't have any versions to have files in. In the version creation screen on the versions page of the mod, it also shows that no file is selected, but after it was approved there was in fact a file

Would filtering mods by license be possible?

When I load a page, the dropdown menu that appears when you click on your profile looks fine.
However, when I change page using one of the on-screen buttons (eg. from the Mods tab to the Dashboard, or in the page of a mod, from the description to the versions), the dropdown menu will look hidden behind other on-screen elements until I refresh the page.

I have attached 2 screen recordings showing the issue in different locations on modrinth.com.

I am using Safari 14 on macOS Big Sur.

https://user-images.githubusercontent.com/57519662/105606463-daf80980-5d99-11eb-9df1-95abbaf0cfda.mov
https://user-images.githubusercontent.com/57519662/105606425-b1d77900-5d99-11eb-8991-4b463a2bfb46.mov

Bug:
The first time Modrinth is opened on a new browser window, the top left logo does not appear, you appear to be logged out, and all buttons except redirects do nothing on click. This issue disappears after reloading the page and only reappears after the browser window where it appeared is closed.

This error is thrown:

DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild (https://modrinth.com/_nuxt/8a1c74e.js:2:41278)
    at m (https://modrinth.com/_nuxt/8a1c74e.js:2:54201)
    at https://modrinth.com/_nuxt/8a1c74e.js:2:53458
    at v (https://modrinth.com/_nuxt/8a1c74e.js:2:53690)
    at _ (https://modrinth.com/_nuxt/8a1c74e.js:2:54287)
    at N (https://modrinth.com/_nuxt/8a1c74e.js:2:57673)
    at N (https://modrinth.com/_nuxt/8a1c74e.js:2:57608)
    at N (https://modrinth.com/_nuxt/8a1c74e.js:2:57608)
    at N (https://modrinth.com/_nuxt/8a1c74e.js:2:57608)
    at N (https://modrinth.com/_nuxt/8a1c74e.js:2:57608)

Environment:
Window 10, Chrome 87.0.4280.141

Screenshot:

If you change the mod count to be greater than the number of mods available, you can no longer change the mod count

The download icon on the versions page should be a direct link to download, not to the version page

Maybe a checkbox should be added? And it should be disabled by default.

When a mod is under review, it's hard to tell that it's not public yet.

Compare something like Curse which has a giant "This project is not yet approved" banner - on Modrinth, the only place i've been able to find the project approval status is on the dashboard.

This is also true for individual files - Curse has a status (approved/under review) column in the versions table, Modrinth doesn't seem to have any indication.

This is pretty annoying when it's time to share a new mod, and you don't know if the link will 404 for other people or not !

I’m not sure where to report these, but I will post them here.

For one thing, Modrinth does not seem to display properly on mobile.

I was also experimenting with a dummy page, to see how this system works, and kept running into json errors. For something intended as a draft page.

In this context, e.target.files throws an error because e itself is the file list.

Changing every occurance of e.target.files to e fixes this issue.

There's also a problem with labrinth which relates to this, so I'll make an issue on its repo.

I have a 240x780 mobile screen.

Android 10 - Firefox

Right now, ModRinth advertises that it integrates its search with CuseForge both in text and in a gif. However, as discussed on the Discord recently CurseForge search has been disabled while Curse changes hands from Twitch to Overwolf, and restoration doesn't seem to be in the cards. This line and demo should probably be edited so Modrinth isn't accused of false advertising.

Issues list

• placeholder.png should match placeholder.svg
• If you change the mod count to be greater than the number of mods available, you can no longer change the mod count
• The search should default to 20 items per page, and save the count in localstorage (This doesn't need a gdpr warning since it's directly for site functionality)
• On the versions page, the mod version name should be clickable (and obviously so: underlined when hover or something)
• The download icon on the versions page should be a direct link to download, not to the version page
• The header links on the landing page should have a larger padding area so that they are clickable
• The typewriter on the landing page has too large of a font; it breaks when the text has to wrap
• The videos on the landing page are still terrible quality gifs rather than autoplaying videos
• Version links on the sidebar of the mod page should be clickable, and the download link should be a direct link to the mod file
• The external link icon is smaller for the source code link when the text wraps
• The username on the bottom left should be clickable
• The last page number in the pagination view wraps on narrower screens

Mod creation:

• Markdown preview formatting isn't great
• Icon preview must not be cropped: don't use object-fit: cover;
• Icon selection button breaks when text wraps
• Version creation popup is broken on narrow screens
• You can scroll the background behind the popup
• Padding on the bottom of the version creation popup is still broken
• Version creation only allows for one file to be uploaded
  • Looks like it should allow more: "1 file selected"
  • Doesn't tell you what file you have selected
• No obvious way of exiting the version creation popup
  • This should have an x button that deletes the version if there
    isn't any info, saves it if it has info (It could save either way)
  • It would be nice if clicking on the background did the same
• Created versions list should have table headings
• Extras info is too wide
• Most fields are missing descriptions on what they can contain:
  • This information should not go in title text or placeholder text
• Markdown preview bugs:
  • doesn't style links correctly
  • doesn't style images correctly

Search results:

• Svgs shouldn't be inlined; they should either be <img> links or
  use svg <use xlink:href="..."> tags to reduce duplication
• Search result info should have title text: there's currently no way
  of differentiating date created and date modified, etc
• These icons should also have alt text of some kind, but I don't know
  how well that works with svgs
• Author should be underlined or a different color; links must be
  distinguished from normal text
• Selected categories should be highlighted
• Categories in search results should be clickable to toggle the category
  on the right side
• Pagination is in the same line as the search box, so the search box's
  width changes as you type
• Search box and category dropdown box have different heights
• https://discord.com/channels/734077874708938864/734077874708938867/756637616040050748
• https://discord.com/channels/734077874708938864/734077874708938867/756627739968012308

Mod pages

• The info box on the right side should be wider on wide screens
• The info box should vertically start at the same height as the description box

Accessibility

• Missing accessibility stuff:
  • Pagination should use links or buttons instead of just click events
  • Filters buttons should also use <button>s or <a>s
  • User settings and theme toggle icons should be accessible (button or a)
  • Buttons in mod creation are already accessible :)
  • Logout button should be a button or link
• Text contrast is too low in the light theme (no idea about on the dark theme)
  • Chrome & firefox devtools have ways of showing the color contrast of text
  • We should aim for at least AA compliance

Other user reports:

From venashial in #frontend, 2020-10-17

If you want to stick with the square, I would at least round the corners to the same amount as the mod icons. Just for simplicity's sake and because rounded corners are easier on the eyes.

Now that you mention it, badges inline with the username wouldn't look right but maybe directly beneath it, separating the username and the description? It feels like the badge is floating beneath the description and won't be in the same spot on each user page. (I guess it already moves around depending on whether a user has a description in the first place.)

Are you planning on putting "follow" and/or "report" buttons on each user page or will that only be on mod pages? (If you include those at all.)

Add a link to the github profile of users from the user page

From burner8 in #frontend on 2020-10-17

bug report: when you first load the mods list, you see the list of mods but then it changes to "no results". then, just after that the results re-appear. i have tested with javascript disabled, and the problem doesn't occur. my guess is that SSR serves the results, but the client decides to fetch the results too, when they are already there.

The seperation between the user info and the mod list in the user profile is almost invisible in light mode

The licensing info should be visible; we may also want a better place for it

Almost all of this discussion is still relevant:
https://discord.com/channels/734077874708938864/734082619352023081/766515942649757706
https://discord.com/channels/734077874708938864/734082619352023081/766533570176221225

Add search box to landing page:
https://discord.com/channels/734077874708938864/734082619352023081/762093945102270464

History entries:
https://discord.com/channels/734077874708938864/734082619352023081/761667331302621184

PWA:
https://discord.com/channels/734077874708938864/734082619352023081/758047414581067927

https://discord.com/channels/734077874708938864/734082619352023081/757176477430317096

Implement history support for searching:
https://discord.com/channels/734077874708938864/734082619352023081/756621499535851670

Fix history spam:
https://discord.com/channels/734077874708938864/734082619352023081/756618381515554836

Ad selection:
https://discord.com/channels/734077874708938864/734077874708938867/770530866429952010

Usernames:
https://discord.com/channels/734077874708938864/734077874708938867/770408408276926495
https://discord.com/channels/734077874708938864/734077874708938867/770405202582700063

Following/RSS:
https://discord.com/channels/734077874708938864/734077874708938867/770301914549321790
https://discord.com/channels/734077874708938864/734077874708938867/761097005878476810

Download counting:
https://discord.com/channels/734077874708938864/734077874708938867/770299588003233852

OR filters for searching:
https://discord.com/channels/734077874708938864/734077874708938867/770217254339608596

Github data concerns:
https://discord.com/channels/734077874708938864/734077874708938867/769953709676298250
https://discord.com/channels/734077874708938864/734077874708938867/770034217228042251

Youtube embed in markdown?
https://discord.com/channels/734077874708938864/734077874708938867/770173393340727306

Curseforge linking:
https://discord.com/channels/734077874708938864/734077874708938867/769838459426308096
https://discord.com/channels/734077874708938864/734077874708938867/769802982761955350
https://discord.com/channels/734077874708938864/734077874708938867/765935076680269824

Scope:
https://discord.com/channels/734077874708938864/734077874708938867/769792713968844811
https://discord.com/channels/734077874708938864/734077874708938867/769798081146519552

Discussion on bedrock vs java:
https://discord.com/channels/734077874708938864/734077874708938867/769772610971893800

Client & serverside tags:
https://discord.com/channels/734077874708938864/734077874708938867/768591675471167528

Missing stuff:
https://discord.com/channels/734077874708938864/734077874708938867/762101605021384704
https://discord.com/channels/734077874708938864/734077874708938867/761450662713098291
https://discord.com/channels/734077874708938864/734077874708938867/766513161956098059

Don't list all versions in dropdown:
https://discord.com/channels/734077874708938864/734077874708938867/768586457891602484
(There's a PR for the backend implementation of this now)

What's our current markdown parser?
https://discord.com/channels/734077874708938864/734077874708938867/766514131334594560

Mod lists?:
https://discord.com/channels/734077874708938864/734077874708938867/761291902707302460
https://discord.com/channels/734077874708938864/734077874708938867/761468452179279872

Bugs:
https://discord.com/channels/734077874708938864/734077874708938867/768722297938640918

Missing Features:

• Mod pages, user pages, mod editing, version editing, version addition
• We also need a way to delete mods, versions, and version files from the frontend
• Version dependencies
• Team creation & management
• User editing: change name, description & profile picture
  • Update github integration - users can change name on github
• Moderation
• Claiming curseforge mods / preventing duplicates
• Launcher integration
• Monetization
• About, document business model, team, etc
• Custom mod slugs / short urls / vanity urls
• Modpacks

Important things to deal with:
https://medium.com/overwolf/our-stance-on-scraping-curseforge-19f4559a322a
https://mailchi.mp/overwolf/whats-new-with-overwolf-curseforge-september

Here's the picture i posted on discord, of what the page looked like right after updating Auto Third Person.

Recreating the situation with Inspect Element has the same effect.

Environment:
Firefox 83.0-2
Arch Linux

Resulting error:

An Error Occurred
Error with multipart data: The mod description must be between 3 and 2048 bytes; got 0.

Steps to reproduce:

1. Create a new mod
2. Fill in name, slug, description, categories
3. Try to save draft with empty summary field

when setting a version's Name property to an empty string and saving, you are no longer able to click on that version's name field, preventing you from setting a new name.

How it should look:

Device: Xiaomi Redmi Note 8 PRO, Android 10 (MIUI 12.0.49), Chrome 87.0.4280

The header links on the landing page should have a larger padding area so that they are clickable

It would be preferable if this was replaced with some sort of "Loading" indicator instead.

The last page number in the pagination view wraps on narrower screens

Display size: 3840x2160 (4K)

Mod entries (specifically mod versions), the Supported Versions can contain any MC version, even if that version is invalid (e.g. Fabric mods can't be for <1.14)

Its a checkbox on pc.

Browser: epiphany 3.38.2-1

Screenshot:

When you tap on the version name, it doesn't take you to the mod/{id}/version/{id} page.

No clue why as it works on desktop.

The external link icon is smaller for the source code link when the text wraps

The videos on the landing page are still terrible quality gifs rather than autoplaying videos

Don't know what to say more about it. Check it out yourself - probably just a wrong number somewhere:

If possible, set the default at 20 items per page.
Also save the user preference for the pagination step in localstorage (in the browser)

Currently the design only works well on large screens. We should add support for smaller screens and mobile devices for the site to be usable in more cases.

Sub-issues:

• On very small screens it just specifies overflow-x: hidden;. That isn't a solution to x-overflow, it just breaks the page more
• Everything (especially font sizes) should be specified in ems and rems; The body currently has font-size: 18pt; which messes up the scaling for the rest of the site
• Normal window sizes for laptops end up showing the mobile ui with the collapsed sidebar
• x-overflow on most pages for laptop window sizes
• x-overflow allows infinite vertical scrolling??? I have no idea on this one.
• Not quite a responsiveness issue, but the entire top bar currently acts as a link to the main page which makes it too easy to hit accidentally on mobile. Only the modrinth logo/name should be a link.
• The hamburger menu is too small of a tap target on mobile; it's directly next to the link back to the home page.
• The hamburger menu doesn't close automatically when clicking on a page

1. When the "reset icon" button is clicked and the setting are saved the page hangs up (it doesn't redirect the user, and settings are unsaved) and a following error is written to the JS console: TypeError: "t.t0.response is undefined" NuxtJS

2. It's impossible to change the mod icon (the icon stays unchanged after saving modified settings)

3. If the License field (which is optional) is left empty during creation of a mod, the error "Error while parsing JSON: invalid type: null" is shown to the user

4. If a required field is left empty during creation of a mod, the error "Error while parsing JSON: invalid type: null" - this one is not strictly a bug, but a more user friendly message should be provided (e.g. "Please fill in missing required fields.")

The redesign is much better for this than the original site, but it still has some issues. I'm mainly using Firefox's accessibility view to find issues, but most tooling should work.

Some of the issues:
In the header:

• The modrinth logo is missing a label; since it's an <svg> element, it could use aria-label="modrinth"
• The header could be a <header> element instead of <aside>
• The popup in the top right isn't labeled

On the search page:

• Each mod should be contained in a <section> or <article> element instead of a <div>, so that each mod is separated semantically
• The left and right pagination buttons and the pagination separator don't have labels. aria-label could work (maybe even title?)
• The ui icons within each search result should have aria-hidden="true", since they all have separate text labels
• The tooltips don't seem like they would be good for accessibility. Is there a way of making that information available to screen readers and the like while keeping the same tooltip style?
  • Using title as a substitute could work, but it wouldn't look as nice.
• The filter selector isn't accessible since it uses <p> tags with click events; these could be replaced with buttons
• The dropdowns aren't great, but those aren't easy to fix or replace

On mod pages:

• The contrast for links in a mods description isn't great, but it should be fine
• The sidebar has the same issues as the search results for the ui icons and tooltips
• In featured versions, the download icon and fabric icon should have labels (aria-label, since they're svgs)

The typewriter on the landing page has too large of a font; it breaks when the text has to wrap