Enhance browser search experience (#2621)

* Change DOM order of left sidebar * Change flex order to bring sidebar to left visually * Update test package files to reflect the changes
dart-lang · Apr 22, 2021 · 819b1c4 · 819b1c4
1 parent 6efbf78
commit 819b1c4
Show file tree

Hide file tree

Showing 31 changed files with 185 additions and 179 deletions.
diff --git a/lib/resources/styles.css b/lib/resources/styles.css
@@ -77,6 +77,7 @@ main {
 
 .sidebar-offcanvas-left {
   flex: 0 1 230px;
+  order: 1;
   overflow-y: scroll;
   padding: 20px 0 15px 30px;
   margin: 5px 20px 0 0;
@@ -93,13 +94,15 @@ main {
 
 .main-content {
   flex: 1;
+  order: 2;
   overflow-y: scroll;
   padding: 10px 20px 0 20px;
   visibility: hidden; /* shown by Javascript after scroll position restore */
 }
 
 .sidebar-offcanvas-right {
   flex: 0 1 12em;
+  order: 3;
   overflow-y: scroll;
   padding: 20px 15px 15px 15px;
   margin-top: 5px;

diff --git a/lib/templates/html/404error.html b/lib/templates/html/404error.html
@@ -1,11 +1,5 @@
 {{>head}}
 
-  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
-    {{>search_sidebar}}
-    <h5><span class="package-name">{{self.name}}</span> <span class="package-kind">{{self.kind}}</span></h5>
-    {{>packages}}
-  </div>
-
   <div id="dartdoc-main-content" class="main-content">
     <h1>404: Something's gone wrong :-(</h1>
 
@@ -21,6 +15,12 @@ <h1>404: Something's gone wrong :-(</h1>
     </section>
   </div> <!-- /.main-content -->
 
+  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
+    {{>search_sidebar}}
+    <h5><span class="package-name">{{self.name}}</span> <span class="package-kind">{{self.kind}}</span></h5>
+    {{>packages}}
+  </div>
+
   <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right">
   </div>
 

diff --git a/lib/templates/html/category.html b/lib/templates/html/category.html
@@ -1,11 +1,5 @@
 {{>head}}
 
-<div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
-  {{>search_sidebar}}
-  <h5><span class="package-name">{{parent.name}}</span> <span class="package-kind">{{parent.kind}}</span></h5>
-  {{>packages}}
-</div>
-
 <div id="dartdoc-main-content" class="main-content">
   {{#self}}
   <h1><span class="kind-category">{{name}}</span> {{kind}}</h1>
@@ -121,6 +115,13 @@ <h2>Exceptions / Errors</h2>
   {{/self}}
 
 </div> <!-- /.main-content -->
+
+<div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
+  {{>search_sidebar}}
+  <h5><span class="package-name">{{parent.name}}</span> <span class="package-kind">{{parent.kind}}</span></h5>
+  {{>packages}}
+</div>
+
 <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right">
   <h5>{{self.name}} {{self.kind}}</h5>
   {{>sidebar_for_category}}

diff --git a/lib/templates/html/class.html b/lib/templates/html/class.html
@@ -1,11 +1,5 @@
 {{>head}}
 
-  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
-    {{>search_sidebar}}
-    <h5>{{parent.name}} {{parent.kind}}</h5>
-    {{{sidebarForLibrary}}}
-  </div>
-
   <div id="dartdoc-main-content" class="main-content">
     {{#self}}
       <div>{{>source_link}}<h1><span class="kind-class">{{{nameWithGenerics}}}</span> {{kind}} {{>feature_set}} {{>categorization}}</h1></div>
@@ -173,6 +167,12 @@ <h2>Constants</h2>
 
   </div> <!-- /.main-content -->
 
+  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
+    {{>search_sidebar}}
+    <h5>{{parent.name}} {{parent.kind}}</h5>
+    {{{sidebarForLibrary}}}
+  </div>
+
   <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right">
     {{{sidebarForContainer}}}
   </div><!--/.sidebar-offcanvas-->

diff --git a/lib/templates/html/constructor.html b/lib/templates/html/constructor.html
@@ -1,11 +1,5 @@
 {{>head}}
 
-  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
-    {{>search_sidebar}}
-    <h5>{{parent.name}} {{parent.kind}}</h5>
-    {{{sidebarForContainer}}}
-  </div><!--/.sidebar-offcanvas-left-->
-
   <div id="dartdoc-main-content" class="main-content">
     {{#self}}
       <div>{{>source_link}}<h1><span class="kind-constructor">{{{nameWithGenerics}}}</span> {{kind}} {{>feature_set}}</h1></div>
@@ -33,6 +27,12 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
     {{/constructor}}
   </div> <!-- /.main-content -->
 
+  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
+    {{>search_sidebar}}
+    <h5>{{parent.name}} {{parent.kind}}</h5>
+    {{{sidebarForContainer}}}
+  </div><!--/.sidebar-offcanvas-left-->
+
   <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right">
   </div><!--/.sidebar-offcanvas-->
 

diff --git a/lib/templates/html/enum.html b/lib/templates/html/enum.html
@@ -1,11 +1,5 @@
 {{>head}}
 
-  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
-    {{>search_sidebar}}
-    <h5>{{parent.name}} {{parent.kind}}</h5>
-    {{{sidebarForLibrary}}}
-  </div>
-
   <div id="dartdoc-main-content" class="main-content">
     {{#self}}
       <div>{{>source_link}}<h1><span class="kind-enum">{{{name}}}</span> {{kind}} {{>feature_set}} {{>categorization}}</h1></div>
@@ -163,6 +157,12 @@ <h2>Static Methods</h2>
     {{/eNum}}
   </div> <!-- /.main-content -->
 
+  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
+    {{>search_sidebar}}
+    <h5>{{parent.name}} {{parent.kind}}</h5>
+    {{{sidebarForLibrary}}}
+  </div>
+
   <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right">
     {{{sidebarForContainer}}}
   </div><!--/.sidebar-offcanvas-->

diff --git a/lib/templates/html/extension.html b/lib/templates/html/extension.html
@@ -1,11 +1,5 @@
 {{>head}}
 
-<div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
-    {{>search_sidebar}}
-    <h5>{{parent.name}} {{parent.kind}}</h5>
-    {{{sidebarForLibrary}}}
-</div>
-
 <div id="dartdoc-main-content" class="main-content">
     {{#self}}
     <div>{{>source_link}}<h1><span class="kind-class">{{{nameWithGenerics}}}</span> {{kind}} {{>feature_set}} {{>categorization}}</h1></div>
@@ -98,6 +92,12 @@ <h2>Constants</h2>
 
 </div> <!-- /.main-content -->
 
+<div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
+    {{>search_sidebar}}
+    <h5>{{parent.name}} {{parent.kind}}</h5>
+    {{{sidebarForLibrary}}}
+</div>
+
 <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right">
     {{{sidebarForContainer}}}
 </div><!--/.sidebar-offcanvas-->

diff --git a/lib/templates/html/function.html b/lib/templates/html/function.html
@@ -1,11 +1,5 @@
 {{>head}}
 
-  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
-    {{>search_sidebar}}
-    <h5>{{parent.name}} {{parent.kind}}</h5>
-    {{{sidebarForLibrary}}}
-  </div><!--/.sidebar-offcanvas-left-->
-
   <div id="dartdoc-main-content" class="main-content">
     {{#self}}
       <div>{{>source_link}}<h1><span class="kind-function">{{{nameWithGenerics}}}</span> {{kind}} {{>feature_set}} {{>categorization}}</h1></div>
@@ -22,6 +16,12 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
     {{/function}}
   </div> <!-- /.main-content -->
 
+  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
+    {{>search_sidebar}}
+    <h5>{{parent.name}} {{parent.kind}}</h5>
+    {{{sidebarForLibrary}}}
+  </div><!--/.sidebar-offcanvas-left-->
+
   <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right">
   </div><!--/.sidebar-offcanvas-->
 

diff --git a/lib/templates/html/index.html b/lib/templates/html/index.html
@@ -1,11 +1,5 @@
 {{>head}}
 
-  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
-    {{>search_sidebar}}
-    <h5 class="hidden-xs"><span class="package-name">{{self.name}}</span> <span class="package-kind">{{self.kind}}</span></h5>
-    {{>packages}}
-  </div>
-
   <div id="dartdoc-main-content" class="main-content">
     {{#defaultPackage}}
       {{>documentation}}
@@ -35,6 +29,12 @@ <h3>{{name}}</h3>
 
   </div> <!-- /.main-content -->
 
+  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
+    {{>search_sidebar}}
+    <h5 class="hidden-xs"><span class="package-name">{{self.name}}</span> <span class="package-kind">{{self.kind}}</span></h5>
+    {{>packages}}
+  </div>
+
   <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right">
   </div>
 

diff --git a/lib/templates/html/library.html b/lib/templates/html/library.html
@@ -1,11 +1,5 @@
 {{>head}}
 
-  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
-    {{>search_sidebar}}
-    <h5><span class="package-name">{{parent.name}}</span> <span class="package-kind">{{parent.kind}}</span></h5>
-    {{>packages}}
-  </div>
-
   <div id="dartdoc-main-content" class="main-content">
     {{#self}}
       <div>{{>source_link}}<h1><span class="kind-library">{{{name}}}</span> {{kind}} {{>feature_set}} {{>categorization}}</h1></div>
@@ -125,6 +119,12 @@ <h2>Exceptions / Errors</h2>
 
   </div> <!-- /.main-content -->
 
+  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
+    {{>search_sidebar}}
+    <h5><span class="package-name">{{parent.name}}</span> <span class="package-kind">{{parent.kind}}</span></h5>
+    {{>packages}}
+  </div>
+
   <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right">
     <h5>{{self.name}} {{self.kind}}</h5>
     {{{sidebarForLibrary}}}

diff --git a/lib/templates/html/method.html b/lib/templates/html/method.html
@@ -1,11 +1,5 @@
 {{>head}}
 
-  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
-    {{>search_sidebar}}
-    <h5>{{parent.name}} {{parent.kind}}</h5>
-    {{{sidebarForContainer}}}
-  </div><!--/.sidebar-offcanvas-->
-
   <div id="dartdoc-main-content" class="main-content">
     {{#self}}
       <div>{{>source_link}}<h1><span class="kind-method">{{{nameWithGenerics}}}</span> {{kind}} {{>feature_set}}</h1></div>
@@ -23,6 +17,12 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
     {{/method}}
   </div> <!-- /.main-content -->
 
+  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
+    {{>search_sidebar}}
+    <h5>{{parent.name}} {{parent.kind}}</h5>
+    {{{sidebarForContainer}}}
+  </div><!--/.sidebar-offcanvas-->
+
   <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right">
   </div><!--/.sidebar-offcanvas-->
 

diff --git a/lib/templates/html/mixin.html b/lib/templates/html/mixin.html
@@ -1,11 +1,5 @@
 {{>head}}
 
-  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
-    {{>search_sidebar}}
-    <h5>{{parent.name}} {{parent.kind}}</h5>
-    {{{sidebarForLibrary}}}
-  </div>
-
   <div id="dartdoc-main-content" class="main-content">
     {{#self}}
       <div>{{>source_link}}<h1><span class="kind-mixin">{{{nameWithGenerics}}}</span> {{kind}} {{>feature_set}} {{>categorization}}</h1></div>
@@ -172,6 +166,12 @@ <h2>Constants</h2>
     {{/mixin}}
   </div> <!-- /.main-content -->
 
+  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
+    {{>search_sidebar}}
+    <h5>{{parent.name}} {{parent.kind}}</h5>
+    {{{sidebarForLibrary}}}
+  </div>
+
   <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right">
     {{{sidebarForContainer}}}
   </div><!--/.sidebar-offcanvas-->

diff --git a/lib/templates/html/property.html b/lib/templates/html/property.html
@@ -1,11 +1,5 @@
 {{>head}}
 
-  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
-    {{>search_sidebar}}
-    <h5>{{parent.name}} {{parent.kind}}</h5>
-    {{{sidebarForContainer}}}
-  </div><!--/.sidebar-offcanvas-->
-
   <div id="dartdoc-main-content" class="main-content">
     {{#self}}
       <div>{{>source_link}}<h1><span class="kind-property">{{name}}</span> {{kind}} {{>feature_set}}</h1></div>
@@ -34,6 +28,12 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
     {{/self}}
   </div> <!-- /.main-content -->
 
+  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
+    {{>search_sidebar}}
+    <h5>{{parent.name}} {{parent.kind}}</h5>
+    {{{sidebarForContainer}}}
+  </div><!--/.sidebar-offcanvas-->
+
   <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right">
   </div><!--/.sidebar-offcanvas-->
 

diff --git a/lib/templates/html/top_level_property.html b/lib/templates/html/top_level_property.html
@@ -1,11 +1,5 @@
 {{>head}}
 
-  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
-    {{>search_sidebar}}
-    <h5>{{parent.name}} {{parent.kind}}</h5>
-    {{{sidebarForLibrary}}}
-  </div><!--/.sidebar-offcanvas-left-->
-
   <div id="dartdoc-main-content" class="main-content">
     {{#self}}
       <div>{{>source_link}}<h1><span class="kind-top-level-property">{{{name}}}</span> {{kind}} {{>feature_set}} {{>categorization}}</h1></div>
@@ -30,6 +24,12 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
     {{/self}}
   </div> <!-- /.main-content -->
 
+  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
+    {{>search_sidebar}}
+    <h5>{{parent.name}} {{parent.kind}}</h5>
+    {{{sidebarForLibrary}}}
+  </div><!--/.sidebar-offcanvas-left-->
+
   <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right">
   </div><!--/.sidebar-offcanvas-->
 

diff --git a/lib/templates/html/typedef.html b/lib/templates/html/typedef.html
@@ -1,11 +1,5 @@
 {{>head}}
 
-  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
-    {{>search_sidebar}}
-    <h5>{{parent.name}} {{parent.kind}}</h5>
-    {{{sidebarForLibrary}}}
-  </div><!--/.sidebar-offcanvas-left-->
-
   <div id="dartdoc-main-content" class="main-content">
     {{#self}}
       <div>{{>source_link}}<h1><span class="kind-typedef">{{{nameWithGenerics}}}</span> {{kind}} {{>feature_set}} {{>categorization}}</h1></div>
@@ -24,6 +18,12 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
 
   </div> <!-- /.main-content -->
 
+  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
+    {{>search_sidebar}}
+    <h5>{{parent.name}} {{parent.kind}}</h5>
+    {{{sidebarForLibrary}}}
+  </div><!--/.sidebar-offcanvas-left-->
+
   <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right">
   </div><!--/.sidebar-offcanvas-->
 

diff --git a/testing/test_package_custom_templates/templates/404error.html b/testing/test_package_custom_templates/templates/404error.html
@@ -1,11 +1,5 @@
 {{>head}}
 
-  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
-    {{>search_sidebar}}
-    <h5><span class="package-name">{{self.name}}</span> <span class="package-kind">{{self.kind}}</span></h5>
-    {{>packages}}
-  </div>
-
   <div id="dartdoc-main-content" class="main-content">
     <h1>404: Something's gone wrong :-(</h1>
 
@@ -21,6 +15,12 @@ <h1>404: Something's gone wrong :-(</h1>
     </section>
   </div> <!-- /.main-content -->
 
+  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">
+    {{>search_sidebar}}
+    <h5><span class="package-name">{{self.name}}</span> <span class="package-kind">{{self.kind}}</span></h5>
+    {{>packages}}
+  </div>
+
   <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right">
   </div>