improve search for non-logged-in users (#1087)

* style page and add login card * fix misaligned login form in search results * change styles for creator search * implement no results found design * make results one row * made some major refactors Issue: #802 Signed-off-by: Ndibe Raymond Olisaemeka <rolisaemeka-ctr@wikimedia.org> Co-authored-by: Ndibe Raymond Olisaemeka <rolisaemeka-ctr@wikimedia.org>
unstructuredstudio · Jun 17, 2024 · 85aad49 · 85aad49
1 parent ac3f8cd
commit 85aad49
Show file tree

Hide file tree

Showing 18 changed files with 1,320 additions and 1,118 deletions.
diff --git a/zubhub_backend/zubhub/creators/utils.py b/zubhub_backend/zubhub/creators/utils.py
diff --git a/zubhub_backend/zubhub/projects/utils.py b/zubhub_backend/zubhub/projects/utils.py
@@ -478,6 +478,9 @@ def perform_project_search(
         if can_view(user, project):
             result.append(project)
 
+    if not user.is_authenticated:
+        result = result[:4]
+
     return result
 
 

diff --git a/zubhub_backend/zubhub/projects/views.py b/zubhub_backend/zubhub/projects/views.py
@@ -218,6 +218,8 @@ def get_queryset(self):
             .filter(search_vector=query)
             .order_by("-rank")
         )
+        if not self.request.user.is_authenticated:
+            tags = tags[:4]
         return tags
 
 

diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -30,7 +30,12 @@
       "createActivity": "CREATE ACTIVITY",
       "createActivityMenu": "Create Activity",
       "unpublishedActivities": "Unpublished Activities",
-      "myActivities": "My Activities"
+      "myActivities": "My Activities",
+      "searchType": {
+        "projects": "Projects",
+        "creators": "Creators",
+        "tags": "Tags"
+        }
     },
     "sidebar":{
       "logout": "Logout",
@@ -258,7 +263,7 @@
   },
 
   "projects": {
-    "1":"Explore, ",
+    "1":"Explore,",
     "2": "Create, Share!",
     "shareProject": "Share your work",
     "exploreIdeas": "Explore Ideas",
@@ -480,7 +485,16 @@
     },
     "errors": {
       "unexpected": "Uh oh! Seems like we hit a snag :( Maybe try again later?",
-      "noResult": "We could not find anything for your search term! Maybe try to search something else?"
+      "noResult": "We could not find anything for your search term! Maybe try to search something else?",
+      "noResult2": "Sorry, but we couldn't find any results for",
+      "noResultDescription": "Try searching for something else or browse our suggestions!"
+    },
+    "loginCard": {
+      "title": {
+        "projects": "Log in or sign up to search for projects",
+        "creators": "Log in or sign up to search for users",
+        "tags": "Log in or sign up to search for projects with specific tags"
+      }
     }
   },
 
@@ -567,7 +581,7 @@
     },
     "deleteProjectToastSuccess": "Your project was deleted successfully!",
     "socialShare": {
-      "fbwa": "Check out this project on ZubHub! ",
+      "fbwa": "Check out this project on ZubHub!",
       "copySuccess": "Link successfully copied to clipboard!",
       "copyFail": "Hmmm... something went wrong trying to copy that link :("
     },
@@ -649,7 +663,7 @@
     },
     "activityLog": {
       "activity": "Activity Log",
-      "addActivityLog": "Seems like there isn't any activity on your account yet! Get involved to see activity logs!" 
+      "addActivityLog": "Seems like there isn't any activity on your account yet! Get involved to see activity logs!"
     },
     "team": "Team",
     "createteam": "Create Team",
@@ -1021,7 +1035,7 @@
         },
         "errors": {
           "max": "your creation step shouldn't be more than 1000 characters",
-          "required": "describe creation process in at least one step ",
+          "required": "describe creation process in at least one step",
           "emptyStep": "step can't be empty provide either a description or an image"
         }
       },
@@ -1191,4 +1205,4 @@
       "buttonLabel": "Get Started"
     }
   }
