Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display more than two panes correctly #63

Open
TheV360 opened this issue Dec 28, 2024 · 1 comment
Open

Display more than two panes correctly #63

TheV360 opened this issue Dec 28, 2024 · 1 comment

Comments

@TheV360
Copy link
Contributor

TheV360 commented Dec 28, 2024

Currently, when two panes are open, everything works swimmingly -- but as soon as three or more panes are open, the layout becomes untenable.

two panes are open

three panes are open

This is due to the multi-pane system only ever being made for "split panes", possibly with the intention of allowing these panes to be resized later.

I propose

[tab was then left open for an hour]

Iiiii pro-pose, yeah

[tab was then left open for 4 hours]

so i added this fancy horizontal scroll bar

Screenshot From 2024-12-27 22-05-06

could maybe be something to tide us over until any fancier stuff is implemented wrt panes (i put the <view-slot>s into a container element, then gave display: flex to the <not-sidebar> so that i could put FILL ROW onto the container element and then i removed the > CSS selector constraint on #\$main_slides > view-slot and its ilk) (i think that's all i've done) (if you don't want sizing the first box to behave differently from the others, maybe would also add a margin-left: -0.5em; and then unconditionally add the border-left to all <view-slot>s?)

@TheV360
Copy link
Contributor Author

TheV360 commented Dec 28, 2024

bare minimum

scroll-columns.patch
diff --git a/index.html b/index.html
index eca3db7..20892d8 100644
--- a/index.html
+++ b/index.html
@@ -192,8 +192,9 @@
 <!--=====\
 || MAIN ||
 \======-->
-<not-sidebar class='FILL ROW' id=$main_slides>
+<not-sidebar class='FILL ROW'>
 	<button id=$openSidebar class='toggle-sidebar'>| | |</button>
+	<div id=$main_slides class="FILL ROW"></div>
 </not-sidebar>
 
 
diff --git a/src/style.css b/src/style.css
index bd50098..927722a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -325,14 +325,13 @@ a:hover {
 }
 
 
+#\$main_slides {
+	overflow-x: auto;
+	margin-left: -0.5rem;
+}
 #\$main_slides > view-slot {
 	border-left: 0.5rem solid var(--databarbgcolor);
-	min-width: 4rem !important;
-	width: 50%;
-}
-#\$main_slides > view-slot:first-of-type {
-	border-left: none;
-	flex: 0mm;
+	width: 40%;
 }
 #\$main_slides > view-slot:last-of-type > view-header {
 	padding-right: 2.25rem;

This has several bugs, but is the gist of it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant