diff --git a/assets/css/edit_biodata.css b/assets/css/edit_biodata.css
index 25c777e8084d250e62538cc7e0be1da5461b01a8..74220086769932f77c41c7c81f13d280442906b9 100644
--- a/assets/css/edit_biodata.css
+++ b/assets/css/edit_biodata.css
@@ -1,57 +1,51 @@
-th {
- color: coral;
-}
-
th span {
- font-size: 30px;
+ color: orange;
+ font-size: 2rem;
}
-prof_pic {
- height: 200px;
- width: 200px;
- border-radius: 50%;
+td {
+ padding-right: 1rem;
}
-img {
- width: 100px;
- height: 100px;
+img.prof_pic {
+ height: 6rem;
+ width: 6rem;
+ padding: 0;
+ border: black solid 2px;
}
-button.back {
- background-color: beige;
- border: maroon 1px solid;
- border-style: solid;
- color: maroon;
- text-align: center;
- font-size: 20px;
- cursor: pointer;
- padding: 15px 25px;
+button {
+ font-size: 1rem;
+ padding: 0.25rem 1rem;
+ margin-top: 3rem;
}
-button.back:hover {
- background-color: maroon;
- border: plum 1px solid;
- color: linen;
+button.back {
+ font-size: 1rem;
+ padding: 0.25rem 1rem;
}
button.save {
background-color: royalblue;
+ color: white;
border: none;
- color: navajowhite;
- text-align: center;
- font-size: 20px;
- cursor: pointer;
- padding: 15px 25px;
+ font-size: 1rem;
+ padding: 0.25rem 1rem;
+ float: right;
+ margin-right: 0;
}
button.save:hover {
- background-color: whitesmoke;
- border: navy;
- color: royalblue;
+ background-color: rgb(103, 160, 235);
+}
+
+input.user_data {
+ width: 14rem;
}
textarea {
resize: none;
+ width: 14rem;
}
.inputfile {
@@ -64,16 +58,21 @@ textarea {
}
.inputfile + label {
- font-size: 1.25em;
- font-weight: 700;
- background-color: rgb(209, 202, 202);
- border: 1px solid gainsboro;
+ font-size: 0.8rem;
+ padding: 0.2rem;
+ background-color: rgb(223, 213, 213);
+ border: 1px solid rgb(161, 157, 157);
border-radius: 5px;
display: inline-block;
}
-div.fieldname {
+input.fieldname {
border: 1px solid;
- width: 200px;
- height: 20px;
+ width: 10rem;
+ height: 1rem;
+}
+
+.edit_profile_container {
+ width: 500px;
+ margin: auto;
}
\ No newline at end of file
diff --git a/assets/svg/pencil.svg b/assets/svg/pencil.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b35122838402199b526f685a71d4c103edec3de7
--- /dev/null
+++ b/assets/svg/pencil.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><path fill="white" d="M931.9,58.4c-33.3-31.9-70-48.1-109.3-48.1c-61.3,0-106,39.6-118.3,51.7c-17.2,17-604.7,604.7-604.7,604.7c-3.8,3.9-6.6,8.6-8.1,13.9C78.4,729.7,12,946.9,11.4,949.2c-3.4,11.1-0.4,23.3,7.8,31.4c5.9,5.9,13.8,9.1,21.8,9.1c3.2,0,6.4-0.5,9.5-1.5c2.2-0.7,226.5-73.2,263.4-84.2c4.9-1.5,9.3-4.1,12.9-7.7c23.3-23,571.2-564.9,607.6-602.4c37.6-38.8,56.3-79.1,55.6-120C989.3,133.5,969.7,94.7,931.9,58.4z M694.7,159.9c15.5,3.7,52.1,15.9,89.8,53.9c38,38.4,48.2,82.1,50.1,91.9c-120.2,119.6-397,393.4-506,501.2c-10-23.5-26-51.7-52.4-78.2c-32-32.2-64.5-50.4-89.6-60.6C294.5,560.1,576.3,278.2,694.7,159.9z M145.1,719.6c16.8,4.5,51.6,17.3,87.3,53.3c27.4,27.7,40.3,58.1,46.1,76.7c-42.3,13.5-135.3,45.6-194.6,64.8C101.4,856.6,130.9,766.9,145.1,719.6z M890.1,250.1c-1.3,1.3-3.3,3.4-5.8,5.9c-9.7-24.9-26.6-56.8-55.9-86.4c-30.1-30.3-60.4-48-84.9-58.5c2.1-2.1,3.8-3.8,4.4-4.4c3.5-3.5,35.2-33.8,74.8-33.8c22.8,0,45.1,10.4,66.5,30.9C914.5,128,927.5,152,928,175C928.4,198.5,915.6,223.7,890.1,250.1z"/></g>
+</svg>
\ No newline at end of file
diff --git a/view/edit_biodata.php b/view/edit_biodata.php
index db1a935b5744f928a295c777927357e07e13eb24..f6807c7bb5c8254fd282bc537d2a338fa3798088 100644
--- a/view/edit_biodata.php
+++ b/view/edit_biodata.php
@@ -24,12 +24,10 @@
js("bootstrap.js");
js("edit.js");
?>
- <!-- <link rel="stylesheet" href="assets/css/edit_biodata.css">
- <script src="assets/js/edit.js"></script> -->
</head>
<body>
-<div>
+<div class="edit_profile_container">
<table>
<thead>
<tr>
@@ -41,41 +39,37 @@
<input id="field_image_id" name="pic_id" hidden value="<?php echo $data["pic_id"]?>">
<tr>
<td><img id="prof_pic" class="prof_pic" src="<?php
- if(isset($data["pic_id"])) {
- path("ajax/image/get?id=". $data["pic_id"]);
- }
- else {
- path("assets/image/dummy.jpg");
- }?>"
- alt="Profile Picture"> </td>
+ if(isset($data["pic_id"])) {
+ path("ajax/image/get?id=". $data["pic_id"]);
+ }
+ else {
+ path("assets/image/dummy.jpg");
+ }?>"
+ alt="Profile Picture"> </td>
<td>
Update profile picture <br>
<input type="text" id="filename" class="fieldname" readonly>
<input id="field_data" name="image" type="file" accept="image/jpeg, image/png, image/gif" class="inputfile"/><label for="field_data">Browse...</label>
- <!-- <input type="text" id="filename" class="fieldname" name="pic_id" value="<?php echo $data["pic_id"]?>"></div> -->
- <!-- <form action="ajax/image/set" method="POST" id="prof_pic_form">
- <input id="field_data" name="data" type="file" accept="image/jpg|image/png" class="inputfile"/><label for="field_data">Browse...</label>
- </form> -->
</td>
</tr>
<tr>
- <td><label>Name </label></td>
- <td><input type="text" id="field_name" name="name" value="<?php echo $data["name"] ?>"> </td>
+ <td>Name</td>
+ <td><input class="user_data" type="text" id="field_name" name="name" value="<?php echo $data["name"] ?>"> </td>
</tr>
<tr>
- <td>Address </td>
+ <td>Address</td>
<td><textarea id="field_address" name="address" cols="30" rows="5"><?php echo $data["address"] ?></textarea></td>
</tr>
<tr>
- <td>Phone Number </td>
- <td><input type="text" id="field_phone" name="phone" maxlength="12" value="<?php echo $data["phone"] ?>"> </td>
+ <td>Phone Number</td>
+ <td><input class="user_data" type="text" id="field_phone" name="phone" maxlength="12" value="<?php echo $data["phone"] ?>"> </td>
</tr>
</form>
<tr>
- <td><button class="back" onclick="window.location.href = path('profile');">Cancel</button></td>
- <td align="right"><button class="save" id="save_button">Save </button></td>
</tr>
- </table>
+ </table>
+ <td><button class="back" onclick="window.location.href = path('profile');">Back</button></td>
+ <td align="right"><button class="save" id="save_button">Save</button></td>
</div>
</body>