fix: word wrap in logo and profile-user (#41)

Author: eksrha

projects/lib-workspace/src/app/app.module.ts

@@ -8,8 +8,15 @@ import { de } from 'date-fns/locale';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 import { MAT_DATE_LOCALE } from '@angular/material/core';
-import { FsCalendarModule, FsCalendarService, FsMaterialFullModule, FsNavFrameModule } from 'projects/ng-mat-components/src/public-api';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { FsCalendarModule, FsCalendarService, FsNavFrameModule } from 'projects/ng-mat-components/src/public-api';
 import { HomeComponent } from './content/home/home.component';
 import { ShowcaseCalendarPanelsComponent } from './content/showcase-calendar-panels/showcase-calendar-panels.component';
 import { ShowcaseCalendarTableComponent } from './content/showcase-calendar-table/showcase-calendar-table.component';
@@ -23,8 +30,15 @@ import { ShowcaseNavFrameComponent } from './content/showcase-nav-frame/showcase
     AppRoutingModule,
     BrowserAnimationsModule,
     ReactiveFormsModule,
+    /* Mat Modules */
+    MatButtonModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatCardModule,
+    MatSlideToggleModule,
     /* Lib modules */
-    FsMaterialFullModule,
     FsNavFrameModule,
     FsCalendarModule,
   ],

projects/lib-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.html

@@ -3,15 +3,15 @@
 </div>
 
 <div class="selection">
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>Months before</mat-label>
-    <mat-select [(ngModel)]="monthsBefore">
+    <mat-select name="monthsBefore" [(ngModel)]="monthsBefore">
       <mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{ num }}</mat-option>
     </mat-select>
   </mat-form-field>
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>Months after</mat-label>
-    <mat-select [(ngModel)]="monthsAfter">
+    <mat-select name="monthsAfter" [(ngModel)]="monthsAfter">
       <mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{ num }}</mat-option>
     </mat-select>
   </mat-form-field>

projects/lib-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.ts

@@ -23,6 +23,9 @@ export class ShowcaseCalendarPanelsComponent implements OnInit {
   monthsBefore = 1;
   monthsAfter = 1;
 
+  // monthsBefore = new FormControl(1);
+  // monthsAfter = new FormControl(1);
+
   dataSource: CalendarPanels = {
     config: {
       renderMode: 'monthly', // 'annual' | 'monthly'

projects/lib-workspace/src/app/content/showcase-nav-frame/showcase-nav-frame.component.html

@@ -1,15 +1,13 @@
 <div style="height: 300px; display: flex">
   <div style="width: 100%; display: flex; justify-content: space-between">
     <p>
-      &#8593; Title can be changed vis contend projection
+      &#8593; Title and the hole Toolbar can be changed with content projection
       <br />
       <br />
       Note: The toolbar is optional, but then you have to implement your own solution!
       <br />
       This one is also slightly thinner than the original material bar in height.
     </p>
-    <p>&#8593; use perdifined content or your own</p>
-    <p>&#8593; like this search</p>
   </div>
 
   <p style="position: absolute; top: 200px">&#8592; In the sidenav you can set preregisterd entrys</p>

projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss

@@ -41,6 +41,8 @@
 
     .app-name {
       font-size: 1.2rem;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
 
     .app-version {

projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.scss

@@ -49,10 +49,14 @@ fs-nav-user-profile {
 
         .fs-nav-user-profile-name {
             font-size: 1rem;
+            white-space: nowrap;
+            text-overflow: ellipsis;
         }
 
         .fs-nav-user-profile-subname {
             font-size: .7rem;
+            white-space: nowrap;
+            text-overflow: ellipsis;
         }
     }