You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@openmeetings.apache.org by GitBox <gi...@apache.org> on 2021/10/09 22:02:46 UTC

[GitHub] [openmeetings] sebawagner opened a new pull request #162: OPENMEETINGS-2684, OPENMEETINGS-2280 Apply viewport and fix height to adjust when resizing occurs for iOS/Mobile browsers

sebawagner opened a new pull request #162:
URL: https://github.com/apache/openmeetings/pull/162


   Fixes:
   **OPENMEETINGS-2685 - Login form on Mobile screens not user-friendly visibility**
   
   Old:
   ![IMG_0340](https://user-images.githubusercontent.com/5152064/136674692-a6653828-8544-4b53-bd3d-04c8ccf0b403.PNG)
   
   New:
   ![IMG_0342](https://user-images.githubusercontent.com/5152064/136674697-b0200f79-4eb3-437a-bb8e-5f484ca5dac5.PNG)
   
   
   OPENMEETINGS-2280 - Android landscape mode cannot sign up as virtual keyboard covers UI
   Old: no screenshot
   
   New:
   ![Screenshot_20211010-105821_Chrome](https://user-images.githubusercontent.com/5152064/136674701-bb35d411-fac4-4618-afdc-dd25fdc9258e.jpeg)
   
   OPENMEETINGS-2686 - Can't click buttons to share you webcam or microphone on mobile screen in portrait mode
   **no old**
   
   New:
   ![IMG_0344](https://user-images.githubusercontent.com/5152064/136674717-503d8533-3100-459c-a84d-470ce6dcb296.PNG)
   
   OPENMEETINGS-2684 - Rotating device landscape in iOS leaves whitespace and doesn't use full height
   Old:
   ![IMG_0341](https://user-images.githubusercontent.com/5152064/136674723-cd70c92e-f876-4905-8275-356f5bc662ec.jpeg)
   
   New:
   ![IMG_0344](https://user-images.githubusercontent.com/5152064/136674732-eb496835-7e2b-4a36-9163-c7db1b3136a9.PNG)
   
   
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [openmeetings] solomax commented on a change in pull request #162: OPENMEETINGS-2684, OPENMEETINGS-2280 Apply viewport and fix height to adjust when resizing occurs for iOS/Mobile browsers

Posted by GitBox <gi...@apache.org>.
solomax commented on a change in pull request #162:
URL: https://github.com/apache/openmeetings/pull/162#discussion_r725768069



##########
File path: openmeetings-web/src/main/front/main/src/index.js
##########
@@ -20,3 +20,10 @@ Object.assign(window, {
 		$('#busy-indicator').hide();
 	}
 });
+function _updateResize() {
+	const doc = document.documentElement
+    doc.style.setProperty('--app-height', `${window.innerHeight}px`)

Review comment:
       I'm afraid there is the issue with whitespaces here :(




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [openmeetings] sebawagner commented on a change in pull request #162: OPENMEETINGS-2684, OPENMEETINGS-2280 Apply viewport and fix height to adjust when resizing occurs for iOS/Mobile browsers

Posted by GitBox <gi...@apache.org>.
sebawagner commented on a change in pull request #162:
URL: https://github.com/apache/openmeetings/pull/162#discussion_r725542714



##########
File path: openmeetings-web/src/main/webapp/css/raw-general.css
##########
@@ -1,7 +1,14 @@
 /* Licensed under the Apache License, Version 2.0 (the "License") http://www.apache.org/licenses/LICENSE-2.0 */
+:root {
+    --app-height: 100%;
+}
 html, body {
-	height: 100%;
+	width: 100vw;

Review comment:
       Using viewport width, rather then 100%. See: https://www.w3schools.com/cssref/css_units.asp




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [openmeetings] sebawagner commented on pull request #162: OPENMEETINGS-2684, OPENMEETINGS-2280 Apply viewport and fix height to adjust when resizing occurs for iOS/Mobile browsers

Posted by GitBox <gi...@apache.org>.
sebawagner commented on pull request #162:
URL: https://github.com/apache/openmeetings/pull/162#issuecomment-939368500


   This still works fine and has minimal impact on desktop browsers.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [openmeetings] sebawagner commented on a change in pull request #162: OPENMEETINGS-2684, OPENMEETINGS-2280 Apply viewport and fix height to adjust when resizing occurs for iOS/Mobile browsers

Posted by GitBox <gi...@apache.org>.
sebawagner commented on a change in pull request #162:
URL: https://github.com/apache/openmeetings/pull/162#discussion_r725542555



##########
File path: openmeetings-web/src/main/webapp/css/raw-general.css
##########
@@ -1,7 +1,14 @@
 /* Licensed under the Apache License, Version 2.0 (the "License") http://www.apache.org/licenses/LICENSE-2.0 */
+:root {
+    --app-height: 100%;
+}
 html, body {
-	height: 100%;
+	width: 100vw;
+    height: var(--app-height);

Review comment:
       See above comment on how this will be adjusted to fix for mobile browsers dynamically showing/toggling the URL/navigation bar when rotating from landscape to portrait mode.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [openmeetings] sebawagner merged pull request #162: OPENMEETINGS-2684, OPENMEETINGS-2280 Apply viewport and fix height to adjust when resizing occurs for iOS/Mobile browsers

Posted by GitBox <gi...@apache.org>.
sebawagner merged pull request #162:
URL: https://github.com/apache/openmeetings/pull/162


   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [openmeetings] sebawagner commented on a change in pull request #162: OPENMEETINGS-2684, OPENMEETINGS-2280 Apply viewport and fix height to adjust when resizing occurs for iOS/Mobile browsers

Posted by GitBox <gi...@apache.org>.
sebawagner commented on a change in pull request #162:
URL: https://github.com/apache/openmeetings/pull/162#discussion_r725542445



##########
File path: openmeetings-web/src/main/front/main/src/index.js
##########
@@ -20,3 +20,10 @@ Object.assign(window, {
 		$('#busy-indicator').hide();
 	}
 });
+function _updateResize() {
+	const doc = document.documentElement
+    doc.style.setProperty('--app-height', `${window.innerHeight}px`)

Review comment:
       This is a fix to adjust the height on iOS and mobile devices when the URL/navigation bar is hidden. Otherwise 100% will still show a white bar under the <body></body> because 100% on a mobile browser is assuming the URL/navigation bar of the browser is visible.
   
   This is particular annoying as on a mobile browser in landscape mode as it reduces the screen size by 10-20%. 
   
   Unfortunate it requires some JS to fix it. CSS alone does not work for iOS.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [openmeetings] sebawagner commented on a change in pull request #162: OPENMEETINGS-2684, OPENMEETINGS-2280 Apply viewport and fix height to adjust when resizing occurs for iOS/Mobile browsers

Posted by GitBox <gi...@apache.org>.
sebawagner commented on a change in pull request #162:
URL: https://github.com/apache/openmeetings/pull/162#discussion_r725542555



##########
File path: openmeetings-web/src/main/webapp/css/raw-general.css
##########
@@ -1,7 +1,14 @@
 /* Licensed under the Apache License, Version 2.0 (the "License") http://www.apache.org/licenses/LICENSE-2.0 */
+:root {
+    --app-height: 100%;
+}
 html, body {
-	height: 100%;
+	width: 100vw;
+    height: var(--app-height);

Review comment:
       See above comment on how this will be adjusted to fix for mobile browsers dynamically showing/toggling the URL/navigation bar when rotating from portrait to landscape mode.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [openmeetings] sebawagner commented on a change in pull request #162: OPENMEETINGS-2684, OPENMEETINGS-2280 Apply viewport and fix height to adjust when resizing occurs for iOS/Mobile browsers

Posted by GitBox <gi...@apache.org>.
sebawagner commented on a change in pull request #162:
URL: https://github.com/apache/openmeetings/pull/162#discussion_r725542475



##########
File path: openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/BasePage.html
##########
@@ -22,6 +22,7 @@
 <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-9.xsd" wicket:id="html">
 <head>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+	<meta name="viewport" content="height=device-height, initial-scale=1, width=device-width, initial-scale=1" />

Review comment:
       Adjust viewport. I think Bootstrap needs this tag also. But this will adjust the viewport for mobile devices




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [openmeetings] sebawagner commented on a change in pull request #162: OPENMEETINGS-2684, OPENMEETINGS-2280 Apply viewport and fix height to adjust when resizing occurs for iOS/Mobile browsers

Posted by GitBox <gi...@apache.org>.
sebawagner commented on a change in pull request #162:
URL: https://github.com/apache/openmeetings/pull/162#discussion_r725542445



##########
File path: openmeetings-web/src/main/front/main/src/index.js
##########
@@ -20,3 +20,10 @@ Object.assign(window, {
 		$('#busy-indicator').hide();
 	}
 });
+function _updateResize() {
+	const doc = document.documentElement
+    doc.style.setProperty('--app-height', `${window.innerHeight}px`)

Review comment:
       This is a fix to adjust the height on iOS and mobile devices when the URL/navigation bar is hidden. Otherwise 100% will still show a white bar under the <body></body> because 100% on a mobile browser is assuming the URL/navigation bar of the browser is visible.
   
   This is particular annoying if on a mobile browser in landscape mode as it reduces the screen size by 10-20%.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@openmeetings.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org