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 version (http://rejetto.com/forum/index.php?topic=11754.msg1065283#msg1065283)

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