nws/nws-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

sizing changes for table

Browse source
This commit is contained in:
Nicholas Orlowsky 2023-01-25 15:47:27 -06:00
parent 1ab20739cc
commit 721c30b367
5 changed files with 45 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/components/UptimeComparisonCard.tsx
View file

@ -32,28 +32,38 @@ function getResponseTimeClass(respTime: number) {
export default function UptimeComparisonCard(props: {uptime: UptimeRecord, isService: boolean}) {
const [isModalOpen, setModalOpen] = useState(false);
return(
<div className={"col-12 col-md-2 mb-2 p-0 m-0 text-center nws-card-md"}>
<div style={{height: 25, margin: 0}} className={"pt-2 pt-md-0"}>
<div className={"col-12 col-lg-2 mb-2 p-lg-0 m-lg-0 m-2 text-center nws-card-md"}>
<div style={{height: 25, margin: 0}} className={"pt-2 pt-lg-0"}>
<h4 className={"uptime-lnk"} onClick={()=>setModalOpen(true)}>{props.uptime.name}</h4>
</div>
<hr/>
<p className={"fw-bold d-md-none"}>Uptime (Last Month)</p>
<p className={getUptimeClass(props.uptime.uptimeMonth)}>{props.uptime.uptimeMonth}%</p>
<hr className={"d-md-block d-none"}/>
<p className={"fw-bold d-md-none"}>Uptime ({new Date().getFullYear()} YTD)</p>
<p className={getUptimeClass(props.uptime.uptimeYtd)}>{props.uptime.uptimeYtd}%</p>
<hr className={"d-md-block d-none"}/>
<p className={"fw-bold d-md-none"}>Avg Response Time (24hr)</p>
<p className={getResponseTimeClass(props.uptime.averageResponseTime)}>{props.uptime.averageResponseTime}ms</p>
<hr className={"d-md-block d-none"}/>
<p className={"fw-bold d-md-none"}>Current Status</p>
<div className={`p-1 d-flex justify-content-start w-100`}>
<p className={"fw-bold d-lg-none"}>Uptime (Last Month)</p>
<div style={{height: 25, margin: 0}} className={"pt-2 pt-lg-0"}>
<p className={getUptimeClass(props.uptime.uptimeMonth)}>{props.uptime.uptimeMonth}%</p>
</div>
<hr className={"d-lg-block d-none"}/>
<p className={"fw-bold d-lg-none"}>Uptime ({new Date().getFullYear()} YTD)</p>
<div style={{height: 25, margin: 0}} className={"pt-2 pt-lg-0"}>
<p className={getUptimeClass(props.uptime.uptimeYtd)}>{props.uptime.uptimeYtd}%</p>
</div>
<hr className={"d-lg-block d-none"}/>
<p className={"fw-bold d-lg-none"}>Avg Response Time (24hr)</p>
<div style={{height: 25, margin: 0}} className={"pt-2 pt-lg-0"}>
<p className={getResponseTimeClass(props.uptime.averageResponseTime)}>{props.uptime.averageResponseTime}ms</p>
</div>
<hr className={"d-lg-block d-none"}/>
<p className={"fw-bold d-lg-none"}>Current Status</p>
<div style={{height: 25, margin: 0}} className={"pt-2 pt-lg-0"}>
<div className={`p-1 d-flex justify-content-start w-100`} >
<p className={`fw-bold severity-label w-100
${props.uptime.isUp ? 'low' : (props.uptime.undergoingMaintenance ? 'med' : 'high')}-severity`}
>
{props.uptime.isUp ? 'Up' : (props.uptime.undergoingMaintenance ? 'Maintenance' : 'Down')}
</p>
</div>
</div>
<Modal className={"uptime-modal"} isOpen={isModalOpen}>
<div className={"mb-3"}>
<h1 className={"mb-0"}>{props.uptime.name}</h1>