show song - order and delete

src/app/widget-modules/components/application-frame/navigation/filter/filter.component.less

@@ -6,11 +6,14 @@ input {
   border: none;
   border-bottom: 1px solid #ccc;
   color: #888;
-  margin-right: 20px;
 
   &:focus {
     outline: none;
     border-bottom: 2px solid @primary-color;
     margin-bottom: -1px;
   }
+
+  @media screen and (max-width: 500px) {
+    width: 100px;
+  }
 }

src/app/widget-modules/components/application-frame/navigation/filter/filter.component.ts

@@ -11,11 +11,11 @@ export class FilterComponent {
   constructor(private router: Router) {
   }
 
-  public onInputChange(text: string): void {
+  public async onInputChange(text: string): Promise<void> {
     const route = text
       ? this.router.createUrlTree(['songs'], {queryParams: {q: text}})
       : this.router.createUrlTree(['songs']);
 
-    this.router.navigateByUrl(route);
+    await this.router.navigateByUrl(route);
   }
 }

src/app/widget-modules/components/application-frame/navigation/navigation.component.less

@@ -24,6 +24,7 @@ nav {
   display: flex;
   height: 100%;
   align-items: center;
+  padding-right: 20px;
 }
 
 

src/app/widget-modules/components/card/card.component.less

@@ -11,6 +11,7 @@
     width: 100vw;
     border-radius: 0px;
     background: #fffa;
+    margin: 0;
   }
 
   &.padding {

src/app/widget-modules/components/list-header/list-header.component.less

@@ -2,7 +2,11 @@
 .header {
   position: relative;
   height: 34px;
+
   margin: 20px 20px -20px 20px;
+  @media screen and (max-width: 860px) {
+    margin: 0;
+  }
   display: flex;
   align-items: center;
   justify-content: flex-end;

src/app/widget-modules/components/menu-button/menu-button.component.html

@@ -0,0 +1,3 @@
+<button mat-button>
+  <fa-icon [icon]="icon"></fa-icon>
+</button>

src/app/widget-modules/components/menu-button/menu-button.component.less

@@ -0,0 +1,7 @@
+button {
+  min-width: 0;
+  padding: 0 5px;
+  @media screen and (max-width: 860px) {
+    padding: 0 15px;
+  }
+}

src/app/widget-modules/components/menu-button/menu-button.component.spec.ts

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {MenuButtonComponent} from './menu-button.component';
+
+describe('MenuButtonComponent', () => {
+  let component: MenuButtonComponent;
+  let fixture: ComponentFixture<MenuButtonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [MenuButtonComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MenuButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/widget-modules/components/menu-button/menu-button.component.ts

@@ -0,0 +1,11 @@
+import {Component, Input} from '@angular/core';
+import {IconProp} from '@fortawesome/fontawesome-svg-core';
+
+@Component({
+  selector: 'app-menu-button',
+  templateUrl: './menu-button.component.html',
+  styleUrls: ['./menu-button.component.less']
+})
+export class MenuButtonComponent {
+  @Input() public icon: IconProp;
+}

src/app/widget-modules/components/menu-button/menu-button.module.ts

@@ -0,0 +1,20 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MenuButtonComponent} from './menu-button.component';
+import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import {MatButtonModule} from '@angular/material/button';
+
+
+@NgModule({
+  declarations: [MenuButtonComponent],
+  exports: [
+    MenuButtonComponent
+  ],
+  imports: [
+    CommonModule,
+    FontAwesomeModule,
+    MatButtonModule
+  ]
+})
+export class MenuButtonModule {
+}