Responsive design for mobile

[mamarguerat]

I know this is an early stage of the application, but I don't see anything in the roadmap about responsive design, specifically for mobile.

The feature I'm thinking about is a design for mobile that can then be installed as a web app on smartphones. This can be then be used as simple first party "companion" application on smartphones.

[zachgoll]

Mobile compatibility is definitely a long-term priority for us, but optimizing for desktops was a trade-off we've made early on to drastically speed up development on features (one set of designs to both create and implement).

Long term, a companion app / mobile app and some responsive optimizations for the web app will definitely be prioritized, but it will be a while before we reach that point of the roadmap.

[bennypowers]

It would be a shame, IMO, to invest duplicate effort in a companion app when all we really need is a service worker and some CSS. That would be a nicer user experience with better privacy guarantees, as well.

My rails chops are quite dull, but it seems to me that setting up a rails app as a PWA is a well-trodden path: https://onrails.blog/2021/03/02/rails-pwas-using-turbo-hhnpwa-7/

[mikr13]

Agree with @bennypowers a PWA can be setup in no time, only thing we need is to have a basic responsiveness in the app, nothing crazy.

[bennypowers]

I made a small prototype which solves this issue easily. You can try this out in the browser dev tools without modifying any rails views:

1. import shoelace drawer:
   Paste this into dev tools js console

import('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/components/drawer/drawer.js');

2. replace the drawer div with an sl-drawer
   Find the side panel div in elements inspector:
   
   double-click the tag name and replace it with sl-drawer
   

3. add styles for desktop widths
   These ensure that the drawer panel has a solid background, and that it does not cover content on wide screens.

sl-drawer {
  &::part(panel) {background: white;}
  @media (width >= 975px) {
    display: block;
  }
}

4. add JS to automatically open and close the drawer at desktop/mobile widths
   Paste this into the js console

matchMedia('(width >= 975px)')
  .addEventListener('change', function(event) {
    document.querySelector('sl-drawer').open = event.target.matches;
  });

Combining this (or something similar) with some tighter padding for the content on mobile widths would solve 80% of the mobile use case, and would enable users to quickly register transactions "from the coffee shop", without overly burdening maintainance. what i didn't cover in this short experiment was a toggle button in the header (e.g. hamburger button or the like) but that could be easily added

[bennypowers]

if maintainers are amenable i'm happy to make a PR

Shoelace has a comprehensive tutorial for integrating into rails apps
https://shoelace.style/tutorials/integrating-with-rails

[zachgoll]

Appreciate the thought here, but we are generally trying to stick with Tailwind to handle all mobile responsiveness to keep dependencies to a minimum.

Mobile responsiveness is definitely a priority for us, but we're just not quite ready for it yet.

We will be sure to make an announcement / open a GH issue when this effort is ready to be started / underway!