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

making admin dashboard more mobile friendly

Browse Source
This commit is contained in:
Roland Osborne 2022-08-24 22:36:41 -07:00
parent 2fb82d42b7
commit e852c419bc
6 changed files with 54 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
net/web/src/admin/dashboard/Dashboard.jsx
View File

@ -79,10 +79,11 @@ export function Dashboard({ token, config, logout }) {
footer={[ <Button type="primary" onClick={() => actions.setShowCreate(false)}>OK</Button> ]} footer={[ <Button type="primary" onClick={() => actions.setShowCreate(false)}>OK</Button> ]}
onCancel={() => actions.setShowCreate(false)}> onCancel={() => actions.setShowCreate(false)}>
<CreateLayout> <CreateLayout>
<div>{createLink()}</div> <div class="url">
<Button icon={<CopyOutlined />} size="small" <div class="link">{createLink()}</div>
onClick={() => onClipboard(createLink())} <Button icon={<CopyOutlined />} size="small"
/> onClick={() => onClipboard(createLink())} />
</div>
</CreateLayout> </CreateLayout>
</Modal> </Modal>
</DashboardWrapper> </DashboardWrapper>

19
net/web/src/admin/dashboard/Dashboard.styled.js
View File

@ -47,6 +47,8 @@ export const DashboardWrapper = styled.div`
.settings { .settings {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
width: 40px;
} }
.add { .add {
@ -84,6 +86,19 @@ export const SettingsLayout = styled(Space)`
} }
`; `;
export const CreateLayout = styled(Space)` export const CreateLayout = styled.div`
white-space: nowrap; .url {
display: flex;
flex-direction: row;
max-width: 100%;
.link {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
flex-grow: 1;
min-width: 0;
padding-right: 8px;
}
}
` `

9
net/web/src/admin/dashboard/accountItem/AccountItem.jsx
View File

@ -57,10 +57,11 @@ export function AccountItem({ token, item, remove }) {
footer={[ <Button type="primary" onClick={() => actions.setShowAccess(false)}>OK</Button> ]} footer={[ <Button type="primary" onClick={() => actions.setShowAccess(false)}>OK</Button> ]}
onCancel={() => actions.setShowAccess(false)}> onCancel={() => actions.setShowAccess(false)}>
<AccessLayout> <AccessLayout>
<div>{accessLink()}</div> <div class="url">
<Button icon={<CopyOutlined />} size="small" <div class="link">{accessLink()}</div>
onClick={() => onClipboard(accessLink())} <Button icon={<CopyOutlined />} size="small"
/> onClick={() => onClipboard(accessLink())}/>
</div>
</AccessLayout> </AccessLayout>
</Modal> </Modal>
</AccountItemWrapper> </AccountItemWrapper>

17
net/web/src/admin/dashboard/accountItem/AccountItem.styled.js
View File

@ -82,6 +82,19 @@ export const DeleteButton = styled(Button)`
color: red; color: red;
` `
export const AccessLayout = styled(Space)` export const AccessLayout = styled.div`
white-space: nowrap; .url {
display: flex;
flex-direction: row;
width: 100%;
.link {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
flex-grow: 1;
min-width: 0;
padding-right: 8px;
}
}
` `

12
net/web/src/admin/prompt/Prompt.jsx
View File

@ -26,6 +26,16 @@ export function Prompt({ login }) {
} }
} }
const placeholder = () => {
if (state.unclaimed === true) {
return 'Set Access Token';
}
if (state.unclaimed === false) {
return 'Access Token';
}
return '';
}
return ( return (
<PromptWrapper> <PromptWrapper>
<div class="app-title"> <div class="app-title">
@ -39,7 +49,7 @@ export function Prompt({ login }) {
<Form name="basic" wrapperCol={{ span: 24, }}> <Form name="basic" wrapperCol={{ span: 24, }}>
<Form.Item name="password"> <Form.Item name="password">
<Input.Password placeholder="Admin Password" spellCheck="false" onChange={(e) => actions.setPassword(e.target.value)} <Input.Password placeholder={placeholder()} spellCheck="false" onChange={(e) => actions.setPassword(e.target.value)}
autocomplete="current-password" onKeyDown={(e) => keyDown(e)} prefix={<LockOutlined />} size="large" /> autocomplete="current-password" onKeyDown={(e) => keyDown(e)} prefix={<LockOutlined />} size="large" />
</Form.Item> </Form.Item>

2
net/web/src/admin/prompt/usePrompt.hook.js
View File

@ -24,7 +24,7 @@ export function usePrompt() {
const checkStatus = async () => { const checkStatus = async () => {
try { try {
let status = await getNodeStatus(); let status = await getNodeStatus();
updateState({ uncliamed: status }); updateState({ unclaimed: status });
} }
catch(err) { catch(err) {
console.log("failed to check node status"); console.log("failed to check node status");