From 5b7ab2652beeec7aee6e1ebf00b6813a11944be4 Mon Sep 17 00:00:00 2001
From: Simon Ser <contact@emersion.fr>
Date: Sun, 6 Jun 2021 17:27:05 +0200
Subject: [PATCH] Improve buffer header layout on mobile
Put buffer title above buffer description.
---
components/buffer-header.js | 6 +++---
style.css | 22 +++++++++++++++++-----
2 files changed, 20 insertions(+), 8 deletions(-)
diff --git a/components/buffer-header.js b/components/buffer-header.js
index 7ac9ae5..944a4e0 100644
--- a/components/buffer-header.js
+++ b/components/buffer-header.js
@@ -160,8 +160,8 @@ export default function BufferHeader(props) {
}
return html`
- <span class="title">${name}</span>
- <span class="description">${description}</span>
- <span class="actions">${actions}</span>
+ <div class="title">${name}</div>
+ ${description ? html`<div class="description">${description}</div>` : null}
+ <div class="actions">${actions}</div>
`;
}
diff --git a/style.css b/style.css
index 23a0056..ec4ad34 100644
--- a/style.css
+++ b/style.css
@@ -177,19 +177,28 @@ button.danger:hover {
grid-row: 1;
grid-column: 2;
- display: flex;
- flex-direction: row;
+ display: grid;
+ grid-template-rows: auto auto;
+ grid-template-columns: 1fr auto;
}
#buffer-header .title {
display: none;
padding: 5px 10px;
- align-self: center;
+ font-weight: bold;
+ grid-row: 1;
+ grid-column: 1;
}
#buffer-header .description {
- flex-grow: 1;
padding: 5px 10px;
+ grid-row: 2;
+ grid-column: 1;
+}
+
+#buffer-header .actions {
+ grid-row: 1 / 3;
+ grid-column: 2;
}
#buffer-header .status-here {
@@ -651,9 +660,12 @@ kbd {
border-left: none;
}
+ #buffer-header {
+ grid-template-columns: 1fr min-content;
+ }
+
#buffer-header .title {
display: block;
- font-weight: bold;
}
}