martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 20:49:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixing mobile layout issues

Browse Source
This commit is contained in:
Roland Osborne 2024-02-23 16:44:10 -08:00
parent 4288aa9cc5
commit 606b8c4122
7 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
net/web/src/context/useSettingsContext.hook.js
View File

@ -13,6 +13,7 @@ export function useSettingsContext() {
setTheme: null, setTheme: null,
colors: {}, colors: {},
menuStyle: {}, menuStyle: {},
textStyle: {},
languages: [{ value: null, label: 'Default' }, { value: 'en', label: 'English' }, { value: 'fr', label: 'Français' }], languages: [{ value: null, label: 'Default' }, { value: 'en', label: 'English' }, { value: 'fr', label: 'Français' }],
language: null, language: null,
strings: en, strings: en,

5
net/web/src/session/Session.styled.js
View File

@ -143,7 +143,10 @@ export const SessionWrapper = styled.div`
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto;
overscroll-behavior: none;
z-index: 2; z-index: 2;
background-color: ${props => props.theme.baseColor};
} }
.spinner { .spinner {
@ -241,7 +244,7 @@ export const SessionWrapper = styled.div`
position: relative; position: relative;
} }
.bottom { .bottom {
height: 48px; height: 40px;
position: relative; position: relative;
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3); box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
} }

5
net/web/src/session/account/profile/Profile.jsx
View File

@ -60,7 +60,7 @@ export function Profile({ closeProfile }) {
<span className="logoutMode">{ state.strings.allDevices }</span> <span className="logoutMode">{ state.strings.allDevices }</span>
<Switch onChange={(e) => all.current = e} size="small" /> <Switch onChange={(e) => all.current = e} size="small" />
</LogoutContent>, </LogoutContent>,
bodyStyle: { padding: 16, ...state.menuStyle }, bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
okText: state.strings.ok, okText: state.strings.ok,
onOk() { onOk() {
actions.logout(all.current); actions.logout(all.current);
@ -166,9 +166,10 @@ export function Profile({ closeProfile }) {
</Modal> </Modal>
<Modal centered closable={false} visible={state.editProfileDetails} footer={null} <Modal centered closable={false} visible={state.editProfileDetails} footer={null}
bodyStyle={{ padding: 16, ...state.menuStyle }} onCancel={actions.clearEditProfileDetails}> bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }} onCancel={actions.clearEditProfileDetails}>
<ProfileDetailsWrapper> <ProfileDetailsWrapper>
<div className="title">Profile Details</div>
<div class="info"> <div class="info">
<Input placeholder="Name" spellCheck="false" onChange={(e) => actions.setEditName(e.target.value)} <Input placeholder="Name" spellCheck="false" onChange={(e) => actions.setEditName(e.target.value)}
defaultValue={state.editName} autocapitalize="word" /> defaultValue={state.editName} autocapitalize="word" />

6
net/web/src/session/account/profile/Profile.styled.js
View File

@ -244,6 +244,12 @@ export const ProfileDetailsWrapper = styled.div`
justify-content: center; justify-content: center;
gap: 16px; gap: 16px;
.title {
font-size: 1.2rem;
display: flex;
justify-content: center;
}
.info { .info {
width: 100%; width: 100%;
background-color: ${props => props.theme.inputArea}; background-color: ${props => props.theme.inputArea};

3
net/web/src/session/account/profile/accountAccess/AccountAccess.jsx
View File

@ -165,8 +165,9 @@ export function AccountAccess() {
)} )}
</SealModal> </SealModal>
</Modal> </Modal>
<Modal centered closable={false} footer={null} visible={state.editLogin} bodyStyle={{ padding: 16, ...state.menuStyle }} onCancel={actions.clearEditLogin}> <Modal centered closable={false} footer={null} visible={state.editLogin} bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }} onCancel={actions.clearEditLogin}>
<LoginModal> <LoginModal>
<div className="title">Change Login</div>
<Input className="loginValue" placeholder="Username" spellCheck="false" onChange={(e) => actions.setEditHandle(e.target.value)} <Input className="loginValue" placeholder="Username" spellCheck="false" onChange={(e) => actions.setEditHandle(e.target.value)}
defaultValue={state.editHandle} autocomplete="username" autocapitalize="none" prefix={<UserOutlined />} /> defaultValue={state.editHandle} autocomplete="username" autocapitalize="none" prefix={<UserOutlined />} />

6
net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js
View File

@ -130,6 +130,12 @@ export const LoginModal = styled.div`
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
.title {
font-size: 1.2rem;
display: flex;
justify-content: center;
}
.loginValue { .loginValue {
background-color: ${props => props.theme.inputArea}; background-color: ${props => props.theme.inputArea};
color: ${props => props.theme.mainText}; color: ${props => props.theme.mainText};

2
net/web/src/session/identity/Identity.jsx
View File

@ -19,7 +19,7 @@ export function Identity({ openAccount, openCards, cardUpdated }) {
<span className="logoutMode">{ state.strings.allDevices }</span> <span className="logoutMode">{ state.strings.allDevices }</span>
<Switch onChange={(e) => all.current = e} size="small" /> <Switch onChange={(e) => all.current = e} size="small" />
</LogoutContent>, </LogoutContent>,
bodyStyle: { padding: 16, ...state.menuStyle }, bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
okText: state.strings.ok, okText: state.strings.ok,
onOk() { onOk() {
actions.logout(all.current); actions.logout(all.current);