Merge pull request #61 from ShivaBhattacharjee/optimisation-and-seo-and-search

Improved added onclick search and removed on change search to reduce …

Author: ShivaBhattacharjee

public/robot.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

src/Components/Header.jsx

@@ -98,9 +98,13 @@ const Header = forwardRef((props, ref) => {
   const handelChange = (e) => {
     const val = e.target.value;
     setInputVal(val);
-    props.handelChanges(val);
   };
 
+
+  const handleSearchSubmit = () => {
+    props.handelChanges(inputVal);
+  }
+
   useImperativeHandle(ref, () => ({
     emptySearch() {
       setInputVal("");
@@ -177,7 +181,11 @@ const Header = forwardRef((props, ref) => {
             placeholder="I am looking for...."
             value={inputVal}
             onChange={handelChange}
+            required
           />
+          <button className="search-submit" onClick={handleSearchSubmit} type="submit">
+            <i class="fa-solid fa-magnifying-glass">
+            </i></button>
         </div>
         {!isLoggedIn ?
           <li className="login-tab">
@@ -207,6 +215,9 @@ const Header = forwardRef((props, ref) => {
         <div className="mobile-search" ref={menuRef}>
           <div className="search-field">
             <input type="text" className={`active-search-mobile ${searchActive ? 'active' : ''}`} placeholder="I am looking for" value={inputVal} onChange={handelChange} />
+            <button className={`search-submit-mobile ${searchActive ? 'active' : ''}`} onClick={handleSearchSubmit} type="submit">
+              <i class="fa-solid fa-magnifying-glass">
+              </i></button>
             <div className="field-icon-search" onClick={MobileView}>
               <ion-icon name="search-outline"></ion-icon>
             </div>

src/Components/SearchJSX.jsx

@@ -13,15 +13,19 @@ export default function SearchJSX(props) {
       {Object.keys(props.searchResult).length === 0 ? (
         <div align="center">
           <h4 className="no-results" style={{
-            fontSize: "35px", paddingTop:"20px",
+            fontSize: "35px", paddingTop: "20px",
           }}>No Results found</h4>
           <br /><br />
         </div>
       ) : (
         <div align="center">
+          {
+            window.innerWidth > 600 ? null :<> <br /><br /><br /></>
+          }
+
           <div className="movies-grid" >
-          {props.searchResult?.results?.map((rec) => (
-            <Card rec={rec} key={rec.id} ep="false" handelClick={handelClick} />
+            {props.searchResult?.results?.map((rec) => (
+              <Card rec={rec} key={rec.id} ep="false" handelClick={handelClick} />
             ))}
           </div>
         </div>

src/Pages/movie.jsx

@@ -41,7 +41,7 @@ const Movie = (props) => {
           <section className="movies">
             <div className="filter-bar">
               <div className="heading">
-                <h3>Anime Movies</h3>
+                <h3>Movies</h3>
               </div>
             </div>
             <div className="movies-grid" ref={ref}>

src/Pages/topAiring.jsx

@@ -21,7 +21,7 @@ const TopAnimeAiring = (props) => {
 
   return (
     <>
-          <Helmet>
+      <Helmet>
         <meta property="og:title" content="AnimeTrix" />
         <meta property="og:description" content="AnimeTrix is a Free Anime streaming website which you can watch English Subbed and Dubbed Anime online without creating any Account" />
         <meta property="og:image" content="https://user-images.githubusercontent.com/95211406/234815538-17642467-574a-42ec-96d1-75c2a67bebd3.png" />
@@ -36,13 +36,13 @@ const TopAnimeAiring = (props) => {
         <title>Watch Download Anime For Free On AnimeTrix</title>
       </Helmet>
       {Object.keys(props.recent).length === 0 ? (
-   <OtherPagesCard title="Top-Airing"/>
+        <OtherPagesCard title="Top-Airing" />
       ) : (
         <>
           <section className="movies">
             <div className="filter-bar">
               <div className="heading">
-                <h3>Top-Airing</h3>
+                <h3>Trending</h3>
               </div>
             </div>
 

src/css/card.css

@@ -114,7 +114,7 @@
   }
 }
 
-@media(max-width:535px){
+@media(max-width:550px){
   .card-head{
     height: 300px;
   }

src/css/navbar.css

@@ -72,7 +72,28 @@
   color: var(--text-color);
   width: 300px;
 }
-
+.search-submit{
+  background: transparent;
+  padding: 2px;
+  color: var(--button-color);
+  position: absolute;
+  left: 86%;
+  font-size: 20px;
+  top: calc(35% - 10px);;
+  bottom: 20px;
+}
+.search-submit-mobile{
+  display: none;
+}
+.search-submit-mobile.active{
+  display: block;
+  position: absolute;
+  bottom: calc(90% - 139px);
+  right: 16%;
+  font-size: 25px;
+  background: transparent;
+  z-index: 999;
+}
 .search-btn {
   background: none;
   border: none;
@@ -270,7 +291,6 @@
     left: 0;
     right: 0;
     margin: auto;
-    z-index: 9999;
     border-radius: 14px;
     background-color: var(--search-background);
     color: #fff;