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

0 Members and 1 Guest are viewing this topic.

Offline rejetto

  • Administrator
  • Tireless poster
  • *
  • Posts: 12953
    • View Profile
Re: Responsive small screen template
« Reply #30 on: November 03, 2018, 06:54:44 PM »

Offline danny

  • Tireless poster
  • ****
  • Posts: 194
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #31 on: January 18, 2019, 07:54:14 PM »
changelog: touch feedback, disable upload, links
Results:
mobil-light_wo_picV3.5  Works nicely!
mobil-light_V3.7 thumb code missing, display quirk.  Not a standalone template?
mobil-light_V4.1beta mostly blank screen.  Not a standalone template?
mobil-light_V4.2beta mostly blank screen.  Not a standalone template?



Offline LeoNeeson

  • Tireless poster
  • ****
  • Posts: 586
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
Re: Responsive small screen template
« Reply #32 on: January 19, 2019, 02:28:05 PM »
Results:
mobil-light_wo_picV3.5  Works nicely!
mobil-light_V3.7 thumb code missing, display quirk.  Not a standalone template?
mobil-light_V4.1beta mostly blank screen.  Not a standalone template?
mobil-light_V4.2beta mostly blank screen.  Not a standalone template?
I agree with you danny, most templates done by dj are great, but most of them are not standalone templates (in most cases, they are only 'diff templates' of the default template). As my suggestion, I hope dj could in the future release also standalone templates, since this way is much more easier to see the final results to the end-user. ;)
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
• I'm open to help and share any file you may need (just ask me) ;)

Offline dj

  • Tireless poster
  • ****
  • Posts: 154
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #33 on: January 20, 2019, 01:46:03 AM »
@danny, Add hfs.filelist.tpl from zip to folder, that contains hfs.exe
« Last Edit: March 13, 2019, 09:29:05 AM by dj »

Offline danny

  • Tireless poster
  • ****
  • Posts: 194
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #34 on: January 20, 2019, 02:44:02 PM »
@danny, Add hfs.filelist.tpl from zip to folder, that contains hfs.exe
I had mistakenly left it in the folder made by the un-zip (the zip needs 'install-instructions.txt' added).  So, I moved the files to /hfs (same folder has hfs.exe) and the file list isn't blank.  Next:  Only icons displayed are folder and music.  Music player is missing. There's no default filetype icon. Error persistence (cache header not zeroed during error conditions).  Checkbox doesn't have action menu. There's no image thumbnails. 
I think that I have not installed it right.
« Last Edit: January 20, 2019, 06:04:37 PM by danny »

Offline LeoNeeson

  • Tireless poster
  • ****
  • Posts: 586
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
Re: Responsive small screen template
« Reply #35 on: January 21, 2019, 08:18:03 AM »
I think that I have not installed it right.
The best thing you can do (to let one of us help you out), is use either LICEcap, ScreenToGif (both Open Source) or GifCam (Freeware), to record your template install procedure, and then upload the resulting GIF to Imgur or any other image hosting (and obviously posting the results here on the forum). This way, we can help you out installing the template (and see if you are doing some mistake when installing it). ;)
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
• I'm open to help and share any file you may need (just ask me) ;)

Offline dj

  • Tireless poster
  • ****
  • Posts: 154
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - update
« Reply #36 on: March 13, 2019, 09:28:19 AM »
changelog: better readable code, added delete and sort and logout(Edge)
viewthumbs addon included, works also with dnd_upload and searchcategorie addon
 and audioplayerlight and pictureviewer (wrap script in function addon and set compatible=1)

dark_theme sets dark mode by OS and will work with FF67 and Safari 12.1-TP (untested  ;))
languages_addon works also with hfs2.4 (language-files)
« Last Edit: March 24, 2019, 11:09:48 AM by dj »

Offline dj

  • Tireless poster
  • ****
  • Posts: 154
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - addon
« Reply #37 on: March 20, 2019, 04:27:33 AM »
preload addon preloads subfolders
 and shows number files in subfolders

audioplayer changelog: show duration
« Last Edit: March 24, 2019, 08:19:39 AM by dj »

Offline dj

  • Tireless poster
  • ****
  • Posts: 154
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - update
« Reply #38 on: March 26, 2019, 03:50:30 AM »
changelog: added archive
« Last Edit: April 02, 2019, 02:40:56 PM by dj »

Offline dj

  • Tireless poster
  • ****
  • Posts: 154
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - theme
« Reply #39 on: April 02, 2019, 03:22:05 AM »
a new theme  ;)

V4.4.2 viewthumbs addon updated: thumbs must have the same name (frag_bunny.mp4 or frag_bunny.mp4.jpg)
« Last Edit: April 05, 2019, 06:06:44 AM by dj »

Offline LeoNeeson

  • Tireless poster
  • ****
  • Posts: 586
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
Re: Responsive small screen template - theme
« Reply #40 on: April 05, 2019, 02:58:16 AM »
a new theme  ;)
I know this template 'mobil-light_V4.4.2beta.zip' is intended for ultra-modern browsers, but it doesn't work on some older browsers, like Chromium 31. When browsing http://127.0.0.1/ it redirects to http://127.0.0.1/~files.lst showing this result:

