From b15fe00f7409b27573e162192530bc73e3f918b1 Mon Sep 17 00:00:00 2001 From: Kim <1877318+kimsible@users.noreply.github.com> Date: Tue, 28 Apr 2020 14:53:43 +0200 Subject: Add maximized mode to markdown-textarea + CSS improvements (#2660) * Add arrows-angle-contract/expand bootstrap icons * Add grey textarea-background-color * Add maximized support to markdown-textarea + improve column display * Refactor CSS + add ResizeObservable * Replace bootstrap icons with softies * Add ResizeObserver typing definition * Add focus on textarea + Fix Observables * Propage component changes on markdown plugins * Ignore ResizeObserver not implemented in typescript yet * Move observers from constructor to click event * Add scss and css variables * Replace textareaWidth with textareaMaxWidth to fix others textareas * Clean unused css rules * Fix ResizeObserver unknown by TypeScript compiler * Set max-width: 100% for small and mobile views * Fix textarea/preview height on maximized mode * Add common padding textarea/preview side-by-side * Hide scrollbar sub-menu on small-views * Add maximized mode for mobile views * Fix sass calculate syntax * Revert custom CSS variable for inputBorderRadius and inputBorderColor * Remove unsued methods * Fix missing implement method Co-authored-by: kimsible <kimsible@users.noreply.github.com> --- .../edit-custom-config/edit-custom-config.component.html | 12 ++++++------ .../edit-custom-config/edit-custom-config.component.scss | 12 ------------ 2 files changed, 6 insertions(+), 18 deletions(-) (limited to 'client/src/app/+admin/config/edit-custom-config') diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html index b925d3d02..5703d5a2e 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html @@ -37,7 +37,7 @@ <div class="form-group"> <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help> <my-markdown-textarea - name="instanceDescription" formControlName="description" textareaWidth="500px" [previewColumn]="true" + name="instanceDescription" formControlName="description" textareaMaxWidth="500px" [classes]="{ 'input-error': formErrors['instance.description'] }" ></my-markdown-textarea> <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div> @@ -120,7 +120,7 @@ <div class="form-group"> <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help> <my-markdown-textarea - name="instanceTerms" formControlName="terms" textareaWidth="500px" [previewColumn]="true" + name="instanceTerms" formControlName="terms" textareaMaxWidth="500px" [ngClass]="{ 'input-error': formErrors['instance.terms'] }" ></my-markdown-textarea> <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div> @@ -129,7 +129,7 @@ <div class="form-group"> <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help> <my-markdown-textarea - name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaWidth="500px" [previewColumn]="true" + name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaMaxWidth="500px" [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }" ></my-markdown-textarea> <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div> @@ -140,7 +140,7 @@ <div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div> <my-markdown-textarea - name="instanceModerationInformation" formControlName="moderationInformation" textareaWidth="500px" [previewColumn]="true" + name="instanceModerationInformation" formControlName="moderationInformation" textareaMaxWidth="500px" [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }" ></my-markdown-textarea> <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div> @@ -161,7 +161,7 @@ <div i18n class="label-small-info">A single person? A non-profit? A company?</div> <my-markdown-textarea - name="instanceAdministrator" formControlName="administrator" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true" + name="instanceAdministrator" formControlName="administrator" textareaMaxWidth="500px" textareaHeight="75px" [classes]="{ 'input-error': formErrors['instance.administrator'] }" ></my-markdown-textarea> @@ -216,7 +216,7 @@ <div i18n class="label-small-info">i.e. 2vCore 2GB RAM, a direct the link to the server you rent, etc.</div> <my-markdown-textarea - name="instanceHardwareInformation" formControlName="hardwareInformation" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true" + name="instanceHardwareInformation" formControlName="hardwareInformation" textareaMaxWidth="500px" textareaHeight="75px" [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }" ></my-markdown-textarea> diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss index d8bc30d55..9ee960ad6 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss @@ -68,18 +68,6 @@ textarea { pointer-events: none; } -my-markdown-textarea ::ng-deep { - .root { - @media screen and (max-width: 1400px) { - flex-direction: column !important; - } - - textarea { - max-width: 100%; - } - } -} - .form-group-right { padding-top: 2px; } -- cgit v1.2.3