mirror of
https://github.com/mattermost/focalboard.git
synced 2024-12-24 13:43:12 +02:00
Updating splash screen sizing for image and content (#1399)
* Updating splash screen sizing for image and content
This commit is contained in:
parent
c24888977c
commit
c332e455c1
@ -136,6 +136,7 @@ endif
|
||||
ifneq ($(HAS_WEBAPP),)
|
||||
mkdir -p dist/$(PLUGIN_ID)/webapp
|
||||
cp -r webapp/dist dist/$(PLUGIN_ID)/webapp/
|
||||
cp -r webapp/dist/static/* dist/$(PLUGIN_ID)/pack/static/
|
||||
endif
|
||||
cd dist && tar -cvzf $(BUNDLE_NAME) $(PLUGIN_ID)
|
||||
|
||||
|
@ -117,7 +117,7 @@ module.exports = {
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: path.join(__dirname, '/dist'),
|
||||
outputPath: 'static',
|
||||
publicPath: '/plugins/focalboard/static/',
|
||||
},
|
||||
},
|
||||
|
@ -8,7 +8,13 @@
|
||||
text-align: center;
|
||||
|
||||
> div {
|
||||
max-width: 640px;
|
||||
max-width: 808px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
|
||||
@media (min-width: 2000px) {
|
||||
max-width: 1120px;
|
||||
}
|
||||
}
|
||||
|
||||
.Button {
|
||||
@ -17,6 +23,35 @@
|
||||
}
|
||||
|
||||
.WelcomePage__image {
|
||||
margin: 32px 0;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
width: 808px;
|
||||
display: none;
|
||||
|
||||
&--small {
|
||||
margin: 24px auto 32px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 2000px) {
|
||||
width: 1120px;
|
||||
|
||||
&--small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--large {
|
||||
margin: 48px auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.WelcomePage__subtitle {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
margin: 24px 0 0;
|
||||
|
||||
@media (min-width: 2000px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
@ -6,6 +6,7 @@ import {FormattedMessage} from 'react-intl'
|
||||
import {useLocation, useHistory} from 'react-router-dom'
|
||||
|
||||
import BoardWelcomePNG from '../../../static/boards-welcome.png'
|
||||
import BoardWelcomeSmallPNG from '../../../static/boards-welcome-small.png'
|
||||
|
||||
import CompassIcon from '../../widgets/icons/compassIcon'
|
||||
import {UserSettings} from '../../userSettings'
|
||||
@ -35,25 +36,32 @@ const WelcomePage = React.memo(() => {
|
||||
return (
|
||||
<div className='WelcomePage'>
|
||||
<div>
|
||||
<h1 className='text-heading6'>
|
||||
<h1 className='text-heading9'>
|
||||
<FormattedMessage
|
||||
id='WelcomePage.Heading'
|
||||
defaultMessage='Welcome To Boards'
|
||||
/>
|
||||
</h1>
|
||||
<div className='text-base'>
|
||||
<div className='WelcomePage__subtitle'>
|
||||
<FormattedMessage
|
||||
id='WelcomePage.Description'
|
||||
defaultMessage='Boards is a project management tool that helps define, organize, track and manage work across teams, using a familiar kanban board view'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='WelcomePage__image'>
|
||||
<img
|
||||
src={BoardWelcomePNG}
|
||||
alt='Boards Welcome Image'
|
||||
/>
|
||||
</div>
|
||||
{/* This image will be rendered on large screens over 2000px */}
|
||||
<img
|
||||
src={BoardWelcomePNG}
|
||||
className='WelcomePage__image WelcomePage__image--large'
|
||||
alt='Boards Welcome Image'
|
||||
/>
|
||||
|
||||
{/* This image will be rendered on small screens below 2000px */}
|
||||
<img
|
||||
src={BoardWelcomeSmallPNG}
|
||||
className='WelcomePage__image WelcomePage__image--small'
|
||||
alt='Boards Welcome Image'
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={goForward}
|
||||
|
BIN
webapp/static/boards-welcome-small.png
Normal file
BIN
webapp/static/boards-welcome-small.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 137 KiB |
Loading…
Reference in New Issue
Block a user