mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-26 13:47:26 +03:00
Update LoginApp UI for mobile (#2298)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
a2ca2e70df
commit
507b155441
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -229,4 +229,5 @@ export interface DeviceOptions {
|
||||
docHeight: number
|
||||
isPortrait: boolean
|
||||
isMobile: boolean
|
||||
theme?: any
|
||||
}
|
||||
|
||||
3
plugins/login-resources/img/logo-dark.svg
Normal file
3
plugins/login-resources/img/logo-dark.svg
Normal 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 |
|
Before Width: | Height: | Size: 423 B After Width: | Height: | Size: 423 B |
@ -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;
|
||||
|
||||
86
plugins/login-resources/src/components/Intro.svelte
Normal file
86
plugins/login-resources/src/components/Intro.svelte
Normal 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>
|
||||
@ -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>
|
||||
<Intro />
|
||||
</Scroller>
|
||||
<Popup />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
padding: 0px 1.25rem 1.25rem 1.25rem;
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
height: max-content;
|
||||
background: var(--popup-bg-color);
|
||||
box-shadow: var(--popup-aside-shadow);
|
||||
|
||||
$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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user