Merge pull request #87 from tritonuas/feat/control-page-layout

Control Page Layout
tritonuas · Nov 10, 2023 · 909a2fc · 909a2fc
2 parents 6233dad + 3cf8652
commit 909a2fc
Show file tree

Hide file tree

Showing 4 changed files with 367 additions and 16 deletions.
diff --git a/houston/package-lock.json b/houston/package-lock.json
diff --git a/houston/package.json b/houston/package.json
@@ -26,8 +26,8 @@
   },
   "devDependencies": {
     "@types/leaflet": "^1.9.7",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.2.34",
+    "@types/react-dom": "^18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",

diff --git a/houston/src/pages/Control.css b/houston/src/pages/Control.css
@@ -0,0 +1,142 @@
+.controls-page {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid black;
+    padding: 50px;
+    padding-left: 100px;
+    padding-right: 100px;
+    overflow-y: hidden;
+    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75) inset;
+}
+
+.map {
+    flex: 70%;
+    width: 100%;
+    height: 100%;
+    border-radius: 20px;
+    box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
+    margin: 50px;
+}
+
+.flight-telemetry-container {
+    display: flex;
+    flex-direction: column;
+    flex: 15%;
+    height: 100%;
+    border-radius: 20px;
+    background-color: var(--light-bg);
+    padding: 20px;
+    padding-bottom: 0px;
+    box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
+}
+
+.flight-telemetry {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    background-color: var(--main-bg-color);
+    border-radius: 10px;
+    margin-bottom: 20px;
+    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75) inset;
+    overflow: hidden;
+}
+
+.data {
+    flex: 2;
+    font-family: 'Courier New';
+    font-size: 45px;
+    font-size: 1.5dvw;
+    font-weight: bold;
+    margin: auto;
+}
+
+.heading {
+    flex: 1;
+    font-size: 1.2dvw;
+    margin: auto;
+    margin-top: 1.5dvh;
+}
+
+.unit-indicator {
+    display: flex;
+    align-self: center;
+    align-items: center;
+    width: auto;
+    height: 3dvh;
+    border-radius: 3dvh;
+    margin-bottom: 1dvw;
+}
+
+.unit {
+    overflow: hidden;
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    font-size: 1dvw;
+    font-weight: bold;
+    padding: 0.5dvw;
+    height: 1dvh;
+    background-color: var(--highlight);
+    border-top-left-radius: 3dvh;
+    border-bottom-left-radius: 3dvh;
+     user-select: none
+}
+
+.unit:last-child {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    border-top-right-radius: 3dvh;
+    border-bottom-right-radius: 3dvh;
+    border-left: 2px solid black;
+}
+
+#compass {
+    background-color: var(--highlight);
+}
+
+@media (max-width: 1500px) {
+    .controls-page {
+        flex-direction: column;
+        padding: 25px;
+        padding-left: 50px;
+        padding-right: 50px;
+    }
+
+    .flight-telemetry-container {
+        flex-direction: row;
+        padding-left: 0px;
+        margin: 0px;
+        width: 100%;
+    }
+
+    .flight-telemetry {
+        margin-left: 20px;
+        height: auto;
+    }
+
+    .map {
+        margin: 20px;
+    }
+
+    .heading {
+        flex: 1;
+        font-size: 2dvw;
+        margin: auto;
+        margin-top: 1.5dvh;
+    }
+
+    .data {
+        flex: 2;
+        font-family: 'Courier New';
+        font-size: 45px;
+        font-size: 1.8dvw;
+        font-weight: bold;
+        margin: auto;
+    }
+}