From c4e39cef09c38f8277ecdb733ff04c3f81ec1c2f Mon Sep 17 00:00:00 2001 From: SyniRon <66834451+SyniRon@users.noreply.github.com> Date: Sat, 2 Sep 2023 22:41:07 -0400 Subject: [PATCH] add notice about data caching --- client/src/App.css | 94 +++++++----- client/src/App.js | 354 +++++++++++++++++++++++---------------------- 2 files changed, 239 insertions(+), 209 deletions(-) diff --git a/client/src/App.css b/client/src/App.css index 49fa019..5d6ad6d 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -1,78 +1,103 @@ - .DepartmentContainer { margin: auto; - min-width: 30%; max-width: 30%; + min-width: 30%; + max-width: 30%; } @media only screen and (max-width: 1000px) { - .DepartmentContainer { min-width: 50%; max-width: 95%; - } + .DepartmentContainer { + min-width: 50%; + max-width: 95%; + } } .p-nav-primary { position: sticky; - top:0; + top: 0; z-index: 400; background-color: #2e2e2e; margin-bottom: 1.2em; } - -.p-nav{ + +.p-nav { display: block; overflow-wrap: break-word; } - + .p-nav-logo { align-self: center; box-sizing: border-box; display: block; max-width: 220px; line-height: 21px; - padding:3px + padding: 3px } - + .p-nav-inner { margin-left: 25%; } - -.p-nav-scroller{ - display: flex; + +.p-nav-scroller { + display: flex; + align-items: center; + justify-content: flex-start; } - -.p-nav-png{ - max-width:220px; - max-height:37.7167px; + +.p-nav-png { + max-width: 220px; + max-height: 37.7167px; flex: 1 1 auto; } - -.p-nav-opposite{ + +.p-nav-opposite { text-align: right; flex: 1 1 auto; margin: 5px } - -.p-nav-opposite-link{ - color:#f1f1f1; + +.p-nav-opposite-link { + color: #f1f1f1; font-weight: bold; } .p-nav-png { - width:220px; - height:37.7167px; + width: 220px; + height: 37.7167px; +} + +.p-nav-info p { + color: #ff0000; + /* Red text */ + font-size: 14px; + margin: 20px; +} + +/* Mobile layout */ +@media (max-width: 768px) { + .p-nav-scroller { + flex-direction: column; + align-items: center; + justify-content: center; + /* Center-align items vertically */ + } + + .p-nav-info p { + margin-left: 0; + margin-top: 10px; + /* Add some space between the logo and the text */ + } } .Title { - color:#f1f1f1; + color: #f1f1f1; font-size: x-large; font-weight: bold; border-width: 1px; border-style: solid; - border-image: - linear-gradient( - to right, - #ebc729, - transparent - ) 1 0%; + border-image: + linear-gradient(to right, + #ebc729, + transparent) 1 0%; border-top: transparent; } @@ -84,6 +109,7 @@ border-right: transparent; } } + /* This is a very hack-y way to make the borders look proper on mobile browsers. This is because the border image property does not appear to be properly supported with IOS' Safari */ .Subtitle { @@ -104,7 +130,7 @@ display: flex; } -.Counter{ +.Counter { font-size: smaller; padding-top: 20px; padding-bottom: 15px; @@ -135,7 +161,7 @@ a { a:hover { color: #ebc729; text-decoration: underline; -} +} .Collapsible__trigger { display: block; @@ -163,4 +189,4 @@ a:hover { /* No idea why i have to do this stupidity. For some reason if I dont do this, this shit becomes off centered */ transform-origin: 67% 67%; -} +} \ No newline at end of file diff --git a/client/src/App.js b/client/src/App.js index b40d704..28b014f 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,14 +1,14 @@ -import React, {useEffect, useState} from 'react'; +import React, { useEffect, useState } from 'react'; import './App.css'; import Collapsible from 'react-collapsible'; import lists from './modules/Generic/BilletBank'; import MilpacParse from './modules/Generic/MilpacParse'; // import {Helmet} from 'react-helmet'; -function MilpacRequest () { +function MilpacRequest() { - const [milpacList, setMilpacList] = useState ([]); - const [reserveList, setReserveList] = useState ([]); + const [milpacList, setMilpacList] = useState([]); + const [reserveList, setReserveList] = useState([]); const clscript = `` - + useEffect(() => { - async function fetchMilpacList() { - try { - const requestUrl = 'https://bff.adr.7cav.us/roster/combat' - //const requestUrl = 'http://localhost:4000/roster/combat' //Use this for local hosting - const response = await fetch (requestUrl); - const responseJSON = await response.json(); - setMilpacList(responseJSON); - } catch { + async function fetchMilpacList() { + try { + //const requestUrl = 'https://bff.adr.7cav.us/roster/combat' + const requestUrl = 'http://localhost:4000/roster/combat' //Use this for local hosting + const response = await fetch(requestUrl); + const responseJSON = await response.json(); + setMilpacList(responseJSON); + } catch { - } - } - fetchMilpacList(); - },[]); + } + } + fetchMilpacList(); + }, []); useEffect(() => { async function fetchReserveList() { - try { - const requestUrl = 'https://bff.adr.7cav.us/roster/reserves' - //const requestUrl = 'http://localhost:4000/roster/reserves' //Use this for local hosting - const response = await fetch (requestUrl); - const responseJSON = await response.json(); - setReserveList(responseJSON); - } catch { + try { + //const requestUrl = 'https://bff.adr.7cav.us/roster/reserves' + const requestUrl = 'http://localhost:4000/roster/reserves' //Use this for local hosting + const response = await fetch(requestUrl); + const responseJSON = await response.json(); + setReserveList(responseJSON); + } catch { - } - } + } + } fetchReserveList(); - },[]); + }, []); var milpacArray = [] milpacArray.push({ @@ -53,158 +53,162 @@ function MilpacRequest () { "reserve": reserveList, }) - return( -
-
-
-
- -
-
-
-
- - - -
-
- -
- -
-
- -
-
- -
-
- -
- -
-
- -
- -
-
- -
-
- -
-
- -
- -
-
- -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- + +
-
- -
- -
-
- -
-
- -
-
- -
- -
-
- -
- -
-
- -
-
- -
-
- -
- -
-
- -
- -
-
- -
-
- -
-
- -
- -
-
- -
- -
-
- -
-
- -
-
- -
- +
+
+ + + +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+ +
-
) -} +} export default MilpacRequest