Move the sidebar to the left

beverleyy · beverleyy · commit ecc04e0b1f49 · 2025-08-26T14:58:07.000-07:00
diff --git a/_datasets/brouzet2021.md b/_datasets/brouzet2021.md
@@ -10,6 +10,7 @@ categories:
   - turbulent
   - threeD
   - jet
+  - numerical
 ---
 
 <div class="sidebar__right" style="top:200px; text-align: center;">
diff --git a/_datasets/chung2022.md b/_datasets/chung2022.md
@@ -7,6 +7,7 @@ header:
 description: Compressible Inert CH4-O2 Homogeneous Isotropic Turbulence DNS
 categories: 
 - nonreacting
+- numerical
 - threeD
 - turbulent
 - hit
diff --git a/_datasets/chung2024.md b/_datasets/chung2024.md
@@ -6,13 +6,15 @@ header:
   teaser: /assets/img/ico_chung2022.png
 description: Collection of BLASTNet Simulations
 categories: 
+- numerical
 - nonreacting
 - turbulent
 - threeD
 - hit
 - pipe
 - channel
 - jet
+- benchmark
 ---
 
 ![image](./assets/img/diversity.png)
diff --git a/_datasets/coulon.md b/_datasets/coulon.md
@@ -10,6 +10,7 @@ categories:
 - turbulent
 - threeD
 - jet
+- numerical
 ---
 
 <div class="sidebar__right" style="top: 130px; text-align: center;">
diff --git a/_datasets/gauding2022.md b/_datasets/gauding2022.md
@@ -9,6 +9,7 @@ categories:
 - nonreacting
 - threeD
 - hit
+- numerical
 - turbulent
 ---
 
diff --git a/_datasets/guo2022.md b/_datasets/guo2022.md
@@ -8,6 +8,7 @@ categories:
 - nonreacting
 - channel
 - turbulent
+- numerical
 - threeD
 description: Transcritical Channel Flow N2 Turbulence DNS
 ---
diff --git a/_datasets/ho2024.md b/_datasets/ho2024.md
@@ -10,6 +10,7 @@ categories:
 - jet
 - turbulent
 - threeD
+- numerical
 ---
 
 <div class="sidebar__right" style="top:200px; text-align: center;">
diff --git a/_datasets/jiang2021.md b/_datasets/jiang2021.md
@@ -9,6 +9,7 @@ categories:
 - reacting
 - channel
 - threeD
+- numerical
 - turbulent
 ---
 
diff --git a/_datasets/jung2021.md b/_datasets/jung2021.md
@@ -6,6 +6,7 @@ header:
   teaser: /assets/img/ico_jung2021.png
 description: Slot Burner Diluted Partially-Premixed H2-air Lifted Flame DNS
 categories: 
+- numerical
 - reacting
 - jet
 - turbulent
diff --git a/_datasets/pkyeung2025.md b/_datasets/pkyeung2025.md
@@ -6,6 +6,7 @@ description: Forced Homogeneous Isotropic Turbulence DNS with 3 Passive Scalars
 header:
   teaser: /assets/img/ico_pkyeung2025.png
 categories: 
+- numerical
 - nonreacting
 - hit
 - threeD
diff --git a/_datasets/poludnenko.md b/_datasets/poludnenko.md
@@ -10,6 +10,7 @@ categories:
 - hit
 - threeD
 - turbulent
+- numerical
 ---
 
 ![image](./assets/img/poludnenko.png)
diff --git a/_datasets/quentin2024.md b/_datasets/quentin2024.md
@@ -11,6 +11,7 @@ categories:
 - jet
 - threeD
 - turbulent
+- numerical
 ---
 <div style="text-align: center;">
     <img src="./assets/img/quentin2024.png" alt="Image 1" style="max-width: 100%;">
diff --git a/_datasets/roshan2024.md b/_datasets/roshan2024.md
@@ -12,6 +12,7 @@ categories:
 - pipe
 - turbulent 
 - threeD
+- numerical
 ---
 
 <!--
diff --git a/_datasets/savard.md b/_datasets/savard.md
@@ -9,6 +9,7 @@ categories:
 - reacting
 - threeD
 - turbulent
