github/SlimeVR-Server
1
1
Fork 0
mirror of https://github.com/SlimeVR/SlimeVR-Server.git synced 2026-04-06 02:01:58 +02:00
Code Issues 161 Packages Projects Releases Wiki Activity

gui: Fix UI wrapping in settings (#467)

Browse Source
This commit is contained in:
0forks
2023-01-16 17:19:28 +03:00
committed by GitHub
parent 269a79c87a
commit c3d8eba264
2 changed files with 85 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
gui/src/components/settings/pages/GeneralSettings.tsx
View File

@@ -437,18 +437,16 @@ export function GeneralSettings() {
)}
</Typography>
<div className="flex flex-col pt-2 pb-4">
<Typography color="secondary">
{l10n
.getString(
'settings-general-tracker_mechanics-drift_compensation-description'
)
.split('\n')
.map((line, i) => (
<Typography color="secondary" key={i}>
{line}
</Typography>
))}
</Typography>
{l10n
.getString(
'settings-general-tracker_mechanics-drift_compensation-description'
)
.split('\n')
.map((line, i) => (
<Typography color="secondary" key={i}>
{line}
</Typography>
))}
</div>
<CheckBox
variant="toggle"
@@ -758,76 +756,61 @@ export function GeneralSettings() {
<Typography variant="main-title">
{l10n.getString('settings-general-interface')}
</Typography>
<div className="gap-4 grid">
<div className="grid sm:grid-cols-2">
<div>
<Typography bold>
{l10n.getString('settings-general-interface-dev_mode')}
</Typography>
<div className="flex flex-col">
<Typography color="secondary">
{l10n.getString(
'settings-general-interface-dev_mode-description'
)}
</Typography>
</div>
<div className="pt-2">
<CheckBox
variant="toggle"
control={control}
outlined
name="interface.devmode"
label={l10n.getString(
'settings-general-interface-dev_mode-label'
)}
/>
</div>
</div>
</div>
<div className="grid sm:grid-cols-2">
<div>
<Typography bold>
{l10n.getString(
'settings-general-interface-serial_detection'
)}
</Typography>
<div className="flex flex-col">
<Typography color="secondary">
{l10n.getString(
'settings-general-interface-serial_detection-description'
)}
</Typography>
</div>
<div className="pt-2">
<CheckBox
variant="toggle"
control={control}
outlined
name="interface.watchNewDevices"
label={l10n.getString(
'settings-general-interface-serial_detection-label'
)}
/>
</div>
</div>
</div>
<div className="grid sm:grid-cols-2">
<div>
<Typography bold>
{l10n.getString('settings-general-interface-lang')}
</Typography>
<div className="flex flex-col">
<Typography color="secondary">
{l10n.getString(
'settings-general-interface-lang-description'
)}
</Typography>
</div>
<div className="pt-2">
<LangSelector />
</div>
</div>
</div>
<Typography bold>
{l10n.getString('settings-general-interface-dev_mode')}
</Typography>
<div className="flex flex-col pt-1 pb-2">
<Typography color="secondary">
{l10n.getString(
'settings-general-interface-dev_mode-description'
)}
</Typography>
</div>
<div className="grid sm:grid-cols-2 pb-4">
<CheckBox
variant="toggle"
control={control}
outlined
name="interface.devmode"
label={l10n.getString(
'settings-general-interface-dev_mode-label'
)}
/>
</div>
<Typography bold>
{l10n.getString('settings-general-interface-serial_detection')}
</Typography>
<div className="flex flex-col pt-1 pb-2">
<Typography color="secondary">
{l10n.getString(
'settings-general-interface-serial_detection-description'
)}
</Typography>
</div>
<div className="grid sm:grid-cols-2 pb-4">
<CheckBox
variant="toggle"
control={control}
outlined
name="interface.watchNewDevices"
label={l10n.getString(
'settings-general-interface-serial_detection-label'
)}
/>
</div>
<Typography bold>
{l10n.getString('settings-general-interface-lang')}
</Typography>
<div className="flex flex-col pt-1 pb-2">
<Typography color="secondary">
{l10n.getString('settings-general-interface-lang-description')}
</Typography>
</div>
<div className="grid sm:grid-cols-2 pb-4">
<LangSelector />
</div>
</>
</SettingsPageLayout>

44
gui/src/components/tracker/TrackerSettings.tsx
View File

@@ -162,7 +162,7 @@ export function TrackerSettingsPage() {
onClose={() => setSelectRotation(false)}
onDirectionSelected={onDirectionSelected}
></MountingSelectionMenu>
<div className="flex gap-2 md:h-full flex-wrap md:flex-row ">
<div className="flex gap-2 md:h-full max-md:flex-wrap md:flex-row ">
<div className="flex flex-col w-full md:max-w-xs gap-2">
{tracker && (
<TrackerCard
@@ -284,31 +284,27 @@ export function TrackerSettingsPage() {
</div>
</div>
{tracker?.tracker.info?.isImu && (
<>
<div className="flex flex-col gap-2 w-full mt-3">
<Typography variant="section-title">
{l10n.getString(
'tracker-settings-drift_compensation_section'
<div className="flex flex-col gap-2 w-full mt-3">
<Typography variant="section-title">
{l10n.getString('tracker-settings-drift_compensation_section')}
</Typography>
<Typography color="secondary">
{l10n.getString(
'tracker-settings-drift_compensation_section-description'
)}
</Typography>
<div className="flex">
<CheckBox
variant="toggle"
outlined
name="allowDriftCompensation"
control={control}
label={l10n.getString(
'tracker-settings-drift_compensation_section-edit'
)}
</Typography>
<Typography color="secondary">
{l10n.getString(
'tracker-settings-drift_compensation_section-description'
)}
</Typography>
<div className="flex">
<CheckBox
variant="toggle"
outlined
name="allowDriftCompensation"
control={control}
label={l10n.getString(
'tracker-settings-drift_compensation_section-edit'
)}
/>
</div>
/>
</div>
</>
</div>
)}
<div className="flex flex-col gap-2 w-full mt-3">
<Typography variant="section-title">