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

some mobile fixes

Browse source
This commit is contained in:
Nicholas Orlowsky 2023-01-23 20:51:30 -06:00
parent d764fd29e1
commit 1ab20739cc
3 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.idea/workspace.xml
View file

@ -2,12 +2,9 @@
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<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 afterPath="$PROJECT_DIR$/src/components/UptimeComparisonCard.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/UptimeLabelCard.tsx" afterDir="false" />
<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/components/HomePage.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/HomePage.tsx" 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/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.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" />

9
src/App.css
View file

@ -58,6 +58,15 @@ p {
padding-bottom: 5px; padding-bottom: 5px;
} }
@media only screen
and (max-width: 992px) {
.nws-card-md {
border-radius: 20px;
background-color: #eee;
padding: .75rem;
}
}
.nws-card { .nws-card {
border-radius: 20px; border-radius: 20px;
background-color: #eee; background-color: #eee;

10
src/components/UptimeComparisonCard.tsx
View file

@ -32,20 +32,20 @@ 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"}> <div className={"col-12 col-md-2 mb-2 p-0 m-0 text-center nws-card-md"}>
<div style={{height: 25, margin: 0}}> <div style={{height: 25, margin: 0}} className={"pt-2 pt-md-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-md-none"}>Uptime (Last Month)</p>
<p className={getUptimeClass(props.uptime.uptimeMonth)}>{props.uptime.uptimeMonth}%</p> <p className={getUptimeClass(props.uptime.uptimeMonth)}>{props.uptime.uptimeMonth}%</p>
<hr/> <hr className={"d-md-block d-none"}/>
<p className={"fw-bold d-md-none"}>Uptime ({new Date().getFullYear()} YTD)</p> <p className={"fw-bold d-md-none"}>Uptime ({new Date().getFullYear()} YTD)</p>
<p className={getUptimeClass(props.uptime.uptimeYtd)}>{props.uptime.uptimeYtd}%</p> <p className={getUptimeClass(props.uptime.uptimeYtd)}>{props.uptime.uptimeYtd}%</p>
<hr/> <hr className={"d-md-block d-none"}/>
<p className={"fw-bold d-md-none"}>Avg Response Time (24hr)</p> <p className={"fw-bold d-md-none"}>Avg Response Time (24hr)</p>
<p className={getResponseTimeClass(props.uptime.averageResponseTime)}>{props.uptime.averageResponseTime}ms</p> <p className={getResponseTimeClass(props.uptime.averageResponseTime)}>{props.uptime.averageResponseTime}ms</p>
<hr/> <hr className={"d-md-block d-none"}/>
<p className={"fw-bold d-md-none"}>Current Status</p> <p className={"fw-bold d-md-none"}>Current Status</p>
<div className={`p-1 d-flex justify-content-start w-100`}> <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