remote: Problem with remote controll layout in Firefox Mobile

[Eccenux]

Affected part of DeckDeckGo

• Remote control

Reproduction

Steps to reproduce:

1. Create/open a presentation
2. Share.
3. Open with Firefox on Android.

Expected Behavior

I should see Next/Previous buttons in full.

Actual Behavior

Buttons are cut off

Here is a full page screen (scrolled-screen):

Note that you should be able to use a vh-calc trick to avoid this problem cross-browser:
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

Environment

• Browser(s): Firefox for Android
• Operating System (e.g. Windows, macOS, Ubuntu): Android.

[peterpeterparker]

Which version of Firefox are you using?

I'm using v76 on desktop and I don't face such issues.

[Eccenux]

You are using desktop Firefox. Firefox on Android (mobile) is not the same thing. I use latest Firefox on Android. Note that this is probably an issue with hiding the address bar which is only a thing on mobile.

Also note that Firefox on an iPhone (as all other browsers) is just Safari based webview. So you can only really test on Android.

[peterpeterparker]

Thx for the feedback, Firefox Mobile only, well noted.

Can you provide a PR?

[Eccenux]

I didn't found any clear instructions on how to build the whole project... But I was able to figure out some details in devtools.

Note that you should also get nicer layout for Chrome too.

I think the `app-remote` needs some re-structuring:

1. In main add a container with a class `.deck-container`.
2. Put prev/next directly in the container (after .deck).
3. Be sure that app-notes is outside of the container.
4. Apply style changes (notice `height: calc(100% - 8px)`).
5. You might need to tweak some layouts inside the button.

That last 8px is crucial because animations for the buttons makes them bigger and this seem to mess-up layouts.

Style changes:

app-remote main.connected {
  	/* display: grid; */
  	/* grid-template-rows: calc((100% - 64px) / 2) calc((100% - 64px) / 2) 64px; */
}
app-remote main.connected div.deck {
  	margin-bottom: 0px;
}

.deck-container {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  	grid-template-areas: 
  		"deck deck" 
  		"prev next"
  	;
  	grid-template-rows: 1fr 1fr;
  	height: calc(100% - 70px);
  	grid-gap: 1em;
}

.deck {
  	grid-area: deck;
}
.deck-navigation-button-prev {
  	grid-area: prev;
  	padding-left: 1em;
}
.deck-navigation-button-next {
  	grid-area: next;
  	padding-right: 1em;
}
.deck-navigation-button-prev ion-button,
.deck-navigation-button-next ion-button {
	height: calc(100% - 8px);
	width: 100%;
	box-sizing: border-box;
}

After similar changes in WebIDE I got something like this (purple lines show the new grid):

[peterpeterparker]

Thank you for the details. Not sure that it can be styled as you described above as the notes might be a separate component. Moreover the current classes, for example .connected, have to be preserved.

Also note that if it need to be "re-structured", then it's important then it still work as expected: on any devices and with a different grid/presentation if portrait or landscape.

To start locally the remote:

git  clone https://github.com/deckgo/deckdeckgo
cd deckdeckgo/remote
npm  i
npm run start

[peterpeterparker]

It's is live.

Thx @Eccenux for the issue and PR, awesome 👍