From dacbaba1514b7cfd4f7c8a358bd31da2089eb0e0 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Thu, 31 Aug 2023 16:41:34 +0300
Subject: [PATCH] fix aside menu in editor (#201)

---
 src/components/Views/Edit.module.scss |   7 +-
 src/components/Views/Edit.tsx         | 294 +++++++++++++-------------
 2 files changed, 149 insertions(+), 152 deletions(-)

diff --git a/src/components/Views/Edit.module.scss b/src/components/Views/Edit.module.scss
index 1127afd8..d538f484 100644
--- a/src/components/Views/Edit.module.scss
+++ b/src/components/Views/Edit.module.scss
@@ -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;
 }
diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx
index 13f90841..d3ed8179 100644
--- a/src/components/Views/Edit.tsx
+++ b/src/components/Views/Edit.tsx
@@ -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>