From e8bf2df72f85a4f99273acf9e024471e0d0e9a39 Mon Sep 17 00:00:00 2001
From: Tim Ryan <id@timryan.org>
Date: Sat, 19 Jan 2019 12:40:53 -0500
Subject: [PATCH] Fixes header to top of page, fixes sidebar from causing page
 height to grow

---
 edit-frontend/src/app/app.tsx       |  21 ++--
 edit-frontend/styles/edit-text.scss |   7 --
 edit-frontend/styles/layout.scss    | 154 +++++++++++++++-------------
 3 files changed, 92 insertions(+), 90 deletions(-)

diff --git a/edit-frontend/src/app/app.tsx b/edit-frontend/src/app/app.tsx
index 515febd5..489b7c5b 100644
--- a/edit-frontend/src/app/app.tsx
+++ b/edit-frontend/src/app/app.tsx
@@ -417,16 +417,17 @@ export class EditorFrame extends React.Component {
             <div id="edit-sidebar" className={this.state.sidebarExpanded ? 'expanded' : ''}>
               <div id="edit-sidebar-inner">
                 <div id="edit-sidebar-inner-inner">
-                  <div id="recently-viewed">
-                    <p><span id="edit-sidebar-new"><button onClick={_ => {
-                      window.location.href = '/?from='; // TODO this is a hack
-                    }}>New</button></span>Recently Viewed</p>
-                    <div id="recently-viewed-list">{
-                      recentlyViewed().map((doc) => (
-                        <div><a href={doc.path} title={'/' + doc.path}>{doc.path}</a></div>
-                      ))
-                    }</div>
-                    <div id="edit-sidebar-inner-inner"></div>
+                  <div id="edit-sidebar-scrollable">
+                    <div id="recently-viewed">
+                      <p><span id="edit-sidebar-new"><button onClick={_ => {
+                        window.location.href = '/?from='; // TODO this is a hack
+                      }}>New</button></span>Recently Viewed</p>
+                      <div id="recently-viewed-list">{
+                        recentlyViewed().map((doc) => (
+                          <div><a href={doc.path} title={'/' + doc.path}>{doc.path}</a></div>
+                        ))
+                      }</div>
+                    </div>
                   </div>
                   <div id="edit-sidebar-footer">
                     Read more at <a href="http://docs.edit.io">docs.edit.io</a>.<br />Or contribute to <a href="http://github.com/tcr/edit-text">edit-text on Github</a>.
diff --git a/edit-frontend/styles/edit-text.scss b/edit-frontend/styles/edit-text.scss
index 3b99679e..bdbcec29 100644
--- a/edit-frontend/styles/edit-text.scss
+++ b/edit-frontend/styles/edit-text.scss
@@ -253,10 +253,3 @@ span.Link:hover::before {
     padding: 2px 5px;
     color: white;
 }
-
-// Debugging
-
-// Spans should never be successive.
-span + span {
-    outline: thin solid #32a1ce;
-}
diff --git a/edit-frontend/styles/layout.scss b/edit-frontend/styles/layout.scss
index fa4eadbc..c2e3d5a7 100644
--- a/edit-frontend/styles/layout.scss
+++ b/edit-frontend/styles/layout.scss
@@ -21,21 +21,24 @@ body {
     height: 100%;
 
     #edit-layout {
-        flex: 1;
         display: flex;
         flex-direction: row;
+        overflow: auto;
+        flex-grow: 1;
 
         #edit-sidebar {
             width: 0;
             display: flex;
             overflow: visible;
             flex-direction: column;
+            align-self: stretch;
 
             // When expanded, expand #edit-sidebar-inner.
-            &.expanded {
-                #edit-sidebar-inner {
-                    width: 300px;
-                }
+            #edit-sidebar-inner {
+                width: 0;
+            }
+            &.expanded #edit-sidebar-inner {
+                width: 300px;
             }
 
             #edit-sidebar-inner {
