(dating-service) UI Improvements

[samstorment]

Overview

The UI of the dating service has a few issues that can be a bit frustrating, especially on mobile, but are also pretty easily fixed.

1. The buttons are extremely large due to invisible padding. This is mostly ok enough on desktop since the hover effect shows you when you're hovering, but on mobile I often find myself accidentally tapping in that invisible are since I'm not exactly sure where the bounds of the button are and hover isn't there to help. It'd be nice if the clickable area of the buttons always matched their visible area.
2. Overlapping interactive elements can be a bit annoying if your intended click misses and triggers something else. I think fixing the problem above would introduce this new problem. Instead, it would be nice if the interactive elements (buttons/links) had their own distinct space on the screen.
3. The buttons get stuck behind the screenshot link after clicking the link. Only way to get them back in front is to take focus off of the screenshot link.
   
4. There is some unnecessary horizontal overflow on narrow screens.
   

Example Markup and Styling Solution

I'm not too familiar with Java, the template language used in the dating-service, or the Marginalia code base in general, but I thought it might be nice to provide an example that answers the issues mentioned above and could maybe inspire a solution and save some time. I just copied the markup template into an HTML page and tweaked the HTML and styles and hard-coded in some things. Here's a StackBlitz link to that code.

Notes about the example:

• I tried to stay true to the original look of the page while providing the mobile friendliness that I'm after.
• I added a [data-back] attribute to the body tag to control whether or not to display the back button via CSS instead of removing it with a template conditional. This can be set to "true" or "false" to show/hide the back button.
• I rounded some things a bit for consistency with the emoji icons and to make the box shadows look a bit nicer on the corners.
• I recognize my use of background colors on the buttons is a bit of a naive choice since the emojis have different colors and appearances on different devices. The blue I chose is identical to the background of the emoji on my desktop, but is very different on my android device. Only thing I can think to do here is use SVG icons that would be consistent across devices.
  

[vlofgren]

Very nice improvements!

[vlofgren]

I've merged the changes now, and it's live on explore.marginalia.nu :)