adaptive size continued

src/app/components/info-tile/info-tile.component.html

 <div *ngIf="wrapper">
   <div>
-    <p *ngIf="wrapper.data.name">
+    <p *ngIf="wrapper.data.name" [ngClass]="{'text-normal':smallStyle}">
       <b><span>Name:</span></b>
       <span class="is-capitalized"> {{ wrapper.data.name }}</span>
     </p>
-    <p *ngIf="wrapper.type">
+    <p *ngIf="wrapper.type" [ngClass]="{'text-normal':smallStyle}">
       <b><span>Type:</span></b>
       <span class="is-capitalized"> {{ wrapper.type }}</span>
     </p>
-    <p *ngIf="wrapper.data.group">
+    <p *ngIf="wrapper.data.group" [ngClass]="{'text-normal':smallStyle}">
       <b><span>Group:</span></b>
       <span class="is-capitalized"> {{ wrapper.data.group }}</span>
     </p>
-    <p *ngIf="wrapper.data.uniprotAc">
+    <p *ngIf="wrapper.data.uniprotAc" [ngClass]="{'text-normal':smallStyle}">
       <b><span>Access:</span></b>
       <a href="https://www.uniprot.org/uniprot/{{ wrapper.data.uniprotAc }}" target="_blank">
         <span class="is-capitalized"> {{ wrapper.data.uniprotAc }}</span>
@@ -21,10 +21,10 @@
 
   </div>
 
-  <app-toggle [value]="analysis.inSelection(wrapper)"
+  <app-toggle [value]="analysis.inSelection(wrapper)" [smallStyle]="smallStyle"
               (valueChange)="$event ? analysis.addItems([wrapper]) : analysis.removeItems([wrapper])" textOn="Selected"
               textOff="Deselected" tooltipOn="Add protein to selection." tooltipOff="Remove protein from selection."></app-toggle>
 </div>
-<div *ngIf="!wrapper">
+<div *ngIf="!wrapper" [ngClass]="{'text-normal':smallStyle}" >
   Please select a node for further information.
 </div>

src/app/components/info-tile/info-tile.component.ts

@@ -6,18 +6,18 @@ import {AnalysisService} from '../../services/analysis/analysis.service';
 @Component({
   selector: 'app-info-tile',
   templateUrl: './info-tile.component.html',
-  styleUrls: ['./info-tile.component.scss']
+  styleUrls: ['./info-tile.component.scss', '../../pages/explorer-page/explorer-page.component.scss']
 })
 export class InfoTileComponent implements OnInit {
 
-  @Input()
-  public wrapper: Wrapper;
+  @Input() public wrapper: Wrapper;
+  @Input() smallStyle: boolean;
 
   constructor(public analysis: AnalysisService) { }
 
   ngOnInit(): void {
   }
-  
+
   public beautify(url: string): string {
     if (url.startsWith('https://')) {
       url = url.substr('https://'.length);

src/app/pages/explorer-page/explorer-page.component.html

@@ -123,7 +123,7 @@
 
           </div>
 
-          <footer *ngIf="myConfig.showFooter" class="card-footer toolbar explorer-footer center-panel" [ngClass]="{'footer-small':smallStyle}">
+          <footer *ngIf="myConfig.showFooter" class="card-footer toolbar explorer-footer" [ngClass]="{'footer-small':smallStyle}">
             <button (click)="toCanvas()" class="button is-primary is-rounded has-tooltip"
                     data-tooltip="Take a screenshot of the current network.">
             <span class="icon">
@@ -204,7 +204,7 @@
         </header>
         <div *ngIf="collapseDetails">
           <div class="card-content">
-            <app-info-tile [wrapper]="selectedWrapper"></app-info-tile>
+            <app-info-tile [wrapper]="selectedWrapper" [smallStyle]="smallStyle"></app-info-tile>
           </div>
         </div>
       </div>

src/styles.scss

@@ -29,7 +29,7 @@ $info: $primary;
 .explorer-footer{
   //position: absolute;
   //overflow: auto;
-  width: $main-width;
+  //width: $main-width;
   bottom: 0;
 }