From c02acbbff2960fa89ca930cbaf7b45866812dd65 Mon Sep 17 00:00:00 2001
From: Fadhil Imam Kurnia <fadhilimamk@gmail.com>
Date: Sat, 7 Oct 2017 17:16:06 +0700
Subject: [PATCH] Styling input photo

---
 public/profil_edit.js             | 21 ++++++++++++++-
 public/style.css                  | 45 +++++++++++++++++++++++++++++++
 src/view/profil_edit.php          | 10 ++++++-
 src/view/profil_edit_location.php |  3 ++-
 4 files changed, 76 insertions(+), 3 deletions(-)

diff --git a/public/profil_edit.js b/public/profil_edit.js
index 207751c..bd0396f 100644
--- a/public/profil_edit.js
+++ b/public/profil_edit.js
@@ -17,4 +17,23 @@ function validateLocationEdit() {
         return false;
     }
     return true;
-}
\ No newline at end of file
+}
+
+var inputs = document.querySelectorAll( '.input-photo' );
+Array.prototype.forEach.call( inputs, function( input ) {
+    var label	 = input.nextElementSibling,
+        labelVal = label.innerHTML;
+
+    input.addEventListener( 'change', function( e ) {
+        var fileName = '';
+        if( this.files && this.files.length > 1 )
+            fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
+        else
+            fileName = e.target.value.split( '\\' ).pop();
+
+        if( fileName )
+            label.querySelector( '.input-photo-result' ).innerHTML = fileName;
+        else
+            label.innerHTML = labelVal;
+    });
+});
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index dd2cac9..fc9630d 100755
--- a/public/style.css
+++ b/public/style.css
@@ -289,6 +289,51 @@ input:checked + .slider:before {
     border-radius: 50%;
 }
 
+.input-photo {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+}
+
+.input-photo + label {
+    display: inline-block;
+    cursor: pointer;
+    width: 100%;
+    line-height: 33px;
+}
+
+.input-photo + label > .input-photo-button {
+    color: black;
+    float: right;
+    font-size: 0.75em;
+    width: 27%;
+    background-color: #ccc;
+    text-align: center;
+}
+
+.input-photo + label > .input-photo-result {
+    float: left;
+    font-size: 0.75em;
+    width: 70%;
+    height: 32px;
+    padding-left: 5px;
+    border: solid 1px black;
+    margin-right: 2px;
+}
+
+.input-photo:focus + label > .input-photo-button,
+.input-photo + label > .input-photo-button:hover {
+    background-color: #999aa3;
+}
+
+.input-photo:focus + label > .input-photo-button {
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+}
+
 /* ------------------------- ORDER -------------------------*/
 
 .small-circle {
diff --git a/src/view/profil_edit.php b/src/view/profil_edit.php
index d991cdd..12da5e7 100644
--- a/src/view/profil_edit.php
+++ b/src/view/profil_edit.php
@@ -29,7 +29,15 @@
                     <div class="col-4">
                         <h3>Update profile picture</h3>
                         <form action="#">
-                            <input type="file" name="photo" accept="image/*">
+                            <input id="photo" type="file" name="photo" accept="image/*" class="input-photo">
+                            <label for="photo">
+                                <div class="input-photo-result">
+
+                                </div>
+                                <div class="input-photo-button">
+                                    Browse...
+                                </div>
+                            </label>
                         </form>
                     </div>
                 </div>
diff --git a/src/view/profil_edit_location.php b/src/view/profil_edit_location.php
index 81e976e..3188b2a 100644
--- a/src/view/profil_edit_location.php
+++ b/src/view/profil_edit_location.php
@@ -36,7 +36,8 @@
                         <?php foreach ($location as $data) : ?>
                             <tr>
                                 <td><b><?=$no++?></b></td>
-                                <td><b><?=$data['location']?></b></td>
+                                <td><b><?=$data['location']?></b><br>
+                                    <input type="text" style="width: 100%; line-height: 30px; font-size: medium; display: block;"></td>
                                 <td style="text-align: center">
                                     <a class="action-edit" href="#"></a>
                                     <a class="action-delete" href="/main/profil/location/delete?u=<?=$id?>&name=<?=$data['location']?>"></a>
-- 
GitLab