redesigned activity card

refactor add multiple creators section create categories component refactor the use of category colors, translation file, and rendering of the tags separate creators section into its own component add unpublished icon to card update imports Author: Berra Karaman <[email protected]> Date: Wed Jan 24 22:58:02 2024 +0300
unstructuredstudio · Mar 5, 2024 · 05561d4 · 05561d4
1 parent e1c4774
commit 05561d4
Show file tree

Hide file tree

Showing 9 changed files with 381 additions and 190 deletions.
diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -1084,7 +1084,9 @@
          "mediaServerError": "Sorry media server is down we couldn't upload your files! try again later",
          "uploadError": "error occurred while downloading file : "
       }
-   }
+   },
+   "tooltipMore": " more",
+   "tooltipUnpublished": "Unpublished"
  },
 
   "activityDetails": {

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
@@ -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',
+  }
 });
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,16 @@
+import { colors } from "../../../colors";
+
 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',
@@ -27,58 +28,42 @@ export const style = theme => ({
     objectFit: 'cover',
     height: '100%',
   },
+  unpublishedCardImage: {
+    filter: 'brightness(60%)'
+  },
+  publishStyle: {
+    position: 'absolute',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: 'white',
+    top: '1em',
+    right: '1em',
+    zIndex: 1,
+    backgroundColor: colors.gray,
+    padding: '0.2em 1em',
+    borderRadius: '50px',
+    fontWeight: 700,
+    fontSize: '1.05rem',
+  },
   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 +77,70 @@ 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',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+  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',
+  }
 });