소스 검색

Fixes #3 allow the menu to be resizable
Refs #5 style of class container

isundil 1 년 전
부모
커밋
ad6f81af1d
2개의 변경된 파일14개의 추가작업 그리고 14개의 파일을 삭제
  1. 13 14
      public/stylesheets/main.css
  2. 1 0
      views/index.pug

+ 13 - 14
public/stylesheets/main.css

@@ -25,6 +25,10 @@ a {
     border: 1px solid var(--bs-border-color);
     border-radius: calc(var(--bs-border-radius) - 1px);
 }
+
+.page-index {
+    display: flex;
+}
 .button-wrapper {
     display: inline-flex;
     justify-content: end;
@@ -32,14 +36,12 @@ a {
 
 #menuBar {
     display: inline-block;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    max-width: 250px;
-    width: 100%;
+    min-width: 200px;
+    width: min(100%, 350px);
+    height: 100vh;
     border-right: 1px solid gray;
     overflow: auto;
+    resize: horizontal;
 }
 #menuBar > div {
     margin: 2em;
@@ -48,16 +50,13 @@ a {
     padding: 0 1.5em;
 }
 iframe#page {
-    display: inline-block;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    max-width: calc(100% - 250px);
-    height: 100%;
-    width: 100%;
+    display: inline-flex;
+    flex: 1;
     border: none;
 }
+#entity-page {
+    background: url("/img/OIG3.png") no-repeat center 22vh /44vh;
+}
 div.page {
     margin: 0 1em;
 }

+ 1 - 0
views/index.pug

@@ -5,6 +5,7 @@ block append scripts
   script(src='/javascripts/tree.js', language='javascript')
 
 block content
+  div(class='page-index')
     div(id="menuBar")
       div
         +treeroot(tree)