Responsive small screen template

[danny]

what is margins="0" in the body tag?

margins="0" or marginwidth="0" Is fallback, just in case margin:0.8vw wasn't supported by a browser.
More modern way is to include the fallback in the style like: margin:1px;margin:0.8vw;

...the #FFF0D4 gradient background is nice...

Thanks!

I worked on that one some more: 

+title banner globe HTTP File Server
title banner & nav padding, shrinks if phone held vertical
removed :ss seconds by increasing the cut from 3 to 6
added efficiency settings import bank
highlight file list for ease of reading
reduced line breaks for easier scrolling
moved </body> close tag, for page speed
Edit: Re-uploaded for auto.error.handler.v2

[dj]

a bug: the month is not displayed: 21.01.2019 18
it should be displayed like this

be carefully with cutting the date. It depends on OS. What's your OS language? En?
use ISO-dateformat in HFS to remove seconds

[danny]

...version 4 never reloads the page. It's fast because it only updates the filelist and not the template...

I like it, except that I wish that the [files] section, filelist was within the template to support streaming/progressive-load, so that it would respond immediately on large folders.
Otherwise, there could be need of progress indicator after click, such as "Please Wait" or perhaps a whirl animation.

a bug: the month is not displayed: 21.01.2019 18  it should be displayed like this be carefully with cutting the date. It depends on OS. What's your OS language? En? use ISO-dateformat in HFS to remove seconds

En, yes.  Seconds weren't important without AM, PM (+/- 12hrs).  Anyway, I reverted the change and re-uploaded the file.  Can we cut the clock?  I think that the date is more important, especially on the wee phone screen.

Perhaps a new date-only  script should start with:  {.if|{.get ini|use-iso-date-format.}=no|{:{.set ini|use-iso-date-format=yes.}:}.}

[danny]

a bug: the month is not displayed: 21.01.2019 18  it should be displayed like this be carefully with cutting the date. It depends on OS. What's your OS language? En? use ISO-dateformat in HFS to remove seconds

En, yes.  What I edited previously (and now reverted) didn't have AM, PM anyway. Anyway, I reverted the change and re-uploaded the file.  Now it displays seconds with +/- 12 hours accuracy differential.  Can we cut the clock?  I think that the date is more important, especially on the wee phone screen.

Perhaps a new date script should start with:
{.if|{.get ini|use-iso-date-format.}=no|{:{.set ini|use-iso-date-format=yes.}:}.}
If that works, then date could be calculated and displayed anywhere, without the inconvenient clock. 

[danny]

...version 4 never reloads the page. It's fast because it only updates the filelist and not the template...

I like it, except that I wish that the [files] section, filelist was within the template to support streaming/progressive-load, so that it would respond immediately on large folders.
Otherwise, there could be need of progress indicator after click, such as "Please Wait" or perhaps a whirl animation.

a bug: the month is not displayed: 21.01.2019 18  it should be displayed like this be carefully with cutting the date. It depends on OS. What's your OS language? En? use ISO-dateformat in HFS to remove seconds

En, yes.  Seconds weren't important without AM, PM (+/- 12hrs).  Anyway, I reverted the change and re-uploaded the file.  Can we cut the clock?  I think that the date is more important, especially on the wee phone screen.

Perhaps a new date-only  script should start with:  {.if|{.get ini|use-iso-date-format.}=no|{:{.set ini|use-iso-date-format=yes.}:}.}

[dj]

Otherwise, there could be need of progress indicator after click, such as "Please Wait" or perhaps a whirl animation.

you can use waiting_cssonly
the streaming load can possibly be done with the streaming API, but this is a greater thing (Edit: a first test sounds promising)

[danny]

you can use waiting_cssonly..

Thanks!
a[href$="/"]:focus::after{content:"\23f3";}
#files a[href$="/"]::after {content:""; display: inline-block;}
#files a[href$="/"]:focus::after {transform: rotate(360deg); transition:transform 30s linear; content:"\23f3"; }
edit;
re-uploaded http://rejetto.com/forum/index.php?topic=11754.msg1064905#msg1064905

...the streaming load can possibly be done with the streaming API, but this is a greater thing (Edit: a first test sounds promising)

I wish that I had tried Mobil-Light version 3, for native streaming.

[dj]

changelog: (thaks danny for the hints)

stream filelist (for slow connections)
blank file size for virtual folder
higher contrast for dark theme

Add hfs.filelist.tpl from zip to folder, that contains hfs.exe


changelog audioplayer: reduce traffic (load from cache)

[danny]

There was a momentary hiccup.  On Firefox, it didn't display file list at first.  Closing the tab fixed it.  As soon as I opened a new tab, and logged in, then it displayed the file list, with a theme of parsnip soup. 
Suggestions: 
Try background-color:#222;color:#FFFFF6; for dark theme

[dj]

same as V.4.6
Add hfs.filelist.tpl from zip to folder, that contains hfs.exe

which browser?

[danny]

more filetype icons
auto light and dark themes
security: noscan, autoban
animated hourglass
efficiency settings
ISO date setting
filename unicode fonts
adaptive font sizing
DJ's photo viewer
DJ's music shuffle player
file area background
red upload indicator
adaptive margins
Nav stays visable
auto.error.handler.v2

*"MP" refers to pre-installed Music player and Photo viewer.

[danny]

@DJ
Can you change that file so that it has date, time AM/PM in PC/wide mode, but has date-only (no clock) in Phone/narrow mode? 
Also, menu-bar/header should be 67% width on PC/wide mode, but 100% width for Phone/narrow mode. 
I didn't manage to solve those two puzzles. 

[dj]

Can you change that file so that it has date, time AM/PM in PC/wide mode, but has date-only (no clock) in Phone/narrow mode? 

I can't (with non ISO Date Format), but I can hide the full date

Code: [Select]

@media (max-width:480px) {li span:last-child {display: none}}
Edit: with ISO Date Format:

Code: [Select]

@media (max-width:480px) {li span:last-child {width:10ch; height:1em; overflow:hidden}}

[danny]

I had a re-think on that and solved the date & margin puzzle.  Thanks for the clues!
Also managed a non-glare color scheme for the auto light-mode. 

[danny]

Edit: Re-uploaded for the date display.  Thanks for the clues!

IDEA!:  Howbout a new button to toggle On lazyload thumbnails?  Off by default solves the bandwidth problem.  Button to turn on lazyload thumbnails, solves the lack of thumbnails problem... in one click.    Nice icon for img button is &#128444; aka \1f5bc, perhaps next to the music play button.  Also, integrated features is good for QC, and considerably easier/accessible for using it. 

@DJ, what do you think of having the Nav stay on screen, so you can browse easier? (example attached)

Edit: Re-uploaded for auto.error.handler.v2