Skip to content

Commit 0ddcf8d

Browse files
YouROKYouROK
authored
Merge pull request #660 from pavelpikta/fix/mobile-settings-styles
refactor(settings): update SettingsDialog and styles
2 parents 3e000e5 + 10480d3 commit 0ddcf8d

File tree

3 files changed

+187
-18
lines changed

3 files changed

+187
-18
lines changed

‎web/src/components/Settings/SettingsDialog.jsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,12 @@ import { useEffect, useState } from 'react'
77
import { useTranslation } from 'react-i18next'
88
import { clearTMDBCache } from 'components/Add/helpers'
99
import AppBar from '@material-ui/core/AppBar'
10-
import Tabs from '@material-ui/core/Tabs'
11-
import Tab from '@material-ui/core/Tab'
1210
import SwipeableViews from 'react-swipeable-views'
1311
import CircularProgress from '@material-ui/core/CircularProgress'
1412
import { StyledDialog } from 'style/CustomMaterialUiStyles'
1513
import useOnStandaloneAppOutsideClick from 'utils/useOnStandaloneAppOutsideClick'
1614

17-
import { SettingsHeader, FooterSection, Content } from './style'
15+
import { SettingsHeader, FooterSection, Content, StyledTabs, StyledTab } from './style'
1816
import defaultSettings from './defaultSettings'
1917
import { a11yProps, TabPanel } from './tabComponents'
2018
import PrimarySettingsComponent from './PrimarySettingsComponent'
@@ -121,32 +119,33 @@ export default function SettingsDialog({ handleClose }) {
121119
</SettingsHeader>
122120

123121
<AppBar position='static' color='default'>
124-
<Tabs
122+
<StyledTabs
125123
value={selectedTab}
126124
onChange={handleChange}
127125
indicatorColor='secondary'
128126
textColor='secondary'
129-
variant='fullWidth'
127+
variant='scrollable'
128+
scrollButtons='auto'
130129
>
131-
<Tab label={t('SettingsDialog.Tabs.Main')} {...a11yProps(0)} />
130+
<StyledTab label={t('SettingsDialog.Tabs.Main')} {...a11yProps(0)} />
132131

133-
<Tab
132+
<StyledTab
134133
disabled={!isProMode}
135134
label={
136135
<>
137-
<div>{t('SettingsDialog.Tabs.Additional')}</div>
138-
{!isProMode && <div style={{ fontSize: '9px' }}>{t('SettingsDialog.Tabs.AdditionalDisabled')}</div>}
136+
<span>{t('SettingsDialog.Tabs.Additional')}</span>
137+
{!isProMode && <span className='disabled-hint'>{t('SettingsDialog.Tabs.AdditionalDisabled')}</span>}
139138
</>
140139
}
141140
{...a11yProps(1)}
142141
/>
143142

144-
<Tab label={t('Search')} {...a11yProps(2)} />
143+
<StyledTab label={t('Search')} {...a11yProps(2)} />
145144

146-
<Tab label={t('TMDB.Settings')} {...a11yProps(3)} />
145+
<StyledTab label={t('TMDB.Settings')} {...a11yProps(3)} />
147146

148-
<Tab label={t('SettingsDialog.Tabs.App')} {...a11yProps(4)} />
149-
</Tabs>
147+
<StyledTab label={t('SettingsDialog.Tabs.App')} {...a11yProps(4)} />
148+
</StyledTabs>
150149
</AppBar>
151150

152151
<Content isLoading={!settings}>

‎web/src/components/Settings/TorznabSettings.jsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -95,14 +95,14 @@ export default function TorznabSettings({ settings, inputForm, updateSettings })
9595

9696
<div
9797
style={{
98-
padding: 20,
98+
padding: '20px 0',
9999
opacity: EnableTorznabSearch ? 1 : 0.5,
100100
pointerEvents: EnableTorznabSearch ? 'auto' : 'none',
101101
}}
102102
>
103103
<List dense>
104104
{(TorznabUrls || []).map((url, index) => (
105-
<ListItem key={`${url.Host}-${url.Key}`}>
105+
<ListItem key={`${url.Host}-${url.Key}`} style={{ paddingLeft: 0, paddingRight: 48 }}>
106106
<ListItemText
107107
primary={url.Name || url.Host}
108108
secondary={
@@ -115,6 +115,8 @@ export default function TorznabSettings({ settings, inputForm, updateSettings })
115115
{`Key: ${url.Key.substring(0, 5)}...`}
116116
</>
117117
}
118+
primaryTypographyProps={{ style: { wordBreak: 'break-all' } }}
119+
secondaryTypographyProps={{ style: { wordBreak: 'break-all' } }}
118120
/>
119121
<ListItemSecondaryAction>
120122
<IconButton edge='end' aria-label='delete' onClick={() => handleDelete(index)}>
@@ -140,6 +142,7 @@ export default function TorznabSettings({ settings, inputForm, updateSettings })
140142
placeholder='My Tracker'
141143
variant='outlined'
142144
size='small'
145+
fullWidth
143146
/>
144147
<TextField
145148
label={t('Torznab.TorznabHostURL')}
@@ -148,25 +151,33 @@ export default function TorznabSettings({ settings, inputForm, updateSettings })
148151
placeholder='http://localhost:9117'
149152
variant='outlined'
150153
size='small'
154+
fullWidth
151155
/>
152156
<TextField
153157
label={t('Torznab.APIKey')}
154158
value={newKey}
155159
onChange={e => setNewKey(e.target.value)}
156160
variant='outlined'
157161
size='small'
162+
fullWidth
158163
/>
159-
<div style={{ display: 'flex', marginTop: 10 }}>
164+
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 10 }}>
160165
<Button
161166
variant='outlined'
162167
color='secondary'
163168
onClick={handleTest}
164169
disabled={!newHost || !newKey || testing}
165-
style={{ marginRight: 10 }}
170+
style={{ flex: '1 1 auto', minWidth: 100 }}
166171
>
167172
{testing ? <CircularProgress size={24} color='inherit' /> : t('Torznab.Test')}
168173
</Button>
169-
<Button variant='contained' color='secondary' onClick={handleAdd} disabled={!newHost || !newKey}>
174+
<Button
175+
variant='contained'
176+
color='secondary'
177+
onClick={handleAdd}
178+
disabled={!newHost || !newKey}
179+
style={{ flex: '1 1 auto', minWidth: 100 }}
180+
>
170181
{t('Torznab.AddServer')}
171182
</Button>
172183
</div>

‎web/src/components/Settings/style.js‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,60 @@
11
import styled, { css } from 'styled-components'
2+
import Tabs from '@material-ui/core/Tabs'
3+
import Tab from '@material-ui/core/Tab'
24
import { mainColors } from 'style/colors'
35
import { StyledHeader } from 'style/CustomMaterialUiStyles'
46

57
export const cacheBeforeReaderColor = '#b3dfc9'
8+
9+
export const StyledTabs = styled(Tabs)`
10+
.MuiTabs-flexContainer {
11+
@media (max-width: 600px) {
12+
gap: 0;
13+
}
14+
}
15+
16+
.MuiTabs-scrollButtons {
17+
@media (max-width: 600px) {
18+
width: 24px;
19+
}
20+
}
21+
`
22+
23+
export const StyledTab = styled(Tab)`
24+
min-width: auto;
25+
padding: 6px 16px;
26+
font-size: 14px;
27+
white-space: nowrap;
28+
flex-shrink: 0;
29+
30+
@media (max-width: 600px) {
31+
padding: 6px 12px;
32+
font-size: 12px;
33+
min-height: 48px;
34+
}
35+
36+
@media (max-width: 400px) {
37+
padding: 6px 8px;
38+
font-size: 11px;
39+
}
40+
41+
.MuiTab-wrapper {
42+
display: flex;
43+
flex-direction: column;
44+
align-items: center;
45+
gap: 2px;
46+
}
47+
48+
.disabled-hint {
49+
font-size: 9px;
50+
opacity: 0.7;
51+
display: block;
52+
53+
@media (max-width: 600px) {
54+
font-size: 8px;
55+
}
56+
}
57+
`
658
export const cacheAfterReaderColor = mainColors.light.primary
759

860
export const SettingsHeader = styled(StyledHeader)`
@@ -81,6 +133,22 @@ export const PreloadCacheValue = styled.div`
81133
border-radius: 50%;
82134
margin-top: 2px;
83135
}
136+
137+
@media (max-width: 600px) {
138+
grid-template-columns: max-content 80px 1fr;
139+
gap: 8px;
140+
font-size: 13px;
141+
142+
:before {
143+
width: 12px;
144+
height: 12px;
145+
}
146+
}
147+
148+
@media (max-width: 400px) {
149+
grid-template-columns: max-content 1fr;
150+
font-size: 12px;
151+
}
84152
`}
85153
`
86154

@@ -93,9 +161,86 @@ export const MainSettingsContent = styled.div`
93161
@media (max-width: 930px) {
94162
grid-template-columns: 1fr;
95163
}
164+
165+
@media (max-width: 600px) {
166+
padding: 16px 12px;
167+
gap: 24px;
168+
}
169+
170+
.MuiFormControlLabel-root {
171+
margin-left: 0;
172+
margin-right: 0;
173+
justify-content: space-between;
174+
width: 100%;
175+
176+
@media (max-width: 600px) {
177+
flex-wrap: wrap;
178+
gap: 4px;
179+
}
180+
}
181+
182+
.MuiFormControlLabel-label {
183+
@media (max-width: 600px) {
184+
font-size: 14px;
185+
flex: 1;
186+
min-width: 0;
187+
word-break: break-word;
188+
}
189+
}
190+
191+
.MuiFormHelperText-root {
192+
@media (max-width: 600px) {
193+
font-size: 11px;
194+
margin-top: 2px;
195+
}
196+
}
96197
`
97198
export const SecondarySettingsContent = styled.div`
98199
padding: 20px;
200+
201+
@media (max-width: 600px) {
202+
padding: 16px 12px;
203+
}
204+
205+
.MuiFormControlLabel-root {
206+
margin-left: 0;
207+
margin-right: 0;
208+
justify-content: space-between;
209+
width: 100%;
210+
211+
@media (max-width: 600px) {
212+
flex-wrap: wrap;
213+
gap: 4px;
214+
}
215+
}
216+
217+
.MuiFormControlLabel-label {
218+
@media (max-width: 600px) {
219+
font-size: 14px;
220+
flex: 1;
221+
min-width: 0;
222+
word-break: break-word;
223+
}
224+
}
225+
226+
.MuiFormHelperText-root {
227+
@media (max-width: 600px) {
228+
font-size: 11px;
229+
margin-top: 2px;
230+
}
231+
}
232+
233+
.MuiInputLabel-root {
234+
@media (max-width: 600px) {
235+
font-size: 14px;
236+
}
237+
}
238+
239+
.MuiOutlinedInput-root {
240+
@media (max-width: 600px) {
241+
font-size: 14px;
242+
}
243+
}
99244
`
100245
export const StorageButton = styled.div`
101246
${({ small, selected }) => css`
@@ -163,9 +308,23 @@ export const SettingSectionLabel = styled.div`
163308
font-size: 25px;
164309
padding-bottom: 20px;
165310
311+
@media (max-width: 600px) {
312+
font-size: 20px;
313+
padding-bottom: 16px;
314+
}
315+
316+
@media (max-width: 400px) {
317+
font-size: 18px;
318+
padding-bottom: 12px;
319+
}
320+
166321
small {
167322
display: block;
168323
font-size: 11px;
324+
325+
@media (max-width: 600px) {
326+
font-size: 10px;
327+
}
169328
}
170329
`
171330

0 commit comments

Comments
 (0)