diff --git a/lang/main.json b/lang/main.json index 7d2bcfdc6..84f11c5bc 100644 --- a/lang/main.json +++ b/lang/main.json @@ -733,6 +733,7 @@ "enterRoomTitle": "Start a new meeting", "roomNameAllowedChars": "Meeting name should not contain any of these characters: ?, &, :, ', \", %, #.", "go": "GO", + "goSmall": "GO", "join": "JOIN", "info": "Info", "privacy": "Privacy", diff --git a/react/features/welcome/components/WelcomePage.web.js b/react/features/welcome/components/WelcomePage.web.js index 044f2cba4..e3824b3d1 100644 --- a/react/features/welcome/components/WelcomePage.web.js +++ b/react/features/welcome/components/WelcomePage.web.js @@ -18,6 +18,12 @@ import Tabs from './Tabs'; */ export const ROOM_NAME_VALIDATE_PATTERN_STR = '^[^?&:\u0022\u0027%#]+$'; +/** + * Maximum number of pixels corresponding to a mobile layout. + * @type {number} + */ +const WINDOW_WIDTH_THRESHOLD = 425; + /** * The Web container rendering the welcome page. * @@ -152,6 +158,7 @@ class WelcomePage extends AbstractWelcomePage { const { APP_NAME } = interfaceConfig; const showAdditionalContent = this._shouldShowAdditionalContent(); const showAdditionalToolbarContent = this._shouldShowAdditionalToolbarContent(); + const showResponsiveText = this._shouldShowResponsiveText(); return (
- { t('welcomepage.go') } + { + showResponsiveText + ? t('welcomepage.goSmall') + : t('welcomepage.go') + }
{ this._renderTabs() } @@ -362,6 +373,20 @@ class WelcomePage extends AbstractWelcomePage { && this._additionalToolbarContentTemplate.content && this._additionalToolbarContentTemplate.innerHTML.trim(); } + + /** + * Returns whether or not the screen has a size smaller than a custom margin + * and therefore display different text in the go button. + * + * @private + * @returns {boolean} + */ + _shouldShowResponsiveText() { + const { innerWidth } = window; + + return innerWidth <= WINDOW_WIDTH_THRESHOLD; + } + } export default translate(connect(_mapStateToProps)(WelcomePage));