Improved project creation form

zubhub_backend/zubhub/projects/views.py

@@ -26,6 +26,7 @@ class ProjectUpdateAPIView(UpdateAPIView):
 
     def perform_update(self, serializer):
         serializer.save(creator=self.request.user)
+        self.request.user.save()
 
 
 class ProjectDeleteAPIView(DestroyAPIView):

zubhub_frontend/zubhub/public/locales/en/translation.json

@@ -203,22 +203,24 @@
     },
     "inputs": {
       "title": {
-        "label": "Title",
+        "label": "Name your project",
         "errors": {
           "max": "your project title shouldn't be more than 100 characters",
           "required": "this field is required"
         }
       },
       "description": {
-        "label": "Description",
+        "label": "Describe what it is",
         "helperText": "Tell us something interesting about the project! You can share what it is about, what inspired you to make it, your making process, fun and challenging moments you experienced, etc.",
         "errors": {
           "max": "your description shouldn't be more than 10,000 characters",
           "required": "this field is required"
         }
       },
       "projectImages": {
-        "label": "Images",
+        "label": "Let's add some pictures",
+        "label2": "Add Images",
+        "topHelperText": "Don't have them? add a video instead",
         "errors": {
           "onlyImages": "only images are allowed in this field",
           "imageOrVideo": "you must provide either image(s) or video url",
@@ -227,24 +229,27 @@
         }
       },
       "video": {
-        "label": "Video URL",
-        "helperText": "YouTube, Vimeo, Google Drive links are supported",
+        "label": "Let's add a video",
+        "topHelperText": "It's ok if you don't have them",
+        "bottomHelperText": "YouTube, Vimeo, Google Drive links are supported",
         "errors": {
           "shouldBeVideoUrl": "you are required to submit a video url here",
           "max": "you are required to submit a video url here",
           "imageOrVideo": "you must provide either image(s) or video url"
         }
       },
       "materialsUsed": {
-        "label": "Materials Used",
-        "placeholder": "Add a material and click the + button",
+        "label": "What materials did you use?",
+        "addMore": "Add More",
         "errors": {
           "max": "you are required to submit a video url here",
           "required": "this field is required"
         }
       },
       "submit": "Create Project",
-      "edit": "Edit Project"
+      "edit": "Edit Project",
+      "image": "image added",
+      "images": "images added"
     },
     "createToastSuccess": "Your project was created successfully!!",
     "updateToastSuccess": "Your project was updated successfully!!",

zubhub_frontend/zubhub/public/locales/hi/translation.json

