Skip to content

Commit d69b5f8

Browse files
minORCray-oxd
minORC
authored and
ray-oxd
committed
DBC22-5336: Tweaks to RAHP mobile panels
1 parent dba43b8 commit d69b5f8

2 files changed

Lines changed: 67 additions & 54 deletions

File tree

‎src/frontend/src/Components/report/ReportMap.js‎

Lines changed: 60 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -401,74 +401,78 @@ export function ReportMap(props) {
401401
{activeFeature.properties.CONTRACTOR1_NAME}
402402
</p>
403403
<div className="data-card">
404-
{activeFeature.properties.CONTRACTOR1_WEBSITE && (
405-
<div className="data-card__row">
406-
<div className="data-icon">
407-
<FontAwesomeIcon icon={faLink} />
408-
</div>
409-
<p className="label">Website</p>
410-
<a
411-
href={activeFeature.properties.CONTRACTOR1_WEBSITE}
412-
className="data-link website-link"
413-
rel="noreferrer"
414-
alt="contractor website link">
415-
{activeFeature.properties.CONTRACTOR1_NAME}
416-
</a>
404+
{activeFeature.properties.CONTRACTOR1_WEBSITE && (
405+
<div className="data-card__row">
406+
<div className="data-icon">
407+
<FontAwesomeIcon icon={faLink} />
417408
</div>
418-
)}
419-
{activeFeature.properties.CONTRACTOR1_CONTACT && (
420-
<div className="data-card__row">
421-
<div className="data-icon">
422-
<FontAwesomeIcon icon={faPhone} />
423-
</div>
424-
<p className="label">Phone</p>
425-
<a
426-
href={'tel:' + activeFeature.properties.CONTRACTOR1_CONTACT}
427-
className="data-link tel-number bold"
428-
rel="noreferrer"
429-
alt="contractor phone link">
430-
{activeFeature.properties.CONTRACTOR1_CONTACT}
431-
</a>
409+
<p className="label">Website</p>
410+
<a
411+
href={activeFeature.properties.CONTRACTOR1_WEBSITE}
412+
className="data-link website-link"
413+
rel="noreferrer"
414+
alt="contractor website link">
415+
{activeFeature.properties.CONTRACTOR1_NAME}
416+
</a>
417+
</div>
418+
)}
419+
{activeFeature.properties.CONTRACTOR1_CONTACT && (
420+
<div className="data-card__row">
421+
<div className="data-icon">
422+
<FontAwesomeIcon icon={faPhone} />
432423
</div>
433-
)}
424+
<p className="label">Phone</p>
425+
<a
426+
href={'tel:' + activeFeature.properties.CONTRACTOR1_CONTACT}
427+
className="data-link tel-number bold"
428+
rel="noreferrer"
429+
alt="contractor phone link">
430+
{activeFeature.properties.CONTRACTOR1_CONTACT}
431+
</a>
432+
</div>
433+
)}
434434
</div>
435435
</React.Fragment>
436436
)}
437437

438438
{ (activeFeature.properties.CONTRACTOR2_CONTACT && activeFeature.properties.CONTRACTOR2_CONTACT != activeFeature.properties.CONTRACTOR1_CONTACT) && (
439-
<div>
440-
<div className="contractor-name">
441-
{activeFeature.properties.CONTRACTOR2_WEBSITE ? (
442-
<React.Fragment>
443-
<FontAwesomeIcon icon={faLink} />
439+
<React.Fragment>
440+
<p className="contractor-name">
441+
{activeFeature.properties.CONTRACTOR2_NAME}
442+
</p>
443+
<div className="data-card">
444+
{activeFeature.properties.CONTRACTOR2_WEBSITE && (
445+
<div className="data-card__row">
446+
<div className="data-icon">
447+
<FontAwesomeIcon icon={faLink} />
448+
</div>
449+
<p className="label">Website</p>
444450
<a
445451
href={activeFeature.properties.CONTRACTOR2_WEBSITE}
446-
className="website-link"
452+
className="data-link website-link"
447453
rel="noreferrer"
448454
alt="contractor website link">
449455
{activeFeature.properties.CONTRACTOR2_NAME}
450456
</a>
451-
</React.Fragment>
452-
) : (
453-
<p className="without-link">
454-
{activeFeature.properties.CONTRACTOR2_NAME}
455-
</p>
457+
</div>
458+
)}
459+
{activeFeature.properties.CONTRACTOR2_CONTACT && (
460+
<div className="data-card__row">
461+
<div className="data-icon">
462+
<FontAwesomeIcon icon={faPhone} />
463+
</div>
464+
<p className="label">Phone</p>
465+
<a
466+
href={'tel:' + activeFeature.properties.CONTRACTOR2_CONTACT}
467+
className="data-link tel-number bold"
468+
rel="noreferrer"
469+
alt="contractor phone link">
470+
{activeFeature.properties.CONTRACTOR2_CONTACT}
471+
</a>
472+
</div>
456473
)}
457474
</div>
458-
{activeFeature.properties.CONTRACTOR2_DESCRIPTION && (
459-
<p className="contractor-description">
460-
{activeFeature.properties.CONTRACTOR2_DESCRIPTION}
461-
</p>
462-
)}
463-
<div className="contractor-phone">
464-
<FontAwesomeIcon icon={faPhone} />
465-
<a
466-
className="tel-number bold"
467-
href={'tel:' + activeFeature.properties.CONTRACTOR2_CONTACT}>
468-
{activeFeature.properties.CONTRACTOR2_CONTACT}
469-
</a>
470-
</div>
471-
</div>
475+
</React.Fragment>
472476
)}
473477

474478
<p>Thank you for bringing this issue to our attention.</p>
@@ -525,7 +529,9 @@ export function ReportMap(props) {
525529
>
526530
<Drawer.Portal container={mapElement.current}>
527531
<Drawer.Overlay className="drawer-overlay" />
528-
<Drawer.Content className="drawer-content" ref={drawerRef}>
532+
<Drawer.Content
533+
className={`drawer-content ${snap === '80%' ? 'snap-80' : ''}`}
534+
ref={drawerRef}>
529535
<button
530536
className="close-panel"
531537
aria-label={`${openPanel ? 'close side panel' : ''}`}

‎src/frontend/src/Components/report/ReportMap.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
padding-bottom: 0;
5555
overflow: hidden;
5656
transition: all 0.20s ease-in-out;
57+
height: 0;
5758

5859
.back-link-wrap {
5960
overflow: hidden;
@@ -560,6 +561,12 @@
560561
}
561562
}
562563

564+
&.snap-80 {
565+
& > div.panel-content {
566+
padding-bottom: 20vh;
567+
}
568+
}
569+
563570
.close-panel {
564571
z-index: 3;
565572
}

0 commit comments

Comments
 (0)