aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+videos
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+videos')
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.html14
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss40
2 files changed, 53 insertions, 1 deletions
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
index c9b0a9c63..ec8da02e2 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
@@ -3,6 +3,20 @@
3 <img [src]="getAvatarUrl()" alt="Avatar" /> 3 <img [src]="getAvatarUrl()" alt="Avatar" />
4 4
5 <div class="form-group"> 5 <div class="form-group">
6 <my-help class="markdown-guide" helpType="custom" iconName="markdown" i18n-title title="Markdown compatible">
7 <ng-template ptTemplate="customHtml">
8 <div i18n>
9 Markdown compatible that supports:
10
11 <ul>
12 <li>Emphasis: <strong>**bold**</strong>, <i>_italic_</i></li>
13 <li>Links</li>
14 <li>Break lines</li>
15 <li>Lists</li>
16 </ul>
17 </div>
18 </ng-template>
19 </my-help>
6 <textarea i18n-placeholder placeholder="Add comment..." myAutoResize 20 <textarea i18n-placeholder placeholder="Add comment..." myAutoResize
7 [readonly]="(user === null) ? true : false" 21 [readonly]="(user === null) ? true : false"
8 (click)="openVisitorModal($event)" 22 (click)="openVisitorModal($event)"
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
index d8f851baf..814417f04 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
@@ -19,11 +19,49 @@ form {
19 .form-group { 19 .form-group {
20 flex-grow: 1; 20 flex-grow: 1;
21 margin: 0; 21 margin: 0;
22 position: relative;
23
24 $peertube-textarea-height: 60px;
25 $markdown-icon-height: 18px;
26 $markdown-icon-width: 30px;
27
28 .markdown-guide {
29 position: absolute;
30 top: 5px;
31 left: 4px;
32
33 @media screen and (max-width: 600px) {
34 left: 0;
35 }
36
37 ::ng-deep .help-tooltip-button {
38 my-global-icon {
39 height: $markdown-icon-height;
40 width: $markdown-icon-width;
41
42 svg {
43 opacity: 0.5;
44 }
45 }
46
47 &:focus, &:active, &:hover {
48 my-global-icon svg {
49 opacity: 1;
50 }
51 }
52 }
53 }
22 54
23 textarea { 55 textarea {
24 @include peertube-textarea(100%, 60px); 56 @include peertube-textarea(100%, $peertube-textarea-height);
25 @include button-focus(pvar(--mainColorLightest)); 57 @include button-focus(pvar(--mainColorLightest));
26 58
59 text-indent: $markdown-icon-width;
60
61 @media screen and (max-width: 600px) {
62 text-indent: $markdown-icon-width + 5px;
63 }
64
27 &:focus::placeholder { 65 &:focus::placeholder {
28 opacity: 0; 66 opacity: 0;
29 } 67 }