-}
+}
diff --git a/zubhub_frontend/zubhub/public/locales/hi/translation.json b/zubhub_frontend/zubhub/public/locales/hi/translation.json
@@ -30,7 +30,12 @@
       "createActivity": "गतिविधि बनाएं",
       "createActivityMenu": "गतिविधि बनाएं",
       "unpublishedActivities": "अप्रकाशित गतिविधियाँ",
-      "myActivities": "मेरी गतिविधियां"
+      "myActivities": "मेरी गतिविधियां",
+      "searchType": {
+        "projects": "परियोजनाओं",
+        "creators": "रचनाकारों",
+        "tags": "टैग"
+        }
     },
 
     "footer": {
@@ -244,7 +249,7 @@
   },
 
   "projects": {
-    "1":"खोजें, ",
+    "1":"खोजें,",
     "2":"बनाएं, शेयर करें!",
     "shareProject": "एक परियोजना साझा करें",
     "exploreIdeas": "विचारों का अन्वेषण करें",
@@ -427,7 +432,16 @@
     },
     "errors": {
       "unexpected": "यह क्रिया करते समय एक त्रुटि हुई। बाद में पुन: प्रयास करें",
-      "noResult": "आपके खोज शब्द के लिए कोई परिणाम नहीं मिला"
+      "noResult": "आपके खोज शब्द के लिए कोई परिणाम नहीं मिला",
+      "noResult2": "क्षम्यतां, परन्तु वयं तस्य किमपि परिणामं न प्राप्नुमः",
+      "noResultDescription": "अन्यत् किमपि अन्वेष्टुं प्रयतध्वम् अथवा अस्माकं सुझावः ब्राउज् कुर्वन्तु!"
+    },
+    "loginCard": {
+      "title": {
+        "projects": "परियोजनानि अन्वेष्टुं प्रवेशं कुर्वन्तु अथवा पञ्जीकरणं कुर्वन्तु",
+        "creators": "उपयोक्तृणां अन्वेषणार्थं प्रवेशं कुर्वन्तु अथवा पञ्जीकरणं कुर्वन्तु",
+        "tags": "विशिष्टटैग्युक्तानि परियोजनानि अन्वेष्टुं प्रवेशं कुर्वन्तु अथवा पञ्जीकरणं कुर्वन्तु"
+      }
     }
   },
 
@@ -513,7 +527,7 @@
     },
     "deleteProjectToastSuccess": "आपका प्रोजेक्ट सफलतापूर्वक हटा दिया गया था !!",
     "socialShare": {
-      "fbwa": "ZubHub पर इस प्रोजेक्ट को देखें! ",
+      "fbwa": "ZubHub पर इस प्रोजेक्ट को देखें!",
       "copySuccess": "लिंक सफलतापूर्वक कॉपी किया गया!",
       "copyFail": "उस लिंक को कॉपी करने का प्रयास करते समय कुछ गलत हुआ... :("
     },