Code: [Select]
#04/04/2019 22:52:06,0
some-folder-here/
#,1

On Firefox v52 works almost fine (and it's super-fast! :D ), but on older browsers is not usable at all (I guess it needs some compatibility-fix). Just a suggestion... ;)
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
• I'm open to help and share any file you may need (just ask me) ;)

Offline dj

  • Tireless poster
  • ****
  • Posts: 154
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #41 on: April 05, 2019, 03:32:15 AM »
thanks for review

yes,
version 4 is written for modern browsers (>97%),
version 3 should be compatible with older browsers
« Last Edit: April 07, 2019, 08:53:32 AM by dj »

Offline LeoNeeson

  • Tireless poster
  • ****
  • Posts: 586
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
Re: Responsive small screen template
« Reply #42 on: April 07, 2019, 10:42:45 AM »
Now it works beautifully on old browsers! 8) (with some details)

Design/Layout .... Okay.
Search function .. OK, it works.
Login function ... OK, works fine.
Archive button ... No, it does nothing.
Delete button .... No, it doesn't delete.
Upload button .... No, nothing gets uploaded.

» Summarizing: the 'archive', 'delete' and 'upload' button doesn't work on the 'oldbrowsers.tpl' version (I already know that file selection is done clicking on the time-stamp, but even selecting a file or folder those buttons doesn't work). Otherwise than that, great work!... :)

» Researching: I noticed you used 'XMLHttpRequest GET' instead of 'fetch' to add support to legacy/old browsers. This is great, but doing this you have to release a special version for old browsers every time. My main idea/suggestion was using a 'polyfill', and after doing a search, I've found THIS:

Code: [Select]
<script src="https://unpkg.com/unfetch/polyfill"></script>
I've added that line on your normal 'mobil-light_V4.4.tpl' (you can directly embed THIS file content on your template), and the page loads fine now on old browsers. Using this polyfill the buttons loads okay, but the files and folders are not shown. Perhaps doing some small tweaks, that polyfill can work with your original 'fetch' code (and that way you get the best of both worlds: you can continue using 'fetch', and when 'fetch' is not supported by the browser, that XHR polyfill does the rest).

On my search on internet, I've also found two interesting articles: Why I still use XHR instead of the Fetch API (and how to use a Promise-based XHR). A very nice read, even for 2019 (this blog also has very nice articles!).
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
• I'm open to help and share any file you may need (just ask me) ;)

Offline dj

  • Tireless poster
  • ****
  • Posts: 154
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #43 on: April 07, 2019, 03:45:48 PM »
» Summarizing: the 'archive', 'delete' and 'upload' button doesn't work on the 'oldbrowsers.tpl' version

I forgot to say, you must additional add the hfs.diff_oldbrowser.tpl (or add the script at the end).
I tested it with IE11.
I also forgot to mention, that click on the clock sorts (by date) (should I add some sorting symbol like ↑  ?).

The polyfill doesn't work with IE11 (because  needs Promise is polyfilled of course!)


changelog: works with old browsers
querystringparameter ?update checks for template updates
textedit can also be used for single-comment files
« Last Edit: April 14, 2019, 03:59:46 PM by dj »

Offline LeoNeeson

  • Tireless poster
  • ****
  • Posts: 586
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
Re: Responsive small screen template
« Reply #44 on: April 08, 2019, 06:20:15 AM »
I forgot to say, you must additional add the hfs.diff_oldbrowser.tpl (or add the script at the end).
At least on Chrome 30, the problem continues (it doesn't work those 3 buttons). It's very strange (I'm doing all correct: I'm using 'hfs.diff.tpl' from "oldbrowsers_addon.zip", overwriting the files of 'mobil-light_V4.5.zip').

You can download HERE a portable version of Chrome 30 to make some tests (here you will find more portable versions to make tests). Using Chrome 30, you will see in the console some errors (for example: "Uncaught ReferenceError: del is not defined").

The polyfill doesn't work with IE11 (because  needs Promise is polyfilled of course!)
I didn't know IE11 not had Promises. Perhaps that's why on Chrome 30 fails those 3 buttons: 'archive', 'delete' and 'upload' (since Chrome 30 doesn't support promises).

I've found HERE a extremely lightweight 'Promise Polyfill' that works with IE8+, Chrome, Firefox, IOS 4+, Safari 5+ and Opera. This polyfill makes promises work on browsers that natively doesn't support it...

I've tried modifiying your 'mobil-light_V4.5.tpl' and adding the folowing (marked in red color):
Quote
<body>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/unfetch/polyfill"></script>

<header>

...and now it works on Chrome 30 :) (untested on IE11), but the 'archive', 'delete' and 'upload' buttons continues failing. There must be something else to modify (to make it work with Chrome 30).

Perhaps if you embed the content of those 2 polyfills in your code (and do some small tweaks), you can make only one version that works on any browser.
« Last Edit: April 08, 2019, 06:22:10 AM by LeoNeeson »
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
• I'm open to help and share any file you may need (just ask me) ;)