Fixed search grids

ita-social-projects · Nov 24, 2024 · d54bb1b · d54bb1b
1 parent 9c49ec5
commit d54bb1b
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 40 deletions.
diff --git a/FrontEnd/src/pages/SearchPage/Search.jsx b/FrontEnd/src/pages/SearchPage/Search.jsx
@@ -8,7 +8,7 @@ import styles from './search.module.scss';
 import PropTypes from 'prop-types';
 import useSWR from 'swr';
 
-const ITEMS_PER_PAGE = 6;
+const ITEMS_PER_PAGE = 16;
 
 export function Search({ isAuthorized }) {
   const [searchResults, setSearchResults] = useState([]);

diff --git a/FrontEnd/src/pages/SearchPage/SearchField/SearchResults.jsx b/FrontEnd/src/pages/SearchPage/SearchField/SearchResults.jsx
@@ -19,9 +19,9 @@ const SearchResults = ({
   return (
     <div className={styles['new-companies-block']}>
       {!error && (
-          <Row className={styles['row']} gutter={[32, 32]}>
+          <Row justify={'start'} gutter={[0, 24]}>
             {displayedResults.map((result, resultIndex) => (
-              <Col className={styles['col']} key={resultIndex} xs={24} sm={24} md={12} lg={6}>
+              <Col key={resultIndex} xs={24} md={12} xl={6}>
                 <CompanyCard
                   profile={result}
                   isAuthorized={isAuthorized}

diff --git a/FrontEnd/src/pages/SearchPage/SearchField/SearchResults.module.css b/FrontEnd/src/pages/SearchPage/SearchField/SearchResults.module.css
@@ -1,35 +1,19 @@
 .new-companies-block {
-  margin-top: 10px;
-  padding: 0 8%;
-
-}
-
-
-.col {
-  flex: 0 0 auto;
-  margin-bottom: 32px;
+  width: 375px;
+  padding: 18px 0px 38px 0px;
 }
 
 
-@media (max-width: 768px) {
-  .col {
-    max-width: 100%;
-    flex-basis: 100%;
+@media only screen and (min-width: 768px) {
+  .new-companies-block {
+    width: 768px;
   }
 }
 
-@media (min-width: 769px) and (max-width: 1512px) {
-  .col {
-    max-width: 50%;
-    flex-basis: 50%;
-  }
-}
-
-
-@media (min-width: 1513px) {
-  .custom-col {
-    max-width: 25%;
-    flex-basis: 25%;
+@media only screen and (min-width: 1512px) {
+  .new-companies-block {
+    width: 1304px;
+    height: 365px;
   }
 }
 
diff --git a/FrontEnd/src/pages/SearchPage/search.module.scss b/FrontEnd/src/pages/SearchPage/search.module.scss
@@ -1,5 +1,14 @@
 .main_block_outer {
-  padding-top: 10px;
+  width: 375px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: var(--new-companies-background-color);
+  margin: auto;
+  min-height: 1200px;
+}
+.new-companies-result_pages {
+  padding: 40px;
 }
 
 .new-companies-main__error {
@@ -20,7 +29,6 @@
 .new-companies-search_count {
   display: flex;
   margin: auto;
-  padding-left: 10%;
 }
 
 .search_field_entered_value {
@@ -72,27 +80,37 @@
 
 
 
-@media only screen and (min-width: 1512px){
+
+@media only screen and (min-width: 768px){
     .search_results_text {
-      font-size: 41px;
+      font-size: 34px;
     }
     .search_field_entered_value {
-      font-size: 41px;
+      font-size: 34px;
     }
-
     .search_result_error {
-      font: normal normal bold 48px/2 var(--font-main);
+          font: normal normal bold 48px/2 var(--font-main);
+        }
+
+    .main_block_outer {
+      width: 768px;
     }
 }
 
-@media only screen and (min-width: 768px){
+@media only screen and (min-width: 1512px){
     .search_results_text {
-      font-size: 34px;
+      font-size: 41px;
     }
     .search_field_entered_value {
-      font-size: 34px;
+      font-size: 41px;
     }
+
     .search_result_error {
-          font: normal normal bold 48px/2 var(--font-main);
-        }
+      font: normal normal bold 48px/2 var(--font-main);
+    }
+
+    .main_block_outer {
+      width: 1512px;
+       height: 597px;
+    }
 }