Just a design idea

Clossius1 · May 14, 2024, 5:57am

I was bored and played around with some of the html and css. Some noticeable differences are a bigger board and hiding the top nav in a hamburger. I already know about Zen mode. Just thought this was a fun idea.

This is the original

Groin · May 14, 2024, 7:03am

The bigger, the better.

shinuito · May 14, 2024, 7:13am

I think the main thing is to then test your css ideas on all kinds of resolutions, wide screens, tablets, mobile, typical laptop monitors etc.

Just so that making it bigger which is nice on one resolution doesn’t cause the board to overlap things on another etc.

I guess this is the file to play with

github.com

online-go/online-go.com/blob/devel/src/views/Game/Game.styl

/*
 * Copyright (C)  Online-Go.com
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * 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/>.
 */


.Game {
    position: absolute;

This file has been truncated. show original

Edit: Probably

github.com

online-go/online-go.com/blob/devel/src/components/NavBar/NavBar.styl

/*
 * Copyright (C)  Online-Go.com
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * 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/>.
 */

navbar-width= 18rem;
submenu-min-height = 9rem;
hamburger-cutoff = 900px;

This file has been truncated. show original

for the navbar as well

qnpnpmqppnp · May 14, 2024, 8:02am

Subjective, but I prefer the original. Bigger is good but should not come at the expense of readability and ease to identify and reach the other pages/features.

benjito · May 14, 2024, 11:37am

One nice(?) thing about the game page is that the dom actually changes for portrait orientations, so changes to the landscape style aren’t necessarily going to have to be ported to the mobile style. Of course it’s still easy to break one or the other, so good thing to call out for any potential implementer.

I think I’m in the same boat. The board gains a few pixels, but now we’ve got a moving menu bar, and the right side of the page is more cluttered.

One style change that could make the board bigger without moving anything to the side column: change the playback buttons back to their original style

stone.defender · May 14, 2024, 2:50pm