@@ -205,22 +205,24 @@
     },
     "inputs": {
       "title": {
-        "label": "शीर्षक",
+        "label": "अपने प्रोजेक्ट का नाम बताइए",
         "errors": {
           "max": "आपकी परियोजना का शीर्षक 100 से अधिक वर्ण नहीं होना चाहिए",
           "required": "यह फ़ील्ड आवश्यक है"
         }
       },
       "description": {
-        "label": "विवरण",
+        "label": "वर्णन करें कि यह क्या है",
         "helperText": "प्रोजेक्ट के बारे में कुछ दिलचस्प बताएं! आप इसे साझा कर सकते हैं कि यह किस बारे में है, आपको इसे बनाने के लिए क्या प्रेरणा मिली है, आपकी बनाने की प्रक्रिया, आपके द्वारा अनुभव किए गए मजेदार और चुनौतीपूर्ण क्षण आदि।",
         "errors": {
           "max": "आपका वर्णन 10,000 से अधिक वर्णों का नहीं होना चाहिए",
           "required": "यह फ़ील्ड आवश्यक है"
         }
       },
       "projectImages": {
-        "label": "इमेजिस",
+        "label": "आइए कुछ तस्वीरें जोड़ते हैं",
+        "label2": "छवियां जोड़ें",
+        "topHelperText": "उनके पास नहीं है? इसके बजाय एक वीडियो जोड़ें",
         "errors": {
           "onlyImages": "इस क्षेत्र में केवल छवियों की अनुमति है",
           "imageOrVideo": "आपको छवि या वीडियो url प्रदान करना चाहिए",
@@ -229,24 +231,27 @@
         }
       },
       "video": {
-        "label": "वीडियो यूआरएल",
-        "helperText": "YouTube, Vimeo, Google Drive लिंक समर्थित हैं",
+        "label": "आइए एक वीडियो जोड़ें",
+        "topHelperText": "यह ठीक है अगर आपके पास उन्हें नहीं है",
+        "bottomHelperText": "YouTube, Vimeo, Google Drive लिंक समर्थित हैं",
         "errors": {
           "shouldBeVideoUrl": "आपको यहां एक वीडियो url प्रस्तुत करना आवश्यक है",
           "max": "आपको यहां एक वीडियो url प्रस्तुत करना आवश्यक है",
           "imageOrVideo": "आपको छवि या वीडियो url प्रदान करना चाहिए"
         }
       },
       "materialsUsed": {
-        "label": "उपयोग किया गया सामन",
-        "placeholder": "एक सामग्री जोड़ें और + बटन पर क्लिक करें",
+        "label": "आपने किन सामग्रियों का उपयोग किया?",
+        "addMore": "अधिक जोड़ें",
         "errors": {
           "max": "आपके द्वारा उपयोग की जाने वाली सामग्री 10,000 से अधिक वर्णों की नहीं होनी चाहिए",
           "required": "यह फ़ील्ड आवश्यक है"
         }
       },
       "submit": "प्रोजेक्ट बनाएं",
-      "edit": "प्रोजेक्ट संपादित करें"
+      "edit": "प्रोजेक्ट संपादित करें",
+      "image": "छवि जोड़ी गई",
+      "images": "चित्र जोड़े गए"
     },
     "createToastSuccess": "आपका प्रोजेक्ट सफलतापूर्वक बनाया गया था !!",
     "updateToastSuccess": "आपका प्रोजेक्ट सफलतापूर्वक अपडेट किया गया था !!",

zubhub_frontend/zubhub/src/api/api.js

@@ -65,7 +65,6 @@ class API {
     const url = 'rest-auth/login/';
     const method = 'POST';
     const body = JSON.stringify({ username, password });
-    console.log('stringified json', body);
 
     return this.request({ url, method, body }).then(res => res.json());
   };

zubhub_frontend/zubhub/src/assets/js/styles/index.js

@@ -1,10 +1,22 @@
 const styles = theme => ({
+  marginTop1em: {
+    marginTop: '1em',
+  },
+  marginBottom1em: {
+    marginBottom: '1em',
+  },
   marginLeft1em: {
     marginLeft: '1em',
   },
   colorRed: {
     color: 'red',
   },
+  topMinus20PX: {
+    top: '-20px',
+  },
+  left15PX: {
+    left: '15px',
+  },
 });
 
 export default styles;

zubhub_frontend/zubhub/src/assets/js/styles/views/create_project/createProjectStyles.js

@@ -23,6 +23,8 @@ const styles = theme => ({
     '&.MuiFormLabel-root.Mui-focused': {
       color: '#00B8C4',
     },
+    fontWeight: 'bold',
+    fontSize: '1rem !important',
   },
 
   customInputStyle: {
@@ -43,15 +45,21 @@ const styles = theme => ({
       },
     },
   },
-  staticLabelInputStyle: {
-    '&.MuiOutlinedInput-root fieldset legend': {
-      width: '75.5px !important',
-    },
-  },
-  staticLabelInputSmallStyle: {
-    '&.MuiOutlinedInput-root fieldset legend': {
-      width: '40px !important',
-    },
+  fieldNumberStyle: {
+    height: '20px',
+    width: '20px',
+    backgroundColor: '#00B8C4',
+    color: 'white',
+    display: 'inline-block',
+    textAlign: 'center',
+    borderRadius: '50%',
+    lineHeight: '17px',
+    marginRight: '0.3em',
+  },
+  questionIconStyle: {
+    position: 'absolute',
+    color: '#00B8C4',
+    right: '10px',
   },
   uploadProgressLabelStyle: {
     color: 'white',