[frontend] redesign activity details page

redesigned activity card create categories component use translations add activity action menu separate creators section into its own component Issue: #1096 Signed-off-by: Ndibe Raymond Olisaemeka <[email protected]>
unstructuredstudio · Jul 19, 2024 · 9fcf53f · 9fcf53f
1 parent e27a0df
commit 9fcf53f
Show file tree

Hide file tree

Showing 16 changed files with 764 additions and 398 deletions.
diff --git a/zubhub_backend/zubhub/activities/views.py b/zubhub_backend/zubhub/activities/views.py
@@ -47,7 +47,7 @@ class ActivityDetailsAPIView(RetrieveAPIView):
 
     queryset = Activity.objects.all()
     serializer_class = ActivitySerializer
-    permission_classes = [IsAuthenticated]
+    permission_classes = [AllowAny]
 
     def get_object(self):
         queryset = self.get_queryset()
@@ -128,7 +128,7 @@ class ActivityDeleteAPIView(DestroyAPIView):
     """
     queryset = Activity.objects.all()
     serializer_class = ActivitySerializer
-    permission_classes = [IsAuthenticated, IsOwner]
+    permission_classes = [IsAuthenticated, IsOwner, IsStaffOrModeratorOrEducator]
 
     def delete(self, request, *args, **kwargs):
         activity = self.get_object()

diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -1084,7 +1084,8 @@
          "mediaServerError": "Sorry media server is down we couldn't upload your files! try again later",
          "uploadError": "error occurred while downloading file : "
       }
-   }
+   },
+   "tooltipMore": " more"
  },
 
   "activityDetails": {
@@ -1098,26 +1099,40 @@
        "contributors": "CONTRIBUTORS"
     },
     "made": "Made by",
+    "inspired": {
+      "recreated": "Re-created",
+      "times": "times"
+    },
     "activity": {
       "creator": {
         "follow": "Follow",
         "unfollow": "Unfollow"
       },
+      "introduction": "Introduction",
+      "categories": "Categories",
+      "classGrade": "Class Grade",
       "description": "Description",
       "materials": "Materials Used",
       "category": "Category",
       "tags": "Tags",
       "none": "None",
 
       "build": "Let's Make This Project",
-      "pdf": "Download Pdf",
+      "pdf": {
+        "downloading": "Downloading...",
+        "download": "Download PDF"
+      },
       "create": {
         "dialog": {
           "primary": "Create Activity",
           "cancel": "Cancel",
           "proceed": "Proceed",
           "success": "activity Created successfully",
           "forbidden": "You must be staff monitor ao educator to be able to create a new activity "
+        },
+        "modal": {
+          "success": "Congratulations your Activity has been successfully created!",
+          "share": "Share your activity with the world. Post it on the following platforms:"
         }
       },
       "edit": {
@@ -1145,14 +1160,19 @@
          "label": "Publish"
       },
       "unpublish": {
-         "label": "UnPublish"
+         "label": "Unpublish"
       }
     },
       "saveButton": {
         "label": "save button",
         "save": "save",
         "unsave": "unsave"
-      }
+      },
+    "footer": {
+      "introductionText": "Did you like this activity?",
+      "buttonLabel": "Create it!",
+      "moreActivitiesTitle": "More Activities"
+    }
   },
   "breadCrumb":{
     "link":{

diff --git a/zubhub_frontend/zubhub/src/assets/js/colors.js b/zubhub_frontend/zubhub/src/assets/js/colors.js
@@ -12,7 +12,8 @@ export const colors = {
     red: '#f44336',
     'blue-light': '#00B8C433',
     'blue-dark': '#7BA8AB',
-    'blue-pale': '#DBECFF'
+    'blue-pale': '#DBECFF',
+    border: '#7E5B4B',
 }
 
 export const borders = {

diff --git a/zubhub_frontend/zubhub/src/assets/js/muiTheme.js b/zubhub_frontend/zubhub/src/assets/js/muiTheme.js
@@ -18,4 +18,17 @@ export const theme = createTheme({
       },
     },
   },
+  categoryColors: {
+    Animations: '#FCB07F',
+    Art: '#F8D991',
+    Science: '#FBC9B3',
+    Coding: '#65B4BD',
+    Electronics: '#F1D27C',
+    Toys: '#FAC5C2',
+    Games: '#6065A4',
+    Mechanical: '#F571AE',
+    Music: '#F1FC73',
+    Robotics: '#A66CA9',
+    Structures: '#FAE393',
+  }
 });
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/components/activity/activityStyle.js b/zubhub_frontend/zubhub/src/assets/js/styles/components/activity/activityStyle.js
@@ -1,15 +1,14 @@
 export const style = theme => ({
   activityCardContainer: {
     position: 'relative',
-    // maxWidth: '350px',
-    // minWidth: '300px',
-    height: '95%',
+    width: '100%',
+    textAlign: 'left',
   },
   activityCard: {
     maxWidth: '100%',
-    borderRadius: '15px',
+    height: '33em',
+    borderRadius: '20px',
     position: 'relative!important',
-    height: '100%',
   },
   opacity: {
     backgroundColor: 'black',
@@ -29,56 +28,22 @@ export const style = theme => ({
   },
   mediaBoxStyle: {
     width: '100%',
-    height: '17em',
+    height: '13em',
     position: 'relative',
     padding: '2%',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
   },
-  activityTagsBox: {
-    position: 'absolute',
-    top: '10px',
-    right: '10%',
-    display: 'flex',
-  },
-  activityTagPill: {
-    backgroundColor: 'white',
-    color: 'var(--text-color2)',
-    border: '1px solid var(--text-color2)',
-    '&:hover': {
-      backgroundColor: 'var(--text-color2)',
-      color: 'white',
-      border: '1px solid white',
-    },
-  },
-  activityTagsShowMore: {
-    '&:hover': {
-      backgroundColor: 'white',
-      color: 'var(--text-color2)',
-      border: '1px solid white',
-    },
-  },
-  tagsShowMoreIconContainer: {
-    //position: 'absolute',
-  },
-  tagsShowMoreList: {
-    position: 'absolute',
-    right: '0%',
-    backgroundColor: 'white',
-    maxHeight: '12em',
-    overflow: 'auto',
-    borderRadius: '10px',
-  },
-
   activityCardContent: {
     width: '100%',
-    position: 'relative',
-  },
-  activityCardInfoBox: {
-    height: '100%',
+    padding: '16px',
+    "&:last-child": {
+      paddingBottom: '12px'
+    },
     display: 'flex',
-    justifyContent: 'space-between',
+    flexDirection: 'column',
+    justifyContent: 'space-between'
   },
   projectsCount: {
     color: 'white',
@@ -92,10 +57,67 @@ export const style = theme => ({
     marginLeft: '5px',
   },
   activityTitle: {
-    fontSize: '1.1rem',
-    fontWeight: '900',
+    fontSize: '1.3rem',
+    fontWeight: 700,
     color: 'var(--text-color1)',
-    // width: '80%',
-    textAlign: '-webkit-auto',
   },
+  activityDescription: {
+    height: '48px',
+    margin: '8px 0',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    display: '-webkit-box',
+    '-webkit-line-clamp': 2,
+    '-webkit-box-orient': 'vertical',
+  },
+  activityCategoryContainer: {
+    margin: '12px 0',
+    display: 'flex',
+    flexWrap: 'nowrap',
+    gap: '8px',
+  },
+  activityCategory: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    fontSize: '0.9em',
+    padding: '2px 10px',
+    border: '1px solid #7E5B4B',
+    borderRadius: '10em',
+    background: '#F1D27C'
+  },
+  footer: {
+    marginTop: 10,
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    overflow: 'hidden',
+  },
+  captionStyle: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  captionIconStyle: {
+    backgroundColor: '#eee',
+    padding: '2px 7px',
+    borderRadius: 25,
+    justifyContent: 'space-between',
+    fontWeight: '600',
+    display: 'flex',
+    alignItems: 'center',
+    marginRight: '1em',
+    '& svg': {
+      fill: 'rgba(0,0,0,0.54)',
+      marginRight: '0.5em',
+      fontSize:'1.1rem',
+    },
+  },
+  date: {
+    fontSize: '0.9rem',
+    fontWeight: '600',
+    marginLeft: 'auto',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  }
 });
diff --git a/zubhub_frontend/zubhub/src/assets/js/utils/constants.js b/zubhub_frontend/zubhub/src/assets/js/utils/constants.js
@@ -7,6 +7,12 @@
  */
 export const BASE_TAGS = ['staff', 'moderator', 'group', 'creator'];
 
+export const USER_TAGS = {
+  staff: 'staff',
+  creator: 'creator',
+  educator: 'educator'
+}
+
 export const site_mode = {
   PUBLIC: 1,
   PRIVATE: 2,