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

0 Members and 1 Guest are viewing this topic.

Offline danny

  • Tireless poster
  • ****
  • Posts: 123
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #90 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: 138
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #91 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: 123
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #92 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: 138
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - update
« Reply #93 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 18, 2019, 11:32:39 AM by dj »

Offline danny

  • Tireless poster
  • ****
  • Posts: 123
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #94 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
auto.error.handler.v2

*"MP" refers to pre-installed Music player and Photo viewer.
« Last Edit: September 17, 2019, 06:08:51 PM by danny »

Offline dj

  • Tireless poster
  • ****
  • Posts: 138
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #95 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 17, 2019, 06:23:01 AM by dj »

Follow members gave a thank to your post:


Offline danny

  • Tireless poster
  • ****
  • Posts: 123
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #96 on: September 17, 2019, 07:46:30 PM »
I re-uploaded, with 2 different methods to knacker the verbose timestamp.  Both are in the zip file. 

Also wanted to mention...
Script loading is efficient after the </body> tag <script async> and no extra get.  However, separate section is nice for loading the script 'as-needed' by click of a button (seems good for lazyload!).  Also, there is defer and cache.


button onclick <script src="/~lazyimages4.js" defer></script>

[lazyimages4.js|cache]
{.mime|application/javascript.}{.add header|Cache-Control: public, max-age=86400.}


This way, the scripts don't use any bandwidth until a user interface button is clicked.  So, instead of many little pieces (some assembly required), you can put your features scripts inside the template. 

« Last Edit: September 17, 2019, 07:51:39 PM by danny »