Skip to content

Commit

Permalink
css resultsets responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
Gemma committed Dec 14, 2023
1 parent 424ea3d commit 850a292
Show file tree
Hide file tree
Showing 6 changed files with 128 additions and 66 deletions.
47 changes: 38 additions & 9 deletions frontend/src/components/Datasets/ResultsDatasets.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,16 +133,33 @@
border-radius: 2px;
height: 167px;
display: flex;
padding: 2px;
padding-top: 2px;
padding-bottom: 2px;
flex-direction: column;
padding-left: 5px;
align-items: center;
overflow-y: scroll;
}

.buttonResults {
margin-top: 29px;
/* width: 100%; */
/* display: flex; */
/* align-items: center; */
/* justify-content: center; */
.seeResultsContainer{
height: 100%;
display: flex;
align-items: center;
}
.resultSetsContainer {
display: flex;
align-items: center;
justify-content: center;
height: 50%;
width: 100%;
}

.resultSetsContainer h6 {
background: #86e4a8;
border-radius: 2px;
width: fit-content;
margin-left: 5px;
padding: 3px;
}

.tittle h2 {
Expand Down Expand Up @@ -172,7 +189,19 @@
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
background: #c8d4e6;
}

.tittle4{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
background: #c8d4e6;
height: 60px;
margin-top: 2px;
}

.resultsRecord h3 {
Expand Down Expand Up @@ -204,8 +233,8 @@

.datasetCardResults {
/* width: 20vw; */
height: 207px;
margin: 54px;
height: 247px;
margin: 30px;
/* border: 2px solid #3b9ad5; */
padding: 3px;
display: flex;
Expand Down
18 changes: 10 additions & 8 deletions frontend/src/components/Results/BiosamplesResults/TableResultsBiosamples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -931,14 +931,16 @@ function TableResultsBiosamples (props) {
{props.show === 'count' && (
<h6 className='buttonResults'>{result[1]} results</h6>
)}
<button
className='buttonResults'
onClick={() => {
handleSeeResults(result[0].meta.beaconId)
}}
>
{props.show === 'full' && <h7>See results</h7>}
</button>
{props.show === 'full' && (
<button
className='buttonResults'
onClick={() => {
handleSeeResults(result[0].meta.beaconId)
}}
>
<h7>See results</h7>
</button>
)}
</div>
</div>
)
Expand Down
29 changes: 15 additions & 14 deletions frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,12 @@
}

.resultSetsButton {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.resultSetsButton h7 {
font-size: 12px;
margin-top: 6px;
}

.resultSetsButton h6 {
Expand All @@ -29,11 +27,11 @@

.tittleResults h7 {
font-size: 12px;
margin-top: 6px;
width: 100%;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 9px;
}

h6 {
Expand All @@ -59,20 +57,21 @@ h6:hover {
}

.tittleResults h5 {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
text-transform: uppercase;
font-size: 11px;
font-weight: normal;
color: rgb(209, 45, 20);
font-weight: bold;
width: 100%;
background: #ffd1d1;
width: fit-content;
display: flex;
align-items: center;
justify-content: center;
margin-top: 34px;
font-size: 14px;
font-size: 12px;
border-radius: 2px;
padding: 3px;
}

h7 {
Expand Down Expand Up @@ -197,10 +196,11 @@ h1 {
width: 50vw;
background: white;
border-radius: 2px;
/* height: 80px; */
height: 212px;
display: flex;
padding: 2px;
flex-direction: column;
align-items: center;
}

h6 {
Expand All @@ -221,20 +221,21 @@ h1 {
}

.tittleResults h5 {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
text-transform: uppercase;
font-size: 11px;
font-weight: normal;
color: rgb(209, 45, 20);
font-weight: bold;
width: 100%;
background: #ffd1d1;
width: fit-content;
display: flex;
align-items: center;
justify-content: center;
margin-top: 34px;
font-size: 12px;
border-radius: 2px;
padding: 3px;
}
h7 {
text-transform: uppercase;
Expand Down
94 changes: 62 additions & 32 deletions frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ function TableResultsIndividuals (props) {
const [trigger, setTrigger] = useState(false)
const [trigger2, setTrigger2] = useState(false)

const [triggerArray, setTriggerArray] = useState([])

const getSelectedRowsToExport = ({ apiRef }) => {
const selectedRowIds = selectedGridRowsSelector(apiRef)
if (selectedRowIds.size > 0) {
Expand All @@ -54,9 +56,26 @@ function TableResultsIndividuals (props) {
}

const handleClickDatasets = e => {
openDatasetArray.push(true)
console.log(e)
triggerArray.forEach((element, index) => {
if (index !== e) {
console.log('holi')
console.log(index)
triggerArray[index] = false
}
})
console.log(triggerArray)
openDatasetArray.forEach((element, index) => {
if (index !== e) {
console.log('holi')
console.log(index)
triggerArray[index] = false
}
})

const newArray = openDatasetArray.filter(a => a === e)
openDatasetArray[e] = true
triggerArray[e] = true
setTrigger(!trigger)
}

const columns = [
Expand Down Expand Up @@ -355,7 +374,6 @@ function TableResultsIndividuals (props) {
}, [trigger, resultsSelectedFinal])

useEffect(() => {

console.log(props)

let count = 0
Expand Down Expand Up @@ -393,7 +411,7 @@ function TableResultsIndividuals (props) {
{props.show !== 'full' && (
<div className='datasetCardResults'>
<div className='tittleResults'>
<div className='tittle2'>
<div className='tittle4'>
<img
className='logoBeacon'
src={result[0].response.organization.logoUrl}
Expand All @@ -406,20 +424,25 @@ function TableResultsIndividuals (props) {
return (
<>
{element[0] === result[0].meta.beaconId && (
<div>
<div className='resultSetsContainer'>
<button
onClick={handleClickDatasets(index)}
className='resultSetsButton'
onClick={() => handleClickDatasets(index)}
>
<h7>{element[1].replaceAll('_',' ')}</h7>
<h7>{element[1].replaceAll('_', ' ')}</h7>
</button>
{openDatasetArray === true &&
{openDatasetArray[index] === true &&
triggerArray[index] === true &&
element[2] === true &&
props.show === 'boolean' && <h6>FOUND</h6>}
{openDatasetArray === true &&
{openDatasetArray[index] === true &&
triggerArray[index] === true &&
element[2] === false &&
props.show === 'boolean' && <h5>NOT FOUND</h5>}
{props.show === 'count' && <h6>{element[3]}</h6>}
{props.show === 'count' &&
triggerArray[index] === true && (
<h6>{element[3]}</h6>
)}
</div>
)}
</>
Expand All @@ -429,26 +452,31 @@ function TableResultsIndividuals (props) {
{props.resultsNotPerDataset.map(element => {
return (
<>
{result[2] === true && props.show === 'boolean' && element[0] === result[0].meta.beaconId && (
<>
<h7>No datasets available</h7>
<h6>FOUND </h6>
</>
)}
{result[2] === false && props.show === 'boolean' && element[0] === result[0].meta.beaconId && (
<>
<h7>No datasets available</h7>
<h5 className='buttonResults'>NOT FOUND</h5>
</>
)}
{props.show === 'count' && element[0] === result[0].meta.beaconId && (
<>
<h7>No datasets available</h7>
<h6 className='buttonResults'>
{result[1]} results
</h6>
</>
)}
{result[2] === true &&
props.show === 'boolean' &&
element[0] === result[0].meta.beaconId && (
<div className='resultSetsContainer'>
<h7>No datasets available</h7>
<h6>FOUND </h6>
</div>
)}
{result[2] === false &&
props.show === 'boolean' &&
element[0] === result[0].meta.beaconId && (
<div className='resultSetsContainer'>
<h7>No datasets available</h7>
<h5 className='buttonResults'>NOT FOUND</h5>
</div>
)}
{props.show === 'count' &&
element[0] === result[0].meta.beaconId && (
<div className='resultSetsContainer'>
<h7>No datasets available</h7>
<h6 className='buttonResults'>
{result[1]} results
</h6>
</div>
)}
</>
)
})}
Expand All @@ -469,14 +497,15 @@ function TableResultsIndividuals (props) {
{props.show === 'full' && result[2] === true && (
<div className='datasetCardResults'>
<div className='tittleResults'>
<div className='tittle2'>
<div className='tittle4'>
<img
className='logoBeacon'
src={result[0].response.organization.logoUrl}
alt={result[0].meta.beaconId}
/>
<h2>{result[0].response.organization.name}</h2>
</div>
<h2>{result[0].response.organization.name}</h2>
<div className='seeResultsContainer'>
<button
className='buttonResults'
onClick={() => {
Expand All @@ -487,6 +516,7 @@ function TableResultsIndividuals (props) {
<h7>See results</h7>
)}
</button>
</div>
</div>
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/SignIn/SignInForm.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -456,7 +456,7 @@ body {

h6 {
margin-left: 5px;
font-size: 13px !important;
font-size: 12px !important;
width: 82vw !important;
}
.screen__background__shape5 {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/SignInOptions/SignInOptions.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
}

h6 {
font-size: 15px !important;
font-size: 12px !important;
font-weight: 600;
color: #3d72a6;
}
Expand All @@ -69,7 +69,7 @@
}

h6 {
font-size: 13px !important;
font-size: 12px !important;
width: 51vw;
}
}

0 comments on commit 850a292

Please sign in to comment.