React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

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
return (
<div className="popup-overlay">
<div className="settings-content">
<div className="settings-container">
<div className="sidebar">
<ul>
<li onClick={() => setActiveSection('general')}>General</li>
<li onClick={() => setActiveSection('privacy')}>Privacy</li>
<li onClick={() => setActiveSection('theme')}>Theme</li>
<li onClick={() => setActiveSection('foss')}>FOSS</li>
<li onClick={() => setActiveSection('account')}>Account</li>
<li onClick={() => setActiveSection('api')}>API Keys</li>
<li onClick={() => setActiveSection('im/export')}>Import/Export</li>
</ul>
</div>
<div className="settings-main">
<h2>Settings for {accountName}</h2>
{renderSettingsContent()}
<button className="close-popup" onClick={closeSettings}>Close</button>
<button className="apply" onClick={async () => {
getAllLocalStorageItems();
closeSettings();
await changeSettings(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
window.location.reload();
}}>
Apply
</button>
</div>
<div className="settings-content">
<div className="settings-container">
{/* Sidebar for desktop */}
<div className="sidebar">
<ul>
<li onClick={() => setActiveSection('general')}>General</li>
<li onClick={() => setActiveSection('privacy')}>Privacy</li>
<li onClick={() => setActiveSection('theme')}>Theme</li>
<li onClick={() => setActiveSection('foss')}>FOSS</li>
<li onClick={() => setActiveSection('account')}>Account</li>
<li onClick={() => setActiveSection('api')}>API Keys</li>
<li onClick={() => setActiveSection('im/export')}>Import/Export</li>
</ul>
</div>
<div className="settings-main">
{/* Dropdown for selections in responsive mode */}
<div className="settings-option dropdown">
<div className="dropdown-header"><h1>Select a Setting</h1></div>
<select onChange={(e) => setActiveSection(e.target.value)} value={activeSection}>
<option value="general">General</option>
<option value="privacy">Privacy</option>
<option value="theme">Theme</option>
<option value="foss">FOSS</option>
<option value="account">Account</option>
<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>
);
);
};
export default Settings;

4
app/styles/Settings.css
View file

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

26
app/styles/responsive.css
View file

@ -159,6 +159,24 @@
background-image: url(../../public/img/logo-small.png);
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 */
@ -166,12 +184,4 @@
.settings-content {
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 */
}
}