@@ -559,7 +573,7 @@
             "label": "यूज़रनेम",
             "errors": {
               "required": "ऐसा लगता है कि आप यह भूल गये"
-            } 
+            }
           },
           "password": {
             "label": "पासवर्ड",
@@ -595,7 +609,7 @@
     },
     "activityLog": {
       "activity": "गतिविधि लॉग",
-      "addActivityLog": "ऐसा लगता है कि आपके खाते पर अभी तक कोई गतिविधि नहीं है! गतिविधि लॉग देखने के लिए शामिल हों!" 
+      "addActivityLog": "ऐसा लगता है कि आपके खाते पर अभी तक कोई गतिविधि नहीं है! गतिविधि लॉग देखने के लिए शामिल हों!"
     },
     "badge": {
       "badges": "बैज",
@@ -825,7 +839,7 @@
       }
     },
     "actions": {
-      "submit": "परिवर्तनों को सुरक्षित करें",
+      "submit": "परिवर्तनों को सुरक्षित करें"
     },
     "delete": {
       "label": "टीम हटाएं",

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
@@ -1,4 +1,4 @@
-const styles = theme => ({
+export const styles = theme => ({
   root: {
     marginTop: '2em',
     marginBottom: '2em',
@@ -21,11 +21,41 @@ const styles = theme => ({
     maxWidth: '1190px',
     width: '100%',
   },
-
+  mainContainerLoggedOutStyle: {
+    background: 'white',
+    padding: '0 3em',
+    marginTop: '3em',
+    borderRadius: '15px',
+    [theme.breakpoints.down('1080')]: {
+      padding: '0 1em',
+    },
+    [theme.breakpoints.down('500')]: {
+      padding: 0,
+    },
+  },
   pageHeaderStyle: {
+    margin: '1em 0',
     fontWeight: 'bold',
     textAlign: 'center',
   },
+  creatorsContainerStyle: {
+    width: '100%',
+    display: 'flex',
+    gap: '1em',
+  },
+  creatorsContainerLoggedOutStyle: {
+    justifyContent: 'center',
+  },
+  projectsContainerStyle: {
+    margin: 0,
+  },
+  loggedOutResultsContainer: {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    maxHeight: '400px',
+    overflow: 'hidden',
+  },
   cardStyle: {
     display: 'flex',
     flexDirection: 'column',
@@ -39,6 +69,10 @@ const styles = theme => ({
     textAlign: 'left',
     backgroundColor: '#ffffff',
   },
+  cardLoggedOutStyle: {
+    marginBottom: '9em',
+    boxShadow: 'none',
+  },
   avatarStyle: {
     width: '100%',
     height: '100%',
@@ -65,6 +99,10 @@ const styles = theme => ({
     maxWidth: '2000px',
     width: '100%',
   },
+  buttonGroupLoggedOut: {
+    // background: 'white'
+    display: 'none',
+  },
   floatRight: {
     float: 'right',
   },
@@ -93,6 +131,100 @@ const styles = theme => ({
     fontWeight: '900',
     fontSize: '1.5rem',
   },
+  transitionStyle: {
+    height: '20em',
+    marginTop: '-20em',
+    background: 'linear-gradient(0deg, rgba(255,255,255,80%) 34%, rgba(255,255,255,0) 100%)',
+    position: 'relative',
+    zIndex: 1060,
+  },
+  loginCardStyle: {
+    background: 'white',
+    marginTop: '-2em',
+  },
+  notFoundRobotStyle: {
+    width: '20em',
+    marginTop: '3em',
+    [theme.breakpoints.down('600')]: {
+      width: '15em',
+    },
+    [theme.breakpoints.down('400')]: {
+      width: '12em',
+    },
+  },
+  noResultContainerStyle: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  noResultTitleStyle: {
+    width: '70%',
+    padding: '0 1em',
+    [theme.breakpoints.down('600')]: {
+      width: '100%',
+      fontSize: '1.5rem',
+    },
+  },
+  noResultDescStyle: {
+    padding: '0 1em',
+    fontSize: '1.2rem',
+    textAlign: 'center',
+    marginBottom: '3em',
+    [theme.breakpoints.down('600')]: {
+      fontSize: '1rem',
+    },
+  },
+  marginBottom: {
+    marginBottom: '4em',
+    zIndex: 10,
+  },
 });
 
-export default styles;
+export const loginStyleOverrides = theme => ({
+  rootStyle: {
+    paddingTop: 0,
+  },
+  containerStyle: {
+    [theme.breakpoints.down('400')]: {
+      padding: 0,
+    },
+  },
+  cardStyle: {
+    boxShadow: 'none',
+    [theme.breakpoints.down('500')]: {
+      padding: 0,
+    },
+  },
+  titleStyle: {
+    textAlign: 'center',
+    margin: 0,
+  },
+  descriptionStyle: {
+    display: 'none',
+  },
+  gridStyle: {
+    margin: 0,
+  },
+});
+
+export const staffPickStyleOverrides = theme => ({
+  rootStyle: {
+    margin: 0,
+    width: '80%',
+    [theme.breakpoints.down('400')]: {
+      width: '100%',
+    },
+  },
+  mainContainerStyle: {
+    margin: 0,
+  },
+  messagePrimaryStyle: {
+    margin: 0,
+    fontSize: '1.8rem',
+    fontWeight: 700,
+    [theme.breakpoints.down('600')]: {
+      fontSize: '1.5rem',
+    },
+  },
+});