refactor: simplify basic layout (#1039)

A dynamically expanding/collapsing topbar is difficult to maintain and not very useful.
cotes2020 · May 16, 2023 · d81f836 · d81f836
1 parent 52f5ee9
commit d81f836
Show file tree

Hide file tree

Showing 11 changed files with 26 additions and 294 deletions.
diff --git a/_includes/post-paginator.html b/_includes/post-paginator.html
@@ -1,6 +1,6 @@
 <!-- The paginator for post list on HomgPage. -->
 
-<ul class="pagination align-items-center mt-4 ps-lg-2">
+<ul class="pagination align-items-center my-4 ps-lg-2">
   <!-- left arrow -->
   {% if paginator.previous_page %}
     {% assign prev_url = paginator.previous_page_path | relative_url %}

diff --git a/_includes/topbar.html b/_includes/topbar.html
@@ -3,7 +3,7 @@
 <div id="topbar-wrapper">
   <div
     id="topbar"
-    class="container d-flex align-items-center justify-content-between h-100 px-3 px-md-4 px-xxl-5"
+    class="container d-flex align-items-center justify-content-between h-100"
   >
     <span id="breadcrumb">
       {% assign paths = page.url | split: '/' %}

diff --git a/_javascript/modules/components/back-to-top.js b/_javascript/modules/components/back-to-top.js
@@ -4,10 +4,7 @@
 
 export function back2top() {
   $(window).on('scroll', () => {
-    if (
-      $(window).scrollTop() > 50 &&
-      $('#sidebar-trigger').css('display') === 'none'
-    ) {
+    if ($(window).scrollTop() > 50) {
       $('#back-to-top').fadeIn();
     } else {
       $('#back-to-top').fadeOut();

diff --git a/_javascript/modules/components/convert-title.js b/_javascript/modules/components/convert-title.js
diff --git a/_javascript/modules/components/search-display.js b/_javascript/modules/components/search-display.js
@@ -4,7 +4,7 @@
 const $btnSbTrigger = $('#sidebar-trigger');
 const $btnSearchTrigger = $('#search-trigger');
 const $btnCancel = $('#search-cancel');
-const $main = $('#main');
+const $content = $('#main>.row');
 const $topbarTitle = $('#topbar-title');
 const $searchWrapper = $('#search-wrapper');
 const $resultWrapper = $('#search-result-wrapper');
@@ -58,7 +58,7 @@ class ResultSwitch {
       // the block method must be called before $(#main) unloaded.
       ScrollBlocker.on();
       $resultWrapper.removeClass(C_UNLOADED);
-      $main.addClass(C_UNLOADED);
+      $content.addClass(C_UNLOADED);
       ScrollBlocker.resultVisible = true;
     }
   }
@@ -70,7 +70,7 @@ class ResultSwitch {
         $hints.removeClass(C_UNLOADED);
       }
       $resultWrapper.addClass(C_UNLOADED);
-      $main.removeClass(C_UNLOADED);
+      $content.removeClass(C_UNLOADED);
 
       // now the release method must be called after $(#main) display
       ScrollBlocker.off();

diff --git a/_javascript/modules/components/topbar-switcher.js b/_javascript/modules/components/topbar-switcher.js
diff --git a/_javascript/modules/components/utils/scroll-helper.js b/_javascript/modules/components/utils/scroll-helper.js
diff --git a/_javascript/modules/layouts/topbar.js b/_javascript/modules/layouts/topbar.js
@@ -1,9 +1,5 @@
-import { convertTitle } from '../components/convert-title';
 import { displaySearch } from '../components/search-display';
-import { switchTopbar } from '../components/topbar-switcher';
 
 export function initTopbar() {
-  convertTitle();
   displaySearch();
-  switchTopbar();
 }
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -19,16 +19,15 @@
 <html lang="{{ site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
   {% include head.html %}
 
-  <body data-topbar-visible="true">
+  <body>
     {% include sidebar.html lang=lang %}
-    {% include topbar.html lang=lang %}
 
     <div id="main-wrapper" class="d-flex justify-content-center">
       <div id="main" class="container px-xxl-5">
+        {% include topbar.html lang=lang %}
         {{ content }}
+        {% include search-results.html lang=lang %}
       </div>
-
-      {% include search-results.html lang=lang %}
     </div>
 
     {% include footer.html lang=lang %}