Poor layout on Pixel Fold

OwenWP · July 20, 2023, 8:26pm

The ui layout when running on the new Pixel Fold phone in portrait mode is very awkward. Ideally it should use the same layout as iPad or PC based tablets when using the big inner screen, with the timers on the top instead of the side.

Eugene · July 21, 2023, 4:45am

What’s the exact screen resolution with the awkward layout?

benjito · July 21, 2023, 5:22am

1840 x 2208

Eugene · July 21, 2023, 6:52am

So it seems that at a certain width we decide that we can put stuff on the side, but actually at another certain height we’d rather it back on top again.

Hey @benjito I’ve heard you’re a top-class Front End dev, maybe you could fix that?

I wonder whether the move tree is really supposed to appear in Zen mode with clocks on top?

Is it a bug that it does not appear with clocks on the side, or that it does appear with clocks on top, in Zen mode?

benjito · July 21, 2023, 2:13pm

Haha layouts are hard I can take a look if I get time, but if anyone sees this and wants to mess around with it sooner, here’s a code point:

github.com

online-go/online-go.com/blob/307fe9492d2c632349df015690e98c9b27b40673/src/views/Game/util.ts#L24


      
          * You should have received a copy of the GNU Affero General Public License
          * along with this program.  If not, see <http://www.gnu.org/licenses/>.
          */
          
          import { socket } from "sockets";
          
          const win = $(window);
          
          export type ViewMode = "portrait" | "wide" | "square";
          
          export function goban_view_mode(bar_width?: number): ViewMode {
             if (!bar_width) {
                 bar_width = 300;
             }
          
             const h = win.height() || 1;
             const w = win.width() || 1;
             const aspect_ratio = w / h;
          
             if ((aspect_ratio <= 0.8 || w < bar_width * 2) && w < 1280) {
                 return "portrait";

Basically we look at the aspect ratio to determine whether to stack the elements vertically (portrait) or horizontally (wide). It could be as easy as making portrait include more displays. Harder if we need to make a new view mode altogether since goban_view_mode gets called all over the place.

Is analysis in Zen mode even a thing? How would the move tree show up?

flovo · July 21, 2023, 3:05pm

w < 1280 is likely false on many high dpi devices, so we always end in landscape mode. In this case we have 1840 px on the shorter side.

Arrow left on the keyboard.

benjito · July 21, 2023, 3:09pm

Oh cool! So that’s analysis, but still no move tree…

Edit: oh wait, now I understand the bug (imo zen mode should not show the move tree in either layout)