chore:add mobile search icon

bigfa · Jan 2, 2025 · c0ce007 · c0ce007
1 parent 4c3a771
commit c0ce007
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -14,6 +14,7 @@ latest version : `0.1.0`
 - update translation
 - add post like button
 - add copy post permalink
+- add mobile search icon
 
 ### 0.0.16
 

diff --git a/README_CN.md b/README_CN.md
@@ -14,6 +14,7 @@
 - 修复错误
 - 增加文章点赞
 - 增加分享链接复制
+- 增加移动端搜素按钮
 
 ### 0.0.16
 

diff --git a/build/css/misc.css b/build/css/misc.css
diff --git a/build/js/ts.js b/build/js/ts.js
@@ -68,6 +68,34 @@ var heraBase = /** @class */ (function () {
     };
     return heraBase;
 }());
+if (document.querySelector('.nav--clicker')) {
+    var footerLogo = document.querySelector('.nav--clicker');
+    if (footerLogo) {
+        footerLogo.addEventListener('click', function () {
+            var body = document.querySelector('body');
+            if (body) {
+                body.classList.toggle('is-readingMode');
+            }
+        });
+    }
+}
+if (document.querySelector('.menu--icon')) {
+    document.querySelector('.menu--icon').addEventListener('click', function () {
+        document.querySelector('.site--nav').classList.add('is-active');
+        document.querySelector('body').classList.add('menu--actived');
+    });
+}
+if (document.querySelector('.search--icon')) {
+    document.querySelector('.search--icon').addEventListener('click', function () {
+        document.querySelector('body').classList.toggle('search--actived');
+    });
+}
+if (document.querySelector('.mask')) {
+    document.querySelector('.mask').addEventListener('touchstart', function () {
+        document.querySelector('.site--nav').classList.remove('is-active');
+        document.querySelector('body').classList.remove('menu--actived');
+    });
+}
 window.findParent = function (t, e, n) {
     do {
         if (e(t))

diff --git a/header.php b/header.php
@@ -24,12 +24,17 @@
 <body <?php body_class(''); ?>>
     <main class="layout">
         <div class="navbar">
-            <div class="js-contentFixed">
+            <div class="moblie--icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="search--icon">
+                    <path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path>
+                </svg>
                 <svg class="menu--icon" width="1em" height="1em" viewBox="0 0 24 14" fill="currentColor" aria-hidden="true">
                     <line x1="24" y1="1" y2="1" stroke="currentColor" stroke-width="2"></line>
                     <line x1="24" y1="7" x2="4" y2="7" stroke="currentColor" stroke-width="2"></line>
                     <line x1="24" y1="13" x2="8" y2="13" stroke="currentColor" stroke-width="2"></line>
                 </svg>
+            </div>
+            <div class="js-contentFixed">
                 <div class="site--info">
                     <a href="<?php echo home_url(); ?>" class="avatar--wrapper">
                         <img src="<?php echo ($heraSetting->get_setting('logo') ? $heraSetting->get_setting('logo') :  get_template_directory_uri() . '/build/images/logo.png'); ?>" alt="<?php bloginfo('name'); ?>" class="avatar">

diff --git a/scss/components/_header.scss b/scss/components/_header.scss
@@ -277,8 +277,11 @@
     }
 }
 
-.menu--icon {
+.moblie--icon {
     display: none;
+    width: 92%;
+    position: relative;
+    z-index: 1000;
 }
 
 .search--area {
@@ -301,6 +304,10 @@
             margin-right: auto;
             // max-width: 100%;
         }
+        display: none;
+        .search--actived & {
+            display: flex;
+        }
     }
 
     .widget--links {
@@ -373,17 +380,15 @@
         display: flex;
         align-items: center;
         flex-direction: column;
-        padding-top: 15px;
+        padding-top: 0px;
     }
 
     .site--description {
         display: none;
     }
 
-    .menu--icon {
-        position: fixed;
-        right: 20px;
-        top: 20px;
-        display: block;
+    .moblie--icon {
+        display: flex;
+        justify-content: space-between;
     }
 }
diff --git a/scss/templates/_article.scss b/scss/templates/_article.scss
@@ -101,6 +101,10 @@
         &--subline {
             font-size: 16px;
         }
+
+        &--header {
+            padding-top: 10px;
+        }
     }
 }
 

diff --git a/ts/app.ts b/ts/app.ts
@@ -49,3 +49,35 @@ class heraBase {
         }, 3000);
     }
 }
+
+if (document.querySelector('.nav--clicker')) {
+    const footerLogo = document.querySelector('.nav--clicker');
+    if (footerLogo) {
+        footerLogo.addEventListener('click', function () {
+            const body = document.querySelector('body');
+            if (body) {
+                body.classList.toggle('is-readingMode');
+            }
+        });
+    }
+}
+
+if (document.querySelector('.menu--icon')) {
+    document.querySelector('.menu--icon')!.addEventListener('click', () => {
+        document.querySelector('.site--nav')!.classList.add('is-active');
+        document.querySelector('body')!.classList.add('menu--actived');
+    });
+}
+
+if (document.querySelector('.search--icon')) {
+    document.querySelector('.search--icon')!.addEventListener('click', () => {
+        document.querySelector('body')!.classList.toggle('search--actived');
+    });
+}
+
+if (document.querySelector('.mask')) {
+    document.querySelector('.mask')!.addEventListener('touchstart', () => {
+        document.querySelector('.site--nav')!.classList.remove('is-active');
+        document.querySelector('body')!.classList.remove('menu--actived');
+    });
+}
diff --git a/ts/modules/action.ts b/ts/modules/action.ts
@@ -14,32 +14,6 @@ class heraAction extends heraBase {
         this.is_archive = obvInit.is_archive;
         this.like_btn = document.querySelector(this.selctor);
 
-        if (document.querySelector('.nav--clicker')) {
-            const footerLogo = document.querySelector('.nav--clicker');
-            if (footerLogo) {
-                footerLogo.addEventListener('click', function () {
-                    const body = document.querySelector('body');
-                    if (body) {
-                        body.classList.toggle('is-readingMode');
-                    }
-                });
-            }
-        }
-
-        if (document.querySelector('.menu--icon')) {
-            document.querySelector('.menu--icon')!.addEventListener('click', () => {
-                document.querySelector('.site--nav')!.classList.add('is-active');
-                document.querySelector('body')!.classList.add('menu--actived');
-            });
-        }
-
-        if (document.querySelector('.mask')) {
-            document.querySelector('.mask')!.addEventListener('touchstart', () => {
-                document.querySelector('.site--nav')!.classList.remove('is-active');
-                document.querySelector('body')!.classList.remove('menu--actived');
-            });
-        }
-
         if (this.like_btn) {
             this.like_btn.addEventListener('click', () => {
                 this.handleLike();