Added css to showdir.js

[avamsi]

Here's what it looks like:

I am using http-server which uses this library. I wanted to know if you are open to css/icons.

Here's the css file - style.css

[jfhbrook]

idk if you saw but there's another pull request along similar lines already.

I'll try to review this, but any feedback I gave to #147 likely applies here.

[fenwick67]

Hey @krikx I'm the author of #147, I had a similar goal in mind of adding icons and styles, I was just cracking my fingers to work on mine today.

I think maybe somewhere in-between our PRs might be the best solution. How this this idea sound? @jfhbrook

• Add css and style options:
  • css: user provides a URL for a <link> tag that we put in the head
  • style: user provides a string for an inline <style> tag that we put in the head
  • if either of those are on, put <i> tags in the list with icon classes like in my PR, to enable custom icon styling, maybe add classes to the other elements as well.
• Add option to use a default inline style (call the option pretty?).
  • @krikx's style looks like it would be nice for this because it's relatively small and pretty good looking IMO... but we would change it to use the icon classes mentioned above, and get rid of the img elements (we can inline base64 data into the style).

This way we enable easy styling so a user could just just ecstatic --css "/styles/mystyle.css" or ecstatic --style "body{background:azure}"

It also avoids the weird folder mirroring I did to handle serving images.

[jfhbrook]

I'm totally okay with adding inline css and inline base64-encoded icons as a non-configurable default.

Flags for specifying custom css and/or styles could be interesting, but perhaps better in a separate PR.

[jfhbrook]

My thoughts were to take the base64 icon approach from this PR, write a node script for "building" the base64 blobs, apply it to the icon set used in #147 with a build script , choose a set of CSS to inline (probably this one since I'm lazy and it's already inlined), pick up PROTIPS from the other CSS as best as I can, potentially apply styles to the html introduced in #151 and call it a day.

[jfhbrook]

I like that #147 doesn't reorder the columns.

[avamsi]

@jfhbrook I reordered the columns because I don't have much use for permissions.

Also, can you do something like this? Add links in h1 so that we can directly jump to specific folders. I changed locally but there are other changes in showdir.js like using he.encode of which I have no idea about. (I am using old version)

[avamsi]

As @fenwick67 suggested, I added those 2 images to <style> tag. Source looks much nicer now. This way many icons can easily be added.

[jfhbrook]

Breadcrumbs aren't the worst idea but should be tabled into a separate PR.

[jfhbrook]

Closing in favor of #188 . Your name will still be in the contributors file, and hey, feedback appreciated!