mirror of
https://github.com/hcengineering/platform.git
synced 2025-06-04 23:04:47 +00:00
Fix Avatar, add button (#305)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
parent
03d2100c84
commit
c7a8735d35
@ -24,12 +24,12 @@
|
|||||||
$: url = avatar ? getFileUrl(avatar) : undefined
|
$: url = avatar ? getFileUrl(avatar) : undefined
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="{size} flex-center container" class:no-img={!url}>
|
<div class="ava-{size} flex-center avatar-container" class:no-img={!url}>
|
||||||
{#if url}
|
{#if url}
|
||||||
{#if size === 'large' || size === 'x-large'}
|
{#if size === 'large' || size === 'x-large'}
|
||||||
<img class="{size} blur" src={url} alt={''}/>
|
<img class="{size} ava-blur" src={url} alt={''}/>
|
||||||
{/if}
|
{/if}
|
||||||
<img class="{size} mask" src={url} alt={''}/>
|
<img class="{size} ava-mask" src={url} alt={''}/>
|
||||||
{:else}
|
{:else}
|
||||||
<Avatar {size}/>
|
<Avatar {size}/>
|
||||||
{/if}
|
{/if}
|
||||||
@ -38,7 +38,7 @@
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '../../../../packages/theme/styles/mixins.scss';
|
@import '../../../../packages/theme/styles/mixins.scss';
|
||||||
|
|
||||||
.container {
|
.avatar-container {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -53,46 +53,48 @@
|
|||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
@include bg-layer(var(--theme-avatar-hover), .5);
|
@include bg-layer(var(--theme-avatar-hover), .5);
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
@include bg-layer(var(--theme-avatar-bg), .1);
|
@include bg-layer(var(--theme-avatar-bg), .1);
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.x-small {
|
.ava-x-small {
|
||||||
width: 1.5rem; // 24
|
width: 1.5rem; // 24
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
.mask, &.no-img { border-style: none; }
|
|
||||||
}
|
}
|
||||||
.small {
|
.ava-small {
|
||||||
width: 2rem; // 32
|
width: 2rem; // 32
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
.mask, &.no-img { border-style: none; }
|
|
||||||
}
|
}
|
||||||
.medium {
|
.ava-medium {
|
||||||
width: 2.25rem; // 36
|
width: 2.25rem; // 36
|
||||||
height: 2.25rem;
|
height: 2.25rem;
|
||||||
.mask, &.no-img { border-style: none; }
|
|
||||||
}
|
}
|
||||||
.large {
|
.ava-large {
|
||||||
width: 4.5rem; // 72
|
width: 4.5rem; // 72
|
||||||
height: 4.5rem;
|
height: 4.5rem;
|
||||||
}
|
}
|
||||||
.x-large {
|
.ava-x-large {
|
||||||
width: 7.5rem; // 120
|
width: 7.5rem; // 120
|
||||||
height: 7.5rem;
|
height: 7.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blur {
|
.ava-blur {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
filter: blur(32px);
|
filter: blur(32px);
|
||||||
}
|
}
|
||||||
.mask {
|
.ava-mask {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border: 2px solid var(--theme-avatar-border);
|
border: 2px solid var(--theme-avatar-border);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
// .shadow { filter: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8)); }
|
|
||||||
|
.ava-x-small .ava-mask, .ava-x-small.no-img,
|
||||||
|
.ava-small .ava-mask, .ava-small.no-img,
|
||||||
|
.ava-medium .ava-mask, .ava-medium.no-img { border-style: none; }
|
||||||
</style>
|
</style>
|
@ -24,7 +24,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex-row-center">
|
<div class="flex-row-center">
|
||||||
<div class="flex-center {size}"><IconFolder size={'small'} /></div>
|
<div class="flex-center {size} caption-color"><IconFolder size={'small'} /></div>
|
||||||
<div class="flex-col user-info">
|
<div class="flex-col user-info">
|
||||||
{#if subtitle}<div class="subtitle">{subtitle}</div>{/if}
|
{#if subtitle}<div class="subtitle">{subtitle}</div>{/if}
|
||||||
<div class="title">{value.name}</div>
|
<div class="title">{value.name}</div>
|
||||||
|
@ -74,7 +74,7 @@
|
|||||||
{#if loading}
|
{#if loading}
|
||||||
<Spinner/>
|
<Spinner/>
|
||||||
{:else}
|
{:else}
|
||||||
<a href={'#'} on:click={ () => { inputFile.click() } }><CircleButton icon={IconAdd} size={'small'} /></a>
|
<CircleButton icon={IconAdd} size={'small'} on:click={ () => { inputFile.click() } } />
|
||||||
{/if}
|
{/if}
|
||||||
<input bind:this={inputFile} type="file" name="file" id="file" style="display: none" on:change={fileSelected}/>
|
<input bind:this={inputFile} type="file" name="file" id="file" style="display: none" on:change={fileSelected}/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -88,7 +88,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<div class="caption">Applications</div>
|
<div class="flex-row-center">
|
||||||
|
<div class="caption">Applications</div>
|
||||||
|
<CircleButton icon={IconAdd} size={'small'} on:click={ () => { } } />
|
||||||
|
</div>
|
||||||
<Table
|
<Table
|
||||||
_class={recruit.class.Applicant}
|
_class={recruit.class.Applicant}
|
||||||
config={['', '$lookup.space.name', '$lookup.state']}
|
config={['', '$lookup.space.name', '$lookup.state']}
|
||||||
@ -130,6 +133,7 @@
|
|||||||
margin-top: 3.5rem;
|
margin-top: 3.5rem;
|
||||||
|
|
||||||
.caption {
|
.caption {
|
||||||
|
margin-right: .75rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
color: var(--theme-caption-color);
|
color: var(--theme-caption-color);
|
||||||
|
Loading…
Reference in New Issue
Block a user