+- numerical
 ---
 
 <div style="text-align: center;">
diff --git a/_datasets/shantanu.md b/_datasets/shantanu.md
@@ -6,6 +6,7 @@ description: Decaying homogeneous isotropic turbulence DNS
 header:
   teaser: /assets/img/ico_shantanu2022.png
 categories: 
+- numerical
 - nonreacting
 - hit
 - turbulent
diff --git a/_datasets/sharma2024.md b/_datasets/sharma2024.md
@@ -9,7 +9,8 @@ categories:
 - reacting
 - jet
 - twoD
-- laminar 
+- laminar
+- numerical 
 ---
 
 <div style="text-align: center;">
diff --git a/_datasets/wang2024.md b/_datasets/wang2024.md
@@ -11,6 +11,8 @@ categories:
 - environmental
 - threeD
 - turbulent
+- numerical
+- benchmark
 ---
 
 <!--
diff --git a/_includes/datasets_filters.html b/_includes/datasets_filters.html
@@ -1,4 +1,4 @@
-<aside class="sidebar__right sticky">
+<aside class="sidebar__left sticky">
   <nav class="filters">
     <header>
       <h4 class="nav__title">
@@ -41,13 +41,20 @@ <h4 class="nav__title">
 	  <li><a href="#" data-filter=".environmental">Environmental</a></li>
         </ul>
       </li>
+      <li class="filter-group filter-categories comb" data-filter-group="ML">
+        <a href="#" data-filter=".benchmark">Benchmark Datasets</a>
+      </li>
+      <li class="filter-group filter-categories excl" data-filter-group="DataType">
+	<a href="#" data-filter=".numerical">Numerical Datasets</a>
+	<a href="#" data-filter=".experimental">Experimental Datasets</a>
+      </li>
     </ul>
   </nav>
 </aside>
 
-<div class="filter-group filter-categories">
+<div>
   <!--<h3><a href="/visualize">Visualize statistics here</a></h3>-->
-  <h2>BLASTNet Simulation Dataset</h2>
+  <h2>BLASTNet Datasets</h2>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
@@ -64,12 +71,16 @@ <h2>BLASTNet Simulation Dataset</h2>
     layoutMode: 'fitRows'
   });
 
+  window.addEventListener('resize', function(){
+    grid.layout();
+  });
+
   imagesLoaded(container).on('progress',function(){
     grid.layout();
   });
 
   var activeClass = "is-checked",
-      comboClass = "combo",
+      comboClass = "comb",
       exclClass = "excl",
       resetClass = "show-all";
 
diff --git a/_layouts/datasets.html b/_layouts/datasets.html
@@ -1,14 +1,28 @@
 ---
-layout: archive
+layout: default
 ---
 
-<p>{{ page.excerpt }}</p>
+{% if page.url != "/" and site.breadcrumbs %}
+  {% unless paginator %}
+    {% include breadcrumbs.html %}
+  {% endunless %}
+{% endif %}
 
-{% include datasets_filters.html %}
+<div id="main" role="main">
+  {% include sidebar.html %}
 
-{% assign entries_layout = page.entries_layout | default: 'list' %}
-<div class="entries-{{ entries_layout }}">
-  {% include documents-collection.html collection=page.collection sort_by=page.sort_by sort_order=page.sort_order type=entries_layout %}
-</div>
+  <div class="archive archive__left page__content">
+    {% unless page.header.overlay_color or page.header.overlay_image %}
+      <h1 id="page-title" class="archive__title page__title"{% if page.locale %} lang="{{ page.locale }}"{% endif %}>{{ page.title }}</h1>
+    {% endunless %}
+    <p class="archive__excerpt">{{ page.excerpt }}</p>
+
+    {% include datasets_filters.html %}
 
-{{ content }}
+    {% assign entries_layout = page.entries_layout | default: 'list' %}
+    <div class="entries-{{ entries_layout }}">
+      {% include documents-collection.html collection=page.collection sort_by=page.sort_by sort_order=page.sort_order type=entries_layout %}
+    </div>
+    {{ content }}
+  </div>
+</div>
diff --git a/_sass/stylesheets/_archive.scss b/_sass/stylesheets/_archive.scss
@@ -18,6 +18,28 @@
   }
 }
 
