[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 · b8903ef · b8903ef
1 parent c3f4f34
commit b8903ef
Show file tree

Hide file tree

Showing 15 changed files with 751 additions and 435 deletions.
diff --git a/zubhub_backend/zubhub/activities/views.py b/zubhub_backend/zubhub/activities/views.py
@@ -1,29 +1,28 @@
-from django.shortcuts import render
-from django.utils.translation import ugettext_lazy as _
-from rest_framework.decorators import api_view
-from rest_framework.response import Response
-from rest_framework.generics import (
-    ListAPIView, CreateAPIView, RetrieveAPIView, UpdateAPIView, DestroyAPIView)
-from rest_framework.permissions import IsAuthenticated, IsAuthenticatedOrReadOnly, AllowAny
-from .permissions import IsStaffOrModeratorOrEducator, IsOwner, IsStaffOrModerator
-from django.shortcuts import get_object_or_404
-from .models import *
-from .serializers import *
-from django.db import transaction
-from django.core.exceptions import PermissionDenied
 from django.contrib.auth.models import AnonymousUser
+from django.db import transaction
+from django.shortcuts import get_object_or_404
+from rest_framework.generics import (
+    CreateAPIView,
+    DestroyAPIView,
+    ListAPIView,
+    RetrieveAPIView,
+    UpdateAPIView,
+)
+from rest_framework.permissions import AllowAny, IsAuthenticated
 
+from .models import Activity
+from .permissions import IsOwner, IsStaffOrModerator, IsStaffOrModeratorOrEducator
+from .serializers import ActivitySerializer
 
 
 class ActivityListAPIView(ListAPIView):
-
     serializer_class = ActivitySerializer
     permission_classes = [AllowAny]
 
     def get_queryset(self):
         all = Activity.objects.all()
         return all
-    
+
 
 class UserActivitiesAPIView(ListAPIView):
     """
@@ -33,10 +32,11 @@ class UserActivitiesAPIView(ListAPIView):
 
     serializer_class = ActivitySerializer
     permission_classes = [IsAuthenticated, IsOwner]
-    
+
     def get_queryset(self):
         return self.request.user.activities_created.all()
 
+
 class ActivityDetailsAPIView(RetrieveAPIView):
     """
     Fetch Activity details.
@@ -47,28 +47,29 @@ class ActivityDetailsAPIView(RetrieveAPIView):
 
     queryset = Activity.objects.all()
     serializer_class = ActivitySerializer
-    permission_classes = [IsAuthenticated]
+    permission_classes = [AllowAny]
 
     def get_object(self):
         queryset = self.get_queryset()
         pk = self.kwargs.get("pk")
         obj = get_object_or_404(queryset, pk=pk)
-        
+
         if obj:
             with transaction.atomic():
                 if isinstance(self.request.user, AnonymousUser):
                     obj.views_count += 1
                     obj.save()
                 else:
-                    if not self.request.user in obj.views.all():
+                    if self.request.user not in obj.views.all():
                         obj.views.add(self.request.user)
                         obj.views_count += 1
                         obj.save()
             return obj
-    
+
         else:
             raise Exception()
 
+
 class PublishedActivitiesAPIView(ListAPIView):
     """
     Fetch list of published activities by any user.
@@ -77,17 +78,18 @@ class PublishedActivitiesAPIView(ListAPIView):
 
     serializer_class = ActivitySerializer
     permission_classes = [AllowAny]
-    
+
     def get_queryset(self):
-        limit = self.request.query_params.get('limit', 10000)
+        limit = self.request.query_params.get("limit", 10000)
 
         try:
             limit = int(limit)
         except ValueError:
             limit = 10
 
-        return Activity.objects.filter(publish= True)[:limit]
-
+        return Activity.objects.filter(publish=True)[:limit]
+
+
 class UnPublishedActivitiesAPIView(ListAPIView):
     """
     Fetch list of unpublished activities by authenticated staff member.
@@ -100,24 +102,29 @@ class UnPublishedActivitiesAPIView(ListAPIView):
     permission_classes = [IsAuthenticated, IsStaffOrModerator]
 
     def get_queryset(self):
-        return Activity.objects.filter(publish= False)  
+        return Activity.objects.filter(publish=False)
+
 
 class ActivityCreateAPIView(CreateAPIView):
     """
     Create new Activity.\n
     """
+
     queryset = Activity.objects.all()
     serializer_class = ActivitySerializer
     permission_classes = [IsAuthenticated, IsStaffOrModeratorOrEducator]
 
+
 class ActivityUpdateAPIView(UpdateAPIView):
     """
     Update activity.
     """
+
     queryset = Activity.objects.all()
     serializer_class = ActivitySerializer
     permission_classes = [IsAuthenticated, IsOwner]
 
+
 class ActivityDeleteAPIView(DestroyAPIView):
     """
     Delete a activity and related objects from database.
@@ -126,9 +133,10 @@ class ActivityDeleteAPIView(DestroyAPIView):
     Requires activity id.
     Returns {details: "ok"}
     """
+
     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()
@@ -150,11 +158,11 @@ class ToggleSaveAPIView(RetrieveAPIView):
     queryset = Activity.objects.all()
     serializer_class = ActivitySerializer
     permission_classes = [IsAuthenticated]
-  
+
     def get_object(self):
         pk = self.kwargs.get("pk")
         obj = get_object_or_404(self.get_queryset(), pk=pk)
-       
+
         if self.request.user in obj.saved_by.all():
             obj.saved_by.remove(self.request.user)
             obj.save()
@@ -170,15 +178,14 @@ class togglePublishActivityAPIView(RetrieveAPIView):
     Requires activity id.
     Returns updated activity.
     """
+
     queryset = Activity.objects.all()
     serializer_class = ActivitySerializer
     permission_classes = [IsAuthenticated, IsStaffOrModerator]
-
 
     def get_object(self):
-
         pk = self.kwargs.get("pk")
-        obj = get_object_or_404(self.get_queryset(), pk=pk)  
+        obj = get_object_or_404(self.get_queryset(), pk=pk)
         obj.publish = not obj.publish
         obj.save()
         return obj
diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -1098,7 +1098,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": {
@@ -1112,26 +1113,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": {
@@ -1159,14 +1174,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
@@ -1,22 +1,23 @@
 export const colors = {
-    primary: '#02B7C4',
-    "primary-01": "#E5F8F9",
-    secondary: '#DC3545',
-    tertiary: '#FECB00',
-    'tertiary-dark': '#C18D30',
-    black: '#292535',
-    gray: '#7E7E7E',
-    light: '#C4C4C4',
-    white: '#fff',
-    green: '#22C55E',
-    red: '#f44336',
-    'blue-light': '#00B8C433',
-    'blue-dark': '#7BA8AB',
-    'blue-pale': '#DBECFF'
-}
+  primary: '#02B7C4',
+  'primary-01': '#E5F8F9',
+  secondary: '#DC3545',
+  tertiary: '#FECB00',
+  'tertiary-dark': '#C18D30',
+  black: '#292535',
+  gray: '#7E7E7E',
+  light: '#C4C4C4',
+  white: '#fff',
+  green: '#22C55E',
+  red: '#f44336',
+  'blue-light': '#00B8C433',
+  'blue-dark': '#7BA8AB',
+  'blue-pale': '#DBECFF',
+  border: '#7E5B4B',
+};
 
 export const borders = {
-    borderRadius: 20,
-    borderRadiusMd: 8,
-    borderRadiusSm: 4,
-}
+  borderRadius: 20,
+  borderRadiusMd: 8,
+  borderRadiusSm: 4,
+};
diff --git a/zubhub_frontend/zubhub/src/assets/js/muiTheme.js b/zubhub_frontend/zubhub/src/assets/js/muiTheme.js
@@ -32,4 +32,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',
+  },
 });