Fixed sessions tab for mobile devices

This commit is contained in:
nizune 2021-07-07 22:15:52 +02:00
parent ce67c5acdb
commit 0f0c6cfbae
2 changed files with 44 additions and 21 deletions

View file

@ -312,6 +312,22 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
flex-direction: row;
.flextest {
display: flex;
gap: 12px;
flex-grow: 1;
}
@media only screen and (max-width: 900px) {
align-items: unset;
flex-direction: column;
> button {
width: 100%;
}
}
} }
.entry { .entry {

View file

@ -128,29 +128,35 @@ export function Sessions() {
</span> </span>
)} )}
<div className={styles.session}> <div className={styles.session}>
<div className={styles.icon}> <div className={styles.flextest}>
{getIcon(session)} <div className={styles.icon}>
<div>{getSystemIcon(session)}</div> {getIcon(session)}
</div> <div>{getSystemIcon(session)}</div>
<div className={styles.info}> </div>
<input <div className={styles.info}>
type="text" <input
className={styles.name} type="text"
value={session.friendly_name} className={styles.name}
autocomplete="off" value={session.friendly_name}
/> autocomplete="off"
<span className={styles.time}>
<Text
id="app.settings.pages.sessions.created"
fields={{
time_ago: dayjs(
session.timestamp,
).fromNow(),
}}
/> />
</span> <span className={styles.time}>
<Text
id="app.settings.pages.sessions.created"
fields={{
time_ago: dayjs(
session.timestamp,
).fromNow(),
}}
/>
</span>
</div>
</div> </div>
{deviceId !== session.id && (
{deviceId !== session.id && (
<Button <Button
onClick={async () => { onClick={async () => {
setDelete([ setDelete([
@ -173,6 +179,7 @@ export function Sessions() {
<Text id="app.settings.pages.logOut" /> <Text id="app.settings.pages.logOut" />
</Button> </Button>
)} )}
</div> </div>
</div> </div>
))} ))}