Unverified Commit b9f9d00e authored by Ridwan Amode's avatar Ridwan Amode Committed by GitHub
Browse files

blast single column layout for smaller screen (#744)

parent 4eb17a3f
Pipeline #279466 passed with stages
in 4 minutes and 49 seconds
......@@ -8,16 +8,20 @@
display: grid;
grid-template-columns: auto auto 1fr;
column-gap: 52px;
width: 860px;
width: 862px;
margin-left: -1px; //increasing the width by 2px and adding a left margin so that we dont see the borders shadows from the box below when scrolling
align-items: center;
padding-left: 28px;
padding-bottom: 12px;
padding: 20px 0 12px 28px;
position: sticky;
top: 0px;
z-index: 1;
background-color: $white;
}
.smallScreenHeader {
top: 49px;
}
.headerGroup {
display: flex;
align-items: center;
......
......@@ -15,6 +15,7 @@
*/
import React from 'react';
import classNames from 'classnames';
import { useSelector, useDispatch } from 'react-redux';
import {
......@@ -22,14 +23,10 @@ import {
getUncommittedSequencePresence
} from 'src/content/app/tools/blast/state/blast-form/blastFormSelectors';
import {
updateEmptyInputDisplay,
switchToSpeciesStep
} from 'src/content/app/tools/blast/state/blast-form/blastFormSlice';
import { updateEmptyInputDisplay } from 'src/content/app/tools/blast/state/blast-form/blastFormSlice';
import useBlastInputSequences from './useBlastInputSequences';
import { SecondaryButton } from 'src/shared/components/button/Button';
import PlusButton from 'src/shared/components/plus-button/PlusButton';
import RadioGroup from 'src/shared/components/radio-group/RadioGroup';
......@@ -61,10 +58,6 @@ const BlastInputSequencesHeader = (props: Props) => {
setTimeout(() => scrollToLastInputBox(), 0);
};
const onSwitchToSpecies = () => {
dispatch(switchToSpeciesStep());
};
const scrollToLastInputBox = () => {
const lastInputBox = document.querySelector(
`.${sequenceBoxStyles.inputSequenceBox}:last-child`
......@@ -81,8 +74,12 @@ const BlastInputSequencesHeader = (props: Props) => {
? sequences.length + 1
: sequences.length;
const headerClass = classNames(styles.header, {
[styles.smallScreenHeader]: compact
});
return (
<div className={styles.header}>
<div className={headerClass}>
<div className={styles.headerGroup}>
<span className={styles.headerTitle}>Sequences</span>
<span className={styles.sequenceCounter}>{sequencesCount}</span>
......@@ -100,14 +97,6 @@ const BlastInputSequencesHeader = (props: Props) => {
onAdd={appendEmptyInput}
disabled={!shouldEnableAddButton}
/>
{compact && (
<SecondaryButton
className={styles.blastAgainstButton}
onClick={onSwitchToSpecies}
>
Blast against
</SecondaryButton>
)}
</div>
</div>
);
......
......@@ -2,20 +2,25 @@
.header {
display: flex;
width: 860px;
width: 862px;
justify-content: space-between;
align-items: center;
padding-left: 28px;
padding-bottom: 12px;
margin-left: -1px;
padding: 20px 0 12px 28px;
position: sticky;
top: 0px;
z-index: 1;
background-color: $white;
}
.smallScreenHeader {
top: 49px;
}
.headerGroup {
display: flex;
align-items: center;
width: 100%;
}
.headerTitle {
......@@ -30,6 +35,7 @@
.clearAll {
margin-right: 30px;
margin-left: auto;
color: $blue;
cursor: pointer;
user-select: none;
......
......@@ -15,16 +15,12 @@
*/
import React from 'react';
import classNames from 'classnames';
import { useSelector, useDispatch } from 'react-redux';
import {
switchToSequencesStep,
clearSelectedSpecies
} from 'src/content/app/tools/blast/state/blast-form/blastFormSlice';
import { clearSelectedSpecies } from 'src/content/app/tools/blast/state/blast-form/blastFormSlice';
import { getSelectedSpeciesList } from 'src/content/app/tools/blast/state/blast-form/blastFormSelectors';
import { SecondaryButton } from 'src/shared/components/button/Button';
import styles from './BlastSpeciesSelector.scss';
export type Props = {
......@@ -37,42 +33,25 @@ const BlastSpeciesSelectorHeader = (props: Props) => {
const selectedSpeciesList = useSelector(getSelectedSpeciesList);
const onSwitchToSequence = () => {
dispatch(switchToSequencesStep());
};
const onClearAll = () => {
dispatch(clearSelectedSpecies());
};
const headerClass = classNames(styles.header, {
[styles.smallScreenHeader]: compact
});
return (
<div className={styles.header}>
<div className={headerClass}>
<div className={styles.headerGroup}>
<span className={styles.headerTitle}>Blast against</span>
<span className={styles.speciesCounter}>
{selectedSpeciesList.length}
</span>
<span className={styles.maxSpecies}>of 7 species</span>
{compact && (
<span className={styles.clearAll} onClick={onClearAll}>
Clear all
</span>
)}
</div>
<div className={styles.headerGroup}>
{!compact && (
<span className={styles.clearAll} onClick={onClearAll}>
Clear all
</span>
)}
{compact && (
<SecondaryButton
className={styles.sequencesButton}
onClick={onSwitchToSequence}
>
Sequences
</SecondaryButton>
)}
<span className={styles.clearAll} onClick={onClearAll}>
Clear all
</span>
</div>
</div>
);
......
......@@ -4,6 +4,7 @@
column-gap: 172px;
align-items: center;
padding-left: 26px; // TODO: seems to be a constant shared with sequence boxes (see ListedBlastSubmission.scss)
padding-top: 20px;
margin-bottom: 14px;
white-space: nowrap;
}
......@@ -4,11 +4,12 @@
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
height: 100%;
position: relative;
}
.mainContainer {
height: 100%;
padding-left: 65px;
padding: 0 6px 0 65px;
}
.mainContainerSmall {
......@@ -31,3 +32,21 @@
display: flex;
flex-direction: column;
}
.blastFormStepToggle {
display: flex;
justify-content: flex-end;
gap: 10px;
max-width: 1770px; //TODO: To replace with global variables for spaces on the blast form (see ENSWBSITES-1602)
margin-left: -2px;
padding-top: 20px;
background-color: $white;
position: sticky;
top: 0px;
z-index: 1;
}
.buttonActive {
background-color: $black;
border-color: $black;
}
......@@ -15,15 +15,21 @@
*/
import React, { useEffect, useRef } from 'react';
import { useSelector } from 'react-redux';
import { useSelector, useDispatch } from 'react-redux';
import classNames from 'classnames';
import { useBlastConfigQuery } from 'src/content/app/tools/blast/state/blast-api/blastApiSlice';
import useMediaQuery from 'src/shared/hooks/useMediaQuery';
import { getStep } from 'src/content/app/tools/blast/state/blast-form/blastFormSelectors';
import {
switchToSequencesStep,
switchToSpeciesStep
} from 'src/content/app/tools/blast/state/blast-form/blastFormSlice';
import BlastAppBar from 'src/content/app/tools/blast/components/blast-app-bar/BlastAppBar';
import ToolsTopBar from 'src/content/app/tools/shared/components/tools-top-bar/ToolsTopBar';
import { SecondaryButton } from 'src/shared/components/button/Button';
import BlastInputSequencesHeader from 'src/content/app/tools/blast/components/blast-input-sequences/BlastInputSequencesHeader';
import BlastInputSequences from 'src/content/app/tools/blast/components/blast-input-sequences/BlastInputSequences';
......@@ -91,6 +97,7 @@ const MainSmall = () => {
return (
<div className={containerClasses} ref={containerRef}>
<BlastFormStepToggle />
{step === 'sequences' ? (
<>
<BlastInputSequencesHeader compact={true} />
......@@ -106,4 +113,41 @@ const MainSmall = () => {
);
};
const BlastFormStepToggle = () => {
const dispatch = useDispatch();
const step = useSelector(getStep);
const onSwitchToSpecies = () => {
dispatch(switchToSpeciesStep());
};
const onSwitchToSequence = () => {
dispatch(switchToSequencesStep());
};
const sequenceButtonClass = classNames(styles.blastAgainstButton, {
[styles.buttonActive]: step === 'sequences'
});
const speciesButtonClass = classNames(styles.blastAgainstButton, {
[styles.buttonActive]: step === 'species'
});
return (
<div className={styles.blastFormStepToggle}>
<SecondaryButton
className={sequenceButtonClass}
onClick={onSwitchToSequence}
>
Add sequence(s)
</SecondaryButton>
<SecondaryButton
className={speciesButtonClass}
onClick={onSwitchToSpecies}
>
Select species
</SecondaryButton>
</div>
);
};
export default BlastForm;
......@@ -5,5 +5,6 @@
background-color: $light-grey;
padding: 24px 20px 20px 30px;
box-shadow: 0 3px 5px $global-box-shadow;
margin-bottom: 21px;
position: relative;
z-index: 2;
}
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