TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'feature/mobile-menu' (#11) from feature/mobile-menu into develop

Browse Source 
Reviewed-on: #11
This commit is contained in:
TobaOjo
2025-11-14 15:41:31 +00:00
parent 1b46ecc3d1 0945097abb
commit 0b1f0b72a8
10 changed files with 47 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
View File

@@ -234,7 +234,7 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
<button
type="submit"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
>
{isSubmitting ? "Saving..." : "Save Changes"}
</button>

4
src/components/SettingForms/NPED/NPEDFields.tsx
View File

@@ -102,14 +102,14 @@ const NPEDFields = () => {
{!state.npedUser?.propClientID?.value ? (
<button
type="submit"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
>
{isSubmitting ? "Logging in..." : "Login"}
</button>
) : (
<button
type="button"
className="w-1/4 border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
className="w-full md:w-1/4 border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
onClick={handleLogoutClick}
>
Logout

2
src/components/SettingForms/NPED/NPEDHotlist.tsx
View File

@@ -47,7 +47,7 @@ const NPEDHotlist = () => {
/>
<button
type="submit"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
// disabled={errors ? true : false}
>
Upload

2
src/components/SettingForms/Sound/SoundSettingsFields.tsx
View File

@@ -139,7 +139,7 @@ const SoundSettingsFields = () => {
</div>
<button
type="submit"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
>
Save Settings
</button>

2
src/components/SettingForms/Sound/SoundUpload.tsx
View File

@@ -96,7 +96,7 @@ const SoundUpload = () => {
{errors.soundFile && <p className="text-red-500 text-sm mt-1">Not an mp3 file</p>}
<button
type="submit"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 mt-[5%]"
className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 mt-[5%]"
disabled={errors.soundFile ? true : false}
>
Upload

2
src/components/SettingForms/System/SystemConfigFields.tsx
View File

@@ -167,7 +167,7 @@ const SystemConfigFields = () => {
</FormGroup>
<button
type="submit"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
disabled={isSubmitting}
>
{saveSystemSettingsLoading ? "Saving..." : "Save System Settings"}

2
src/components/SettingForms/System/SystemFileUpload.tsx
View File

@@ -52,7 +52,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
</FormGroup>
<button
type="button"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
disabled={!selectedFile}
onClick={handleFileUploadClick}
>

2
src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
View File

@@ -178,7 +178,7 @@ const ModemSettings = () => {
)}
<button
type="submit"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
>
{isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
</button>

41
src/components/UI/Header.tsx
View File

@@ -1,15 +1,26 @@
import { Link } from "react-router";
import Logo from "/MAV.svg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGear, faHome, faListCheck, faMaximize, faMinimize, faRotate } from "@fortawesome/free-solid-svg-icons";
import {
faBars,
faGear,
faHome,
faListCheck,
faMaximize,
faMinimize,
faRotate,
} from "@fortawesome/free-solid-svg-icons";
import { useState } from "react";
import SoundBtn from "./SoundBtn";
import { useIntegrationsContext } from "../../context/IntegrationsContext";
export default function Header() {
const [isFullscreen, setIsFullscreen] = useState(false);
const [isMenuOpen, setIsMenuOpen] = useState(false);
const { state } = useIntegrationsContext();
const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
const sessionStarted = state.sessionStarted;
const sessionPaused = state.sessionPaused;
@@ -36,7 +47,7 @@ export default function Header() {
</Link>
</div>
<div className="flex flex-col lg:flex-row items-center space-x-24 justify-items-center">
<div className="flex flex-row lg:flex-row space-x-2">
<div className="flex flex-row lg:flex-row space-x-2 mx-auto p-2 md:p-0 items-center">
{sessionStarted && sessionPaused ? (
<p className="text-gray-400 font-bold">Session Paused</p>
) : (
@@ -44,7 +55,7 @@ export default function Header() {
)}
</div>
<div className="flex flex-row space-x-8">
<div className="flex flex-row space-x-6 md:space-x-8 items-center">
<Link to={"/"}>
<FontAwesomeIcon className="text-white" icon={faHome} size="2x" />
</Link>
@@ -59,15 +70,35 @@ export default function Header() {
<FontAwesomeIcon icon={faRotate} size="2x" />
</div>
<SoundBtn />
<Link to={"/session-settings"}>
<div className="md:hidden">
<FontAwesomeIcon icon={faBars} size="2x" onClick={toggleMenu} />
</div>
<Link className="hidden md:flex" to={"/session-settings"}>
<FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
</Link>
<Link to={"/system-settings"}>
<Link className="hidden md:flex" to={"/system-settings"}>
<FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
</Link>
</div>
</div>
{isMenuOpen && (
<div className="md:hidden">
<ul className="flex flex-row gap-5">
<li onClick={() => setIsMenuOpen(false)}>
<Link to={"/session-settings"}>
<FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
</Link>
</li>
<li onClick={() => setIsMenuOpen(false)}>
<Link to={"/system-settings"}>
<FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
</Link>
</li>
</ul>
</div>
)}
</div>
);
}

4
src/index.css
View File

@@ -33,7 +33,7 @@ body {
}
.arrow-outline path {
stroke: black; /* outline color */
stroke-width: 20px; /* thickness of outline (tweak this) */
stroke: black;
stroke-width: 20px;
stroke-linejoin: round;
}