Skip to content

Commit

Permalink
Improving druggability design
Browse files Browse the repository at this point in the history 
	- Added changes to match Figma design
  • Loading branch information
@Zaknarfen
Zaknarfen committed Jun 20, 2019
1 parent d4bffd3 commit 327ddff
Show file tree
Hide file tree
Showing 4 changed files with 211 additions and 103 deletions.
49 changes: 27 additions & 22 deletions src/app/genes/gene-overview/gene-druggability/gene-druggability.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,30 +16,33 @@ <h2>
<p-header>
<div class="container">
<div class="row">
<div class="col-md-3 header-title">
<div class="col-md-3 col-sm-8 col-8 header-title">
Small Molecule Modality
</div>
<div class="col-md-2 text-center">
<div class="icon" [style.background-color]="getBucketStyle(geneInfo.druggability[0].sm_druggability_bucket)">
<div class="col-md-2 col-sm-4 col-4 text-center header-score">
<div class="icon" [style.background-color]="getBucketStyle(geneInfo.druggability[0].sm_druggability_bucket)" [style.color]="getBucketTextColor(geneInfo.druggability[0].sm_druggability_bucket)">
<div>{{geneInfo.druggability[0].sm_druggability_bucket}}</div>
</div>
</div>
<div class="col-md-7 header-description">
<div class="col-md-7 col-sm-12 col-12 header-description">
{{geneInfo.druggability[0].classification}}
</div>
</div>
</div>
</p-header>
<div class="row grey-background content-row">
<div class="col-md-12 bucket-col">
<div class="col-md-12 col-sm-12 col-12 bucket-col">
<div class="row inner-row">
<div class="col-md-1 content-title vertical-auto">
<div class="col-md-1 col-sm-2 col-3 content-title vertical-auto">
Bucket
</div>
<div class="col-md-11 vertical-auto">
<div class="col-md-11 col-sm-10 col-9 vertical-auto">

<div class="icon-wrapper" *ngFor="let bucket of buckets">
<div class="icon" [style.background-color]="getBucketStyle(bucket)" (click)="setCurrentBucket(bucket)">
<div class="icon-class">
<i *ngIf="bucket === currentBucket" class="fa fa-sort-down fa-lg" [style.color]="getBucketStyle(bucket)"></i>
</div>
<div class="icon" [style.background-color]="getBucketStyle(bucket)" [style.color]="getBucketTextColor(bucket)" (click)="setCurrentBucket(bucket)">
<div>{{bucket}}</div>
</div>
<div class="icon-class">
Expand All @@ -49,16 +52,18 @@ <h2>
</div>
</div>
</div>
<div class="col-md-12 class-col">
<div class="col-md-12 col-sm-12 col-12 class-col">
<div class="row inner-row">
<div class="col-md-1 content-title vertical-auto">
{{getClassText(currentBucket)}}
<div class="col-md-1 col-sm-2 col-3 content-title">
Criteria
</div>
<div class="col-md-11 class-description-title" [style.background-color]="getBucketStyle(currentBucket)">
<div class="row no-gutters class-description vertical-auto">
{{getDruggabilityText(currentBucket)}}
<div class="col-md-5 col-sm-7 col-9 class-description-title">
<div class="row no-gutters class-description" [style.background-color]="getBucketStyle(currentBucket)">
<span [style.color]="getBucketTextColor(currentBucket)">{{getDruggabilityTitle(currentBucket)}}</span>
<span [style.color]="getBucketTextColor(currentBucket)">{{getDruggabilityText(currentBucket)}}</span>
</div>
</div>
<div class="col-md-6 col-sm-3 d-none d-sm-block"></div>
</div>
</div>
</div>
Expand All @@ -67,15 +72,15 @@ <h2>
<p-header>
<div class="container">
<div class="row">
<div class="col-md-3 header-title">
<div class="col-md-3 col-sm-8 col-8 header-title">
Antibody Modality
</div>
<div class="col-md-2 text-center">
<div class="icon" [style.background-color]="getBucketStyle(geneInfo.druggability[0].abability_bucket)">
<div class="col-md-2 col-sm-4 col-4 text-center header-score">
<div class="icon" [style.background-color]="getBucketStyle(geneInfo.druggability[0].abability_bucket)" [style.color]="getBucketTextColor(geneInfo.druggability[0].abability_bucket)">
<div>{{geneInfo.druggability[0].abability_bucket}}</div>
</div>
</div>
<div class="col-md-7 header-description">
<div class="col-md-7 col-sm-12 col-12 header-description">
{{geneInfo.druggability[0].abability_bucket_definition}}
</div>
</div>
Expand All @@ -89,15 +94,15 @@ <h2>
<p-header>
<div class="container">
<div class="row">
<div class="col-md-3 header-title">
<div class="col-md-3 col-sm-8 col-8 header-title">
Safety
</div>
<div class="col-md-2 text-center">
<div class="icon" [style.background-color]="getBucketStyle(geneInfo.druggability[0].safety_bucket)">
<div class="col-md-2 col-sm-4 col-4 text-center header-score">
<div class="icon" [style.background-color]="getBucketStyle(geneInfo.druggability[0].safety_bucket)" [style.color]="getBucketTextColor(geneInfo.druggability[0].safety_bucket)">
<div>{{geneInfo.druggability[0].safety_bucket}}</div>
</div>
</div>
<div class="col-md-7 header-description">
<div class="col-md-7 col-sm-12 col-12 header-description">
{{geneInfo.druggability[0].safety_bucket_definition}}
</div>
</div>
Expand Down
57 changes: 47 additions & 10 deletions src/app/genes/gene-overview/gene-druggability/gene-druggability.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,11 @@