+// Additional class to flush sidebar to left
+.archive__left {
+  padding-inline-end: initial;
+
+  @include breakpoint($large) {
+    float: inline-start;
+    padding-inline-start: $right-sidebar-width-narrow;
+
+    p.archive__excerpt, h1.archive__title {
+      margin-left: -1 * $right-sidebar-width-narrow;
+    }
+  }
+
+  @include breakpoint($x-large) {
+    padding-inline-start: $right-sidebar-width;
+
+    p.archive__excerpt, h1.archive__title {
+      margin-left: -1 * $right-sidebar-width;
+    }
+  }
+}
+
 .archive__item {
   position: relative;
 
@@ -148,7 +170,7 @@
    Grid view
    ========================================================================== */
 
-.archive {
+.archive:not(.archive__left) {
   .grid__wrapper {
     /* extend grid elements to the right */
 
@@ -162,6 +184,17 @@
   }
 }
 
+.archive__left {
+  .grid__wrapper {
+    @include breakpoint($large) {
+      margin-inline-start: -1 * $right-sidebar-width-narrow;
+    }
+    @include breakpoint($x-large) {
+      margin-inline-start: -1 * $right-sidebar-width;
+    }
+  }
+}
+
 .grid__item {
   //margin-bottom: 1em;
 
@@ -431,7 +464,7 @@
    ========================================================================== */
 
 .wide {
-  .archive {
+  .archive:not(.archive__left) {
     @include breakpoint($large) {
       padding-inline-end: 0;
     }
@@ -440,6 +473,15 @@
       padding-inline-end: 0;
     }
   }
+
+  .archive__left {
+    @include breakpoint($large) {
+      padding-inline-start:0;
+    }
+    @include breakpoint($x-large) {
+      padding-inline-start:0;
+    }
+  }
 }
 
 /* Place inside a single layout */
diff --git a/_sass/stylesheets/_sidebar.scss b/_sass/stylesheets/_sidebar.scss
@@ -75,6 +75,45 @@
   }
 }
 
+.sidebar__left {
+  margin-bottom: 1em;
+
+  + h1, + h2, + h3, + h4, + h5, + h6 {
+    margin-top:0;
+  }
+
+  @include breakpoint($large) {
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    width: $right-sidebar-width-narrow;
+    margin-inline-start: -1 * $right-sidebar-width-narrow;
+    padding-inline-end: 1em;
+    z-index:10;
+
+    &.sticky {
+      @include clearfix();
+      position: -webkit-sticky;
+      position: sticky;
+      // top: 2em;
+      top: $masthead-height;
+      float: inline-start;
+
+      .toc, .filters {
+        .toc__menu, .filters__menu {
+	  overflow-y: auto;
+	  max-height: calc(100vh - 7em);
+	}
+      }
+    }
+  }
+
+  @include breakpoint($x-large) {
+    width: $right-sidebar-width;
+    margin-inline-start: -1 * $right-sidebar-width;
+  }
+}
+
 .sidebar__right {
   margin-bottom: 1em;
 
@@ -126,6 +165,18 @@
   }
 }
 
+.splash .sidebar__left {
+  @include breakpoint($large) {
+    position: relative;
+    float: inline-start;
+    margin-inline-start: 0;
+  }
+
+  @include breakpoint($x-large) {
+    margin-inline-start: 0;
+  }
+}
+
 /*
    Author profile and links
    ========================================================================== */
@@ -356,3 +407,21 @@
     margin-inline-end: initial;
   }
 }
+
+.wide .sidebar__left {
+  margin-bottom:1em;
+
+  @include breakpoint($large) {
+    position: initial;
+    top: initial;
+    inset-inline-start: initial;
+    width: initial;
+    margin-inline-start: initial;
+    padding-inline-start: initial;
+    z-index: initial;
+
+    &.sticky {
+      float: none;
+    }
+  }
+}
