mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-19 13:21:46 +00:00
Maurice
069269e69c
PhotoProvidersSection: - Replace raw <input type=checkbox> with TREK's ToggleSwitch so the 'spiegeln zu Immich'-style options match the rest of the app. - Wrap action row in flex-wrap so the connected/disconnected badge drops to its own line on mobile instead of clipping. - Add a short 'Test' translation (memories.testShort) shown on mobile in place of 'Test connection' — 14 languages kept in sync. ToggleSwitch: - Explicit type='button' (never a form submitter), minWidth + flex- shrink:0 so the toggle doesn't get squished next to long labels, padding:0 so no inherited UA margin warps the inner circle. MapSettingsTab: - 'Mapbox' instead of 'Mapbox GL' on narrow screens — the provider card is too cramped on mobile for the full name. - Drop the 'Experimental' badge on mobile entirely; it overlapped the title at that width. Still shown on >=sm. DisplaySettingsTab: - Time format buttons show just '24h' / '12h' on mobile; the '(14:30)' / '(2:30 PM)' hint stays on >=sm. Test updated to match the role query since the label is now split across nodes.
20 lines
740 B
TypeScript
20 lines
740 B
TypeScript
import React from 'react'
|
|
|
|
export default function ToggleSwitch({ on, onToggle }: { on: boolean; onToggle: () => void }) {
|
|
return (
|
|
<button type="button" onClick={onToggle}
|
|
style={{
|
|
position: 'relative', width: 44, height: 24, minWidth: 44, flexShrink: 0,
|
|
borderRadius: 12, border: 'none', padding: 0, cursor: 'pointer',
|
|
background: on ? 'var(--accent, #111827)' : 'var(--border-primary, #d1d5db)',
|
|
transition: 'background 0.2s',
|
|
}}>
|
|
<span style={{
|
|
position: 'absolute', top: 2, left: on ? 22 : 2,
|
|
width: 20, height: 20, borderRadius: '50%', background: 'white',
|
|
transition: 'left 0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
|
|
}} />
|
|
</button>
|
|
)
|
|
}
|