feedback form, floating button

Author: iimpulse

src/app/app.component.html

@@ -72,4 +72,5 @@ <h3 class="center menuTitle">Menu</h3>
     <router-outlet></router-outlet>
   </div>
   <app-footer class="mat-elevation-z4"></app-footer>
+  <app-floating-feedback></app-floating-feedback>
 </mat-sidenav-container>

src/app/app.module.ts

@@ -19,19 +19,25 @@ import { NoPageFoundComponent } from './error/no-page-found.component';
 import { SearchModule } from './shared/search/search.module';
 import { NewsService } from './shared/news/news.service';
 import { SafeHtmlPipe } from './shared/pipes/sanitize.pipe';
+import { FloatingFeedbackComponent } from './shared/floating-feedback/floating-feedback.component';
 
 @NgModule({ declarations: [
         AppComponent,
         NavbarComponent,
         FooterComponent,
         NoPageFoundComponent,
-        SafeHtmlPipe
+        SafeHtmlPipe,
+        FloatingFeedbackComponent
     ],
-    bootstrap: [AppComponent], imports: [BrowserModule,
+    bootstrap: [AppComponent],
+    imports: [BrowserModule,
         BrowserAnimationsModule,
         GlobalMaterialModules,
         ExtrasModule,
         RoutingModule,
-        SearchModule], providers: [SearchService, NewsService, { provide: MAT_TABS_CONFIG, useValue: { animationDuration: '0ms' } }, provideHttpClient(withInterceptorsFromDi())] })
+        SearchModule], 
+    providers: [SearchService, NewsService, 
+{ provide: MAT_TABS_CONFIG, useValue: { animationDuration: '0ms' } }, 
+provideHttpClient(withInterceptorsFromDi())] })
 export class AppModule {
 }

src/app/shared/floating-feedback/floating-feedback.component.html

@@ -0,0 +1,9 @@
+<a mat-fab
+   color="secondary"
+   routerLink="/feedback"
+   matTooltip="Give Feedback"
+   matTooltipPosition="left"
+   class="feedback-fab"
+   aria-label="Give Feedback">
+  <mat-icon>feedback</mat-icon>
+</a>

src/app/shared/floating-feedback/floating-feedback.component.scss

@@ -0,0 +1,17 @@
+:host {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 1000;
+
+}
+
+.feedback-fab {
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  background-color: #ff4081;
+  fill: white;
+  color: white;
+  &:hover {
+    transform: scale(1.1);
+  }
+}

src/app/shared/floating-feedback/floating-feedback.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-floating-feedback',
+  templateUrl: './floating-feedback.component.html',
+  styleUrls: ['./floating-feedback.component.scss']
+})
+export class FloatingFeedbackComponent {}

src/app/shared/footer/footer.component.html

@@ -14,7 +14,7 @@
       <a href="https://www.jax.org/" target="__blank">
         <img class="footer-brand-larger" src="assets/jax_logo.png"/>
       </a>
-      <a href="https://www.bihealth.org/" target="__blank">
+      <a href="https://www.bihealth.org/" target="__blank" class="mr-4">
       <img class="footer-brand-larger" src="assets/bih-logo.svg"/>
       </a>
     </div>

src/app/shared/search/search/search.component.html

@@ -23,7 +23,7 @@
       <div class="result-title">
         Phenotypes - {{terms.length}} of {{termsCount}} displayed
       </div>
-      <div class="result-list">
+      <div class="result-list flex flex-column">
         <div class="result" (click)="closeDropDown()" routerLink="/browse/term/{{item.id}}"
              *ngFor="let item of terms;">
           <div class="name" *ngIf="!item.synonym" [innerHtml]="{name: item.name } | highlight: queryText"></div>
@@ -37,7 +37,7 @@
       <div class="result-title">
         Diseases - {{diseases.length}} of {{diseasesCount}} displayed
       </div>
-      <div class="result-list">
+      <div class="result-list flex flex-column">
         <div class="result" (click)="closeDropDown()" routerLink="/browse/disease/{{item.id}}"
              *ngFor="let item of diseases;">
           <div class="name" [innerHtml]="{name: item.name } | highlight: queryText"></div>
@@ -51,7 +51,7 @@
       <div class="result-title">
         Genes - {{genes.length}} of {{genesCount}} displayed
       </div>
-      <div class="result-list">
+      <div class="result-list flex flex-column">
         <div class="result" (click)="closeDropDown()" routerLink="/browse/gene/{{item.id}}"
              *ngFor="let item of genes;">
           <div class="name" [innerHtml]="{name: item.name } | highlight: queryText"></div>

src/app/shared/search/search/search.component.scss

@@ -43,6 +43,7 @@ $orange-hover: rgba(236, 151, 54, 0.8);
     position: relative;
     z-index: 999;
     line-height: 20px;
+    padding: .5rem;
 
     & .search-all {
       padding: 2px 10px 0 10px;

src/app/static/feedback/feedback.component.html

@@ -0,0 +1,13 @@
+<div class="container">
+  <div class="form-container">
+    <iframe
+      [src]="safeFormUrl"
+      width="100%"
+      height="800"
+      frameborder="0"
+      marginheight="0"
+      marginwidth="0">
+      Loading…
+    </iframe>
+  </div>
+</div>

src/app/static/feedback/feedback.component.scss

@@ -0,0 +1,31 @@
+.container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.pageTitle {
+  margin-bottom: 16px;
+}
+
+.description {
+  color: #666;
+  margin-bottom: 24px;
+}
+
+.center {
+  text-align: center;
+}
+
+.form-container {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+
+  iframe {
+    max-width: 100%;
+    border: none;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+}