fix aside menu in editor (#201)
This commit is contained in:
Ilya Y
GitHub
parent
39e27cc307
commit
dacbaba151
|
|
@ -217,10 +217,9 @@
|
|||
}
|
||||
|
||||
.wrapperTableOfContents {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-bottom: -157px;
|
||||
position: fixed;
|
||||
left: 40px;
|
||||
top: 100px;
|
||||
width: 240px;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -249,166 +249,164 @@ export const EditView = (props: Props) => {
|
|||
|
||||
<AutoSaveNotice active={saving()} />
|
||||
|
||||
<div class="position-relative">
|
||||
<div class={styles.wrapperTableOfContents}>
|
||||
<Show when={isDesktop() && form.body}>
|
||||
<TableOfContents variant="editor" parentSelector="#editorBody" body={form.body} />
|
||||
</Show>
|
||||
</div>
|
||||
<div class={styles.wrapperTableOfContents}>
|
||||
<Show when={isDesktop() && form.body}>
|
||||
<TableOfContents variant="editor" parentSelector="#editorBody" body={form.body} />
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">
|
||||
<Show when={page().route === 'edit'}>
|
||||
<div class={styles.headingActions}>
|
||||
<Show when={!isSubtitleVisible()}>
|
||||
<div class={styles.action} onClick={showSubtitleInput}>
|
||||
{t('Add subtitle')}
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={!isLeadVisible()}>
|
||||
<div class={styles.action} onClick={showLeadInput}>
|
||||
{t('Add intro')}
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<>
|
||||
<div class={clsx({ [styles.audioHeader]: props.shout.layout === 'audio' })}>
|
||||
<div class={styles.inputContainer}>
|
||||
<GrowingTextarea
|
||||
allowEnterKey={true}
|
||||
value={(value) => handleTitleInputChange(value)}
|
||||
class={styles.titleInput}
|
||||
placeholder={articleTitle()}
|
||||
initialValue={form.title}
|
||||
maxLength={MAX_HEADER_LIMIT}
|
||||
/>
|
||||
<div class="row">
|
||||
<div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">
|
||||
<Show when={page().route === 'edit'}>
|
||||
<div class={styles.headingActions}>
|
||||
<Show when={!isSubtitleVisible()}>
|
||||
<div class={styles.action} onClick={showSubtitleInput}>
|
||||
{t('Add subtitle')}
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={!isLeadVisible()}>
|
||||
<div class={styles.action} onClick={showLeadInput}>
|
||||
{t('Add intro')}
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<>
|
||||
<div class={clsx({ [styles.audioHeader]: props.shout.layout === 'audio' })}>
|
||||
<div class={styles.inputContainer}>
|
||||
<GrowingTextarea
|
||||
allowEnterKey={true}
|
||||
value={(value) => handleTitleInputChange(value)}
|
||||
class={styles.titleInput}
|
||||
placeholder={articleTitle()}
|
||||
initialValue={form.title}
|
||||
maxLength={MAX_HEADER_LIMIT}
|
||||
/>
|
||||
|
||||
<Show when={formErrors.title}>
|
||||
<div class={styles.validationError}>{formErrors.title}</div>
|
||||
</Show>
|
||||
<Show when={formErrors.title}>
|
||||
<div class={styles.validationError}>{formErrors.title}</div>
|
||||
</Show>
|
||||
|
||||
<Show when={props.shout.layout === 'audio'}>
|
||||
<div class={styles.additional}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('Artist...')}
|
||||
class={styles.additionalInput}
|
||||
value={mediaItems()[0]?.artist || ''}
|
||||
onChange={(event) => handleBaseFieldsChange('artist', event.target.value)}
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
min="1900"
|
||||
max={new Date().getFullYear()}
|
||||
step="1"
|
||||
class={styles.additionalInput}
|
||||
placeholder={t('Release date...')}
|
||||
value={mediaItems()[0]?.date || ''}
|
||||
onChange={(event) => handleBaseFieldsChange('date', event.target.value)}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('Genre...')}
|
||||
class={styles.additionalInput}
|
||||
value={mediaItems()[0]?.genre || ''}
|
||||
onChange={(event) => handleBaseFieldsChange('genre', event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={props.shout.layout !== 'audio'}>
|
||||
<Show when={isSubtitleVisible()}>
|
||||
<GrowingTextarea
|
||||
textAreaRef={(el) => {
|
||||
subtitleInput.current = el
|
||||
}}
|
||||
allowEnterKey={false}
|
||||
value={(value) => setForm('subtitle', value)}
|
||||
class={styles.subtitleInput}
|
||||
placeholder={t('Subheader')}
|
||||
initialValue={form.subtitle}
|
||||
maxLength={MAX_HEADER_LIMIT}
|
||||
/>
|
||||
</Show>
|
||||
<Show when={isLeadVisible()}>
|
||||
<SimplifiedEditor
|
||||
variant="minimal"
|
||||
onlyBubbleControls={true}
|
||||
smallHeight={true}
|
||||
placeholder={t('A short introduction to keep the reader interested')}
|
||||
initialContent={form.lead}
|
||||
onChange={(value) => setForm('lead', value)}
|
||||
/>
|
||||
</Show>
|
||||
</Show>
|
||||
</div>
|
||||
<Show when={props.shout.layout === 'audio'}>
|
||||
<Show
|
||||
when={form.coverImageUrl}
|
||||
fallback={
|
||||
<DropArea
|
||||
isSquare={true}
|
||||
placeholder={t('Add cover')}
|
||||
description={
|
||||
<>
|
||||
{t('min. 1400×1400 pix')}
|
||||
<br />
|
||||
{t('jpg, .png, max. 10 mb.')}
|
||||
</>
|
||||
}
|
||||
isMultiply={false}
|
||||
fileType={'image'}
|
||||
onUpload={(val) => setForm('coverImageUrl', val[0].url)}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div
|
||||
class={styles.cover}
|
||||
style={{ 'background-image': `url(${imageProxy(form.coverImageUrl)})` }}
|
||||
<div class={styles.additional}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('Artist...')}
|
||||
class={styles.additionalInput}
|
||||
value={mediaItems()[0]?.artist || ''}
|
||||
onChange={(event) => handleBaseFieldsChange('artist', event.target.value)}
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
min="1900"
|
||||
max={new Date().getFullYear()}
|
||||
step="1"
|
||||
class={styles.additionalInput}
|
||||
placeholder={t('Release date...')}
|
||||
value={mediaItems()[0]?.date || ''}
|
||||
onChange={(event) => handleBaseFieldsChange('date', event.target.value)}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('Genre...')}
|
||||
class={styles.additionalInput}
|
||||
value={mediaItems()[0]?.genre || ''}
|
||||
onChange={(event) => handleBaseFieldsChange('genre', event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={props.shout.layout !== 'audio'}>
|
||||
<Show when={isSubtitleVisible()}>
|
||||
<GrowingTextarea
|
||||
textAreaRef={(el) => {
|
||||
subtitleInput.current = el
|
||||
}}
|
||||
allowEnterKey={false}
|
||||
value={(value) => setForm('subtitle', value)}
|
||||
class={styles.subtitleInput}
|
||||
placeholder={t('Subheader')}
|
||||
initialValue={form.subtitle}
|
||||
maxLength={MAX_HEADER_LIMIT}
|
||||
/>
|
||||
</Show>
|
||||
<Show when={isLeadVisible()}>
|
||||
<SimplifiedEditor
|
||||
variant="minimal"
|
||||
onlyBubbleControls={true}
|
||||
smallHeight={true}
|
||||
placeholder={t('A short introduction to keep the reader interested')}
|
||||
initialContent={form.lead}
|
||||
onChange={(value) => setForm('lead', value)}
|
||||
/>
|
||||
</Show>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<Show when={props.shout.layout === 'image'}>
|
||||
<SolidSwiper
|
||||
editorMode={true}
|
||||
images={mediaItems()}
|
||||
onImageChange={handleMediaChange}
|
||||
onImageDelete={(index) => handleMediaDelete(index)}
|
||||
onImagesAdd={(value) => handleAddMedia(value)}
|
||||
onImagesSorted={(value) => handleSortedMedia(value)}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<Show when={props.shout.layout === 'video'}>
|
||||
<VideoUploader
|
||||
video={mediaItems()}
|
||||
onVideoAdd={(data) => handleAddMedia(data)}
|
||||
onVideoDelete={(index) => handleMediaDelete(index)}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<Show when={props.shout.layout === 'audio'}>
|
||||
<AudioUploader
|
||||
audio={mediaItems()}
|
||||
baseFields={baseAudioFields()}
|
||||
onAudioAdd={(value) => handleAddMedia(value)}
|
||||
onAudioChange={handleMediaChange}
|
||||
onAudioSorted={(value) => handleSortedMedia(value)}
|
||||
/>
|
||||
<Show
|
||||
when={form.coverImageUrl}
|
||||
fallback={
|
||||
<DropArea
|
||||
isSquare={true}
|
||||
placeholder={t('Add cover')}
|
||||
description={
|
||||
<>
|
||||
{t('min. 1400×1400 pix')}
|
||||
<br />
|
||||
{t('jpg, .png, max. 10 mb.')}
|
||||
</>
|
||||
}
|
||||
isMultiply={false}
|
||||
fileType={'image'}
|
||||
onUpload={(val) => setForm('coverImageUrl', val[0].url)}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div
|
||||
class={styles.cover}
|
||||
style={{ 'background-image': `url(${imageProxy(form.coverImageUrl)})` }}
|
||||
/>
|
||||
</Show>
|
||||
</Show>
|
||||
</>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Show when={props.shout.layout === 'image'}>
|
||||
<SolidSwiper
|
||||
editorMode={true}
|
||||
images={mediaItems()}
|
||||
onImageChange={handleMediaChange}
|
||||
onImageDelete={(index) => handleMediaDelete(index)}
|
||||
onImagesAdd={(value) => handleAddMedia(value)}
|
||||
onImagesSorted={(value) => handleSortedMedia(value)}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<Show when={props.shout.layout === 'video'}>
|
||||
<VideoUploader
|
||||
video={mediaItems()}
|
||||
onVideoAdd={(data) => handleAddMedia(data)}
|
||||
onVideoDelete={(index) => handleMediaDelete(index)}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<Show when={props.shout.layout === 'audio'}>
|
||||
<AudioUploader
|
||||
audio={mediaItems()}
|
||||
baseFields={baseAudioFields()}
|
||||
onAudioAdd={(value) => handleAddMedia(value)}
|
||||
onAudioChange={handleMediaChange}
|
||||
onAudioSorted={(value) => handleSortedMedia(value)}
|
||||
/>
|
||||
</Show>
|
||||
</>
|
||||
</Show>
|
||||
</div>
|
||||
<Show when={page().route === 'edit'}>
|
||||
<Editor
|
||||
shoutId={form.shoutId}
|
||||
initialContent={form.body}
|
||||
onChange={(body) => setForm('body', body)}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
<Show when={page().route === 'edit'}>
|
||||
<Editor
|
||||
shoutId={form.shoutId}
|
||||
initialContent={form.body}
|
||||
onChange={(body) => setForm('body', body)}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user