self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-24 13:43:12 +02:00
Code Issues Releases Activity

Updating welcome screen for small sizes (#4609)

Browse Source
This commit is contained in:
Asaad Mahmood 2023-03-04 12:20:05 +05:00 committed by GitHub
parent 805e0d93dc
commit 56954e0491
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 138 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
webapp/src/pages/welcome/__snapshots__/welcomePage.test.tsx.snap
View File

@ -18,32 +18,40 @@ exports[`pages/welcome Welcome Page shows Explore Page 1`] = `
>
Boards is a project management tool that helps define, organize, track, and manage work across teams using a familiar Kanban board view.
</div>
<img
alt="Boards Welcome Image"
class="WelcomePage__image WelcomePage__image--large"
src="test-file-stub"
/>
<img
alt="Boards Welcome Image"
class="WelcomePage__image WelcomePage__image--small"
src="test-file-stub"
/>
<button
class="Button filled size--large"
type="button"
<div
class="WelcomePage__content"
>
<span>
Take a tour
</span>
<i
class="CompassIcon icon-chevron-right Icon Icon--right"
<img
alt="Boards Welcome Image"
class="WelcomePage__image WelcomePage__image--large"
src="test-file-stub"
/>
</button>
<a
class="skip"
>
No thanks, I'll figure it out myself
</a>
<img
alt="Boards Welcome Image"
class="WelcomePage__image WelcomePage__image--small"
src="test-file-stub"
/>
<div
class="WelcomePage__buttons"
>
<button
class="Button filled size--large"
type="button"
>
<span>
Take a tour
</span>
<i
class="CompassIcon icon-chevron-right Icon Icon--right"
/>
</button>
<a
class="skip"
>
No thanks, I'll figure it out myself
</a>
</div>
</div>
</div>
</div>
</div>
@ -67,32 +75,40 @@ exports[`pages/welcome Welcome Page shows Explore Page with subpath 1`] = `
>
Boards is a project management tool that helps define, organize, track, and manage work across teams using a familiar Kanban board view.
</div>
<img
alt="Boards Welcome Image"
class="WelcomePage__image WelcomePage__image--large"
src="test-file-stub"
/>
<img
alt="Boards Welcome Image"
class="WelcomePage__image WelcomePage__image--small"
src="test-file-stub"
/>
<button
class="Button filled size--large"
type="button"
<div
class="WelcomePage__content"
>
<span>
Take a tour
</span>
<i
class="CompassIcon icon-chevron-right Icon Icon--right"
<img
alt="Boards Welcome Image"
class="WelcomePage__image WelcomePage__image--large"
src="test-file-stub"
/>
</button>
<a
class="skip"
>
No thanks, I'll figure it out myself
</a>
<img
alt="Boards Welcome Image"
class="WelcomePage__image WelcomePage__image--small"
src="test-file-stub"
/>
<div
class="WelcomePage__buttons"
>
<button
class="Button filled size--large"
type="button"
>
<span>
Take a tour
</span>
<i
class="CompassIcon icon-chevron-right Icon Icon--right"
/>
</button>
<a
class="skip"
>
No thanks, I'll figure it out myself
</a>
</div>
</div>
</div>
</div>
</div>

21
webapp/src/pages/welcome/welcomePage.scss
View File

@ -10,6 +10,26 @@
@media (max-height: 768px) {
justify-content: flex-start;
height: auto;
padding-top: 40px;
}
.WelcomePage__content {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
@media (max-height: 800px) {
flex-direction: column-reverse;
margin-top: 16px;
}
}
.WelcomePage__buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
> div {
@ -34,7 +54,6 @@
}
.skip {
margin-top: 12px;
color: rgba(var(--link-color-rgb), 1);
cursor: pointer;

104
webapp/src/pages/welcome/welcomePage.tsx
View File

@ -127,59 +127,63 @@ const WelcomePage = () => {
/>
</div>
{/* This image will be rendered on large screens over 2000px */}
<img
src={Utils.buildURL(BoardWelcomePNG, true)}
className='WelcomePage__image WelcomePage__image--large'
alt='Boards Welcome Image'
/>
<div className='WelcomePage__content'>
{/* This image will be rendered on large screens over 2000px */}
<img
src={Utils.buildURL(BoardWelcomePNG, true)}
className='WelcomePage__image WelcomePage__image--large'
alt='Boards Welcome Image'
/>
{/* This image will be rendered on small screens below 2000px */}
<img
src={Utils.buildURL(BoardWelcomeSmallPNG, true)}
className='WelcomePage__image WelcomePage__image--small'
alt='Boards Welcome Image'
/>
{/* This image will be rendered on small screens below 2000px */}
<img
src={Utils.buildURL(BoardWelcomeSmallPNG, true)}
className='WelcomePage__image WelcomePage__image--small'
alt='Boards Welcome Image'
/>
{me?.is_guest !== true &&
<Button
onClick={startTour}
filled={true}
size='large'
icon={
<CompassIcon
icon='chevron-right'
className='Icon Icon--right'
/>}
rightIcon={true}
>
<FormattedMessage
id='WelcomePage.Explore.Button'
defaultMessage='Take a tour'
/>
</Button>}
<div className='WelcomePage__buttons'>
{me?.is_guest !== true &&
<Button
onClick={startTour}
filled={true}
size='large'
icon={
<CompassIcon
icon='chevron-right'
className='Icon Icon--right'
/>}
rightIcon={true}
>
<FormattedMessage
id='WelcomePage.Explore.Button'
defaultMessage='Take a tour'
/>
</Button>}
{me?.is_guest !== true &&
<a
className='skip'
onClick={skipTour}
>
<FormattedMessage
id='WelcomePage.NoThanks.Text'
defaultMessage="No thanks, I'll figure it out myself"
/>
</a>}
{me?.is_guest === true &&
<Button
onClick={skipTour}
filled={true}
size='large'
>
<FormattedMessage
id='WelcomePage.StartUsingIt.Text'
defaultMessage='Start using it'
/>
</Button>}
{me?.is_guest !== true &&
<a
className='skip'
onClick={skipTour}
>
<FormattedMessage
id='WelcomePage.NoThanks.Text'
defaultMessage="No thanks, I'll figure it out myself"
/>
</a>}
{me?.is_guest === true &&
<Button
onClick={skipTour}
filled={true}
size='large'
>
<FormattedMessage
id='WelcomePage.StartUsingIt.Text'
defaultMessage='Start using it'
/>
</Button>}
</div>
</div>
</div>
</div>
)