Skip to content

Commit

Permalink
added conditional rendering buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@shree-venkatesh
shree-venkatesh committed Nov 22, 2023
1 parent deaf20c commit fb72fed
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 33 deletions.
108 changes: 99 additions & 9 deletions houston/src/pages/Report.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,75 @@
padding: 40px;
overflow-y: hidden;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75) inset;
user-select: none;
}

.gallery-container {
.left-container {
display: flex;
flex: 50%;
flex-direction: column;
height: 100%;
border-radius: 20px;
flex-direction: column;
align-items: center;
justify-items: center;
justify-content: center;
align-content: center;
}

.checkbox-container {
display: flex;
flex-direction: row;
flex: 5%;
margin-bottom: 10px;
background-color: var(--light-bg);
height: 100%;
width: 100%;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.75) inset;
border-radius: 15px;
justify-content: center;
align-items: center;
text-align: center;
justify-self: center;
}

.checkbox {
display: flex;
flex: 33%;
font-size: 1.8dvh;
justify-content: center;
}

.checkbox-text {
background-color: var(--highlight);
border-radius: 20px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.75);
padding: 5px;
width: 22dvh;
}

.gallery-container {
display: flex;
flex: 95%;
max-height: 90%;
border-radius: 20px;
flex-direction: column;
align-items: center;
justify-items: center;
justify-content: center;
align-content: center;
}

.unmatched-gallery {
display: flex;
padding: 10px;
justify-content: center;
align-items: center;
flex: 67%;
height: 100%;
flex: 2;
width: 100%;
background-color: var(--failure-text);
border-radius: 20px;
margin: 5px;
margin-bottom: 10px;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.75) inset;
flex-wrap: wrap;
overflow-y: scroll;
Expand All @@ -43,12 +91,11 @@
display: flex;
justify-content: center;
align-items: center;
flex: 33%;
flex: 1;
width: 100%;
height: 100%;
background-color: var(--success-text);
border-radius: 20px;
margin: 5px;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.75) inset;
flex-wrap: wrap;
overflow-y: scroll;
Expand All @@ -61,8 +108,7 @@
height: 100%;
border-radius: 20px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
margin: 50px;
margin-right: 0px;
margin-left: 25px;
}

.image-container {
Expand All @@ -83,7 +129,9 @@
align-self: center;
margin: 5px;
flex: 40%;
width: 12dvh;
min-width: 12dvh;
max-width: 12dvh;
min-height: 12dvh;
max-height: 12dvh;
overflow: hidden;
}
Expand All @@ -99,4 +147,46 @@
text-overflow: hidden;
text-wrap: wrap;
user-select: none;
}

@media (max-width: 1500px) {
.report-page {
flex-direction: column;
padding: 25px;
padding-left: 50px;
padding-right: 50px;
}

.report-page-map {
flex: 75%;
}

.gallery-container {
flex-direction: row;
flex: 50%;
margin: 0px;
width: 100%;
}

.checkbox-container {
flex: 10%;
max-height: 25dvh;
margin-left: 5px;
margin-right: 5px;
}

.unmatched-gallery {
flex: 45%;
max-height: 25dvh;
margin: 0px;
margin-left: 5px;
margin-right: 5px;
}

.matched-gallery {
flex: 45%;
max-height: 25dvh;
margin-left: 5px;
margin-right: 5px;
}
}
61 changes: 37 additions & 24 deletions houston/src/pages/Report.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,32 +62,45 @@ const item5 = new Item(5, 1.3467, 103.9326, img5, "E", "purple", "Square", "purp
function Report() {
return (
<main className="report-page">
<div className="gallery-container">
<div className="unmatched-gallery">
<Image item={item1}/>
<Image item={item2}/>
<Image item={item3}/>
<Image item={item4}/>
<Image item={item5}/>
<div className="left-container">
<div className="checkbox-container">
<div className="checkbox">
<p className="checkbox-text">Unmatched Targets</p>
</div>
<div className="checkbox">
<p className="checkbox-text">Matched Targets</p>
</div>
<div className="checkbox">
<p className="checkbox-text">Map</p>
</div>
</div>
<div className="gallery-container">
<div className="unmatched-gallery">
<Image item={item1}/>
<Image item={item2}/>
<Image item={item3}/>
<Image item={item4}/>
<Image item={item5}/>

<Image item={item1}/>
<Image item={item2}/>
<Image item={item3}/>
<Image item={item4}/>
<Image item={item5}/>
<Image item={item1}/>
<Image item={item2}/>
<Image item={item3}/>
<Image item={item4}/>
<Image item={item5}/>

<Image item={item1}/>
<Image item={item2}/>
<Image item={item3}/>
<Image item={item4}/>
<Image item={item5}/>
</div>
<div className="matched-gallery">
<Image item={item1}/>
<Image item={item2}/>
<Image item={item3}/>
<Image item={item4}/>
<Image item={item5}/>
<Image item={item1}/>
<Image item={item2}/>
<Image item={item3}/>
<Image item={item4}/>
<Image item={item5}/>
</div>
<div className="matched-gallery">
<Image item={item1}/>
<Image item={item2}/>
<Image item={item3}/>
<Image item={item4}/>
<Image item={item5}/>
</div>
</div>
</div>
<TuasMap className={'report-page-map'} lat={1.3467} lng={103.9326}/>
Expand Down

0 comments on commit fb72fed

Please sign in to comment.