~emersion/public-inbox

gamja: Improve style for mobile panel UI v1 PROPOSED

Drew DeVault: 1
 Improve style for mobile panel UI

 2 files changed, 40 insertions(+), 9 deletions(-)
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git:

curl -s https://lists.sr.ht/~emersion/public-inbox/patches/23330/mbox | git am -3
Learn more about email & git
View this thread in the archives

[PATCH gamja] Improve style for mobile panel UI Export this patch

This makes the expanders easier to see/understand intuitively.
---
Screenshot: https://l.sr.ht/bNVN.png

 components/app.js | 14 ++++++++++----
 style.css         | 35 ++++++++++++++++++++++++++++++-----
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/components/app.js b/components/app.js
index 7bc4ba8..c9d2f07 100644
--- a/components/app.js
+++ b/components/app.js
@@ -1179,8 +1179,11 @@ export default class App extends Component {
						class="expander"
						onClick=${this.toggleMemberList}
					>
						<span></span>
						<span></span>
						<!-- CSS magic -->
						<span class="expander-right">
							<span></span>
							<span></span>
						</span>
					</button>
					<section>
						<section id="member-list-header">
@@ -1261,8 +1264,11 @@ export default class App extends Component {
					class="expander"
					onClick=${this.toggleBufferList}
				>
					<span></span>
					<span></span>
					<!-- CSS magic -->
					<span class="expander-left">
						<span></span>
						<span></span>
					</span>
				</button>
			</section>
			${bufferHeader}
diff --git a/style.css b/style.css
index 5b7c3f2..43d8f83 100644
--- a/style.css
+++ b/style.css
@@ -122,14 +122,39 @@ button.danger:hover {
	background: var(--expander-background-hover);
}

.expander span {
	display: block;
	width: 100%;
	height: 2px;
	margin-bottom: 2px;
.expander > span {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 15px;
	height: 35px;
	border-style: solid;
	border-color: var(--expander-border);
	background: var(--expander-background-hover);
	position: absolute;
}

.expander > span > span {
	border-width: 1px 0;
	border-style: solid;
	border-color: var(--expander-border);
	width: 100%;
	height: 2px;
	margin-bottom: 2px;
}

.expand .expander > span {
	display: none;
}

.expander .expander-left {
	left: 0;
	border-width: 1px 1px 1px 0;
}

.expander .expander-right {
	right: 0;
	border-width: 1px 0 1px 1px;
}

#buffer-list ul {
-- 
2.32.0
TBH, I'm not sure I like the edges approach. Maybe adding two buttons
in the header to toggle the sidebars would be better.