vertical orientation for phones

2024-11-09 11:26:42 -08:00
parent 3daf6b4dc2
commit e814ebfb02
3 changed files with 42 additions and 10 deletions
--- a/playground/style.css
+++ b/playground/style.css
@@ -8,16 +8,34 @@
 #editor {
  height: 100%;
 }
-.wrapper {
+.wrapper.horizontal {
  display: flex;
  flex-direction: row;
  height: 100%;
 }
-.wrapper > div {
+.wrapper.horizontal > div {
  flex: 1 1;
  /* allow smaller than natural */
  width: 100px;
 }
+.wrapper.vertical {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.wrapper.vertical .tabPanel.left {
+  flex: .6 .6;
+  height: 100px;
+}
+.wrapper.vertical .tabPanel.right {
+  flex: .4 .4;
+  height: 100px;
+}
+.tabBar button {
+  border: none;
+  padding: none;
+  background: inherit;
+}
 .tabPanel {
  display: flex;
  flex-direction: column;