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