martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-11 19:19: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,
colors: {},
menuStyle: {},
textStyle: {},
languages: [{ value: null, label: 'Default' }, { value: 'en', label: 'English' }, { value: 'fr', label: 'Français' }],
language: null,
strings: en,

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

@ -143,7 +143,10 @@ export const SessionWrapper = styled.div`
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
overscroll-behavior: none;
z-index: 2;
background-color: ${props => props.theme.baseColor};
}
.spinner {
@ -241,7 +244,7 @@ export const SessionWrapper = styled.div`
position: relative;
}
.bottom {
height: 48px;
height: 40px;
position: relative;
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>
<Switch onChange={(e) => all.current = e} size="small" />
</LogoutContent>,
bodyStyle: { padding: 16, ...state.menuStyle },
bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
okText: state.strings.ok,
onOk() {
actions.logout(all.current);
@ -166,9 +166,10 @@ export function Profile({ closeProfile }) {
</Modal>
<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>
<div className="title">Profile Details</div>
<div class="info">
<Input placeholder="Name" spellCheck="false" onChange={(e) => actions.setEditName(e.target.value)}
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;
gap: 16px;
.title {
font-size: 1.2rem;
display: flex;
justify-content: center;
}
.info {
width: 100%;
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>
</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>
<div className="title">Change Login</div>
<Input className="loginValue" placeholder="Username" spellCheck="false" onChange={(e) => actions.setEditHandle(e.target.value)}
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;
gap: 16px;
.title {
font-size: 1.2rem;
display: flex;
justify-content: center;
}
.loginValue {
background-color: ${props => props.theme.inputArea};
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>
<Switch onChange={(e) => all.current = e} size="small" />
</LogoutContent>,
bodyStyle: { padding: 16, ...state.menuStyle },
bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
okText: state.strings.ok,
onOk() {
actions.logout(all.current);