fix: fix scrollbar issue for #12

phodal · Apr 4, 2020 · 4be1f76 · 4be1f76
1 parent 9e2c8c7
commit 4be1f76
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 26 deletions.
diff --git a/projects/ledge-render/src/lib/chart/ledge-pure-echarts/ledge-pure-echarts.component.html b/projects/ledge-render/src/lib/chart/ledge-pure-echarts/ledge-pure-echarts.component.html
@@ -1,3 +1,3 @@
-<div class="normal-echarts chart" #chart>
+<div class="chart" #chart>
 
 </div>
diff --git a/src/app/shared/components/markdown-render/markdown-render.component.html b/src/app/shared/components/markdown-render/markdown-render.component.html
@@ -1,13 +1,12 @@
 <div *ngIf="showToc">
-  <mat-drawer-container class="markdown-toc">
-    <mat-drawer mode="side" opened class="left-drawer">
+  <div class="markdown-toc">
+    <div class="left-drawer">
       <ul class="toc" #toc [class.sticky]="sticky"></ul>
-    </mat-drawer>
-    <mat-drawer-content class="right-content" #drawerContent>
+    </div>
+    <div class="right-content">
       <ledge-render [content]="data" *ngIf="data" (scroll)="handleScroll()"></ledge-render>
-
-    </mat-drawer-content>
-  </mat-drawer-container>
+    </div>
+  </div>
 </div>
 
 <div *ngIf="!showToc" class="no-toc-markdown">

diff --git a/src/app/shared/components/markdown-render/markdown-render.component.scss b/src/app/shared/components/markdown-render/markdown-render.component.scss
@@ -1,15 +1,22 @@
 :host {
   position: relative;
+  box-sizing: border-box;
 }
 
 .markdown-toc {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  overflow-y: scroll;
+
   .left-drawer {
-    width: 15%;
-    min-width: 120px;
-    min-height: 100vh;
+    width: 20%;
+    min-width: 160px;
+    height: calc(100vh - 66px);
   }
 
   .right-content {
+    width: 100%;
   }
 }
 
@@ -20,9 +27,10 @@
 
 .sticky {
   position: fixed;
-  overflow: scroll;
+  overflow-y: scroll;
   z-index: 10;
-  height: calc(100vh - 66px);
+  top: 0;
+  height: 100vh;
 }
 
 .scroll-to-top {

diff --git a/src/styles/_markdown.scss b/src/styles/_markdown.scss
@@ -591,6 +591,7 @@
   pre {
     margin: 1em 0 !important;
     padding: 0 4px !important;
+
     code {
       padding: 0;
       font-size: 0.8em;
@@ -611,8 +612,10 @@
         margin-right: 0;
       }
     }
+
     li {
       list-style: none;
+
       a {
         color: #000;
 
@@ -648,16 +651,3 @@
   }
 }
 
-.normal-echarts {
-  width: 600px;
-  height: 400px;
-}
-
-.toolset-placeholder {
-  width: auto;
-  display: block;
-  height: auto;
-  border-radius: 4px;
-  border: 2px solid #ff4081;
-  margin: 2.5em auto;
-}