Author Topic: Responsive small screen template  (Read 20101 times)

0 Members and 1 Guest are viewing this topic.

Offline danny

  • Tireless poster
  • ****
  • Posts: 192
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #105 on: September 10, 2019, 09:59:59 PM »
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
« Last Edit: September 16, 2019, 10:32:33 PM by danny »

Offline dj

  • Tireless poster
  • ****
  • Posts: 153
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - modified by danny
« Reply #106 on: September 11, 2019, 04:16:27 AM »
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
« Last Edit: September 11, 2019, 04:58:42 AM by dj »

Follow members gave a thank to your post:


Offline danny

  • Tireless poster
  • ****
  • Posts: 192
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #107 on: September 11, 2019, 05:23:00 AM »
...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.}:}.}
« Last Edit: September 11, 2019, 02:24:06 PM by danny »

Offline danny

  • Tireless poster
  • ****
  • Posts: 192
    • View Profile
    • Startfetch
Re: Responsive small screen template - modified by danny
« Reply #108 on: September 11, 2019, 05:28:06 AM »
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. 
« Last Edit: September 11, 2019, 01:57:32 PM by danny »

Offline danny

  • Tireless poster
  • ****
  • Posts: 192
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #109 on: September 11, 2019, 02:25:45 PM »
...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.}:}.}

Offline dj

  • Tireless poster
  • ****
  • Posts: 153
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #110 on: September 11, 2019, 04:03:31 PM »
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)
« Last Edit: September 13, 2019, 11:12:12 AM by dj »

Offline danny

  • Tireless poster
  • ****
  • Posts: 192
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #111 on: September 11, 2019, 10:15:16 PM »
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.
« Last Edit: September 13, 2019, 03:04:34 PM by danny »

Offline dj

  • Tireless poster
  • ****
  • Posts: 153
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - update
« Reply #112 on: September 13, 2019, 11:11:43 AM »
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)
« Last Edit: September 19, 2019, 03:17:52 AM by dj »

Offline danny

  • Tireless poster
  • ****
  • Posts: 192
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #113 on: September 13, 2019, 03:17:16 PM »
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
« Last Edit: September 13, 2019, 06:06:44 PM by danny »

Offline dj

  • Tireless poster
  • ****
  • Posts: 153
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #114 on: September 13, 2019, 04:44:22 PM »
same as V.4.6
Add hfs.filelist.tpl from zip to folder, that contains hfs.exe

which browser?

Offline danny

  • Tireless poster
  • ****
  • Posts: 192
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #115 on: September 13, 2019, 08:04:02 PM »
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.
« Last Edit: September 20, 2019, 05:36:45 PM by danny »

Offline danny

  • Tireless poster
  • ****
  • Posts: 192
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #116 on: September 14, 2019, 07:22:49 AM »
@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. 
« Last Edit: September 14, 2019, 07:59:46 AM by danny »

Offline dj

  • Tireless poster
  • ****
  • Posts: 153
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #117 on: September 14, 2019, 01:11:48 PM »
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}}
« Last Edit: September 30, 2019, 07:44:50 AM by dj »

Follow members gave a thank to your post:


Offline danny

  • Tireless poster
  • ****
  • Posts: 192
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #118 on: September 14, 2019, 09:05:57 PM »
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. 
« Last Edit: September 15, 2019, 06:52:54 AM by danny »

Offline danny

  • Tireless poster
  • ****
  • Posts: 192
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #119 on: September 15, 2019, 08:51:16 PM »
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
« Last Edit: September 16, 2019, 10:34:32 PM by danny »