Merge branch 'dev' of https://github.com/dreyliky/angular-community-ua-frontend into dev

Author: dreyliky

libs/shared/src/lib/modules/markdown/components/editor/editor.component.scss

@@ -1,16 +1,16 @@
 :host {
     display: flex;
     flex-direction: column;
-    max-width: 800px;
-    width: 800px;
+    width: 100%;
 
     .view-container {
         width: 100%;
         height: 120px;
 
         .markdown-input {
-            width: -webkit-fill-available;
+            width: 100%;
             height: 100%;
+            padding: 0;
             border-bottom-left-radius: 5px;
             border-bottom-right-radius: 5px;
             resize: vertical;

libs/shared/src/lib/modules/markdown/components/toolbar/toolbar.component.html

@@ -1,11 +1,32 @@
 <acua-markdown-toggler />
 
 <ng-container *ngIf="markdownViewMode$ | async">
-    <div class="markdown-buttons">
-        <acua-markdown-button
-            *ngFor="let button of markdownButtonArray"
-            [iconName]="button.matIconName"
-            [tooltipInfo]="button.tooltipInfo"
-            (click)="markdownButtonClick.emit(button)" />
-    </div>
+    <ng-container *ngIf="isMobile(); else notMobileTemplate">
+        <button
+            mat-button
+            [matMenuTriggerFor]="menu">
+            <mat-icon>menu</mat-icon>
+        </button>
+        <mat-menu #menu="matMenu">
+            <button
+                *ngFor="let button of markdownButtonArray"
+                mat-menu-item
+                (click)="markdownButtonClick.emit(button)">
+                <mat-icon>
+                    {{ button.matIconName }}
+                </mat-icon>
+                {{ button.tooltipInfo }}
+            </button>
+        </mat-menu>
+    </ng-container>
+
+    <ng-template #notMobileTemplate>
+        <div class="markdown-buttons">
+            <acua-markdown-button
+                *ngFor="let button of markdownButtonArray"
+                [iconName]="button.matIconName"
+                [tooltipInfo]="button.tooltipInfo"
+                (click)="markdownButtonClick.emit(button)" />
+        </div>
+    </ng-template>
 </ng-container>

libs/shared/src/lib/modules/markdown/components/toolbar/toolbar.component.ts

@@ -4,6 +4,7 @@ import {
     EventEmitter,
     Output
 } from '@angular/core';
+import { ScreenService } from '../../../screen';
 import { MarkdownViewModeState } from '../../states';
 import { MARKDOWN_BUTTON_ARRAY } from './data';
 import { MarkdownButtonSyntax } from './interfaces';
@@ -18,10 +19,12 @@ export class MarkdownToolbarComponent {
     @Output()
     public markdownButtonClick = new EventEmitter<MarkdownButtonSyntax>();
 
+    public readonly isMobile = this.screenService.isMatch(['XSmall']);
     public readonly markdownViewMode$ = this.markdownViewModeState.data$;
     public readonly markdownButtonArray = MARKDOWN_BUTTON_ARRAY;
 
     constructor(
-        private readonly markdownViewModeState: MarkdownViewModeState
+        private readonly markdownViewModeState: MarkdownViewModeState,
+        private readonly screenService: ScreenService
     ) {}
 }

libs/shared/src/lib/modules/markdown/markdown.module.ts

@@ -7,6 +7,7 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import {
     MarkdownButtonComponent,
@@ -34,6 +35,7 @@ import { MarkdownInputState, MarkdownViewModeState } from './states';
         MatInputModule,
         MatIconModule,
         MatButtonModule,
+        MatMenuModule,
         MatTooltipModule,
         MatInputModule,
         MatButtonToggleModule,