FileNavigation - height control on long file path

minjk-bl · minjk-bl · commit 12ec20be2a63 · 2021-11-03T15:13:12.000+09:00
diff --git a/css/component/common.css b/css/component/common.css
@@ -84,6 +84,9 @@
 .wp50 {
     width: 50px;
 }
+.wp60 {
+    width: 60px;
+}
 .wp80 {
     width: 80px;
 }
diff --git a/css/component/fileNavigation.css b/css/component/fileNavigation.css
@@ -47,7 +47,8 @@
     .fileNavigationPage-inner {
         float: right;
         display: grid;
-        grid-template-rows: 30px auto min-content;
+        /* grid-template-rows: 30px auto min-content; */
+        grid-template-rows: min-content auto min-content;
         width: 80%;
         height: 100%; 
     }
@@ -107,7 +108,8 @@
   }
   .fileNavigationPage-menu {
     min-height: 30px;
-    height: 6%;
+    /* height: 6%; */
+    height: fit-content;
     padding-left: 10px;
     background-color: #EEE;
     border:  1px solid #ddd;;
@@ -127,7 +129,7 @@
     justify-content: center; 
   }
   .fileNavigationPage-menu-block {
-    margin-left: 10px;
+    padding: 0 35px 0 10px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -192,11 +194,11 @@
   .fileNavigationPage-closedBtn {
     position: fixed;
     z-index: 3;
-    right: 5px;
+    right: 10px;
     width: 20px;
     height: 20px;
     line-height: 20px;
-    top: 5px;
+    top: 3px;
     text-align: center;
   }
   .fileNavigationPage-closedBtn:hover {
diff --git a/src/component/fileNavigation/index.html b/src/component/fileNavigation/index.html
@@ -16,7 +16,7 @@
                          style='display: flex;
                                 flex-direction: column;
                                 justify-content: center;'>
-                        <div>
+                        <div class="wp60">
                             <button class='btn btn-default fileNavigationPage-btn-prev'
                                     style='padding: 2px 8px;'>
                                 <i class="fa fa-chevron-left" aria-hidden="true"></i>
@@ -41,7 +41,7 @@
                         </div>
                     </div>
                 </div>
-                <div class='fileNavigationPage-closedBtn'>X</div>
+                <div class='fileNavigationPage-closedBtn'><img src="/nbextensions/visualpython/resource/close_big.svg"></div>
                 <div class='fileNavigationPage-directory-container'>
                    
                     <div class='fileNavigationPage-body'></div>
diff --git a/src/pandas/fileNavigation/index.html b/src/pandas/fileNavigation/index.html
@@ -13,7 +13,7 @@
                  <div class='fileNavigationPage-menu'>
 
                     <div class="btn-group" id="move_up_down">
-                        <div>
+                        <div class="wp60">
                             <button class='btn btn-default fileNavigationPage-btn-prev'
                                     style='padding: 2px 8px;'>
                                 <i class="fa fa-chevron-left" aria-hidden="true"></i>
@@ -38,7 +38,7 @@
                         </div>
                     </div>
                 </div>
-                <div class='fileNavigationPage-closedBtn'>X</div>
+                <div class='fileNavigationPage-closedBtn'><img src="/nbextensions/visualpython/resource/close_big.svg"></div>
                 <div class='fileNavigationPage-directory-container'>
                     
                     <div class='fileNavigationPage-body'></div>

Original file line number	Diff line number	Diff line change
`@@ -84,6 +84,9 @@`
`84`	`84`	`.wp50 {`
`85`	`85`	`width: 50px;`
`86`	`86`	`}`
	`87`	`+.wp60 {`
	`88`	`+ width: 60px;`
	`89`	`+}`
`87`	`90`	`.wp80 {`
`88`	`91`	`width: 80px;`
`89`	`92`	`}`