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