Unverified Commit dc909eb9 authored by Jyothish's avatar Jyothish Committed by GitHub

Design review changes (#343)

* Design review changes - 2
parent 1de09c1e
Pipeline #97082 passed with stages
in 7 minutes and 38 seconds
......@@ -39,7 +39,7 @@ $backgroundColor: $black;
grid-area: 2 / 1 / 3 / 4;
z-index: 2;
position: sticky;
top: -90px;
top: -80px;
height: 100%;
background-color: $backgroundColor;
padding-left: 180px;
......
@import 'src/styles/common';
@import 'constants';
@import 'src/content/app/entity-viewer/gene-view/styles/constants';
.header {
border-bottom: 1px solid $orange;
padding: 0;
position: sticky;
top: -15px;
top: -5px;
background-color: $black;
z-index: 1;
font-size: 12px;
font-weight: 300;
}
.headerChevron {
......@@ -23,13 +24,14 @@
.content {
position: relative;
padding-top: 36px;
padding-bottom: 120px;
}
.stripedBackground {
position: absolute;
top: 0;
bottom: 0;
left: $left_column;
left: $left_column + $middle_column_left_gap;
.stripe {
position: absolute;
......@@ -43,7 +45,7 @@
.row {
display: grid;
grid-template-columns: $left_column $middle_column $middle_column_right_gap $right_column;
grid-template-columns: $left_column $middle_column_left_gap $middle_column $middle_column_right_gap $right_column;
padding: 9px 0px;
font-size: 12px;
}
......@@ -55,13 +57,13 @@
}
.middle {
grid-column: 2/3;
grid-column: 3/4;
position: relative;
top: 2px;
}
.right {
grid-column: 4/5;
grid-column: 5/6;
}
.filterLabel {
......
......@@ -3,6 +3,7 @@
.listItemInfo {
color: $grey;
line-height: 2;
padding-top: 0;
}
.middle {
......@@ -21,6 +22,11 @@
}
}
.transcriptName {
top: -8px;
position: relative;
}
.topLeft {
grid-area: left;
width: 190px;
......
......@@ -171,7 +171,7 @@ export const TranscriptsListItemInfo = (
{props.expandDownload && renderInstantDownload(props)}
</div>
<div className={transcriptsListStyles.right}>
<div>
<div className={styles.transcriptName}>
<strong>{transcript.symbol}</strong>
</div>
<div className={styles.viewInApp}>
......
@import 'src/styles/common';
@import 'src/content/app/entity-viewer/gene-view/styles/constants';
.container {
color: white;
display: grid;
grid-template-columns: 160px 18px 695px 27px 180px;
grid-template-columns: $left_column $middle_column_left_gap $middle_column $middle_column_right_gap $right_column;
}
.containerSVG {
......
......@@ -31,8 +31,7 @@ import { RootState } from 'src/store';
import {
GeneViewTabMap,
GeneViewTabName,
GeneRelationshipsTabName,
View
GeneRelationshipsTabName
} from 'src/content/app/entity-viewer/state/gene-view/view/geneViewViewSlice';
import styles from './GeneRelationships.scss';
......@@ -43,7 +42,7 @@ const tabsData = [...GeneViewTabMap.values()]
.filter(({ primaryTab }) => primaryTab === GeneViewTabName.GENE_RELATIONSHIPS)
.map((item) => ({
title: item.secondaryTab,
isDisabled: item.view !== View.ORTHOLOGUES
isDisabled: true // TODO FIXME (Use real data when available)
})) as Tab[];
const tabClassNames = {
......
......@@ -43,6 +43,7 @@
.resourceImage {
display: grid;
grid-template-columns: [image] min-content [description] max-content;
margin-bottom: 6px;
& svg {
grid-column: image;
......
@import 'src/styles/common';
.proteinSummary {
margin-left: 178px;
width: 695px;
......@@ -7,6 +9,14 @@
}
}
.keyline {
border-bottom: 1px solid $orange;
width: 695px;
padding: 0;
margin-top: 40px;
margin-bottom: 20px;
}
.proteinSummaryTop {
align-items: center;
display: grid;
......
......@@ -111,6 +111,7 @@ const ProteinsListItemInfo = (props: Props) => {
)}
</div>
)}
<div className={styles.keyline}></div>
</div>
</>
)}
......
@import 'src/styles/common';
@import '../default-transcripts-list/constants';
@import 'src/content/app/entity-viewer/gene-view/styles/constants';
.container {
display: grid;
grid-template-columns: $left_column auto;
grid-template-columns: $left_column $middle_column_left_gap auto;
padding: 9px 0;
}
......@@ -23,6 +23,7 @@
.filterBox {
display: grid;
grid-column: 3;
grid-template-columns: 270px minmax(210px, auto) 20px;
background-color: $soft-black;
color: $white;
......
$left_column: 178px;
$left_column: 160px;
$middle_column_left_gap: 18px;
$middle_column: 695px;
$middle_column_right_gap: 27px;
$right_column: 180px;
......@@ -4,7 +4,6 @@
border: 1px solid $green;
background-color: $green;
color: $white;
padding: 8px 18px;
font-weight: $bold;
}
......@@ -23,7 +22,7 @@
}
.button {
padding: 8px 18px;
padding: 7px 18px;
border-radius: 3px;
&:active,
&:focus {
......
......@@ -8,8 +8,8 @@
.defaultCheckbox {
cursor: pointer;
justify-self: center;
height: 15px;
width: 15px;
height: 14px;
width: 14px;
border: 1px solid $grey;
background-color: $white;
transition: background-color 0.1s ease-in-out;
......@@ -40,7 +40,7 @@
.defaultLabel {
color: $black;
line-height: 30px;
font-size: 14px;
font-size: 12px;
padding-left: 8px;
padding-right: 2px;
max-width: calc(100% - 17px);
......
@import 'src/styles/common';
.inputGroup {
display: inline-block;
display: flex;
}
.checkboxLabel {
font-size: 13px;
margin-right: 20px;
max-width: inherit;
}
.downloadButtonDisabled {
color: $dark-grey;
color: $medium-dark-grey;
}
......@@ -63,32 +63,26 @@ const InstantDownloadProtein = (props: InstantDownloadProteinProps) => {
const isDownloadDisabled = () => !isProteinSeqSelected && !isCdsSeqSelected;
return (
<div>
<div className={styles.inputGroup}>
<Checkbox
label={proteinOptionLabels.proteinSequence}
labelClassName={styles.checkboxLabel}
checked={isProteinSeqSelected}
onChange={onProteinCheckboxChange}
/>
</div>
<div className={styles.inputGroup}>
<Checkbox
label={proteinOptionLabels.cds}
labelClassName={styles.checkboxLabel}
checked={isCdsSeqSelected}
onChange={onCdsCheckboxChange}
/>
</div>
<div className={styles.inputGroup}>
<InstantDownloadButton
className={
isDownloadDisabled() ? styles.downloadButtonDisabled : undefined
}
isDisabled={isDownloadDisabled()}
onClick={onSubmit}
/>
</div>
<div className={styles.inputGroup}>
<Checkbox
label={proteinOptionLabels.proteinSequence}
labelClassName={styles.checkboxLabel}
checked={isProteinSeqSelected}
onChange={onProteinCheckboxChange}
/>
<Checkbox
label={proteinOptionLabels.cds}
labelClassName={styles.checkboxLabel}
checked={isCdsSeqSelected}
onChange={onCdsCheckboxChange}
/>
<InstantDownloadButton
className={
isDownloadDisabled() ? styles.downloadButtonDisabled : undefined
}
isDisabled={isDownloadDisabled()}
onClick={onSubmit}
/>
</div>
);
};
......
......@@ -17,7 +17,7 @@
}
.disabled {
color: $dark-grey;
color: $medium-dark-grey;
cursor: default;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment