search

corowne / lorekeeper

A dA ARPG masterlist framework
MIT License
113 stars 125 forks source link

fix(file input): make file inputs visible on mobile devices #1126

Open liwoyadan opened 11 hours ago

liwoyadan commented 11 hours ago

It's been brought up now and then how users on mobile devices/browsers cannot see the button to input files on LK sites, leading many users to believe that you cannot upload files via mobile. (It still works, however - the input button is simply invisible but tapping in the general input area will still bring up the upload file prompt.) Default Lorekeeper file input view on a mobile browser when uploading a user avatar This fix uses pre-existing Bootstrap v4.1 file input classes as well as the bs-custom-file-input plugin to create a visible 'Browse' button on mobile devices, as well as updating the text in the field to reflect the uploaded file's name. New file input for avatars with the text 'Update Profile Image' New file input for avatars with the text changed to reflect the uploaded file's name 'image-7.png' I've went ahead and updated every single file input on the default v3 Lorekeeper to have this new styling. Hopefully this reduces confusion!

SpeedyD commented 3 hours ago

Out of curiosity, whats does the new js file do, specifically?

And why could this not just be done with basic bootstrap? Looks like the section on custom file input would be able to do the same..

I applaud this effort, certainly a good change- but I'm not quite as fond of random js files and css overhauls..

liwoyadan commented 3 hours ago

The section on the page you linked says in the box: "This example uses the custom file browser component, which relies on the separate bs-custom-file-input plugin"! That's the js file that is included. You can read the full details of what the js file does on the npmjs page that I linked in my PR.

The main function is to display the file name of the uploaded file. It has a handful of other features for Bootstrap's custom file input like: displaying file names for multiple inputs, allows dragging and dropping files, etc but the primary intent is the file name display - if you do not have this js plugin then Bootstrap's custom file input does not display the file name.

I'm a little confused though...I'm not sure what you mean by "css overhaul"? :0c I didn't touch any of the css files and the custom file input has always been around in the compiled app.css, most of the blades just have a new div and the relevant classes needed for Bootstrap's custom file input to show properly.

itinerare commented 2 hours ago

Oh yeah, I remember playing around with that at some point.... I think it might be a bit of a better-supported thing in bootstrap 5, but in 4, this is what you have to do |D