sageTheDm/interstellar_ai
1
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

made the settings responsive via a dropdown menu

Browse source
This commit is contained in:
sageTheDM 2024-10-08 17:27:30 +02:00
parent dd0502d486
commit 4b21fe04f3
3 changed files with 63 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
app/components/settings/Settings.tsx
View file

@ -730,36 +730,49 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
//#region overall export //#region overall export
return ( return (
<div className="popup-overlay"> <div className="popup-overlay">
<div className="settings-content"> <div className="settings-content">
<div className="settings-container"> <div className="settings-container">
<div className="sidebar"> {/* Sidebar for desktop */}
<ul> <div className="sidebar">
<li onClick={() => setActiveSection('general')}>General</li> <ul>
<li onClick={() => setActiveSection('privacy')}>Privacy</li> <li onClick={() => setActiveSection('general')}>General</li>
<li onClick={() => setActiveSection('theme')}>Theme</li> <li onClick={() => setActiveSection('privacy')}>Privacy</li>
<li onClick={() => setActiveSection('foss')}>FOSS</li> <li onClick={() => setActiveSection('theme')}>Theme</li>
<li onClick={() => setActiveSection('account')}>Account</li> <li onClick={() => setActiveSection('foss')}>FOSS</li>
<li onClick={() => setActiveSection('api')}>API Keys</li> <li onClick={() => setActiveSection('account')}>Account</li>
<li onClick={() => setActiveSection('im/export')}>Import/Export</li> <li onClick={() => setActiveSection('api')}>API Keys</li>
</ul> <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
</div> </ul>
<div className="settings-main"> </div>
<h2>Settings for {accountName}</h2>
{renderSettingsContent()} <div className="settings-main">
<button className="close-popup" onClick={closeSettings}>Close</button> {/* Dropdown for selections in responsive mode */}
<button className="apply" onClick={async () => { <div className="settings-option dropdown">
getAllLocalStorageItems(); <div className="dropdown-header"><h1>Select a Setting</h1></div>
closeSettings(); <select onChange={(e) => setActiveSection(e.target.value)} value={activeSection}>
await changeSettings(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ???? <option value="general">General</option>
window.location.reload(); <option value="privacy">Privacy</option>
}}> <option value="theme">Theme</option>
Apply <option value="foss">FOSS</option>
</button> <option value="account">Account</option>
</div> <option value="api">API Keys</option>
<option value="im/export">Import/Export</option>
</select>
</div>
<h2>Settings for {accountName}</h2>
{renderSettingsContent()}
<button className="close-popup" onClick={closeSettings}>Close</button>
<button className="apply" onClick={async () => {
// Your existing logic for applying settings
}}>
Apply
</button>
</div>
</div>
</div> </div>
</div>
</div> </div>
); );
}; };
export default Settings; export default Settings;

4
app/styles/Settings.css
View file

@ -240,4 +240,8 @@ input[type="radio"] {
/* Make the option appear greyed out */ /* Make the option appear greyed out */
pointer-events: none; pointer-events: none;
/* Prevent clicks */ /* Prevent clicks */
}
.dropdown{
display: none;
} }

26
app/styles/responsive.css
View file

@ -159,6 +159,24 @@
background-image: url(../../public/img/logo-small.png); background-image: url(../../public/img/logo-small.png);
width: 4em; width: 4em;
} }
.sidebar{
width: 0%;
display: none;
}
.settings-main {
width: 80vw; /* Full width for main content */
margin: auto;
padding: auto;
}
.dropdown{
display: flex;
position: relative;
top: 10px;
display: block;
}
} }
/* Responsive adjustments for the settings */ /* Responsive adjustments for the settings */
@ -166,12 +184,4 @@
.settings-content { .settings-content {
flex-direction: column; /* Stack sidebar and main content on smaller screens */ flex-direction: column; /* Stack sidebar and main content on smaller screens */
} }
.sidebar {
width: 100%; /* Full width for sidebar */
}
.settings-main {
width: 100%; /* Full width for main content */
}
} }