rejetto forum

Software => HFS ~ HTTP File Server => HTML & templates => Topic started by: Chris Harris on June 04, 2016, 10:24:29 AM

Title: Responsive small screen template
Post by: Chris Harris on June 04, 2016, 10:24:29 AM
I am looking for a template that is responsive to screen size. I have tried many of the available ones and found Live template  was responsive but I do not like the output.

Is there a template that gives the layout  like the default BUT I would prefer the layout of the default template but with the User, Folder,  Search, Select,  Actions and Server information dialogs located below the file list.

How do I do this??
Chris
Title: Re: Responsive small screen template
Post by: dj on June 06, 2016, 05:33:36 AM
you can try mobil-light http://www.rejetto.com/forum/html-templates/file-upload-with-drag-and-drop/msg1061004/#msg1061004 (http://www.rejetto.com/forum/html-templates/file-upload-with-drag-and-drop/msg1061004/#msg1061004).
The dialogs are not located below the file list, but you can show/hide them.


Edit: latest  (http://rejetto.com/forum/index.php?topic=11754.msg1066583#msg1066583)version (https://github.com/dj0001/hfs-template/releases/latest)

Features:
never reloads the page
logout(Edge)
searchcategorie
web-app-capable (http://rejetto.com/forum/index.php?topic=11754.msg1064594#msg1064594)
generate thumbnails on upload
build-in pictureviewer(chrome77)
build-in audioplayer
only 10k
Title: Re: Responsive small screen template
Post by: Chris Harris on June 06, 2016, 08:29:26 AM
I added hfs.diff.tpl and then selected this template. I then get a blank screen??

When switch to another template all works again.

I have done something wrong!!
Chris
Title: Re: Responsive small screen template
Post by: dj on June 06, 2016, 09:41:10 AM
rename mobil-ligh.tpl to hfs.diff.tpl and add it.
Title: Re: Responsive small screen template
Post by: Mars on June 06, 2016, 11:25:55 AM
in the default template the main, section contain those lines

Quote
<body>
<!--{.comment|--><h1 style='margin-bottom:100em'>WARNING: this template is only to be used with HFS 2.3 (and macros enabled)</h1> <!--.} -->
{.$box panel.}
{.$list.}
</body>
</html>
<!-- Build-time: %build-time% -->

if you reverse lines {.$box panel.} and {.$list.}, you will find that the file list is displayed first. then just update the values in the [style.css | no log] and [impromptu.css | no log] to make a good layout.

if the purpose of this new layout is to alternate between landscape mode and portrait mode on a mobile phone, it may be more complex because it will be necessary to have actually two different models to systematically recharge to change orientation, or it will be necessary to combine the two versions into one with javascript hide unwanted parts

Title: Re: Responsive small screen template
Post by: Chris Harris on June 06, 2016, 01:24:17 PM
rename mobil-ligh.tpl to hfs.diff.tpl and add it.

In mobil-light.zip the file is already  hfs.diff.tpl . If I select this file I get blank screen. If I chose hfs.tpl I get original layout

Title: Re: Responsive small screen template
Post by: dj on June 06, 2016, 02:52:56 PM
My bad.
In hfs Add a new real folder. In explorer Add the file hfs.diff.tpl to this folder.
Or If you wan't use in the root, select /, Properties, Diff template and copy the text of the hfs.diff.tpl to it.
Don't change template file.
http://www.rejetto.com/wiki/index.php?title=HFS:_Hidden_things (http://www.rejetto.com/wiki/index.php?title=HFS:_Hidden_things)
Title: Re: Responsive small screen template
Post by: Chris Harris on June 07, 2016, 04:21:38 AM
My bad.
In hfs Add a new real folder. In explorer Add the file hfs.diff.tpl to this folder.
Or If you wan't use in the root, select /, Properties, Diff template and copy the text of the hfs.diff.tpl to it.
Don't change template file.
http://www.rejetto.com/wiki/index.php?title=HFS:_Hidden_things (http://www.rejetto.com/wiki/index.php?title=HFS:_Hidden_things)

Great. This now works well on the desktop and a small mopbile phone. Thanks

Is there a way to change the sort direction if required?

Chris
Title: Re: Responsive small screen template
Post by: dj on June 07, 2016, 11:03:14 AM
To change the sort direction

add before </select> (line 27 33)
Code: [Select]
<option value="{.get|url|rev={.not|{.?rev.}.}.}">order &{.if|{.?rev.}|u|d.}arr;</option>
Title: Re: Responsive small screen template
Post by: Chris Harris on June 07, 2016, 12:41:18 PM
Hi

This sort option works.
Thanks
Chris

PS
The </select>  code is on line 33 in hfs.diff.tpl
Title: Re: Responsive small screen template
Post by: bmartino1 on June 07, 2016, 08:24:01 PM
this sounds more like a CSS thing then an hfs/html code stuff:

http://stackoverflow.com/questions/25817589/auto-adjusting-web-page-to-screen-size-html

it worth a look into...
Title: Re: Responsive small screen template
Post by: dj on June 20, 2016, 05:02:44 AM
the template without pictureviewer

Code: [Select]
[file=folder]
{.set|mask|{:{.match|jpg;png;gif|%item-ext%.}:}.}
<tr id="%item-url%" {.if|{.^mask.}|class="media".}><td style="width:72px">
<img src= {.if|{.^mask.}|"thumb/%item-url%" style="width:64px;height:64px;object-fit:cover" onclick='show|"%item-icon%" onclick='location=.}("%item-url%")' alt="&#x1f304;" title="%item-name%" /></td>

[+file=+folder]
<td style="text-align:initial">
<div><a href="%item-url%" style="color:black; font-size:16px">%item-name%</a></div>
<div style="width:200px" title="%item-comment%">%item-modified% {.if|{.get|is new.}|&#x1F195;.}</div>
<div style="width:100px" title="%item-dl-count%">{.or|%item-size%|.}</div>
</td>
<td style="width:72px;text-align:center">
<input type="checkbox" class='selector' name='selection' value="%item-url%" {.if not|{.or|{.get|can delete.}|{.get|can access.}|{.get|can archive item.}.}|disabled='disabled'.} ></td>
</tr>

[list]
<div id='files_outer'>
<div style='height:1.6em;'></div>

{.if not| %number% |{: <div style='font-size:200%; padding:1em;'>{.!No {.if|{.length|{.?search.}.}|results|files.}.}</div> :}|{:
        <form method='post'>
<table id='files' style="width:100%; border-spacing:0px 1px; font-family:Helvetica">
<tr>
<th><a id="menu">&#x2261;</a>
<th><select onchange='location=this.value'>
<option {.if|{.=|{.urlvar|sort.}|n.}|selected.} value="{.get|url|sort=n|rev={.?sort=n.}.}">Name</option>
<option {.if|{.=|{.urlvar|sort.}|s.}|selected.} value="{.get|url|sort=s|rev={.?sort=s.}.}">Size</option>
<option {.if|{.=|{.urlvar|sort.}|t.}|selected.} value="{.get|url|sort=t|rev={.?sort=t.}.}">Timestamp</option>
<option value="{.get|url|rev={.not|{.?rev.}.}.}">order &{.if|{.?rev.}|u|d.}arr;</option>
</select><th>
</tr>
%list%
</table>
        </form>
:}.}
</div>

<script>
(function() {
  var menu = document.getElementById("menu")
  menu.onclick = function() {
    var pan = document.getElementById("panel");
    pan.style.display = pan.style.display ? "" : "none";
    document.getElementById("files_outer").style.overflow = pan.style.display ? "initial" : "auto"
  }
  if (window.innerWidth < 640) menu.click()  //if template is slow remove this line
})();
</script>

[box panel]
<script>
(function() {
//add viewport to head
 var tmp = document.createElement("meta");
  tmp.name = 'viewport';
  tmp.content = 'width=device-width';
  document.head.appendChild(tmp)

  var tmp = document.createElement('style');
  tmp.innerHTML = 'tr:hover td {background: #EEE} \ntd div[title] {opacity:.54; font-size:14px; display:inline-block}';
  document.head.appendChild(tmp)

})();
</script>

<div id='panel'>
    {.$box messages.}
    {.$box login.}
    {.$box folder.}
    {.$box search.}
    {.$box selection.}
    {.$box upload.}
    {.$box actions.}
    {.$box server info.}
</div>

Perhaps it's faster
Title: Re: Responsive small screen template
Post by: Chris Harris on June 20, 2016, 06:37:59 AM
This was much faster BUT the menu button to to turn the box panel on/off does not work. I cannot see where this in in the code.

Chris
Title: Re: Responsive small screen template
Post by: dj on June 20, 2016, 08:14:50 AM
Corrected
Title: Re: Responsive small screen template
Post by: Chris Harris on June 20, 2016, 11:21:37 AM
Hi
This now works as expected and is much faster than the original template on my smartphone.

Thanks to all

Chris
Title: Re: Responsive small screen template
Post by: casey on July 05, 2018, 06:16:52 AM
Sorry to reply to this old topic. I need a template with preview pict. I try this and just get the blank screen.
Maybe I install in bad way. Please someone advice. Help!
Title: Re: Responsive small screen template
Post by: dj on July 07, 2018, 02:07:50 PM
Put the hfs.diff.tpl in your picture-folder.

Added close × (Esc) button,
fullscreen ⛶  (click first image on the left)

(https://raw.githubusercontent.com/dj0001/pwa/gh-pages/test/AnimatedPNGs.com_1531111723400.png)
Title: Re: Responsive small screen template
Post by: dj on July 13, 2018, 05:52:51 PM
Inspired by the throwback template http://rejetto.com/forum/index.php?topic=12055.msg1062882#msg1062882 (http://rejetto.com/forum/index.php?topic=12055.msg1062882#msg1062882)

I changed mobil-light to a lightweight and accessible stand-alone template without jquery
Thanks danny

and the pictureviewer for this template as diff template
Title: Re: Responsive small screen template
Post by: dj on July 18, 2018, 04:31:44 PM
V2 loads the javascript part from browser cache
http://rejetto.com/forum/index.php?topic=12054.msg1062730#msg1062730 (http://rejetto.com/forum/index.php?topic=12054.msg1062730#msg1062730)

Update: 5+ themes (as diff template)
Title: Re: Responsive small screen template
Post by: dj on July 22, 2018, 04:51:18 PM
V3 comes with a user selectable (dark) theme ⚙

https://youtu.be/bxFavyESPMw (https://youtu.be/bxFavyESPMw)

Update: 5+ addons (as diff template)
Title: Re: Responsive small screen template
Post by: dj on July 28, 2018, 10:18:39 AM
add a logout button [➔

works currently only in IE, Edge
this addon works also with the standard-template
Title: Re: Responsive small screen template
Post by: Chris Harris on August 02, 2018, 07:16:35 AM
I just tried version 3  mobil-light_wo_picV3.1.zip. It is very past. I could add the switchable hteme and the thumbnails but I have a major problem.

There is nothing under the menu hamburger/arrow!

What have I done wrong?

I want to be able select some/all files and then download or delete
Title: Re: Responsive small screen template
Post by: dj on August 02, 2018, 08:46:57 AM
Have you set the folder permissions in hfs?
If no permission is set, no button appears.

There are buttons for upload, new folder, delete and rename.
Archive comes to the to-to-list.

the files have been updated, download mobil-light_wo_picV3.1.zip again,
 you get mobil-light_wo_picV3.2.tpl and two alternative panels (a modal dialog and a select)
(Sorry, the javascript modal screen from Leo isn't included)

Or use mobil-light_wo_picV3.3.tpl (it's included in the pagination_theme)

Update: archive_as_zip replaces TAR Archive with ZIP Archive
this addon works also with the standard-template
Title: Re: Responsive small screen template
Post by: Chris Harris on August 03, 2018, 05:16:25 AM
I have now installed  mobil-light_wo_picV3.3.tpl

"Have you set the folder permissions in hfs?
If no permission is set, no button appears"

No I had NOT set the permissions and this was the problem.

Thanks
Chris
Title: Re: Responsive small screen template
Post by: bmartino1 on August 03, 2018, 10:50:50 PM
http://rejetto.com/forum/index.php?topic=6855.0

Will have to run some test for other browser

add a logout button [➔

works currently only in IE, Edge
this addon works also with the standard-template
Title: Re: Responsive small screen template
Post by: dj on August 12, 2018, 09:55:56 AM
Added screenshots from the latest stable version 3.4/3.5

and version 3.5, which spares your data volume (removed inline styles in tbody)

update: added Move-Button (just navigate to target directory instead of typing)
  works different to standard-tpl

update: added Select All
 Use shift+click to select range of checkboxes
 this addon works also with the standard-template

updated audioplayer (now works also with the standard-template, play m3u, remebers last song)
Title: Re: Responsive small screen template
Post by: dj on August 25, 2018, 06:37:33 PM
a new theme
update: batchrename renames multiple files (number files)
Title: Re: Responsive small screen template
Post by: dj on September 09, 2018, 07:50:50 AM
a preview of version 4, which never reloads the page
update: 4.1beta can use archive addon
update: v3.7 works with HFS v2.4
 dnd_upload_thumb generates thumbnails (works also with the new standard-tpl)
Title: Re: Responsive small screen template
Post by: dj on October 11, 2018, 01:54:35 PM
a new version of the comment addon (works now with UTF-8)
update: dnd_upload_comment generates comment from image title (edit in file explorer)
Title: Re: Responsive small screen template
Post by: dj on October 29, 2018, 04:46:10 PM
changelog: touch feedback, disable upload, links
Title: Re: Responsive small screen template
Post by: rejetto on November 03, 2018, 06:54:44 PM
moved ot discussion to http://rejetto.com/forum/index.php?topic=13081
Title: Re: Responsive small screen template
Post by: LeoNeeson 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. ;)
Title: Re: Responsive small screen template
Post by: dj on January 20, 2019, 01:46:03 AM
@danny, Add hfs.filelist.tpl from zip to folder, that contains hfs.exe
Title: Re: Responsive small screen template
Post by: LeoNeeson 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 (https://www.cockos.com/licecap/), ScreenToGif (https://github.com/NickeManarin/ScreenToGif/) (both Open Source) or GifCam (http://blog.bahraniapps.com/gifcam/) (Freeware), to record your template install procedure, and then upload the resulting GIF to Imgur (https://imgur.com/upload) 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). ;)
Title: Re: Responsive small screen template - update
Post by: dj 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 (http://rejetto.com/forum/index.php?topic=13060.msg1064345#msg1064345)
 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 (http://rejetto.com/forum/index.php?topic=11880.msg1062163#msg1062163))
Title: Re: Responsive small screen template - addon
Post by: dj on March 20, 2019, 04:27:33 AM
preload addon preloads subfolders
 and shows number files in subfolders

audioplayer changelog: show duration
Title: Re: Responsive small screen template - update
Post by: dj on March 26, 2019, 03:50:30 AM
changelog: added archive
Title: Re: Responsive small screen template - theme
Post by: dj 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)
Title: Re: Responsive small screen template - theme
Post by: LeoNeeson 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... ;)
Title: Re: Responsive small screen template
Post by: dj on April 05, 2019, 03:32:15 AM
thanks for review

yes,
version 4 is written for modern browsers (>97% (https://www.w3counter.com/globalstats.php)),
version 3 should be compatible with older browsers
Title: Re: Responsive small screen template
Post by: LeoNeeson 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 (http://rejetto.com/forum/index.php?action=dlattach;topic=11754.0;attach=9077)' 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 (https://github.com/developit/unfetch):

Code: [Select]
<script src="https://unpkg.com/unfetch/polyfill"></script>
I've added that line on your normal 'mobil-light_V4.4.tpl (http://rejetto.com/forum/index.php?action=dlattach;topic=11754.0;attach=9067)' (you can directly embed THIS (https://unpkg.com/unfetch@4.1.0/polyfill/index.js) 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 (https://gomakethings.com/why-i-still-use-xhr-instead-of-the-fetch-api/) (and how to use a Promise-based XHR (https://gomakethings.com/promise-based-xhr/)). A very nice read, even for 2019 (this blog (https://gomakethings.com/articles) also has very nice articles!).
Title: Re: Responsive small screen template
Post by: dj 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
Title: Re: Responsive small screen template
Post by: LeoNeeson 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 (http://download1.srware.net/old/iron/win/portable/IronPortable_30.zip) a portable version of Chrome 30 to make some tests (here (http://download1.srware.net/old/iron/win/portable/) 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 (https://caniuse.com/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 (https://github.com/taylorhakes/promise-polyfill) 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.
Title: Re: Responsive small screen template
Post by: dj on April 08, 2019, 08:47:57 AM
At least on Chrome 30, the problem continues

I tried it with chromium 30 and I found, when you in windows explorer copy hfs.diff.tpl in your root, it don't work (it doesn't load hfs.diff.tpl),
but when you in hfs copy the code from hfs.diff.tpl to properties-diff template it works :)
I don't know why.


Title: Re: Responsive small screen template
Post by: LeoNeeson on April 10, 2019, 11:40:00 AM
I tried it with chromium 30 and I found, when you in windows explorer copy hfs.diff.tpl in your root, it don't work (it doesn't load hfs.diff.tpl),
but when you in hfs copy the code from hfs.diff.tpl to properties-diff template it works :)
I don't know why.
Yes, it's true. I'm glad you also found this error. I've already reported that "hfs.diff.tpl" doesn't work on root HERE (http://rejetto.com/forum/index.php?topic=13060.msg1064489#msg1064489), but I didn't get any reply about it. The normal behavior is that "hfs.diff.tpl" should work on root too. I hope Rejetto get attention to this.
Title: Re: Responsive small screen template
Post by: SilentPliz on April 10, 2019, 06:44:08 PM
hfs.exe, hfs.events, hfs.diff.tpl... Files starting with hfs. can not be downloaded for security reasons.

hfs.diff.tpl is usable in individual real folders.

Code: [Select]
   if f.isFile() and (dlForbiddenForWholeFolder or f.isDLforbidden() or ansiStartsStr('hfs.', f.name) or ansiEndsStr('.pem', f.name)) then
      begin
      getPage('deny', data);
      exit;
      end;
Title: Re: Responsive small screen template
Post by: Mars on April 12, 2019, 05:30:16 AM
hfs.diff.tpl
Code: [Select]
[+]
{.add to log| main section from diff template.}

[+files]
{.add to log| list section from diff template.}

[+file=link=folder]
{.add to log| item section from diff template.}

Uses this example, your log must become several lines of comments

Otherwise, in the text box of the Diff Template tab of the ROOT property, put on a single line without a carriage return the full name of the file that will be added as a diff template.

If the file with absolute path exists then it will be used,

otherwise with relative path
-  the file will be searched first from hfs.exe folder,
- and then from the resource item if this item is real folder.
- by default the line will be displayed on the web page as a string


note that if you fill the tab "Diff template" with some sections, and that there is a hfs.diff.tpl in the associated real directory, the diff.tpl will be loaded then the content of "Diff template" will be added

Code: ("DIFF Template") [Select]
[+]
{.add to log| main section from "DIFF Template".}

[+files]
{.add to log| list section from "DIFF Template".}

[+file=link=folder]
{.add to log| item section from "DIFF Template".}


Code: ("hfs.diff.tpl") [Select]
[+]
{.add to log| main section from "hfs.diff.tpl".}

[+files]
{.add to log| list section from "hfs.diff.tpl".}

[+file=link=folder]
{.add to log| item section from "hfs.diff.tpl".}
Title: Re: Responsive small screen template - addon
Post by: dj on April 13, 2019, 09:19:18 AM
New folder
Title: Re: Responsive small screen template - update
Post by: dj on April 20, 2019, 01:11:20 PM
changelog: template works also with HFS3 (nodejs). (beta)
Title: Re: Responsive small screen template - update
Post by: dj on April 20, 2019, 01:56:15 PM
changelog:
(https://raw.githubusercontent.com/dj0001/pwa/gh-pages/test/Screenshot_20190422-184755.jpg) (https://raw.githubusercontent.com/dj0001/pwa/gh-pages/test/Screenshot_20190422-180707.jpg) (https://raw.githubusercontent.com/dj0001/pwa/gh-pages/test/screenshot.jpg)
Lighthouse report: Performance:100, Accessibility: 93, Best Practises:93, SEO: 100
Title: Re: Responsive small screen template
Post by: dj on April 29, 2019, 02:32:08 PM
changelog:
Lighthouse report: Performance:100, Accessibility: 100, Best Practises:93, SEO: 100
Title: Re: Responsive small screen template - addon
Post by: dj on May 19, 2019, 08:42:41 AM
on upload write lastModifiedDate to comments
useful to show when photos taken
works also with HFS2.4 (on DnD upload)

update audioplayer shows nexttrack button on lock screen (chrome). Future version will also show artwork (put it in subfolder thumb).
update: add li {display:inline-block} li>img+div {display:none} to lazyimages-style to show symbols (photos) only.
Title: Re: Responsive small screen template - FAQ
Post by: dj on June 12, 2019, 04:03:29 AM
audioplayer:
Title: Re: Responsive small screen template - audioplayer
Post by: dj on June 22, 2019, 10:23:06 AM
The audio player is working mostly well.  There's one little bug:  Starts playing in the middle of a file, which happens if: 1). play the folder, 2). refresh, 3). play the folder again.
it's not a bug, it's a feature. It later remembers last playing position.
But on shuffle play it's make no sense (I disabled it on shuffle play)

changelog:
Title: Re: Responsive small screen template
Post by: bmartino1 on June 22, 2019, 10:03:02 PM
Yes, it's true. I'm glad you also found this error. I've already reported that "hfs.diff.tpl" doesn't work on root HERE (http://rejetto.com/forum/index.php?topic=13060.msg1064489#msg1064489), but I didn't get any reply about it. The normal behavior is that "hfs.diff.tpl" should work on root too. I hope Rejetto get attention to this.

looks like you guys may have already answered or solved it. ive foi d that if you dont bind folder to root.

so hfs main directory tree 8s set to a primary folder and dif tpl is i  that folder.
Title: Re: Responsive small screen template - audioplayer
Post by: dj on June 26, 2019, 05:07:30 AM
That works much better!   Only problem is that it stopped playing at the end of the playlist (you wouldn't want an internet radio that stops).  Can we get a playlist-repeat?
added (http://rejetto.com/forum/index.php?topic=11754.msg1064704#msg1064704) repeat to the editable vars (update @danny: set it to true)
Title: Re: Responsive small screen template - pictureviewer
Post by: dj on July 05, 2019, 03:54:04 AM
you can try my other pictureviewer (http://rejetto.com/forum/index.php?topic=13060.msg1064013#msg1064013)
It uses the same window. Click the X (in the right top corner) to return to filelist
Title: Re: Responsive small screen template
Post by: dj on July 06, 2019, 05:25:25 PM
I'd like to try your lazyimages with picviewer_addon in Throwback-XM2.

I recommend to use native (https://addyosmani.com/blog/lazy-loading/) lazy loading
Simply add loading="lazy" to the image tag
It will work in future browser versions

P.S.
the pictureviewer.zip works,
if you add id="files" to the table tag (with %list%)

update: pictureviewer works also with mobil-light_4.6 (set compatible=1)

FAQ pictureviewer:
click on image icon, next pic click on pic, close click on X
previous pic click on left side of pic (fullscreen click on left side of first pic (exit=Esc))
Title: Re: Responsive small screen template - pictureviewer
Post by: dj on July 09, 2019, 05:58:21 AM
Can't find the X.  How do I close the slideshow?
fixed need to scroll to find X, added background shadow for better visibility

Need image Centered on PC screen (not far left)
Need 50%transparent gray (or black) background for slideshow
Code: [Select]
top:50%; left:50%; transform:translate(-50%,-50%)
Perhaps click bottom edge of photo to begin 7 seconds automated advance slideshow? Would be nice, but I can't find the controls.
longtouch (rightclick) on image to start slideshow
Title: Re: Responsive small screen template - pictureviewer
Post by: dj on July 11, 2019, 03:47:26 AM
Longtouch method isn't really PC compatible
longtouch=rightclick
but feel free to put the mod.oncontextmenu function to a another control like ▶
Title: Re: Responsive small screen template - pictureviewer
Post by: bmartino1 on July 11, 2019, 12:41:08 PM
That might take a while--Can you recommend a website that seems effective at teaching me how to read javascript?

w3 schools???

https://www.w3schools.com/jsref/event_oncontextmenu.asp

https://www.w3schools.com/js/
Title: Re: Responsive small screen template - pictureviewer
Post by: dj on July 15, 2019, 03:53:14 AM
center on screen with with object-fit zooms small images
Exit from fullscreen with Esc Button (or back button on android ◁ )

P.S. to dim the background add
Code: [Select]
outline: 9999px solid rgba(0,0,0,0.5)
update: v2 centers images
Title: Re: Responsive small screen template
Post by: dj on July 15, 2019, 05:43:28 AM
@danny set the last audio.preload to 'none' (untested at the moment)

Title: Re: Responsive small screen template
Post by: dj on July 15, 2019, 04:11:03 PM
That solved the problem of doing stuff before play clicked.  New problem:  downloading songs twice while playing.
don't have the mistake
can you post the template?
what does network analysis say in the browser?
Title: Re: Responsive small screen template
Post by: dj on July 15, 2019, 08:21:47 PM
The double-download problem is intermittent.  Also the number of get requests varies.
I don't know. I think, theres no double-download, the browser downloads parts (can see in browser network analysis) (it's the filesize of your song 2M?)
stackoverflow (https://stackoverflow.com/questions/3504008/html5-audio-player-makes-multiple-get-requests-when-loading-why) don't help really
the multiple requests have status 206 (partial content load)


update: yes, you make a mistake in the editing (changing the play button is not nessary)
Title: Re: Responsive small screen template
Post by: dj on July 17, 2019, 04:35:39 PM
@danny replace audio.onerror

Code: [Select]
audio.onerror=function(){audio.onended()}
P.S.
Also, it can play playlists (m3u) and webradio (http://dir.xiph.org/)


I'm on holidays next week's
latest template (http://rejetto.com/forum/index.php?topic=11754.msg1064605#msg1064605)+audioplayer (http://rejetto.com/forum/index.php?topic=11754.msg1064704#msg1064704)+pictureviewer (http://rejetto.com/forum/index.php?topic=11754.msg1064755#msg1064755)


Title: Re: Responsive small screen template
Post by: bmartino1 on July 23, 2019, 08:21:41 PM
i like the new html content and template desing, but i'm having a hard time following where the current version for the template are and go.

can you link the attachment or tell me what post on the thread to download them at?
Title: Re: Responsive small screen template - pictureviewer
Post by: dj on July 24, 2019, 03:01:44 AM
time to present your vacation photos

update: v2.2 swipe to next image
update: v3 works with mobil-light_4.6 & viewthumbs|audioplayer

@bmartino1 latest template here
changelog: fixed multiple urlvars

update: videoplayer_addon only useful if you want to show subtitles
subtitle must have the same name (tuxi9.ogg.vtt)
you also need video5.htm (http://rejetto.com/forum/index.php?topic=13173.msg1064794#msg1064794)
Title: Re: Responsive small screen template - audioplayer
Post by: dj on August 03, 2019, 07:37:44 AM
@danny
code from audioplayer:
Code: [Select]
  //audioplayer for all (click on audio icon)
if I understand the question, have you tryed to click on any audio file icon?
it already exists
Title: Re: Responsive small screen template
Post by: dj on September 06, 2019, 04:27:11 AM
I would like to see your template and accessories all in One file.  This method could help: 

yes, you can also run the batchfile in the zip (http://rejetto.com/forum/index.php?topic=11754.msg1064795#msg1064795)
it creates a template with viewthumbs included
Title: Re: Responsive small screen template
Post by: dj on September 07, 2019, 05:29:05 AM
the filelist.tpl ist not installed in your screenshot

I couldn't figure out how to put the [files] section back inside the template (so there's no separate filelist.tpl). 
So, howabout "click-once-go," a 1 file instantly ready-to-use template?

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


Maybe CSS isn't working; because, text and background same/similar, is so hard to read

you use the dark theme
you can change the theme with rightclick on files

the css for dark theme you find in line 31 and 32
Code: [Select]
.dark {background:#555; color:white}
@media (prefers-color-scheme: dark) {  body {   background-color: #555;   color: white;  }}

todo: better contrast for dark theme
update: replace body with body, a
this will go to mobil-light_V4.6.4:
Code: [Select]
@media (prefers-color-scheme: dark) {  body, li a, li span, small a {   background-color: #555;   color: white;  }}
Title: Re: Responsive small screen template
Post by: dj on September 08, 2019, 05:04:26 PM
On PC screen, item.size makes a zigzag down the center of the screen.  A possible fix is to remove </span><span> from in-

replace li span {margin-left:auto}
with li a+span {margin:0px 10px 0px auto}


Edit:
perhaps this line is not needed:
#upload {width:74px; background: no-repeat -74px linear-gradient(#cde,#cde), #f0f0f0; transition:none}
it's for upload progress

N/A is displayed as file size for virtual folder.  Need blank instead of N/A. (I didn't figure out how to do that)
will be fixed in next version

Edit:
the #FFF0D4 gradient background is nice
you have two more themes, if you set OS color to light

what is margins="0" in the body tag?
Title: Re: Responsive small screen template - modified by danny
Post by: dj 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 (http://rejetto.com/forum/index.php?topic=11754.msg1064594#msg1064594)

be carefully with cutting the date. It depends on OS. What's your OS language? En?
use ISO-dateformat in HFS to remove seconds
Title: Re: Responsive small screen template
Post by: dj 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 (http://rejetto.com/forum/index.php?topic=13069.msg1064122#msg1064122)
the streaming load can possibly be done with the streaming API (https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), but this is a greater thing (Edit: a first test sounds promising)
Title: Re: Responsive small screen template - update
Post by: dj 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)
Title: Re: Responsive small screen template
Post by: dj 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?
Title: Re: Responsive small screen template
Post by: dj 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 (http://rejetto.com/forum/index.php?topic=11754.msg1064906#msg1064906) (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}}
Title: Re: Responsive small screen template - update
Post by: dj on September 29, 2019, 03:06:49 AM
changelog:
shows thumbs from subfolders thumb or lazy full-img-thumbs(chrome 77) without addon
new folder (rightclick upload)  without addon
show number selected files

and a preview of tile_theme_v2, which comes next days
my goal is a theme, which looks like Files Go (https://play.google.com/store/apps/details?id=com.google.android.apps.nbu.files&hl=en)
Title: Re: Responsive small screen template - addon
Post by: dj on September 30, 2019, 02:54:00 AM
tile_theme_v2
Title: Re: Responsive small screen template- update
Post by: dj on October 04, 2019, 03:20:33 AM
changelog:

build-in pictureviewer(chrome77)

What do you want to see in next version? audioplayer (http://rejetto.com/forum/index.php?topic=11754.msg1064962#msg1064962), languages, archiveaszip (http://rejetto.com/forum/index.php?topic=11754.msg1064576#msg1064576) or something else
Title: Re: Responsive small screen template
Post by: dj on October 06, 2019, 09:38:51 AM
I love the shuffle audio player.  By now, I though it was standard though.  So, go ahead and restore that function. 
It was never (http://rejetto.com/forum/index.php?topic=11754.msg1064914#msg1064914) removed except in audioplayer_light (http://rejetto.com/forum/index.php?topic=11754.msg1064962#msg1064962)(minimalistic)

I have added shuffle to the editable vars. Set it to true. I hope, this helps.
Title: Re: Responsive small screen template - Tile theme on PC
Post by: dj on October 08, 2019, 02:58:26 PM
thanks for review. Add:
Code: [Select]
@media (min-width:480px) {.grid li, .grid li>img, .grid li div {width:256px;height:256px} .grid li{margin:2%}}
h265 works (http://rejetto.com/forum/index.php?topic=13173.msg1064839#msg1064839) for me in Edge

V5.2 with audioplayer comes on halloween next days
Title: Re: Responsive small screen template - update
Post by: dj on October 15, 2019, 02:42:20 AM
changelog (http://rejetto.com/forum/index.php?topic=11754.msg1061351#msg1061351):

build-in (basic) audioplayer (http://rejetto.com/forum/index.php?action=dlattach;topic=11754.0;attach=9233;image)
works best with chrome and media keys
generate (http://rejetto.com/forum/index.php?topic=4600.msg1064111#msg1064111) artwork (on upload)

autocreate subfolders thumb on image upload
create thumbs from videos (first frame)
Title: Re: Responsive small screen template - addon
Post by: dj on October 18, 2019, 11:59:31 AM
create thumbs from audios
opt. renames audio to %artist% - %title%

lastModifiedV2 renames images to %lastModified% - %title% (https://www.windowscentral.com/how-edit-picture-metadata-windows-10) on upload
lastModifiedV3 restores lastModified after upload (with help of powershell)
useful to show when photos taken

changelog: changepwd and rename (rightclick login and upload)
pictureviewer works also with thumbnails (click folder again)
Title: Re: Responsive small screen template
Post by: Fysack on October 18, 2019, 09:59:43 PM
dj.. danny.. Great work. Stay strong. Look forward  :
-*
Title: Re: Responsive small screen template - addon
Post by: dj on November 01, 2019, 08:28:22 AM
halloween has enchanted the date  :-[
show relative date as yesterday

onerror="this.src='%item-url%'"
you should add this.onerror=null; otherwise you can get endless loops (https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror#element.onerror). Retry-After could help too

Menu > debug > run script to restore default settings (after switching from Throwback to Default tpl)
Code: [Select]
{.set ini|use-system-icons=yes.}{.set ini|tray-icon-for-each-download=yes.}{.set ini|max-ips=0.}{.set ini|max-connections=0.}{.set ini|max-ips-downloading=0.}{.set ini|max-contemporary-dls=0.}{.set ini|enable-fingerprints=yes.}{.set ini|send-hfs-identifier=yes.}{.set ini|support-descript.ion=yes.}{.set ini|tray-instead-of-quit=no.}{.set ini|load-single-comment-files=yes.}{.set ini|hints4newcomers=yes.}{.set ini|save-totals=yes.}{.set ini|tray-shows=download.}{.set ini|flash-on=download.}{.set ini|browse-localhost=yes.}{.set ini|max-connections-by-ip=0.}
autoban addon (http://rejetto.com/forum/index.php?topic=6757.msg1043503#msg1043503)  "Uploaded by" add [upload completed] event with blue text (http://rejetto.com/forum/index.php?topic=9078.msg1051959#msg1051959) and show comments (http://rejetto.com/forum/index.php?topic=11754.msg1064576#msg1064576)

changelog: improved picviewer (hide header)
slideshowV2 repeats and reloads (photoframe)
Title: Re: Responsive small screen template
Post by: dj on November 17, 2019, 02:13:13 AM
@danny: Edit: onerror="this.onerror=null; setTimeout(function(){this.src='%item-url%'}.bind(this),157)"
(to test endless loop: add .jpg to a textfile)

Santa clause will bring a photoframe with blured background (ambilight) on 1. Advent
Title: Re: Responsive small screen template - update
Post by: dj on December 01, 2019, 12:05:44 AM
photoframe comes with play button, ambilight and more 🕯 

Edit: 🎅
add weather to slideshow (uncommend last line)
add remote (https://play.google.com/store/apps/details?id=io.appground.blek) control (space key)
add videoclips covert (https://ezgif.com/video-to-webp) them to webp (https://raw.githubusercontent.com/dj0001/pwa/gh-pages/test/ezgif.com-gif-maker(1).webp)

Videoframe works with all templates (with Motion Photo Viewer (https://dj0001.github.io/Motion-Photo-Viewer/test.htm))
Videothumbs shows first frame (also tested with HFS2.4) 🍀
Title: Re: Responsive small screen template -update
Post by: dj on January 01, 2020, 04:11:36 PM
I would like to see integrated (pre-assembled) version with mp3-player + photoviewer already within.
Edit: latest version (http://rejetto.com/forum/index.php?topic=11754.msg1065143#msg1065143)

Features:
never reloads the page
logout(Edge)
searchcategorie
web-app-capable (http://rejetto.com/forum/index.php?topic=11754.msg1064594#msg1064594)
generate thumbnails on upload
build-in pictureviewer(chrome77)
build-in audioplayer
only 10k
only 10k, this is why additional Slideshow (photoframe) is a addon,
but you can simply add the code at the end

changelog: better addons (with custom event), selectall
Title: Re: Responsive small screen template
Post by: dj on January 03, 2020, 08:56:39 AM
Thanks for review.
shuffle play needs addon
this fixes also nexttrack
there's no extra button for shuffle-play

Lazyimages don't load on cellular network.
prevent lazyload until clicking image link:
Code: [Select]
[+]
<script>
var thumbsize=0;
document.querySelector('#files').addEventListener('click', function(){
 var c=[...document.querySelectorAll('a[href$=".jpg"]')]
 if(!c.includes(event.target)) return
 thumbsize=64
 render(b)  //
})
</script>
lazyimages for FF needs adding if(!thumbsize) return;

On firefox, With lazyimages installed, slideshow works. @danny: In your (deleted) file you have removed class gri.

nothing new: newtemplate was bundled with V5.3
Title: Re: Responsive small screen template - addon
Post by: Fysack on January 04, 2020, 02:40:14 AM

halloween has enchanted the date  :-[
show relative date as
/
Its photoshopped  ;)
Title: Re: Responsive small screen template
Post by: dj on January 06, 2020, 12:43:42 PM
(deleted)
Could you help me do only-on-demand thumbnails for this version of Throwback?

Replace
Code: [Select]
document.addEventListener("DOMContentLoaded", function() {with
Code: [Select]
document.addEventListener("click", function(e) {if(!e.target.href||!e.target.href.endsWith('.jpg')) return;e.preventDefault();or (with a extra button)
Code: [Select]
document.querySelector('#mylazyloadbutton').addEventListener("click", function() {
Title: Re: Responsive small screen template
Post by: Fysack on January 11, 2020, 01:27:57 AM
danny.. dj.. hardcore..  8) 8) 8)
Title: Re: Responsive small screen template
Post by: dj on January 16, 2020, 03:36:20 PM
Mobil-Light with several add-ons pre-installed. 
Mint theme, and a new hfs.filelist.tpl which provides short-date.
Why hide time on large screens?
I recommend to use formatmodified instead of changing hfs.filelist.tpl
Title: Re: Responsive small screen template
Post by: dj on January 18, 2020, 05:01:13 AM
But, just imagine that full file thumbnails ARE needed via mobile data, but only as needed.
In lazyimages for V5.4 (http://rejetto.com/forum/index.php?topic=11754.msg1065143#msg1065143) full file thumbnails are also shown on mobile, if they are cached

Show a image, refresh folder and you will see the thumbnail.
Or load a page on wifi, then turn wifi off (go to mobile), refresh and you will see thumbnails.
This works currently only in FF for Android, because Chrome native lazy load.
I've re-uploaded file, which also works with Chrome Android.

P.S. Edge79 (I don't have it yet) supports native lazy loading via flag (https://caniuse.com/#feat=loading-lazy-attr)


Edit: Listen to music offline

load the music folder over WiFi with urlvar /?cacheAll=1
then jogging in a forest without cell phone reception and listen to music
and let others know in advance where you go :)


Edit: Select songs for playlist
queue_audio will build-in in next version (probably in mid-February)


Edit: Review: MP_theme (http://rejetto.com/forum/index.php?topic=11754.msg1064914#msg1064914) is a clone from dannys Throwback

Title: Re: Responsive small screen template
Post by: danny on February 13, 2020, 10:55:40 PM
...Edit: Review: MP_theme (http://rejetto.com/forum/index.php?topic=11754.msg1064914#msg1064914) is a clone from dannys Throwback
See the attached file.  It has the looks and it has your older music player which is far-out better for music. I like it ever so much. 
Title: Re: Responsive small screen template - update
Post by: dj on February 14, 2020, 04:38:43 AM
changelog:
select songs, topbanner
Title: Re: Responsive small screen template
Post by: danny on February 28, 2020, 07:19:27 PM
Here's a css color icon example, which looks similar on both Firefox and Chrome.

\FE0E turns off the Firefox emoticon feature, so that you can theme the icon.
The ;color: is for Chrome, so that it doesn't monochrome all of the icons.

If those are used together, that icon appears the same on firefox/chrome/edge/opera, etc...
Or, if the Firefox emoticon is useful, Chrome still needs the color.
Code: [Select]
li a[href$="/"]::before {content:"\1f4c1\FE0E  ";color:#FB0}
a[href*="."]::before {content:"\1f4c4  ";color:#BCC}
a[href$=".jpg"]::before, a[href$=".jpeg"]::before, a[href$=".webp"]::before, a[href$=".png"]::before, a[href$=".gif"]::before{content:"\1f4f7  ";color:black}
a[href$=".mp3"]::before, a[href$=".aac"]::before, a[href$=".m4a"]::before, a[href$=".ogg"]::before {content:"\1f50a\FE0E  ";color:green}
a[href$=".mp4"]::before, a[href$=".avi"]::before, a[href$=".webm"]::before, a[href$=".mkv"]::before {content:"\1f4fa  ";color:teal}
a[href$=".tar"]::before, a[href$=".rar"]::before, a[href$=".7z"]::before, a[href$=".zip"]::before {content:"\1f381  ";color:brown}
a[href$=".exe"]::before, a[href$=".vbs"]::before, a[href$=".bat"]::before, a[href$=".ps1"]::before, a[href$=".js"]::before, a[href$=".apk"]::before {content:"\1f537  ";color:#5AE}
nav a[href*="."]::before {content:""}
img+div a[href$=".jpg"]::before, a[href$=".jpeg"]::before, a[href$=".webp"]::before, a[href$=".png"]::before, a[href$=".gif"]::before{content:""}
It is an efficient solution, utilizing icons already present in the client.
Title: Re: Responsive small screen template
Post by: dj on February 29, 2020, 07:57:26 AM
if you need more file-icons
Code: [Select]
[+]
<script>
var style = document.createElement('style')
style.innerHTML = `
li a::before {font: normal normal normal 16px/1 FontAwesome; color:black}
a[href$=".xls"]::before {content:"\\f1c3  "}
a[href$=".pdf"]::before {content:"\\f1c1  "}
a[href$=".doc"]::before {content:"\\f1c2  "}
`
document.head.appendChild(style)

var style = document.createElement('link')
style.rel='stylesheet'
style.href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'
document.head.appendChild(style)
</script>
Title: Re: Responsive small screen template - addon
Post by: dj on April 15, 2020, 01:10:04 PM
number multiple files and optional add random digits for security (http://rejetto.com/forum/index.php?topic=13281.msg1065488;topicseen#msg1065488)
Title: Re: Responsive small screen template - addon
Post by: dj on April 29, 2020, 11:43:00 AM
form based login with browser login popup bypass

you need additional add autologin_b4 (http://rejetto.com/forum/index.php?topic=13283.msg1065525;topicseen#msg1065525) (or Alternative login form v2.0 (http://rejetto.com/forum/index.php?topic=13054.msg1065523;topicseen#msg1065523) and change ~loginb to ~box%20login)


Review
bundled is nothing new, but (almost) all in one
Title: Re: Responsive small screen template
Post by: dj on May 09, 2020, 08:24:05 AM
This will probably go to next version (will come after HFS2.4rc5 beta)

3 files removed: use mobil-light_V5.5.1.zip (http://rejetto.com/forum/index.php?topic=11754.msg1065742#msg1065742)

Review
bundled is nothing new. Logout works with hfs24rc5(pre05) (https://github.com/rejetto/hfs2/releases/tag/v2.4-alpha05)
Title: Re: Responsive small screen template - update
Post by: dj on May 17, 2020, 06:24:31 AM
changelog: added logout, autologin, unicode, ⚿

autologin and sha works with hfs2.4beta1 (http://rejetto.com/forum/index.php?topic=13060.msg1065747;topicseen#msg1065747) (use /~login for old 2.4rc4)
as requested also on github (https://github.com/dj0001/hfs-template/releases/latest)


now working on copyURLwithpassword in browser

hfs.diff.md5.tpl removed: use sha256.diff.tpl


« on: Thu, 21 May 2020

began adding my older addons to github (https://github.com/dj0001/hfs-template/tree/master/addons)
files beginning with a capital letter works also with the default(2.4) template

sha256.diff.tpl removed: use mobil-light_V5.5.3.zip (http://rejetto.com/forum/index.php?topic=11754.msg1065774#msg1065774) and hfs24beta05


the only mobile-friendly template (http://rejetto.com/forum/index.php?topic=11754.msg1061351#msg1061351), who isn't stickyed ツ
Title: Re: Responsive small screen template
Post by: rejetto on May 17, 2020, 09:06:21 AM
i just saw this message "Add hfs.filelist.tpl from zip to folder, that contains hfs.exe"
why don't you copy it automatically?
Title: Re: Responsive small screen template
Post by: rejetto on May 17, 2020, 09:13:01 AM
there is a problem with next hfs release when enabling "include password in pages".
Check that if you have time.

This whole system icons thing in HFS is a waste, i'll probably change it in the default template asap.

By the way, you are doing a great job keeping up to date :D

Title: Re: Responsive small screen template - update
Post by: dj on May 23, 2020, 06:23:48 AM
changelog:

 fixed sort
+ url-icon added
- md5 removed


i just saw this message "Add hfs.filelist.tpl from zip to folder, that contains hfs.exe"
why don't you copy it automatically?
I don't want everything to be automatically changed, as some other templates do, because later changing to the default template can lead to problems (http://rejetto.com/forum/index.php?topic=11754.msg1065073#msg1065073)


« on: Tue, 26 May 2020

mobil-light_V5.5.2.zip  removed: use mobil-light_V5.5.4.zip

changelog:

 fixed Keep me loggedin
- crypto.js replaced


« on: Thu, 28 May 2020

changelog:
+ optional thumbs ondemand
+ comment-icon added


® works correctly with hfs2.4beta
Title: Re: Responsive small screen template - update
Post by: dj on May 31, 2020, 09:57:47 AM
changelog:
 modal login box
 loginbox improved



Mobil-light (http://rejetto.com/forum/index.php?topic=11754.msg1061351#msg1061351) aka Responsive small screen template the first and currently only user template, that works with the new login system
Title: Re: Responsive small screen template
Post by: SilentPliz on May 31, 2020, 10:20:20 AM
Chris, dj,

I've sticked this topic.
;)
Title: Re: Responsive small screen template - update
Post by: dj on June 02, 2020, 06:07:31 PM
changelog:

 fixed delete
 

Review
bundled is nothing new, comes with 4 languages


This will probably go to next version
Code: [Select]
[+]
<style>
button::after, #Login>span::after {background:#cde}
</style>




latest version (https://github.com/dj0001/hfs-template/releases/latest)
Title: Re: Responsive small screen template
Post by: dj on June 07, 2020, 11:33:21 AM
further work on File Icon Theme (http://rejetto.com/forum/index.php?topic=11754.msg1065343#msg1065343) as wished (http://rejetto.com/forum/index.php?topic=13304.0)

Tested also with 2.4default theme and takeback
Title: Re: Responsive small screen template - update
Post by: dj on June 08, 2020, 04:41:30 PM
changelog:

works with 2.4rc1
modal changepassword
buttons colored

mobil-light_V5.5.7.zip removed: use mobil-light_V5.5.7a.zip


🆕 Download (https://dj0001.github.io/hfs-template/addons/languages/) yourlanguage addon
Title: Re: Responsive small screen template - update
Post by: dj on June 12, 2020, 04:01:32 PM
changelog:
change password will be sent base64encoded to the server

for rc5
new urlvar thumbsize (?thumbsize)

fixed folder login bug (V5.5.10)
colored folder icon

autoupdate_hfs.events (https://github.com/dj0001/hfs-template/blob/master/addons/autoupdate_hfs.events)



🆕 Configure template (https://dj0001.github.io/hfs-template/addons/config.html)
Title: Re: Responsive small screen template
Post by: danny on July 26, 2020, 11:23:00 AM
Tiles/Gallery layout is particularly difficult for HFS, with at least 2 problems: 
On a fast connection, the amount of data (if page scroll+download/archive) can jam the ui and get stuck.
On a slow connection, the amount of incomplete requests can snowball an overlarge 'todo' list; also stuck. 

Main fix (for template):  Ondemand--no tiles shown until user clicks button to enable higher load for only current page. 
-If ondemand, then you don't need to block tiles for mobile.  Sometimes, even mobile users want to see tiles (just not every page).

Is there a javascript method to Coarsely estimate client speed individually?   If that was possible, then the gallery view can be made adaptive to speed by regulating image and margin sizes (adapting to how many can load in ~2 seconds).   
Title: Re: Responsive small screen template - update
Post by: dj on August 12, 2020, 08:15:06 AM
changelog:

moderner buttons
build in server thumbs (set jpgimgth=0 to disable)

additional show fullimgth, if no jpgimgth
Code: [Select]
[+]
<script>
window.addEventListener('error', (e) => {if(e.target.tagName=='IMG' && e.target.src.endsWith('?mode=thumb')) e.target.src=e.target.src.replace('?mode=thumb','') }, true)
</script>


  • A template that can open a document and let several users (clients) edit it cooperatively.
see updated textedit (https://github.com/dj0001/hfs-template/blob/master/addons/textedit.diff.tpl)
Title: Re: Responsive small screen template - addon update
Post by: dj on September 22, 2020, 04:11:02 PM
textedit with shoutbox

textfile must end with .gb.txt (e.g. chat.gb.txt)
always prepends first line
: adds timestamp and user
autorefresh, if not focused
Title: Re: Responsive small screen template - Textedit
Post by: dj on October 09, 2020, 01:11:24 AM
Textedit V2 comes with some formatting: select+(bold, italic, superscript*)
In chrome also CTRL+(b,i,u) works
You don't need formatting for bold. Use can also use Unicode: 𝗔𝗕𝗖𝗗𝗘𝗙𝗚𝗛𝗜𝗝𝗞𝗟𝗠𝗡𝗢𝗣𝗤𝗥𝗦𝗧𝗨𝗩𝗪𝗫𝗬𝗭𝗮𝗯𝗰𝗱𝗲𝗳𝗴𝗵𝗶𝗷𝗸𝗹𝗺𝗻𝗼𝗽𝗾𝗿𝘀𝘁𝘂𝘃𝘄𝘅𝘆𝘇𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵


« on: Sat, 17 Oct 2020

adding animation to starry night: ☆twinkle (https://dj0001.github.io/hfs-template/addons/themes/Starry_night_background.diff.tpl.htm), ❄snow (https://dj0001.github.io/hfs-template/addons/themes/Snow_background.diff.tpl.htm)
if you are interested in other themes like a Fire background leave comment here 🎃
Title: Re: Responsive small screen template
Post by: NaitLee on October 25, 2020, 08:14:52 AM
A tweak that makes mobil-light friendlier to computer (still responsive to mobile) :) See attach
Title: Re: Responsive small screen template
Post by: dj on October 29, 2020, 05:13:35 AM
Thanks.
Will look, what goes to next version.

Tomorrow is halloween (https://dj0001.github.io/hfs-template/addons/themes/Latern_background.diff.tpl.htm).
Santa clause will bring next version of mobil-light 🎅

register(for an account)V2 with a light admin panel (enables account, if loggedin as admin)

Lighthouse report: Performance: 93, Accessibility: 100, Best Practises: 93, SEO: 92
Title: Re: Responsive small screen template
Post by: Brandonatrog on December 11, 2020, 12:38:04 PM
Ditto to what Squiggler said, its amazing and thats no doubt about it. This must be the first responsive theme/template weve ever had on this community.
Title: Re: Responsive small screen template
Post by: dj on January 08, 2021, 11:12:32 AM
New year brings a alternativ theme with fixed navigation bar
Title: Re: Responsive small screen template
Post by: mandoz on January 08, 2021, 01:40:26 PM
hi Dj. i use hfs 2.4.0 rc7. your .tpl doesn't run. where am i wrong? problem also with diff.tpl ....... thanks
 :'( :'(
Title: Re: Responsive small screen template
Post by: dj on January 08, 2021, 04:11:47 PM
This message you get, if you try to load a tpl, which is not compatible with hfs2.4rc

I work also with rc7.
Which version of the tpl you use?

Download the actual version from the forum (http://rejetto.com/forum/index.php?topic=11754.msg1066583#msg1066583) or github (https://github.com/dj0001/hfs-template/releases/tag/5.5.12)
if it still doesn't work then post the template here in the forum or send it with a message to me.

Change file to... mobil-light_V5.5.5.12.tpl (not hfs.filelist.tpl!)
Title: Re: Responsive small screen template
Post by: mandoz on January 08, 2021, 05:35:11 PM
Resolved. thanks  ;D
Title: Re: Responsive small screen template - template-making guide
Post by: dj on January 14, 2021, 11:04:40 AM
start making a template:
Code: [Select]
[]
<!DOCTYPE html>
<head><meta name="viewport" content="width=device-width, initial-scale=1"></head>
<nav><a href="..">Up</a></nav><br><br>
%list%

[file=folder=link]
<a href="%item-url%">%item-name%</a><br>


[api level]
2



start making a Single-Page-template (like mobillight) begin with piccolo.tpl

Mobil-light V5.6 will base on piccolo, have less features and be smaller (about 5k)
Title: Re: Responsive small screen template - update
Post by: dj on January 24, 2021, 05:09:20 AM
changelog:
5.6.1: "images" folder grid view
5.6.2: opt. stick navigation
5.6.3: translate and modify (https://www.w3schools.com/jsref/jsref_tolocalestring.asp) date (use ISO Date Format)
5.6.4 (https://github.com/dj0001/hfs-template/blob/efd01de63d8db31cf3985abe2b54b8a884a03755/mobil-lightV5.6.tpl): home symbol, fixed search, hfs2.3 suited
Title: Re: Responsive small screen template - addon
Post by: dj on February 09, 2021, 05:02:37 AM
changelog:
playlists (list m3u)
module (audioplayerscript only loads if you have mp3 files)
Title: Re: Responsive small screen template
Post by: danny on February 09, 2021, 07:16:13 AM
Would like to see a Mobil-Light 5x with 'live list' like standard, throwback, takeback, Mobil-Light 3x. 

If you put the list back in the template, then it is more responsive in rough conditions, such as wifi, dish, high traffic, very large folders, multiple-users, etc... and no need for a wait animation because live list can stream the page load (like throwback/takeback), so it looks 'alive' even on slow connections. 

Even with 5k more page overhead live list looks Much faster on large folders.
Also, easier to install if only 1 file (not using hfs.filelist.tpl).   
Title: Re: Responsive small screen template
Post by: dj on February 09, 2021, 08:20:31 AM
I removed the streaming from V5.6 for keep simple, but you can reinstall it.

There are reasons to use hfs.filelist.tpl: performance, traffic and ability to use (https://github.com/dj0001/hfs-template/blob/master/addons/fileserver_for_node(hfs).js) with HFS3
P.S V5.6 works without hfs.filelist.tpl, but then you don't have size and date
Title: Re: Responsive small screen template
Post by: danny on February 09, 2021, 07:10:22 PM
For test, I set speed-limit to 1  And then I went to a folder with 6280 files. 
Success!  mobil-lightV5.6.old-fashioned(demo only).tpl  can stream the file list (load-while-draw-async works fine). 
No hangs and still good speed!  Awesome!!!

mobil-lightV5.6.old-fashioned(demo only).tpl is much better in a broad variety of real-life conditions.  THANKS!!!   
The old fashioned demo version is the Only mobil-light that I can use with large folders.
Title: Re: Responsive small screen template
Post by: dj on February 10, 2021, 03:14:34 AM
FAQ

Select files: click date
Rename: select file - Search - enter newname
date is too big: use ISO-Date-Format and set (https://www.w3schools.com/jsref/jsref_tolocalestring.asp) dateopt = { year: '2-digit', month: 'short', day: 'numeric' } (not demo)
folders are counted as files: should be named items?

Move files: use rename and add path, e.g. /test/neu.txt (V5.5)
Newfolder: Search - enter newfolder/
Sort: click files
Title: Re: Responsive small screen template
Post by: danny on February 10, 2021, 06:46:38 AM
...Select files: click date...
to fix the 'easter egg', it needs tiny date (no time), and the word 'Select' so that the user knows
such as
select   12.12.21

...folders are counted as files: should be named items?...
can change the word 'files' to the word 'items'

...use ISO-Date-Format and set (https://www.w3schools.com/jsref/jsref_tolocalestring.asp) dateopt = { year: '2-digit', month: 'short', day: 'numeric' } ...
ISO date format:
Code: [Select]
[special:import]
{.set ini|use-iso-date-format=yes.}

P.S.
mobil-lightV5.6.old-fashioned(demo only).tpl  browse and file list functions work Much Better than any version which requires hfs.filelist.tpl.  In fact mobil-lightV5.6.old-fashioned(demo only).tpl is the only mobil-light that I could use (because very large folders). 
Title: Re: Responsive small screen template
Post by: dj on February 10, 2021, 03:39:19 PM
to fix the 'easter egg'
Code: [Select]
[+]
<style>
main span:last-child::after {content:" ☐"}
</style>

Quote
{.set ini|use-iso-date-format=yes.}
how to reset, if user change tpl?


changelog: Add hfs.filelist.tpl (https://github.com/dj0001/hfs-template/blob/gh-pages/hfs.filelist.tpl) (and opt. stream (http://rejetto.com/forum/index.php?topic=11754.msg1066673#msg1066673))
5.6.5 (https://github.com/dj0001/hfs-template/blob/gh-pages/mobil-lightV5.6.tpl): opt. add select checkboxes, fixed empty lines
Title: Re: Responsive small screen template
Post by: danny on February 24, 2021, 05:35:44 PM
For your 'classic' audioplayer in Stripes.tpl, how do I....?
something like <script> function ap(){
if(!document.querySelector('a[href$=".mp3"]')) return...

Well, how do I load the audioplayer6.js with the existing retry; but, only if files like these are present?:  '.mp3','.ogg','.m4a','.aac','flac','.MP3','.OGG','.M4A','.AAC','FLAC'

P.S.  Existing loader script is: 
<script defer src="/~audioplayer6.js" onerror="setTimeout(()=> this.src='/~audioplayer6.js',509)"></script>
So, that's the part that needs filtered to, load the audioplayer, only if music exists.  Halp? 
Title: Re: Responsive small screen template
Post by: dj on February 24, 2021, 06:59:20 PM
For your 'classic' audioplayer in Stripes.tpl, how do I....?
When I have time, I'll try to write a module version of the classic audioplayer.

In the meantime you can use Audioplayer5(module).
It works also with hfs2.4 default and Stripes.tpl.

Code: [Select]
if(!document.querySelector('a[href$=".mp3"], a[href$=".ogg"], a[href$=".m4a"]')) return  //add fileext here
import('/~audiopl.js')
 .then(obj => obj.audiop())
 .catch(error => console.log("err"))  //do error handling here  // setTimeout(ap, 509)

yes, the classic audio player seems loading just fine.
modules (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) are deferred automatically

version7 will show subtitles (set vtt=true)
Title: Re: Responsive small screen template
Post by: danny on March 02, 2021, 05:10:16 AM
Can the new audioplayer 5 or 6 do Shuffle+Repeat (can find and play a cached file when I drive through a no-signal area)? 
Title: Re: Responsive small screen template
Post by: dj on March 02, 2021, 05:28:59 AM
Yes.
Add querystring ?shuffle=true or
set var shuffle=true
Title: Re: Responsive small screen template
Post by: dj on March 04, 2021, 04:35:54 AM
Now let's sing karaoke 🤷
(only sad songs at the moment)

Code: [Select]
WEBVTT

00:01.000 --> 00:07.000
<c>Never drink</c> <00:03.000><c>liquid</c><00:05.000> <c>nitrogen.</c>

00:08.000 --> 00:09.000
Ever drink banana nitrogen.

Audioplayer(cover) shows embeded cover of ogg files (FF only)

P.S. to play videos with subtitle: a mp3 file must be in folder (to trigger videoplayer), select a mp4 and click it
SRTtoVTT (http://www.webvtt.org/)
LRCtoVTT (https://transcribefiles.net/other/pages/caption-subtitle-converter.htm)

Title: Re: Responsive small screen template
Post by: danny on March 04, 2021, 04:34:58 PM
Audioplayer 6&7: 
1).  Play button doesn't start initial playback. 
2).  Browser title doesn't change to file name.
3).  Can I have 'compact' version without meta & without thumbnail?
4).  Doesn't play capitalized extension .MP3

RE:  #2 above:  mozGetMetadata doesn't work with other browser (and doesn't work with untagged mp3); however, title=filename works for all cases.
Title: Re: Responsive small screen template
Post by: dj on March 04, 2021, 05:09:21 PM
1. todo
2. not necessary (press MediaKeys on keyboard or lockscreen on cell phone to see title(filename))
   mozGetMetadata works with FF and ogg files (Chrome shows duration instead)
3. remove function art
4. plays all kind of possible audio, when you select it first
Title: Re: Responsive small screen template
Post by: danny on March 10, 2021, 05:09:39 AM
I have noticed that templates with server-management top menu causes all users to expect that they Should be doing server-management (the purpose). 

Instead, howabout a footer menu? 
with the page in this order: 
🏠/nav
File List
menu (at the bottom)

P.S.
I mention this. . . because I was investigating adding a menu to one of the 'easy view' templates (Stripes and White); and, did notice the 'easy view' benefit is lost if a top menu were installed; but, the 'easy view' benefit is not lost if a bottom menu were installed. 

P.P.S.
Avoiding css redraw (bouncing menu) = exclusive screen area (files vs menu divs which don't overlap).  So, probably, the scrollbar goes on the files div, not the whole page? 
Title: Re: Responsive small screen template
Post by: dj on March 10, 2021, 04:20:00 PM
I have noticed that templates with server-management top menu causes all users to expect that they Should be doing server-management
try mobil-light ≥ 5.6.2 (https://github.com/dj0001/hfs-template/blob/gh-pages/mobil-lightV5.6.tpl) (opt. stick navigation)
Note the differences when scrolling before and after selecting an item

alt. menu after files:
Code: [Select]
[+]
<style>
header {order:1}
/* bottom: 0px; position: sticky */
</style>
Title: Re: Responsive small screen template
Post by: danny on March 12, 2021, 09:46:51 PM
I think that the most efficient way to load player and features scripts is:
Code: [Select]
<a href="#" onclick="var script = document.createElement('script'); script.src = '/~player1.js'; document.head.appendChild(script) ; ; var script = document.createElement('script')">&nbsp;&#128065;&nbsp;</a>
Then you can include more features; and, the scripts don't load until user clicks icon. 

How do I make it work with audioplayer, such as no button, generic browser (no moz, no webkit) and start shuffle+repeat at script load? 
Title: Re: Responsive small screen template
Post by: dj on March 14, 2021, 07:55:50 AM
I think that the most efficient way to load ... scripts is: ...

yes, it's the old (https://stackoverflow.com/a/40808588) way before modules (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules):
Code: [Select]
<span onclick="import('/~audiopl.js').then(obj => obj.audiop())">👁</span>
Title: Re: Responsive small screen template
Post by: danny on March 23, 2021, 05:34:20 AM
yes, it's the old (https://stackoverflow.com/a/40808588) way before modules (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules):
Code: [Select]
<span onclick="import('/~audiopl.js').then(obj => obj.audiop())">👁</span>
That is freedom to include/add a large amount more 'standard' features. 
And, there is also benefit to easier/effective quality control because when features are included, they are more sure to work. 
Title: Re: Responsive small screen template
Post by: dj on April 14, 2021, 04:55:46 AM
Audioplayer(srt) shows srt subtitles (srt to vtt on-the-fly)
Title: Re: Responsive small screen template
Post by: danny on April 15, 2021, 01:32:54 AM
Does javascript have a case-blind option, or does it need something like this?:
Code: [Select]
var ext='a[href$=".mp3"],a[href$=".Mp3"],a[href$=".MP3"],a[href$=".ogg"],a[href$=".OGG"],a[href$=".m4a"],a[href$=".M4A"],a[href$=".flac"],a[href$=".FLAC"],a[href$=".wma"],a[href$=".WMA"],a[href$=".aac"],a[href$=".AAC"],a[href$=".mp4"],a[href$=".MP4"]'  //edit here
Title: Re: Responsive small screen template
Post by: dj on April 15, 2021, 04:21:29 AM
Adding an i before the closing bracket causes the value to be compared case-insensitively (https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#syntax)
a[href$=".mp3" i]
Title: Re: Responsive small screen template
Post by: danny on April 15, 2021, 09:40:49 AM
Thanks! 
Code: [Select]
var ext='a[href$=".mp3" i],a[href$=".ogg" i],a[href$=".m4a" i],a[href$=".flac" i],a[href$=".wma" i],a[href$=".aac" i]'