haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor welcome page in prep for branding (#3230) 

* fix(welcome-page): css tweaks in prep for branded welcome page

- Watermarks should no longer depend on toolbar size. The left watermark made
  room for the toolbar when the toolbar was on the left side of the screen, but
  the toolbar has been moved to the bottom. The right watermark...well it'll
  clash with the vertical filmstrip but at least the margins will be consistent
  with the left watermark.
- Apply new font-family so fonts are more likely to be consistent across the
  app. Design likes SF UI and keeps requesting it so use it by default.
- Change sizings of welcome page header to be more responsive. This will help
  the header be scrollable when there is no additional content and the header
  overflows.
- Change colors of the welcome page header and remove background image that
  was in the header. Leave in the dom for the background image in case other
  deployments need to continue showing an image.
- Add a period to the title of the welcome page.
- Move watermarks dom location as it is not part of the header; it's part of the
  whole page.

* [squash] Size and font adjustments. Renaming.
This commit is contained in:
virtuacoplenny 2018-07-24 12:26:17 -07:00 committed by yanas
parent b54a9e2bf7
commit 50ea847905
8 changed files with 43 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/_base.scss
View File

@ -108,14 +108,15 @@ form {
}
.leftwatermark {
left: $defaultToolbarSize;
margin-left: 10px;
left: 32px;
top: 32px;
background-image: url($defaultWatermarkLink);
background-position: center left;
}
.rightwatermark {
right: 15;
right: 32px;
top: 32px;
background-position: center right;
}

1
css/_toolbars.scss
View File

@ -146,7 +146,6 @@
background: #B8C7E0;
border-radius: 2px;
color: $newToolbarBackgroundColor;
font-family: -apple-system, BlinkMacSystemFont, $baseFontFamily;
font-size: 11px;
font-weight: bold;
margin-left: 8px;

6
css/_variables.scss
View File

@ -3,7 +3,7 @@
/**
* Style variables
*/
$baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$hangupColor: #bf2117;
$hangupFontSize: 2em;
@ -144,7 +144,7 @@ $watermarkHeight: 74px;
/**
* Welcome page variables.
*/
$welcomePageDescriptionColor: #fff;
$welcomePageDescriptionColor: #E6EDFA;
$welcomePageFontFamily: inherit;
$welcomePageHeaderBackground: linear-gradient(#165ecc, #44A5FF);
$welcomePageHeaderBackground: #1D69D4;
$welcomePageTitleColor: #fff;

71
css/_welcome_page.scss
View File

@ -4,15 +4,19 @@ body.welcome-page {
}
.welcome {
background-color: $welcomePageHeaderBackground;
display: flex;
flex-direction: column;
font-family: $welcomePageFontFamily;
height: 100%;
justify-content: space-between;
min-height: 100vh;
position: relative;
.header {
align-items: center;
background: $welcomePageHeaderBackground;
display: flex;
flex-direction: column;
min-height: fit-content;
overflow: hidden;
position: relative;
text-align: center;
@ -20,49 +24,42 @@ body.welcome-page {
.header-text {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-top: 120px;
margin-bottom: 20px;
margin-top: $watermarkHeight + 80;
margin-bottom: 36px;
max-width: calc(100% - 40px);
min-height: 286px;
width: 645px;
width: 650px;
z-index: $zindex2;
}
.header-text-title {
color: $welcomePageTitleColor;
font-size: 48px;
letter-spacing: -1px;
line-height: 58px;
margin-bottom: 20px;
font-size: 2.5rem;
font-weight: 500;
letter-spacing: 0;
line-height: 1.18;
margin-bottom: 16px;
}
.header-text-description {
color: $welcomePageDescriptionColor;
font-size: 20px;
line-height: 28px;
opacity: 0.8;
font-size: 1rem;
font-weight: 400;
line-height: 24px;
}
.header-image {
background-image: url(../images/welcome_page/curves.png);
background-size: contain;
height: 209px;
position: absolute;
width: 1070px;
}
#new_enter_room {
#enter_room {
align-items: center;
display: flex;
margin-bottom: 20px;
max-width: calc(100% - 40px);
margin-bottom: 20px;
position: relative;
z-index: 2;
width: 650px;
z-index: $zindex2;
.enter-room-input {
display: inline-block;
margin-right: 15px;
width: 350px;
margin-right: 8px;
width: 100%;
}
}
}
@ -70,24 +67,10 @@ body.welcome-page {
.welcome-page-button {
font-size: 16px;
}
}
.welcome.with-content {
.header {
min-height: 552px;
}
.header-image {
left: -61px;
top: 401px;
}
}
.welcome.without-content {
.header {
.welcome-watermark {
position: absolute;
width: 100%;
height: 100%;
}
.header-image {
bottom: -20px;
left: 0;
}
}

1
css/modals/video-quality/_video-quality.scss
View File

@ -155,7 +155,6 @@
.circular-label {
color: white;
font-family: -apple-system, BlinkMacSystemFont, $baseFontFamily;
font-weight: bold;
margin-left: 8px;
opacity: 0.8;

BIN
images/welcome_page/curves.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 98 KiB

2
lang/main.json
View File

@ -64,7 +64,7 @@
"roomnameHint": "Enter the name or URL of the room you want to join. You may make a name up, just let the people you are meeting know it so that they enter the same name.",
"sendFeedback": "Send feedback",
"terms": "Terms",
"title": "More secure, more flexible, and completely free video conferencing"
"title": "More secure, more flexible, and completely free video conferencing."
},
"startupoverlay": {
"policyText": " ",

14
react/features/welcome/components/WelcomePage.web.js
View File

@ -35,7 +35,7 @@ class WelcomePage extends AbstractWelcomePage {
/**
* The HTML Element used as the container for additional content. Used
* for directly appending the additional content template to the dom
* for directly appending the additional content template to the dom.
*
* @private
* @type {HTMLTemplateElement|null}
@ -107,10 +107,12 @@ class WelcomePage extends AbstractWelcomePage {
<div
className = { `welcome ${showAdditionalContent
? 'with-content' : 'without-content'}` }
id = 'new_welcome_page'>
id = 'welcome_page'>
<div className = 'welcome-watermark'>
<Watermarks />
</div>
<div className = 'header'>
<div className = 'header-image' />
<Watermarks />
<div className = 'header-text'>
<h1 className = 'header-text-title'>
{ t('welcomepage.title') }
@ -120,7 +122,7 @@ class WelcomePage extends AbstractWelcomePage {
{ app: APP_NAME }) }
</p>
</div>
<div id = 'new_enter_room'>
<div id = 'enter_room'>
<form
className = 'enter-room-input'
onSubmit = { this._onFormSubmit }>
@ -156,7 +158,7 @@ class WelcomePage extends AbstractWelcomePage {
}
/**
* Prevents submission of the form and delagates join logic.
* Prevents submission of the form and delegates join logic.
*
* @param {Event} event - The HTML Event which details the form submission.
* @private
@ -196,7 +198,7 @@ class WelcomePage extends AbstractWelcomePage {
}
/**
* Returns whether or not additional content should be displayed belowed
* Returns whether or not additional content should be displayed below
* the welcome page's header for entering a room name.
*
* @private