Update LoginApp UI for mobile (#2298)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2022-10-12 08:23:37 +03:00 committed by GitHub
parent a2ca2e70df
commit 507b155441
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 153 additions and 78 deletions

View File

@ -241,6 +241,7 @@
--popup-divider: #eff1f4;
--popup-shadow: rgb(0 0 0 / 20%) 0px 4px 24px; // Dark
--popup-panel-shadow: rgb(0 0 0 / 10%) 0px 4px 18px;
--popup-aside-shadow: rgb(0 0 0 / 25%) 0px 8px 16px;
--card-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
--card-overlay-color: rgba(144, 149, 157, .4);
--avatar-bg-color: #e0e0e0; // HZ

View File

@ -26,7 +26,7 @@
export let fade: FadeOptions = defaultSP
export let invertScroll: boolean = false
export let horizontal: boolean = false
export let contentDirection: 'vertical' | 'horizontal' = 'vertical'
export let contentDirection: 'vertical' | 'vertical-reverse' | 'horizontal' = 'vertical'
let mask: 'top' | 'bottom' | 'both' | 'none' = 'none'
let maskH: 'left' | 'right' | 'both' | 'none' = 'none'
@ -245,7 +245,12 @@
bind:this={divBox}
class="box"
style:padding
style:flex-direction={contentDirection === 'vertical' ? 'column' : 'row'}
style:flex-direction={contentDirection === 'vertical'
? 'column'
: contentDirection === 'vertical-reverse'
? 'column-reverse'
: 'row'}
style:height={contentDirection === 'vertical-reverse' ? 'max-content' : '100%'}
use:resizeObserver={(element) => {
boxHeight = element.clientHeight
boxWidth = element.clientWidth
@ -368,7 +373,6 @@
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 100%;
}
.scroller-container.bottomStart {
justify-content: flex-end;

View File

@ -1,16 +1,19 @@
<script lang="ts">
import { getContext } from 'svelte'
import Mute from './icons/Mute.svelte'
import { deviceOptionsStore as deviceInfo } from '../../'
const { currentTheme, setTheme } = getContext('theme')
const themes = ['theme-light', 'theme-dark']
let current = themes.indexOf(currentTheme)
$deviceInfo.theme = currentTheme
function changeTheme () {
current++
setTheme(themes[current % themes.length])
$deviceInfo.theme = themes[current % themes.length]
}
</script>

View File

@ -229,4 +229,5 @@ export interface DeviceOptions {
docHeight: number
isPortrait: boolean
isMobile: boolean
theme?: any
}

View File

@ -0,0 +1,3 @@
<svg width="63" height="79" viewBox="0 0 63 79" fill="#fff" xmlns="http://www.w3.org/2000/svg">
<path d="M34.8089 0.679932H0.378906V78.9999H15.2289V51.6099H34.8089C52.8489 51.6099 62.5289 41.2699 62.5289 26.1999C62.5289 11.0199 52.8489 0.679932 34.8089 0.679932ZM34.1489 38.8499H15.2289V13.4399H34.1489C42.8389 13.4399 47.5689 18.0599 47.5689 26.1999C47.5689 34.3399 42.8389 38.8499 34.1489 38.8499Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 423 B

View File

Before

Width:  |  Height:  |  Size: 423 B

After

Width:  |  Height:  |  Size: 423 B

View File

@ -14,7 +14,7 @@
// limitations under the License.
-->
<script lang="ts">
import { StylishEdit, Label, Button } from '@hcengineering/ui'
import { StylishEdit, Label, Button, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
import StatusControl from './StatusControl.svelte'
import { OK, Status, Severity } from '@hcengineering/platform'
import type { IntlString } from '@hcengineering/platform'
@ -101,7 +101,7 @@
}
</script>
<form class="container">
<form class="container" style:padding={$deviceInfo.docWidth <= 480 ? '1.25rem' : '5rem'}>
<div class="grow-separator" />
<div class="title"><Label label={caption} /></div>
<div class="status">
@ -109,7 +109,7 @@
</div>
<div class="form">
{#each fields as field (field.name)}
<div class={field.short ? 'form-col' : 'form-row'}>
<div class={field.short && !($deviceInfo.docWidth <= 600) ? 'form-col' : 'form-row'}>
<StylishEdit
label={field.i18n}
name={field.id}
@ -168,9 +168,10 @@
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
overflow: hidden;
height: 100%;
padding: 5rem;
// height: 100%;
// padding: 5rem;
.title {
font-weight: 600;

View File

@ -0,0 +1,86 @@
<!--
// Copyright © 2020, 2021 Anticrm Platform Contributors.
// Copyright © 2021, 2022 Hardcore Engineering Inc.
//
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//
// See the License for the specific language governing permissions and
// limitations under the License.
-->
<script lang="ts">
import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
export let size: 'small' | 'medium' = 'medium'
</script>
<div class="intro">
<div class="content">
<div class="logo {$deviceInfo.theme === 'theme-light' ? 'dark' : 'light'}" />
</div>
<div class="slogan">
<p>A unique place to manage all of your work</p>
<p>Welcome to the Platform</p>
</div>
</div>
<style lang="scss">
.intro {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
min-width: 20rem;
min-height: 26rem;
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-grow: 1;
.logo {
position: relative;
&::after {
position: absolute;
content: '';
transform: translate(-50%, -50%);
width: 63px;
height: 79px;
}
&.light::after {
background: center url('../../img/logo-light.svg');
}
&.dark::after {
background: center url('../../img/logo-dark.svg');
}
&::before {
position: absolute;
content: '';
transform: translate(-50%, -50%);
width: 16rem;
height: 16rem;
border: 1.8px solid var(--caption-color);
border-radius: 50%;
opacity: 0.08;
}
}
}
.slogan {
margin-bottom: 60px;
p {
margin: 0;
font-weight: 400;
font-size: 0.8rem;
text-align: center;
color: var(--theme-caption-color);
opacity: 0.8;
}
}
}
</style>

View File

@ -14,13 +14,14 @@
// limitations under the License.
-->
<script lang="ts">
import { location, Popup, ticker } from '@hcengineering/ui'
import { location, Popup, ticker, Scroller, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
import LoginForm from './LoginForm.svelte'
import SignupForm from './SignupForm.svelte'
import CreateWorkspaceForm from './CreateWorkspaceForm.svelte'
import SelectWorkspace from './SelectWorkspace.svelte'
import Join from './Join.svelte'
import Intro from './Intro.svelte'
import { onDestroy } from 'svelte'
import login from '../plugin'
import { getMetadata } from '@hcengineering/platform'
@ -43,8 +44,12 @@
)
</script>
<div class="container">
<div class="panel">
<Scroller padding={'1.25rem'} contentDirection={$deviceInfo.docWidth <= 768 ? 'vertical-reverse' : 'horizontal'}>
<div
class="panel"
class:landscape={$deviceInfo.docWidth > 768}
style:border-radius={$deviceInfo.docWidth <= 480 ? '.75rem' : '1.25rem'}
>
{#if page === 'login'}
<LoginForm {navigateUrl} />
{:else if page === 'signup'}
@ -57,79 +62,50 @@
<Join />
{/if}
</div>
<div class="intro">
<div class="content">
<div class="logo" />
</div>
<div class="slogan">
<p>A unique place to manage all of your work</p>
<p>Welcome to the Platform</p>
</div>
</div>
<Popup />
</div>
<Intro />
</Scroller>
<Popup />
<style lang="scss">
.container {
.panel {
position: relative;
display: flex;
flex-direction: row;
height: 100%;
padding: 0px 1.25rem 1.25rem 1.25rem;
flex-direction: column;
min-height: 100%;
height: max-content;
background: var(--popup-bg-color);
box-shadow: var(--popup-aside-shadow);
.panel {
$circle-size: calc(1vh + 1vw);
$r1: 23;
$r2: 17;
&::before,
&::after {
content: '';
position: absolute;
border-radius: 50%;
z-index: -1;
}
&::before {
top: calc(-1 * $circle-size * $r1 / 2 + $circle-size * 4);
left: calc(-1 * $circle-size * $r1 / 2);
width: calc($circle-size * $r1);
height: calc($circle-size * $r1);
border: 1px solid var(--content-color);
opacity: 0.05;
}
&::after {
top: calc(-1 * $circle-size * $r2 / 2 + $circle-size * 4);
left: calc(-1 * $circle-size * $r2 / 2);
width: calc($circle-size * $r2);
height: calc($circle-size * $r2);
background: var(--dark-color);
border: 1px solid var(--caption-color);
opacity: 0.05;
}
&.landscape {
margin-right: 1.25rem;
width: 41.75rem;
height: 100%;
border-radius: 1.25rem;
background-color: var(--theme-menu-selection);
}
.intro {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
min-width: 20rem;
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-grow: 1;
.logo {
position: relative;
&:after {
position: absolute;
content: '';
background: center url('../../img/logo.svg');
transform: translate(-50%, -50%);
width: 63px;
height: 79px;
}
&:before {
position: absolute;
content: '';
transform: translate(-50%, -50%);
width: 16rem;
height: 16rem;
border: 1.8px solid var(--theme-caption-color);
border-radius: 50%;
opacity: 0.08;
}
}
}
.slogan {
margin-bottom: 60px;
p {
margin: 0;
font-weight: 400;
font-size: 0.8rem;
text-align: center;
color: var(--theme-caption-color);
opacity: 0.8;
}
}
}
}
</style>