[FIXING] edit_profile.cc and add validation if name too long

web/css/edit_profile.css

@@ -4,22 +4,23 @@
 }
 .left2{
     flex-basis: 28%;
-    padding-left: 20px;
+    /* padding-left: 1.5%; */
     padding-top: 2.5%;
 }
 
 .right{
     flex-basis: 90%;
+    width: fit-content;
     align-content: left;
     padding-left: 5%;
     margin-top: 2.5%;
-    padding-right: 9%;
+    padding-right: 5%;
 }
 
 .right2{
     flex-basis: 72%;
     align-content: left;
-    padding-right: 15%;
+    /* padding-right: 5%; */
     padding-top: 30px;
 }
 
@@ -32,9 +33,10 @@
 
 .cols{
     display: flex;
+    width: fit-content;
     flex-wrap: wrap;
     flex-direction: column;
-    margin-left: 100px;
+    padding-left: 50px;
 }
 .rows1{
     display: flex;
@@ -49,13 +51,13 @@
     display: flex;
     flex-wrap: nowrap;
     flex-direction: row;
-    margin-left: 100px;
+    padding-left: 150px;
     justify-content: space-around;
     height:80px;
 }
 
 .rows{
-    margin-left: 100px;
+    padding-left: 150px;
     display: flex;
     flex-wrap: nowrap;
     flex-direction: row;
@@ -81,6 +83,7 @@
     position: relative;
     margin-left: 10px;
     display: inline-block;
+    width: 2px;
 }
 
 .btn {
@@ -95,9 +98,10 @@
 .upload-btn-wrapper input[type=file] {
     font-size: 50px;
     position: absolute;
+    width:100px;
     left: 0;
     top: 0;
-    opacity: 0;
+    opacity: 00;
 }
 
 #profpict_dummy{
@@ -123,8 +127,9 @@ input[type=file]{
     color: transparent;
 }
 
-.profpict_dummy{
+#profpict_dummy{
     width: 500px;
+    margin-left: 0;
 }
 input[type=text]{
     width: 625px;
@@ -132,10 +137,14 @@ input[type=text]{
     font-weight: 500;
     letter-spacing: 1px;
     font-size: 32px;
+    margin-left: 50px;
+    padding-left: 10px;
 }
 
 textarea{
     width: 625px;
+    margin-left: 50px;
+    padding-left: 10px;
     font-size: 32px;
 }
 
@@ -169,14 +178,17 @@ textarea{
 
 #warning-1{
     visibility: hidden;
-    width: 625px;
+    width: 620px;
+    margin-left: 50px;
 }
 
 #warning-2{
     visibility: hidden;
-    width: 625px;
+    width: 620px;
+    margin-left: 50px;
 }
 #warning-3{
     visibility: hidden;
-    width: 625px;
+    width: 620px;
+    margin-left: 50px;
 }

web/edit_profile/view.php

@@ -45,7 +45,7 @@
     echo "<p>Update profile picture</p>"    ;
     echo "<input id=\"profpict_dummy\" class=\"profpict_dummy\"type=\"text\" name=\"profile_picture2\" readonly>"    ;
     echo "<div class=\"upload-btn-wrapper\">"   ;
-    echo "<button class=\"btn\">Browse ...</button>"    ;
+    echo "<button class=\"btn\">Browse</button>"    ;
     echo "<input id=\"profpict\" type=\"file\" name=\"profile_picture\" accept=\"image/png, image/jpg, image/jpeg\" onchange=\"showname()\" >"  ;
     echo "</div>"   ;
     echo "</div>"   ;

web/javascript/edit_profile.js

@@ -71,6 +71,9 @@ function validateForm(){
         // alert(false);
         if (isNameEmpty == true){
             document.getElementById("warning-1").style.visibility = 'visible';
+        } else if (isNameTooLong == true){
+            document.getElementById("warning-1").style.visibility = 'visible';
+            document.getElementById("warning-1").innerHTML = 'Name must be under 20 characters.';
         }
         if (isAddressEmpty == true){
             document.getElementById("warning-2").style.visibility = 'visible';