@@ -45,98 +48,103 @@ body {
                 background: #eee;
                 z-index: 1000;
                 border-right: 1px #999 solid;
+
                 display: flex;
-                flex: 1;
                 flex-direction: column;
+                height: 100%;
 
-                width: 0;
-
+                // To fix all contents at 300px even when animating the drawer
+                // opening, this inner item re-fixes the width at 300px.
                 #edit-sidebar-inner-inner {
-                    box-sizing: border-box;
                     width: 300px;
                     display: flex;
                     flex: 1;
                     flex-direction: column;
+                    overflow: auto;
 
-                    #recently-viewed {
-                        padding: 1px 20px;
-                        flex: 1;
-                        overflow: auto;
-                    }
-
-                    #edit-sidebar-footer {
-                        flex: 0;
-                        margin: 0 15px;
-                    }
+                    // Scrollable contents inside here.
                 }
             }
+        }
 
-            #edit-sidebar-footer {
-                border-top: 1px solid #ccc;
-                padding: 9px 10px 17px;
-                text-align: center;
-                font-size: 0.9em;
-                opacity: 0.6;
-            }
+        #edit-outer {
+            flex: 1;
+            overflow: auto;
+        }
+    }
+}
 
-            #recently-viewed {
-                p {
-                    font-size: 1.2em;
-                    margin: 1.3em 0 0.5em;
-                    font-weight: 500;
-                    color: #444;
-                }
+// Edit sidebar styling
+#edit-sidebar {
+    #edit-sidebar-footer {
+        flex: 0;
+        margin: 0 15px;
+        border-top: 1px solid #ccc;
+        padding: 9px 10px 17px;
+        text-align: center;
+        font-size: 0.9em;
+        opacity: 0.6;
+    }
 
-                #edit-sidebar-new {
-                    float: right;
-                    margin-top: -4px;
-                    
-                    button {
-                        border: 1px solid #aaa;
-                        background: #fff;
-                        font-size: 12px;
-                        padding: 5px 10px;
-                        text-transform: uppercase;
-                        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
-                        cursor: pointer;
-                    }
-                }
+    #edit-sidebar-scrollable {
+        overflow: auto;
+        flex-grow: 1;
 
-                #recently-viewed-list:empty::after {
-                    content: 'No documents to display.';
+        #recently-viewed {
+            padding: 1px 20px;
+            margin-bottom: 20px;
+
+            p {
+                font-size: 1.2em;
+                margin: 1.3em 0 0.5em;
+                font-weight: 500;
+                color: #444;
+            }
+
+            #edit-sidebar-new {
+                float: right;
+                margin-top: -4px;
+                
+                button {
+                    border: 1px solid #aaa;
+                    background: #fff;
+                    font-size: 12px;
+                    padding: 5px 10px;
+                    text-transform: uppercase;
+                    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+                    cursor: pointer;
                 }
+            }
 
-                #recently-viewed-list > * {
-                    a { text-decoration: none; }
-                    &:hover a { text-decoration: underline; }
+            #recently-viewed-list:empty::after {
+                content: 'No documents to display.';
+            }
 
-                    a {
-                        display: block;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        overflow: hidden;
+            #recently-viewed-list > * {
+                a { text-decoration: none; }
+                &:hover a { text-decoration: underline; }
 
-                        padding: 0.5em 0 0.25em 0.4em;
+                a {
+                    display: block;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    overflow: hidden;
 
-                        font-size: 18px;
-                        &:not(:hover) {
-                            color: #000000;
-                        }
-                    }
+                    padding: 0.5em 0 0.25em 0.4em;
 
-                    a::before {
-                        content: '\01F4CB';
-                        margin-right: 13px;
-                        filter: grayscale(60%) contrast(130%);
-                        opacity: 0.8;
+                    font-size: 18px;
+                    &:not(:hover) {
+                        color: #000000;
                     }
                 }
-            }
-        }
 
-        #edit-outer {
-            flex: 1;
-            overflow: auto;
+                a::before {
+                    content: '\01F4CB';
+                    margin-right: 13px;
+                    filter: grayscale(60%) contrast(130%);
+                    opacity: 0.8;
+                }
+            }
         }
     }
 }