From 0f0c6cfbae5f75f9bbcab6fb93a51ae9d8c8ec23 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Wed, 7 Jul 2021 22:15:52 +0200
Subject: [PATCH] Fixed sessions tab for mobile devices
---
src/pages/settings/panes/Panes.module.scss | 16 +++++++
src/pages/settings/panes/Sessions.tsx | 49 ++++++++++++----------
2 files changed, 44 insertions(+), 21 deletions(-)
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index c807dda..5e02383 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -312,6 +312,22 @@
display: flex;
align-items: center;
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 {
diff --git a/src/pages/settings/panes/Sessions.tsx b/src/pages/settings/panes/Sessions.tsx
index 489dea9..ffd60a9 100644
--- a/src/pages/settings/panes/Sessions.tsx
+++ b/src/pages/settings/panes/Sessions.tsx
@@ -128,29 +128,35 @@ export function Sessions() {
</span>
)}
<div className={styles.session}>
- <div className={styles.icon}>
- {getIcon(session)}
- <div>{getSystemIcon(session)}</div>
- </div>
- <div className={styles.info}>
- <input
- type="text"
- className={styles.name}
- value={session.friendly_name}
- autocomplete="off"
- />
- <span className={styles.time}>
- <Text
- id="app.settings.pages.sessions.created"
- fields={{
- time_ago: dayjs(
- session.timestamp,
- ).fromNow(),
- }}
+ <div className={styles.flextest}>
+ <div className={styles.icon}>
+ {getIcon(session)}
+ <div>{getSystemIcon(session)}</div>
+ </div>
+ <div className={styles.info}>
+ <input
+ type="text"
+ className={styles.name}
+ value={session.friendly_name}
+ autocomplete="off"
/>
- </span>
+ <span className={styles.time}>
+ <Text
+ id="app.settings.pages.sessions.created"
+ fields={{
+ time_ago: dayjs(
+ session.timestamp,
+ ).fromNow(),
+ }}
+ />
+ </span>
+
+
+ </div>
</div>
- {deviceId !== session.id && (
+
+
+ {deviceId !== session.id && (
<Button
onClick={async () => {
setDelete([
@@ -173,6 +179,7 @@ export function Sessions() {
<Text id="app.settings.pages.logOut" />
</Button>
)}
+
</div>
</div>
))}
--
GitLab