chore(welcome-page) Welcome page redesign (#12717)
This commit is contained in:
Horatiu Muresan
GitHub
parent
c441e8abca
commit
2bb2a68e01
|
|
@ -126,6 +126,12 @@ form {
|
|||
background-size: contain;
|
||||
}
|
||||
|
||||
.leftwatermarknomargin {
|
||||
background-position: center left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.rightwatermark {
|
||||
right: 32px;
|
||||
top: 32px;
|
||||
|
|
|
|||
|
|
@ -170,8 +170,9 @@ $welcomePageHeaderPaddingBottom: 0px;
|
|||
$welcomePageHeaderTitleMaxWidth: initial;
|
||||
$welcomePageHeaderTextAlign: center;
|
||||
|
||||
$welcomePageHeaderContainerMarginTop: 104px;
|
||||
$welcomePageHeaderContainerDisplay: flex;
|
||||
$welcomePageHeaderContainerMargin: 104px 32px 0 32px;
|
||||
$welcomePageHeaderContainerMargin: $welcomePageHeaderContainerMarginTop auto 0;
|
||||
|
||||
$welcomePageHeaderTextTitleMarginBottom: 0;
|
||||
$welcomePageHeaderTextTitleFontSize: 42px;
|
||||
|
|
|
|||
|
|
@ -29,6 +29,16 @@ body.welcome-page {
|
|||
flex-direction: column;
|
||||
margin: $welcomePageHeaderContainerMargin;
|
||||
z-index: $zindex2;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
max-width: 688px;
|
||||
}
|
||||
|
||||
.header-watermark-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: calc(20px - #{$welcomePageHeaderContainerMarginTop});
|
||||
}
|
||||
|
||||
.header-text-title {
|
||||
|
|
@ -123,11 +133,7 @@ body.welcome-page {
|
|||
max-width: calc(100% - 40px);
|
||||
padding: 16px 0 39px 0;
|
||||
width: $welcomePageEnterRoomWidth;
|
||||
|
||||
p {
|
||||
color: $welcomePageDescriptionColor;
|
||||
float: left;
|
||||
text-align: $welcomePageHeaderTextAlign;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
|
@ -135,7 +141,6 @@ body.welcome-page {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
font-size: 16px;
|
||||
|
|
@ -200,8 +205,8 @@ body.welcome-page {
|
|||
color: $welcomePageDescriptionColor;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: 32px;
|
||||
top: calc(35px - #{$welcomePageHeaderContainerMarginTop});
|
||||
right: 0;
|
||||
z-index: $zindex2;
|
||||
|
||||
* {
|
||||
|
|
@ -224,6 +229,11 @@ body.welcome-page {
|
|||
width: $welcomePageWatermarkWidth;
|
||||
height: $welcomePageWatermarkHeight;
|
||||
}
|
||||
|
||||
.watermark.leftwatermarknomargin {
|
||||
width: $welcomePageWatermarkWidth;
|
||||
height: $welcomePageWatermarkHeight;
|
||||
}
|
||||
}
|
||||
|
||||
&.without-content {
|
||||
|
|
@ -242,10 +252,17 @@ body.welcome-page {
|
|||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.welcome-card-row {
|
||||
.welcome-card-column {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 32px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 688px;
|
||||
margin: auto;
|
||||
|
||||
> div {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-card-text {
|
||||
|
|
@ -253,7 +270,7 @@ body.welcome-page {
|
|||
}
|
||||
|
||||
.welcome-card {
|
||||
width: 49%;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
|
||||
&--dark {
|
||||
|
|
@ -268,10 +285,6 @@ body.welcome-page {
|
|||
&--grey {
|
||||
background: #F2F3F4;
|
||||
}
|
||||
|
||||
&--shadow {
|
||||
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-footer {
|
||||
|
|
|
|||
|
|
@ -1362,6 +1362,7 @@
|
|||
"recentList": "Recent",
|
||||
"recentListDelete": "Delete entry",
|
||||
"recentListEmpty": "Your recent list is currently empty. Chat with your team and you will find all your recent meetings here.",
|
||||
"recentMeetings": "Your recent meetings",
|
||||
"reducedUIText": "Welcome to {{app}}!",
|
||||
"roomNameAllowedChars": "Meeting name should not contain any of these characters: ?, &, :, ', \", %, #.",
|
||||
"roomname": "Enter room name",
|
||||
|
|
@ -1370,6 +1371,7 @@
|
|||
"settings": "Settings",
|
||||
"startMeeting": "Start meeting",
|
||||
"terms": "Terms",
|
||||
"title": "Secure, fully featured, and completely free video conferencing"
|
||||
"title": "Secure, fully featured, and completely free video conferencing",
|
||||
"upcomingMeetings": "Your upcoming meetings"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,11 @@ type Props = {
|
|||
*/
|
||||
_showJitsiWatermark: boolean,
|
||||
|
||||
/**
|
||||
* Whether the watermark should have a `top` and `left` value.
|
||||
*/
|
||||
noMargins: boolean;
|
||||
|
||||
/**
|
||||
* The default value for the Jitsi logo URL.
|
||||
*/
|
||||
|
|
@ -160,7 +165,9 @@ class Watermarks extends Component<Props, State> {
|
|||
_logoUrl,
|
||||
_showJitsiWatermark
|
||||
} = this.props;
|
||||
const { t } = this.props;
|
||||
const { noMargins, t } = this.props;
|
||||
const className = `watermark ${noMargins ? 'leftwatermarknomargin' : 'leftwatermark'}`;
|
||||
|
||||
let reactElement = null;
|
||||
|
||||
if (_showJitsiWatermark) {
|
||||
|
|
@ -172,14 +179,14 @@ class Watermarks extends Component<Props, State> {
|
|||
};
|
||||
|
||||
reactElement = (<div
|
||||
className = 'watermark leftwatermark'
|
||||
className = { className }
|
||||
style = { style } />);
|
||||
|
||||
if (_logoLink) {
|
||||
reactElement = (
|
||||
<a
|
||||
aria-label = { t('jitsiHome', { logo: interfaceConfig.APP_NAME }) }
|
||||
className = 'watermark leftwatermark'
|
||||
className = { className }
|
||||
href = { _logoLink }
|
||||
target = '_new'>
|
||||
{ reactElement }
|
||||
|
|
|
|||
|
|
@ -184,11 +184,16 @@ class WelcomePage extends AbstractWelcomePage {
|
|||
<div
|
||||
className = { `welcome ${contentClassName} ${footerClassName}` }
|
||||
id = 'welcome_page'>
|
||||
<div className = 'welcome-watermark'>
|
||||
<Watermarks defaultJitsiLogoURL = { DEFAULT_WELCOME_PAGE_LOGO_URL } />
|
||||
</div>
|
||||
|
||||
<div className = 'header'>
|
||||
<div className = 'header-image' />
|
||||
<div className = 'header-container'>
|
||||
<div className = 'header-watermark-container'>
|
||||
<div className = 'welcome-watermark'>
|
||||
<Watermarks
|
||||
defaultJitsiLogoURL = { DEFAULT_WELCOME_PAGE_LOGO_URL }
|
||||
noMargins = { true } />
|
||||
</div>
|
||||
</div>
|
||||
<div className = 'welcome-page-settings'>
|
||||
<SettingsButton
|
||||
defaultTab = { SETTINGS_TABS.CALENDAR }
|
||||
|
|
@ -200,8 +205,6 @@ class WelcomePage extends AbstractWelcomePage {
|
|||
: null
|
||||
}
|
||||
</div>
|
||||
<div className = 'header-image' />
|
||||
<div className = 'header-container'>
|
||||
<h1 className = 'header-text-title'>
|
||||
{ t('welcomepage.headerTitle') }
|
||||
</h1>
|
||||
|
|
@ -246,18 +249,16 @@ class WelcomePage extends AbstractWelcomePage {
|
|||
|
||||
{ _moderatedRoomServiceUrl && (
|
||||
<div id = 'moderated-meetings'>
|
||||
<p>
|
||||
{
|
||||
translateToHTML(
|
||||
t, 'welcomepage.moderatedMessage', { url: _moderatedRoomServiceUrl })
|
||||
}
|
||||
</p>
|
||||
</div>)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className = 'welcome-cards-container'>
|
||||
<div className = 'welcome-card-row'>
|
||||
<div className = 'welcome-card-column'>
|
||||
<div className = 'welcome-tabs welcome-card welcome-card--blue'>
|
||||
{ this._renderTabs() }
|
||||
</div>
|
||||
|
|
@ -404,14 +405,14 @@ class WelcomePage extends AbstractWelcomePage {
|
|||
|
||||
if (_calendarEnabled) {
|
||||
tabs.push({
|
||||
label: t('welcomepage.calendar'),
|
||||
label: t('welcomepage.upcomingMeetings'),
|
||||
content: <CalendarList />
|
||||
});
|
||||
}
|
||||
|
||||
if (_recentListEnabled) {
|
||||
tabs.push({
|
||||
label: t('welcomepage.recentList'),
|
||||
label: t('welcomepage.recentMeetings'),
|
||||
content: <RecentList />
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue