Reorganize UI on small viewport #16969
Conversation
ui/round/css/_app-layout.scss
Outdated
| .rcontrols { | ||
| grid-area: controls; | ||
| @include mq-is-col1 { | ||
| grid-area: moves; |
There was a problem hiding this comment.
You want to change the order of the grid-template-areas property
There was a problem hiding this comment.
Oh I see ... it's far more elegant ... let me try
There was a problem hiding this comment.
Done,
As for the status message: do you think it's better to create the vnode on the fly or always create it and hide/show it via scss ?
There was a problem hiding this comment.
assuming the status message should go there (you could explain reasoning for that in your PR comment), i would create the VNode or not based on game state in javascript. and then in css, make it display none by default and show it for mq-is-col1.
There was a problem hiding this comment.
seems like the additional status message pushes the buttons everyone wants to see further down. maybe it's enough that one can usually tell how the game ended from the board?
There was a problem hiding this comment.
The additional status message seems important. It is not completely obvious when the game ends by resignation (specially when there is no clock).
If the space on the screen is an issue, we could mimic the app and display a modal for a few seconds ...
|
It seems to be a very controversial subject. I am not sure this PR will solve anything |
i'm not sure i follow. switching controls & move list would make draw offers, takeback & rematch requests more visible on mobile devices. isn't that a good thing? |
|
@schlawg, thanks for your positive feedback Yes I think it's a good thing. |
|
are you talking about the poster who wants the move list back above the board? ignore that noise. let's see if we can switch it with controls and get that merged. |
|
i added an info dialog helper. you can: import { info as infoDialog } from 'common/dialog';
// somewhere in round/src/ctrl.ts...
infoDialog(viewStatus(ctrl), 3000);that way round/src/view/main.ts stays unmodified in case you're unfamiliar with maintainers pushing directly to your repo, you'll want to |
|
Done ... and it looks better |
ui/round/src/ctrl.ts
Outdated
| this.opts.chat?.instance?.post('Good game, well played'); | ||
| } | ||
| endGameView(); | ||
| if (window.matchMedia('(max-width: 800px) and (orientation: portrait)').matches) { |
There was a problem hiding this comment.
one last nitpick, i believe there is a function for this in common/device called isCol1.
|
https://lichess.org/forum/lichess-feedback/the-new-pop-up-after-the-game You see why I wanted to close the PR before it degenerates :) |
|
They love it, they just cannot yet admit it to themselves. |
Suggestion to fix #16943
On small portrait viewport I swap the controls and the moves and I create another status zone.
Slightly larger screen ...
