diff --git a/src/app/components/info-tile/info-tile.component.html b/src/app/components/info-tile/info-tile.component.html index 2ed71efb7e17a522966a861d1210c4c904589eb8..24b6ca4e871d6e3ae9febd460ccc2ad160c848a9 100644 --- a/src/app/components/info-tile/info-tile.component.html +++ b/src/app/components/info-tile/info-tile.component.html @@ -1,18 +1,18 @@ <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> diff --git a/src/app/components/info-tile/info-tile.component.ts b/src/app/components/info-tile/info-tile.component.ts index afd6a95311a29776a7bc6393b4511e1c1b017f83..44bd205e879c1fc829ae1d7d1e4adc40b72eb77b 100644 --- a/src/app/components/info-tile/info-tile.component.ts +++ b/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); diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html index 54e118b05b19ee59760b780a419953071fe25407..cb401dbd97eb6099b23c2bb35c73316b834d63f5 100644 --- a/src/app/pages/explorer-page/explorer-page.component.html +++ b/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> diff --git a/src/styles.scss b/src/styles.scss index 3f6a47cff52aa28b815706d3e110394b68993da3..d82eedc2267dbdfc7d48e831b21a0c1b3cbaed90 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -29,7 +29,7 @@ $info: $primary; .explorer-footer{ //position: absolute; //overflow: auto; - width: $main-width; + //width: $main-width; bottom: 0; }