diff --git a/public/profil_edit.js b/public/profil_edit.js index 207751c1735668fba7a95737146295e24e806587..bd0396f618ea1ee32341c68312e9fc34efd00326 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 dd2cac97e056888066da36064f9dcf7cab68bc8f..fc9630d0fec9575cac0fdaa0ec8da7cdbfafd3f9 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 d991cdd6d35da54b03b7b47672688c98ae2afc1b..12da5e7900f74b4121f40adf01aab02b5a63d803 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 81e976e09de8ab43d3a5e168b4067f8958251dd2..3188b2a7ad9842408058630abb8d4c620788b62b 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>