Better mobile support

[solonovamax]

Request details

Currently, the mobile support for reposilite is lacking. It would be great if the site could be more responsive for mobile devices.
Specifically, the dashboard, console, and settings tabs.

Mobile UX issues

Checklist for tracking. Check off as implemented.

• Text overflows for file names in the file list. See file list screenshots.
  Proposed solutions:
  1. Truncate overflown text, and instead insert three dots (…). (but also show file extension + last 2-3 characters of file name. so, truncate text from the middle.)
• Inadequate padding for file sizes in file list, if name is too long. See file list screenshots.
  Proposed solutions:
  1. Hide the file size completely when on a mobile device. (Optional: show in a menu when long-pressed)
  2. Add more padding :5head:
  3. Increase height of file previews
• Oddly placed icons if file is selected in file list. See screenshot 3 of the file list.
• Icons are not shown for files when on mobile, but tapping on the location they are in activates them. For example, if you tap on the far right of a file name on mobile, it will prompt to delete the file, even though it did not show the file deletion icon (because it's a hover effect). (however, if you long press on a file then tap off the popup, it will show the icon as it registers it as being "selected"/"hovered")
  Proposed solutions:
  1. When on mobile device/touchscreen, if you long-press, a list of actions are displayed. (view, delete, etc.)
  2. When on mobile device/touchscreen, always show the delete icon.
• Things take up way too much space (imo) on mobile.
  Proposed solutions:
  1. Decrease padding, margins, and spacing.
  2. Do nothing
• Account icons off-center on mobile. See account icons screenshot.
• Dashboard is way too tight & wastes too much space. See dashboard screenshot.
  Proposed solution:
  1. Decrease margins & padding. Place instance status in a grid. Use full width for graphs. (possibly also decrease line stroke size for the graph? It blends together a little too much.)
• Too much padding around console.
  Proposed solutions:
  1. Decrease padding around console.
• Settings menu will sometimes randomly shift to the left. Unsure of cause.
• Too much padding around settings.
  Proposed solution:
  1. Decrease padding around settings.
• Text/content overflow for settings.

Screenshots

File List

Account Icons

Dashboard

Console

Settings

[dzikoysk]

I doubt we can improve settings (#1320) tab, but the others could be probably adjusted at some point.

[solonovamax]

I've updated the issue to contain details for changes that would be nice.