make results one row

unstructuredstudio · Jan 22, 2024 · 1501837 · 1501837
1 parent 563dc1c
commit 1501837
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 20 deletions.
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/search_results/searchResultsStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/search_results/searchResultsStyles.js
@@ -44,6 +44,12 @@ export const styles = theme => ({
   projectsContainerStyle: {
     margin: 0,
   },
+  loggedOutResultsContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    maxHeight: '400px',
+    overflow: 'hidden',
+  },
   cardStyle: {
     display: 'flex',
     flexDirection: 'column',
@@ -121,7 +127,7 @@ export const styles = theme => ({
   transitionStyle: {
     height: '20em',
     marginTop: '-20em',
-    background: 'linear-gradient(0deg, rgba(255,255,255,1) 38%, rgba(212,46,46,0) 75%)',
+    background: 'linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(255,255,255,0) 100%)',
     position: 'relative'
   },
   loginCardStyle: {
@@ -207,6 +213,7 @@ export const staffPickStyleOverrides = (theme) => ({
     margin: 0
   },
   MessagePrimaryStyle: {
+    margin: 0,
     fontSize: '1.8rem',
     fontWeight: 700,
     [theme.breakpoints.down('600')]: {

diff --git a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
@@ -204,7 +204,7 @@ function SearchResults(props) {
                   "{getQueryParams(window.location.href).get('q')}"
                 </Typography>
               </Grid>
-              <div className={clsx(classes.creatorsContainerStyle, !props.auth?.token && classes.creatorsContainerLoggedOutStyle)}>
+              <div className={clsx(classes.creatorsContainerStyle, !props.auth?.token && classes.creatorsContainerLoggedOutStyle && classes.loggedOutResultsContainer)}>
               {getResults(
                 getQueryParams(window.location.href).get('type'),
                 results,
@@ -237,24 +237,26 @@ function SearchResults(props) {
                     >
                       {t('searchResults.errors.noResultDescription')}
                     </Typography>
-                    {staff_picks.map(staff_pick => (
-                      <StaffPick
-                        key={staff_pick.id}
-                        staff_pick={staff_pick}
-                        updateProjects={res =>
-                          handleSetState(
-                            updateStaffPicks(res, staff_pick.id, props, toast),
-                          )
-                        }
-                        styleOverrides={{
-                          root: staffPickClasses.root,
-                          mainContainer: staffPickClasses.mainContainerStyle,
-                          MessagePrimary: staffPickClasses.MessagePrimaryStyle,
-                        }}
-                        {...props}
-                      />
-                      ))
-                    }
+                    <div className={clsx(!props.auth?.token && classes.loggedOutResultsContainer)}>
+                      {staff_picks.map(staff_pick => (
+                        <StaffPick
+                          key={staff_pick.id}
+                          staff_pick={staff_pick}
+                          updateProjects={res =>
+                            handleSetState(
+                              updateStaffPicks(res, staff_pick.id, props, toast),
+                            )
+                          }
+                          styleOverrides={{
+                            root: staffPickClasses.root,
+                            mainContainer: staffPickClasses.mainContainerStyle,
+                            MessagePrimary: staffPickClasses.MessagePrimaryStyle,
+                          }}
+                          {...props}
+                        />
+                        ))
+                      }
+                    </div>
                   </>
                 )
               }