mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-23 19:44:59 +03:00
Fix Panel and Channels (#189)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
parent
ed3954e5da
commit
91b9543599
@ -64,15 +64,21 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="title">{title}</div>
|
<div class="title">{title}</div>
|
||||||
</div>
|
</div>
|
||||||
{#if $$slots.subtitle}<div class="subtitle"><slot name="subtitle" /></div>{/if}
|
{#if $$slots.subtitle}<div class="flex-row-center subtitle"><slot name="subtitle" /></div>{/if}
|
||||||
<div class="content"><ScrollBox vertical stretch><slot /></ScrollBox></div>
|
<div class="flex-col h-full scroll-container">
|
||||||
|
<ScrollBox vertical stretch>
|
||||||
|
<div class="flex-col content">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</ScrollBox>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rightSection">
|
<div class="rightSection">
|
||||||
<div class="flex-row-center header">
|
<div class="flex-row-center header">
|
||||||
<div class="icon"><IconActivity size={'small'} /></div>
|
<div class="icon"><IconActivity size={'small'} /></div>
|
||||||
<div class="title">Activity</div>
|
<div class="title">Activity</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="flex-col h-full content">
|
||||||
<ScrollBox vertical stretch>
|
<ScrollBox vertical stretch>
|
||||||
{#if comments}
|
{#if comments}
|
||||||
<Grid column={1} rowGap={1.5}>
|
<Grid column={1} rowGap={1.5}>
|
||||||
@ -97,14 +103,16 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="title">{title}</div>
|
<div class="title">{title}</div>
|
||||||
</div>
|
</div>
|
||||||
{#if $$slots.subtitle}<div class="subtitle"><slot name="subtitle" /></div>{/if}
|
{#if $$slots.subtitle}<div class="flex-row-center subtitle"><slot name="subtitle" /></div>{/if}
|
||||||
<ScrollBox vertical stretch noShift>
|
<ScrollBox vertical stretch noShift>
|
||||||
<div class="content"><slot /></div>
|
<div class="flex-col content">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
<div class="flex-row-center activity header">
|
<div class="flex-row-center activity header">
|
||||||
<div class="icon"><IconActivity size={'small'} /></div>
|
<div class="icon"><IconActivity size={'small'} /></div>
|
||||||
<div class="title">Activity</div>
|
<div class="title">Activity</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="activity content">
|
<div class="flex-col activity content">
|
||||||
{#if comments}
|
{#if comments}
|
||||||
<Grid column={1} rowGap={1.5}>
|
<Grid column={1} rowGap={1.5}>
|
||||||
{#each comments as comment}
|
{#each comments as comment}
|
||||||
@ -160,8 +168,6 @@
|
|||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 2rem;
|
padding: 0 2rem;
|
||||||
height: 3.5rem;
|
height: 3.5rem;
|
||||||
border-bottom: 1px solid var(--theme-card-divider);
|
border-bottom: 1px solid var(--theme-card-divider);
|
||||||
@ -174,9 +180,9 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: max-content;
|
height: max-content;
|
||||||
}
|
|
||||||
.content {
|
.content {
|
||||||
overflow: visible;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 1.5rem 2.5rem;
|
padding: 1.5rem 2.5rem;
|
||||||
@ -191,10 +197,12 @@
|
|||||||
background-color: var(--theme-bg-accent-color);
|
background-color: var(--theme-bg-accent-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.fullSize {
|
.fullSize {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
left: 1.5rem;
|
left: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.leftSection, .rightSection {
|
.leftSection, .rightSection {
|
||||||
flex-basis: 50%;
|
flex-basis: 50%;
|
||||||
@ -203,9 +211,13 @@
|
|||||||
}
|
}
|
||||||
.leftSection {
|
.leftSection {
|
||||||
border-right: 1px solid var(--theme-bg-accent-hover);
|
border-right: 1px solid var(--theme-bg-accent-hover);
|
||||||
|
.scroll-container {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 2rem 2rem 1rem;
|
||||||
.content {
|
.content {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
margin-top: 2.5rem;
|
padding: .5rem .5rem .5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.rightSection {
|
.rightSection {
|
||||||
@ -213,12 +225,10 @@
|
|||||||
.header { border-bottom: 1px solid var(--theme-card-divider); }
|
.header { border-bottom: 1px solid var(--theme-card-divider); }
|
||||||
.content {
|
.content {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
padding-top: 2.5rem;
|
padding: 2.5rem 2.5rem 0;
|
||||||
padding-bottom: 0;
|
|
||||||
background-color: var(--theme-bg-accent-color);
|
background-color: var(--theme-bg-accent-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.ref-input {
|
.ref-input {
|
||||||
background-color: var(--theme-bg-accent-color);
|
background-color: var(--theme-bg-accent-color);
|
||||||
|
@ -74,7 +74,7 @@
|
|||||||
<Icon icon={item.icon} size={'small'}/>
|
<Icon icon={item.icon} size={'small'}/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="window">
|
<div class="window {reverse ? 'right' : 'left'}">
|
||||||
<div class="circle circle-icon">
|
<div class="circle circle-icon">
|
||||||
<div class="icon"><Icon icon={item.icon} size={'small'}/></div>
|
<div class="icon"><Icon icon={item.icon} size={'small'}/></div>
|
||||||
</div>
|
</div>
|
||||||
@ -162,7 +162,6 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
top: 2.25rem;
|
top: 2.25rem;
|
||||||
right: 0;
|
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
background-color: var(--theme-button-bg-focused);
|
background-color: var(--theme-button-bg-focused);
|
||||||
border: 1px solid var(--theme-button-border-enabled);
|
border: 1px solid var(--theme-button-border-enabled);
|
||||||
@ -174,6 +173,8 @@
|
|||||||
z-index: 4;
|
z-index: 4;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
&.right { right: 0; }
|
||||||
|
&.left { left: 0; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.label {
|
.label {
|
||||||
|
@ -50,8 +50,8 @@
|
|||||||
<Panel icon={Contact} title={object.firstName + ' ' + object.lastName} {object} on:close={() => { dispatch('close') }}>
|
<Panel icon={Contact} title={object.firstName + ' ' + object.lastName} {object} on:close={() => { dispatch('close') }}>
|
||||||
<svelte:fragment slot="subtitle">
|
<svelte:fragment slot="subtitle">
|
||||||
<div class="flex-between flex-reverse" style="width: 100%">
|
<div class="flex-between flex-reverse" style="width: 100%">
|
||||||
<CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />
|
|
||||||
<Channels value={object.channels}/>
|
<Channels value={object.channels}/>
|
||||||
|
<CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />
|
||||||
</div>
|
</div>
|
||||||
</svelte:fragment>
|
</svelte:fragment>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user