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

Merge pull request #4 from nickorlow/done

Browse source 
sizing changes for table
This commit is contained in:
Nicholas Orlowsky 2023-01-25 15:47:56 -06:00 committed by GitHub
parent d95635541b 721c30b367
commit 6cf44903ae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 45 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.idea/workspace.xml
View file

@ -4,7 +4,9 @@
<list default="true" id="03fafda4-e2c1-4602-a731-a2f96e84badd" name="Default Changelist" comment=""> <list default="true" id="03fafda4-e2c1-4602-a731-a2f96e84badd" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/App.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.css" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/App.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/UptimeCard.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/UptimeCard.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/UptimeComparisonCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/UptimeComparisonCard.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/UptimeComparisonCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/UptimeComparisonCard.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/UptimeLabelCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/UptimeLabelCard.tsx" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />

2
src/App.css
View file

@ -64,7 +64,7 @@ p {
.nws-card-md { .nws-card-md {
border-radius: 20px; border-radius: 20px;
background-color: #eee; background-color: #eee;
padding: .75rem; padding-bottom: 2rem;
} }
} }
.nws-card { .nws-card {

1
src/components/UptimeCard.css
View file

@ -1,6 +1,7 @@
.uptime-lnk { .uptime-lnk {
font-weight: bolder; font-weight: bolder;
color: #2f2f2f; color: #2f2f2f;
font-size: 1.1rem;
text-decoration: none; text-decoration: none;
transition: .5s; transition: .5s;
cursor: pointer; cursor: pointer;

36
src/components/UptimeComparisonCard.tsx
View file

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

24
src/components/UptimeLabelCard.tsx
View file

@ -7,18 +7,30 @@ import Modal from "react-modal";
export default function UptimeLabelCard() { export default function UptimeLabelCard() {
return( return(
<div className={"col-2 p-0 d-none d-md-block mb-2 m-0 text-center"}> <div className={"col-2 p-0 d-none d-lg-block mb-2 m-0 text-center"}>
<div style={{height: 25, margin: 0}}> <div style={{height: 25, margin: 0}}>
<p className={"fw-bold"}>Service Name</p> <p className={"fw-bold"} style={{fontSize: ".9em"}}>Service Name</p>
</div> </div>
<hr/> <hr/>
<p className={"fw-bold"}>Uptime (Last Month)</p> <div style={{height: 25, margin: 0}}>
<p className={"fw-bold"} style={{fontSize: ".9em"}}>Uptime (Last Month)</p>
</div>
<hr/> <hr/>
<p className={"fw-bold"}>Uptime ({new Date().getFullYear()} YTD)</p> <div style={{height: 25, margin: 0}}>
<p className={"fw-bold"} style={{fontSize: ".9em"}}>Uptime ({new Date().getFullYear()} YTD)</p>
</div>
<hr/> <hr/>
<p className={"fw-bold"}>Avg Response Time (24hr)</p> <div style={{height: 25, margin: 0}}>
<p className={"fw-bold"} style={{fontSize: ".9em"}}>Avg Response Time (24hr)</p>
</div>
<hr/> <hr/>
<p className={"fw-bold"}>Current Status</p> <div style={{height: 25, margin: 0}}>
<p className={"fw-bold"} style={{fontSize: ".9em"}}>Current Status</p>
</div>
</div> </div>
); );
} }