Split scroll between titles and folders for BM manager

- Auditors: @bsclifton - Close #5076
brave · May 1, 2017 · 01c2efd · 01c2efd
1 parent 8b7c008
commit 01c2efd
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 52 deletions.
diff --git a/app/renderer/components/common/scrollableContent.js b/app/renderer/components/common/scrollableContent.js
diff --git a/js/about/bookmarks.js b/js/about/bookmarks.js
@@ -448,7 +448,7 @@ class AboutBookmarks extends React.Component {
     this.refs.bookmarkSearch.focus()
   }
   render () {
-    return <div className='siteDetailsPage' onClick={this.onClick}>
+    return <div className='siteDetailsPage bookmarksManager' onClick={this.onClick}>
       <div className='siteDetailsPageHeader'>
         <AboutPageSectionTitle data-l10n-id='bookmarkManager' />
         <div className='headerActions'>

diff --git a/less/about/bookmarks.less b/less/about/bookmarks.less
@@ -11,6 +11,11 @@
   height: 100%;
   min-height: 100vh;
 
+  &.bookmarksManager {
+    position: fixed;
+    width: 100%;
+  }
+
   .siteDetailsPageHeader {
     display: flex;
     padding: 24px;
@@ -51,6 +56,11 @@
 
       > .bookmarkFolderList {
         display: block;
+        overflow-x: auto;
+        overflow-y: auto;
+        max-width: 410px;
+        // viewport - header size - header size
+        max-height: calc(~"100vh - 84px - 35px");
 
         .listItem >* {
           color: @buttonColor;
@@ -76,6 +86,8 @@
     .organizeView {
       flex-grow: 5;
       border-left: 1px solid @braveOrange;
+      overflow: auto;
+      max-height: 100vh;
 
       .sortableTable {
         user-select: none;
@@ -101,8 +113,10 @@
           }
         }
         .title {
-          overflow: hidden;
-          text-overflow: ellipsis;
+          div {
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
           span {
             vertical-align: middle;
           }
@@ -114,7 +128,9 @@
         }
         tr:hover {
           .bookmarkLocation {
-            display: inline-block;
+            display: inline;
+            overflow: hidden;
+            text-overflow: ellipsis;
           }
         }
         tr.selected:hover {
@@ -185,3 +201,27 @@
 .exportBookmarks {
   -webkit-mask-image: url('../../img/toolbar/bookmarks_export.svg');
 }
+
+// Reset styles for small breakpoints
+@media (max-width: @breakpointForBookmarksPage) {
+  .siteDetailsPage.bookmarksManager {
+    position: static;
+  }
+
+  .siteDetailsPage {
+    .siteDetailsPageContent {
+      .organizeView {
+        overflow: visible;
+        max-height: inherit;
+      }
+      .folderView {
+        > .bookmarkFolderList {
+          overflow-x: visible;
+          overflow-y: visible;
+          max-width: inherit;
+          max-height: inherit;
+        }
+      }
+    }
+  }
+}
diff --git a/less/variables.less b/less/variables.less
@@ -155,6 +155,7 @@
 
 @breakpointWideViewport: 1000px;
 @breakpointNarrowViewport: 600px;
+@breakpointForBookmarksPage: 565px;
 @breakpointExtensionButtonPadding: 720px;
 @breakpointSmallWin32: 650px;
 @breakpointTinyWin32: 500px;