.gd-accordion {
.ui-accordion-header {
height: 81px;
min-height: 99px;
padding: 15px;

a {
height: 81px;
min-height: 99px;
display: flex;
vertical-align: middle;
margin-top: auto;
Expand All @@ -29,7 +30,7 @@
}

p-header {
height: 81px;
min-height: 99px;
width: 100%;
}
}
Expand All @@ -53,6 +54,7 @@

.inner-row {
height: 100%;
min-height: 200px;
}

.content-title {
Expand All @@ -75,22 +77,49 @@
.container {
display: inline-block;
color: color(text, secondary);
height: 81px;
min-height: 99px;
width: 100%;
max-width: 100%;
padding-left: 60px;

.header-title {
@include lato-font('bold');
line-height: $font-size-xxxx-regular;
font-size: $font-size-xx-regular;
}

.header-title, .header-score, .header-description {
@include respond-to('ex-small') {
min-height: 43px;
// margin-bottom: 25.5px !important;
margin-top: 25.5px;
line-height: $font-size-large;
}
@include respond-to('small') {
min-height: 43px;
// margin-bottom: 25.5px !important;
margin-top: 25.5px;
line-height: $font-size-large;
}
@include respond-to('medium') {
min-height: 0px;
}
@include respond-to('large') {
min-height: 0px;
}
@include respond-to('ex-large') {
min-height: 0px;
}
}

.header-description {
@include lato-font('normal');
line-height: $font-size-xxx-regular;
font-size: $font-size-x-regular;
}

.row {
height: 81px;
min-height: 99px;

> [class*="col-"] {
vertical-align: middle;
Expand All @@ -105,7 +134,8 @@
border-radius: 100%;
border-radius: 50%;
width: 36px !important;
margin: 22.5px;
margin-left: 22.5px;
margin-right: 22.5px;
cursor: pointer;
}

Expand All @@ -119,7 +149,8 @@
position: relative;
height: 0;
padding: 50% 0;
top: -11px;
top: -12px;
left: -1px;
font-size: $font-size-xxx-regular;
line-height: $font-size-xl-regular;
text-align: center;
Expand All @@ -131,6 +162,8 @@
line-height: $font-size-x-small;
font-size: $font-size-small;
text-align: center;
margin-bottom: 12px;
margin-top: 12px;
}

.class-description-title {
Expand All @@ -140,9 +173,12 @@
}

.class-description {
align-items: center;
vertical-align: middle;
height: 100%;
height: 75%;
padding: 15px;

span {
text-align: left;
}
}

.ui-accordion {
Expand Down Expand Up @@ -172,6 +208,7 @@
.ui-accordion-content {
padding-top: 0px;
padding-bottom: 0px;
min-height: 392px;
}

@include respond-to('ex-small') {
Expand Down
Loading

0 comments on commit 327ddff

Please sign in to comment.