From 94cf26cf69f3879104f06812e518d2cc5fba7ac1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Thu, 17 Oct 2019 16:38:00 +0200
Subject: [PATCH] Show room description in room view with markdown
---
angular.json | 4 +---
src/app/app.module.ts | 3 ---
.../creator/_dialogs/room-edit/room-edit.component.scss | 5 -----
.../room-creator-page/room-creator-page.component.html | 4 +---
.../room-creator-page/room-creator-page.component.scss | 9 ++++++---
src/app/components/moderator/moderator.module.ts | 4 +++-
.../room-moderator-page.component.html | 2 +-
.../room-moderator-page.component.scss | 7 +++++--
src/app/components/participant/participant.module.ts | 4 +++-
.../room-participant-page.component.html | 2 +-
src/styles.scss | 4 ++++
11 files changed, 25 insertions(+), 23 deletions(-)
diff --git a/angular.json b/angular.json
index b9720f0dc..504ecd51a 100644
--- a/angular.json
+++ b/angular.json
@@ -23,9 +23,7 @@
],
"styles": [
"src/styles.scss",
- "./node_modules/material-design-icons/iconfont/material-icons.css",
- "node_modules/prismjs/themes/prism-okaidia.css",
- "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css"
+ "./node_modules/material-design-icons/iconfont/material-icons.css"
],
"scripts": [
"node_modules/marked/lib/marked.js"
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 07d21ea6f..d107cc36e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -59,9 +59,6 @@ import { OverlayComponent } from './components/home/_dialogs/overlay/overlay.com
import { DemoDeComponent } from '../assets/i18n/demo/demo-de';
import { DemoEnComponent } from '../assets/i18n/demo/demo-en';
-import 'prismjs/prism';
-import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
-
export function dialogClose(dialogResult: any) {
}
diff --git a/src/app/components/creator/_dialogs/room-edit/room-edit.component.scss b/src/app/components/creator/_dialogs/room-edit/room-edit.component.scss
index a10c0c16c..b38626eb9 100644
--- a/src/app/components/creator/_dialogs/room-edit/room-edit.component.scss
+++ b/src/app/components/creator/_dialogs/room-edit/room-edit.component.scss
@@ -60,8 +60,3 @@ mat-hint {
::ng-deep .mat-ink-bar {
background-color: var(--primary) !important;
}
-
-markdown {
- color: var(--on-surface);
-}
-
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.html b/src/app/components/creator/room-creator-page/room-creator-page.component.html
index a6dbd9682..235ec8b30 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.html
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.html
@@ -43,9 +43,7 @@
</button>
</div>
<mat-card-content *ngIf="room.description" fxLayoutAlign="center">
- <p>
- {{ room.description.trim() }}
- </p>
+ <markdown [data]="room.description.trim()"></markdown>
</mat-card-content>
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
<mat-grid-list cols="{{viewModuleCount}}" rowHeight="1:1" *ngIf="viewModuleCount > 1">
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.scss b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
index 812a7a820..7b4ca770c 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.scss
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
@@ -4,9 +4,8 @@ mat-card {
width: 100%;
max-width: 800px;
min-height: 300px;
- max-height: 600px;
+ max-height: 700px;
background-color: var(--surface)!important;
- margin-top: 7%;
}
mat-card-content > :first-child {
@@ -61,7 +60,7 @@ mat-card-content > :first-child {
mat-grid-list {
margin-top: 0;
- max-height: 45%!important;
+ max-height: 250px!important;
}
.second {
@@ -120,3 +119,7 @@ mat-expansion-panel {
.question-button-div {
margin: 10% 0 10% 0;
}
+
+markdown {
+ margin: 0 3% 0 3% !important;
+}
diff --git a/src/app/components/moderator/moderator.module.ts b/src/app/components/moderator/moderator.module.ts
index 2e4159997..3d17c18bf 100644
--- a/src/app/components/moderator/moderator.module.ts
+++ b/src/app/components/moderator/moderator.module.ts
@@ -9,6 +9,7 @@ import { SharedModule } from '../shared/shared.module';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { MarkdownModule } from 'ngx-markdown';
@NgModule({
imports: [
@@ -23,7 +24,8 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
deps: [HttpClient]
},
isolate: true
- })
+ }),
+ MarkdownModule
],
declarations: [
RoomModeratorPageComponent,
diff --git a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html
index 9ae3fa645..dc3fc5db8 100644
--- a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html
+++ b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html
@@ -24,7 +24,7 @@
</div>
<mat-divider></mat-divider>
<mat-card-content *ngIf="room.description" fxLayoutAlign="center">
- <p>{{room.description.trim()}}</p>
+ <markdown [data]="room.description.trim()"></markdown>
</mat-card-content>
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
<mat-grid-list cols="{{viewModuleCount}}" rowHeight="1:1" *ngIf="viewModuleCount > 1 && this.moderationEnabled">
diff --git a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss
index 9cace7ad4..207ae9db6 100644
--- a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss
+++ b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss
@@ -4,9 +4,8 @@ mat-card {
width: 100%;
max-width: 800px;
min-height: 350px;
- max-height: 600px;
+ max-height: 700px;
background-color: var(--surface)!important;
- margin-top: 5%;
}
mat-card-content > :first-child {
@@ -139,3 +138,7 @@ mat-expansion-panel {
.question-button-div {
margin: 10% 0 10% 0;
}
+
+markdown {
+ margin: 0 3% 0 3% !important;
+}
diff --git a/src/app/components/participant/participant.module.ts b/src/app/components/participant/participant.module.ts
index 3467598d6..daeac2974 100644
--- a/src/app/components/participant/participant.module.ts
+++ b/src/app/components/participant/participant.module.ts
@@ -10,6 +10,7 @@ import { ParticipantContentCarouselPageComponent } from './participant-content-c
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { MarkdownModule } from 'ngx-markdown';
@NgModule({
imports: [
@@ -24,7 +25,8 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
deps: [HttpClient]
},
isolate: true
- })
+ }),
+ MarkdownModule
],
declarations: [
ContentChoiceParticipantComponent,
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.html b/src/app/components/participant/room-participant-page/room-participant-page.component.html
index 668a0c42c..b38d994a9 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.html
+++ b/src/app/components/participant/room-participant-page/room-participant-page.component.html
@@ -24,7 +24,7 @@
</div>
<mat-divider></mat-divider>
<mat-card-content *ngIf="room.description" fxLayoutAlign="center">
- <p>{{room.description.trim()}}</p>
+ <markdown [data]="room.description.trim()"></markdown>
</mat-card-content>
<mat-grid-list cols="1" rowHeight="2:1">
<mat-grid-tile>
diff --git a/src/styles.scss b/src/styles.scss
index dbaf1614e..df559bcc4 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -65,6 +65,10 @@ body{
color: var(--on-surface);
}
+markdown {
+ color: var(--on-surface);
+}
+
h2 {
color: var(--on-surface)!important;
--
GitLab