rejetto forum

Software => HFS ~ HTTP File Server => HTML & templates => Topic started by: danny on May 08, 2018, 11:33:00 AM

Title: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on May 08, 2018, 11:33:00 AM
Classic elegance, some new features, and a lot more speed. . .
Tested with HFS 2.3K and 2.3L

Features:
Phone and Tablet screen-support, including good tap targets and easily readable fonts. 
Tested with both iPhone and Android.

Much faster file listings in lengthy folders because there's no slow checkboxes.
Efficient and colorful unicode icons display twice as fast.

Automated error correction for users.  When needed, it displays very polite messages briefly, and then quickly sends the user back to what they wanted to do.  It maintains the appearance of good working order.  So, you're free to use options like the "max connections" and "maximum simultaneous downloads from single address" limits to manage your bandwidth. 

Quickly disconnects hack scans; and that feature lowers the cpu load, improving speed.

Easy for users, with simplified interface, column layout, black background, and readable fonts.  Classic! 
So, easy to use that it is Cat-operable on a tablet, apparently.

Works nicely on a variety of screen sizes, from pocket size to wall size displays.

How to use: Save the tpl file in the same folder as hfs.exe, and then: Menu, HTML-template, Change-file, and choose the tpl file.
Title: About adding 'Remote upload'...
Post by: LeoNeeson on May 11, 2018, 03:28:48 AM
Nice, an old-school template! (and it loads very fast!) :)


A little bit off-topic...

Since you seem to know about template stuff, I have this question for you: do you know how to add a 'remote upload' box? For example, you have this URL: http://linux.com/distro.iso and want to download this ISO file directly to the server, in the current shared folder. So, you write that URL in a input box and press a 'Save' submit button, and then the HFS server starts downloading the file, and when it ends, it puts the file in the current shared folder. How handy this may come in? Imagine you are on a mobile connection and want to leave the server downloading a file, so when you come home, you have the file ready (and it's automatically shared on that folder). Is this doable?...

> Update: I was thinking in something like this: (click on image to enlarge)
(https://i.imgur.com/2SHXryum.png) (https://i.imgur.com/2SHXryu.png)

I've only added this to your template:

Code: [Select]
<div class=lil><b>Remote upload URL:</b>
<input type='text' name='search' value=''>
<input type='submit' name='submit' value='Transload'></div>

Full code on how it looks like (it's currently a mock-up):
(This is only a preview code, it needs the actual functions)
Code: [Select]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HFS %folder%</title>
<style type="text/css">%style%</style>
<script type="text/javascript" language="javascript">
//browseAbleFolderTree
function browseAbleFolderTree(folder) {
var infoFolder=folder;
var path=folder.split("/");
var pathTree="/";
var pathTreeResult="";
for(pta=1;pta<path.length;pta++) {
pathTree=pathTree+path[pta]+"/";
pathTreeResult=pathTreeResult +'/<a href="'+pathTree+'" class=\"swapDir\">'+path[pta]+'</a>';
}
document.getElementById('swapDir').innerHTML = pathTreeResult;
}
</script>
</head>
<body>
<div>
%upload-link%
%login-link%%loggedin%
<div class=lil><b>Remote upload URL:</b>
<input type='text' name='search' value=''>
<input type='submit' name='submit' value='Transload'></div>
<div class=lil><b>Current Directory:</b></div>
<div class=big><a href="/">Home</a><span id=swapDir>%folder%</span><script type="text/javascript" language="javascript">browseAbleFolderTree("%folder%")</script></div>
<div class=body>%folder-comment%%files%</div>
</div>
</body>
</html>

[login-link]
<div class=btn><a href="%encoded-folder%~login" class=inbtn><img align=top src="/~img27"><font color="yellow"> CLICK HERE TO LOG IN</font></a></div>

[loggedin]
<div class=btn><span class=inbtn><img align=top src="/~img27" alt=""> %user%</span></div>

[style]
body{padding:10px;font-weight:normal;font-family:"geneva",arial,"helvetica",sans-serif;background:black;margin:3}
.rw,.body,.inpt,.flg,.cmnt,th,comment,.flg,.inbtn,.col{background:#000}
.col,body,.rw,.body,#hm{color:#AAA}
body,.big,.lil,th,comment{font-size:9pt}
.inbtn{font-size:12pt}
.inpt,.flg,.cmnt,a,body,.inbtn,th,comment,.flg,.lil{color:#8D8}
.big{font-size:14pt}
.flg,.inbtn,.col,.rw,a,.big{font-weight:normal}
a{font-size:14pt}
.flg,.lil{font-size:8pt}
.inbtn,.body{border:3px solid #222}
.btn,.body{padding:15px}
.body{margin:15px}a{text-decoration:none}
a:visited{color:#CCC}
a:hover{color:yellow}
img{border:0}
.rw{font-size:11pt;border:2px solid #222}
.cmnt{font-size:7pt;padding:3px;margin-top:2px}
.inpt,.cmnt{border:1px inset #000}
.col{font-size:13pt}
.inbtn{padding:5px}
.btn{float:right}
.flg{text-align:center;border:1px solid;}

[upload-link]
<div class=btn><a href="%encoded-folder%~upload" class=inbtn><img align=top src="/~img32" alt=""><b><font color="yellow"> CLICK HERE TO UPLOAD FILES</font></b></a></div>

[up]

[nofiles]

[files]
<table class=lil width=100%>
<tr>
<td><b>%number-folders% Folders, %number-files% Files - Total Size: %total-size%</td>
<td align=right><b>At %timestamp%  %speed-out%/%number-addresses-downloading%KB</b></td>
</tr>
</table>
<table width="100%">
<tr>
<th class=col><a href="%encoded-folder%?sort=n" style="color:#AAA;font-size:14px;">FileName</a></th>
<th class=col><a href="%encoded-folder%?sort=s" style="color:#AAA;font-size:14px;">Size</a></th>
<th class=col><a href="%encoded-folder%?sort=t" style="color:#AAA;font-size:14px;">Date</a></th>
<th></th>
</tr>
%list%
</table>

[file]
<tr>
<td class=rw>%new% <a href="%item-url%">&nbsp;<font color="white">&#9671;</font>&nbsp;%item-name%</a>%comment%</td>
<td class=rw align=center>%item-size%</td>
<td class=rw align=center>%item-modified%</td>
{.if|{.get|can delete.}|<td class=rw align=center><form method='post' id='filelist'><input type='hidden' name='selection' value='%item-url%'><input type='submit' name='action' value='delete' onclick='return confirm("Sure?")' ></form></td>.}
</tr>

[file.mp3 = file.m4a = file.wma]
<tr>
<td class=rw>%new% <a href="%item-url%">&nbsp;<font color="#ADE8F9">&#9836;</font>&nbsp;%item-name%</a>%comment%</td>
<td class=rw align=center>%item-size%</td>
<td class=rw align=center>&nbsp;<a href="mms://%host%%encoded-folder%%item-url%">MediaPlayer</a>&nbsp;</td>
{.if|{.get|can delete.}|<td class=rw align=center><form method='post' id='filelist'><input type='hidden' name='selection' value='%item-url%'><input type='submit' name='action' value='delete' onclick='return confirm("Sure?")' ></form></td>.}
</tr>

[link]
<tr>
<td class=rw>%new%<a href="%item-url%">&nbsp;<font color="white">&#8663;</font>&nbsp;%item-name%</a>%comment%</td>
<td colspan=3 class=rw><i>&nbsp;Hyperlink</i></td>
</tr>

[folder]
<tr>
<td class=rw>%new%<a href="%item-url%">&nbsp;<font color="#FFFDA8" size="3">&#128193;</font>&nbsp;<b>%item-name%</b></a></td>
<td class=rw align=center><i>Folder</i></td>
<td class=rw align=center>%item-modified%</td>
<td></td>
</tr>

[comment]
<div class=cmnt>%item-comment%</div>

[folder-comment]
<div class=cmnt>%item-comment%</div>

[error-page]
{.if|{.match|*.php*;*.js|%url%.}|{:{.disconnect.}:}.}{.add header|Cache-Control: no-cache, max-age=0.}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">%content%</html>

[not found]
<META HTTP-EQUIV="Refresh" CONTENT="2;URL=./"><TITLE>404</TITLE><body bgcolor="black" text="white" alink="white" link="white" vlink="white">
<center><h2><br>You have found the 404 page.</h2>Returning to previous page.</center></body>

[overload]
<META HTTP-EQUIV="Refresh" CONTENT="3;URL=./"><TITLE>Overload</TITLE><body bgcolor="black" text="white" alink="white" link="white" vlink="white">
<center><h2><br>High traffic mode engaged.</h2>Returning to previous page after overload has cleared.</center></body>

[max contemp downloads]
<META HTTP-EQUIV="Refresh" CONTENT="2;URL=./"><TITLE>Downloads</TITLE><body bgcolor="black" text="white" alink="white" link="white" vlink="white">
<center><h2><br>There are ongoing downloads.</h2>More available <i>after</i> current downloads finish.</center></body>

[unauthorized]
<META HTTP-EQUIV="Refresh" CONTENT="3;URL=./"><TITLE>Login</TITLE><body bgcolor="black" text="white" alink="white" link="white" vlink="white">
<center><h2><br>You're not logged in.</h2>Name and password do not match.<br><br>If there's no login, try a different<br>browser for your phone.</center></body>
{.if|%user%|{:{.set|n|{.from table|#tries|%ip%.}.}{.inc|n.}{.if|{.{.^n.} > 20.}|{:{.set ini|{.no pipe|ban-list={.from table|#ini|ban-list.}%ip%#attack? {.time.}|.}.}{.set table|#tries|%ip%=0.}:}|{:{.set table|#tries|%ip%={.^n.}.}:}/if.}:}.}

[deny]
{.redirect|/.}

[ban]
{.disconnect.}

[upload]
<html>
<head>
<title>Upload to: %folder%</title>
<style type="text/css">%style%</style>
<script type="text/javascript" language="javascript">
//add upload input
var counter = 0;
function addUpload() {
counter++;
if (counter < 7)
document.getElementById("addupload").innerHTML += "<br><input name=\"fileupload"+counter+"\" size=\"50\" type=\"file\">";
if (counter == 6) {
document.getElementById("addUploadLink").innerHTML = "<a style=\"cursor:text;color:yellow;\">- PLEASE PUT MULTIPLE FILES INTO A ZIP FILE -</a>";
}
}
</script>
</head>
<body>
<div class=btn><span class=inbtn><img align=top src="/~img27" alt=""> %user%</span></div>
<div class=lil><b>Upload to:</b></div>
<div class=big><a href="/" target=_parent class=swapDir>Home</a>%folder%</div>
<div class=body>
<center>
<b>Free Space Available For Upload: %diskfree%</b><br><br>
<form action="%encoded-folder%" target=_parent method=post enctype="multipart/form-data" onSubmit="frm.upbtn.disabled=true; return true;"><div id=addupload><input name="fileupload1" size=50 type=file></div><a id=addUploadLink style="cursor:pointer;" onclick="addUpload();">- Add Upload -</a><br><br><input name=upbtn type=submit value="Upload Selected File(s)"></form>
</center>
</div>
</body>
</html>

[upload-results]
<html>
<head>
<title>Upload results for: %folder%</title>
<style type="text/css">%style%</style>
</head>
<body>
%loggedin%
<div class=lil>Upload results for:</div>
<div class=big>%folder%</div><div class=body>%uploaded-files%<br><br><a href="%encoded-folder%" target=_parent class=big><img align=bottom src="/~img14" alt=""> Go Back</a></div>
</body>
</html>

[upload-success]
<li><b>SUCCESS!</b> Uploaded: %item-name% --- %item-size% (Speed: %speed% KB/s)

[upload-failed]
<li><b>FAILED!</b> Error while uploading: %item-name%: --- %reason%

[newfile]
&nbsp;<span class=flg>&nbsp;NEW&nbsp;</span>

Any idea on how to make this work?... ???
Title: remote
Post by: danny on May 11, 2018, 05:06:52 AM
Nice, an old-school template! (and it loads very fast!) :)

Thanks! 
It has been an adventure!  I had wanted to make HFS look and run like I remembered from long ago.  A friend had it on his server, and it was fast back then. 

To regain the speed, I've been using my stopwatch, and the pingdom test (which has per-element timings).  Currently, the point is twofold--reduce micro-pauses that occur per each file in a listing (so they won't add up to a large pause), and make the template as small and clean as possible.

After that, it is a good head start to add features and still run fast too.
Since you seem to know about template stuff, I have this question for you: do you know how to add a 'remote upload' box? For example, you have this URL: http://linux.com/distro.iso and want to download this ISO file directly to the server, in the current shared folder. So, you write that URL in a input box and press a 'Save' submit button, and then the HFS server starts downloading the file, and when it ends, it puts the file in the current shared folder. How handy this may come in? Imagine you are on a mobile connection and want to leave the server downloading a file, so when you come home, you have the file ready (and it's automatically shared on that folder). Is this doable?...
That's a server-side script, possibly ajax?  I don't know how to do that.  But, if I find out, first thing on the list is a real login Form, due to diminishing support of browser-provided login box for basic auth. 
Anyway, I do that remoting task myself, not with a web server, but with tightvnc (or realvnc) on the server and bvnc on the phone.  For better security, avoid commonly scanned ports (there's usually a published list), so not 5900.  Screen resolution plays an important role in bandwidth consumption and usability--at the server, 1024x600 is fastest or 1280x720 will work to vnc a server from a phone. At the phone, in bvnc, you can change the color mode to 256, so that the bandwidth consumption is minimal. 
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on May 11, 2018, 05:18:16 PM
Love the simplicty, and ease / look
( if eel like i can finaly use standard html coding to hfs again :)

On another not,

I think the CSS and HTML code (JavaScript could active the login box, here is what w3 schools has about it.0

https://www.w3schools.com/howto/howto_css_login_form.asp

looking into this

I only know of a php soulion to the web form, w3 scholls claims thaetre is a jhavascript (ajax/arco/etc)
way to acomplis a login form

thanks fr your help/support and work danny
Title: Updated for even more speed.
Post by: danny on May 12, 2018, 03:35:56 AM
Revised to double the speed.  Updates at post#1

Now, it goes maximum speed by default.  The pingdom test reports: Faster than 99% of websites. 

P.S.
This got put to work on my own server. 
Title: Updated for even more speed.
Post by: LeoNeeson on May 12, 2018, 04:34:57 AM
P.S. My other project is startfetch.com  Picture this, you're at your pc, your phone messenger goes off (facebook, hangouts, whatsapp), and do you go get it to type on the little screen if the battery permits, or do you go to startfetch.com, click once and enjoy the full size keyboard?  Peek under the hood (view source) and check the code.  That another case of "looks simple, after it is done" and that all fits in just 24k.
That was fast! opening StartFetch.com was blazing fast (I see you've encoded icons in Base64 to speed things up, nice trick). I really miss those good old days where every website was almost as fast as that. But on these days, only checking emails via webmail, could take 1.5MB at best (and all thanks to WebFonts and JavaScript libraries). Thanks God there is still POP3/IMAP to check emails, but for all the rest, I get used to overload my browser to view just a simple website. And the same happens with software and games, everything it's made to make our PCs slow without sense. That's why I love HFS, because it's small enough to be a full featured-packed program.

Anyway, I do that remoting task myself, not with a web server, but with tightvnc (or realvnc) on the server and bvnc on the phone.
Thanks, I'll have a look to bVNC (https://play.google.com/store/apps/details?id=com.iiordanov.freebVNC&hl=en) (it looks good).

That's a server-side script, possibly ajax? I don't know how to do that.
Don't worry. I'll leave the question open if someone else knows what server-side script (macro) use.

Revised to double the speed.  Updates at post#1 and 2. 
Good work! :)
Title: Update. faster page loading
Post by: danny on May 15, 2018, 04:00:30 AM
Updates are located at the first post. 

I completed the transition to Unicode icons so that Throwback4.tpl never uses an http request for icon display.  That provides significantly faster support for multiple users.  Brisk browsing is possible despite multiple concurrent downloads.

Edit: 
Saved for reference.
Title: Update. more thorough iPhone and Android support
Post by: danny on May 23, 2018, 02:37:24 AM
TB5.tpl

Changes:
I simplified the css and layout to better support phones.
Features streamlined so that it is easier to use.
The Classic HFS look now displays well on any size screen.  Even a phone screen vertical, still looks right.

P.S.
We were at the grocery store, forgot the list and used the phone to fetch a recipe from home (so that we could buy the supplies without having to drive back home for the list).  This event is what had inspired me to make an update.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: LeoNeeson on May 23, 2018, 05:00:42 AM
I didn't have the chance to test 'Throwback4.tpl' (perhaps you could attach it on this message (https://rejetto.com/forum/index.php?topic=12055.msg1062756#msg1062756) if you want), but 'TB5.tpl' works great and fast. :)
Title: The really fast Throwback (retro) template. Updated. again.
Post by: danny on May 23, 2018, 10:29:43 AM
I didn't have the chance to test 'Throwback4.tpl' (perhaps you could attach it on this message (https://rejetto.com/forum/index.php?topic=12055.msg1062756#msg1062756) if you want), but 'TB5.tpl' works great and fast. :)
Thanks. And, you gave me a great idea!   I have uploaded TB6.tpl

Edit:
Saved for reference
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: LeoNeeson on May 24, 2018, 04:12:42 AM
Small enhancements:

Throwback6x.tpl - Change log:
- Font smoothing
- One line per file
- New background color

Throwback6y.tpl - Change log:
- New (https://www.compart.com/en/unicode/U+2718) transparent delete button. (https://en.wikibooks.org/wiki/Unicode/List_of_useful_symbols)
- Now displays only the file date
- Small tweaks on column width
 
Still missing:

- Hides columns if screen is small
- Use divs instead of tables? (info (https://stackoverflow.com/a/40338683))
- "Parent Directory" like apache has.

(Feel free to fix/enhance it, if you find something wrong)

Cheers,
Leo.-
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on May 24, 2018, 12:25:21 PM
Small enhancements:

- Font smoothing
- One line per file
- New background color

Still missing:
- "Parent Directory" like apache has.

(Feel free to fix/enhance it, if you find something wrong)

Cheers,
Leo.-

I thought hfs bind to folder was the appacbr equilevent to parent folder.

So path c:/webroot/hfs.exe
Has a folder (parent directory of site)
C:/webroot/hfs

Right click on the house k. The hfs and bind folders, chose the path. ???

Does this not accomplish that?
Title: The Throwback (retro) template. Exploring phone screen formatting options.
Post by: danny on May 24, 2018, 01:01:48 PM
I like some of the ideas there!

But, I did run into a few curiosities. . .
 
The table can't have every col as a % because then the delete button won't appear.  On the phone, it is intentionally expanded off the right side, when the phone is held vertical; and that's because it is more important to see the filenames than to have the table stay within the bounds of the screen (especially 5cm screen). 

The fog colored background is pretty cool, but background of table cells and background of buttons probably need to be darkened, considerably. Then it gets very good because the space-waste border is redundant and should be shrank to 1px or omitted.  Yes, that would work much better on phones (less screen spent on boxes, more room for text). 

Single line filename truncation is not suitable, because this: 
Fantastic home movie 1
Fantastic home movie 2
Fantastic home movie 3
is rendered as:
Fantastic ho...
Fantastic ho...
Fantastic ho...
 :o

So, it looks like we'd rather mash the date stamp instead.  It is the battleship in our bathtub. 
The unnecessary clock is the real problem--we need only M/D/Y.
The macro for that would multiply the processing delay*users*downloads*files server-side, causing decreased server capacity, Or. . .
Javascript for that would multiply the processing delay*files client-side, resulting in slightly increased server capacity.  Not bad.
Evidentially, it needs to be in javascript (scalable because it runs on the user's cpu). 

Here's the variable to attack:  %item-modified%  wasn't made with phone screens in mind. 
This needs changed by javascript, so that it shows the date in M/D/Y format: 
<script type="text/javascript">document.write('%item-modified%')</script>
needs a filter
I wonder if a javascript similar to this:  http://befused.com/javascript/get-filename-url could be used to trim %item-modified% down to M/D/Y format by identifying the space " " and omitting both the space and the unnecessary clock after it? 

Title: Throwback (retro) template (experimental revision)
Post by: LeoNeeson on May 24, 2018, 07:30:50 PM
The table can't have every col as a % because then the delete button won't appear.  On the phone, it is intentionally expanded off the right side, when the phone is held vertical; and that's because it is more important to see the filenames than to have the table stay within the bounds of the screen (especially 5cm screen).
@Danny: I agree, my mistake, sorry, I didn't have enabled the delete button when doing edits (take all this like my customized and very experimental version, you don't have to incorporate my changes to your version, which is already working great).

I choose to cut file names, because I usually have very long file names and they look like a mess on small screens. With JavaScript, I was also planning to use the tag 'title' to show the complete filename on mouse over, but on phones I guess that won't work).

To show %item-modified% as MM/DD/YYYY, change this:
%item-modified%

...to this:
{.cut|1|10|%item-added%.}

(Source (http://rejetto.com/forum/index.php?topic=11546.0))



@BMartino1: I was thinking in adding a "Parent Directory" item (like another item on the file list), at the top of the file list (except on root), like Apache usually does. See how this works, on this live example: https://unicode.org/Public/emoji/



I still have to see how to hide columns on small screen sizes (too much work for today, perhaps I'll do it on the next few days)

(I've uploaded a new revision, here. (http://rejetto.com/forum/index.php?topic=12055.msg1062792#msg1062792) Report any bugs, if you find them)
Title: Re: Throwback (retro) template (experimental revision)
Post by: danny on May 24, 2018, 09:55:38 PM
To show %item-modified% as MM/DD/YYYY, change this:
%item-modified%
...to this:
{.cut|1|10|%item-added%.}
(Source (http://rejetto.com/forum/index.php?topic=11546.0))
Sorry, but I've got some bad news.  That task repeats per each file.
Unfortunately, that macro, runs on the server's cpu, for reduced multi-user capacity and slower file listings. 
Instead, we need to use the client's cpu for that, with javascript. 
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Mars on May 25, 2018, 12:48:59 AM

To force a date to specific format , use  the Macro   time | new format | when=date

%item-modified% use by default  the system format, it is necessary to have universal format  by using
%item-modified-dt% or %item-added-dt%

example:
%item-modified% => 05/25/16 15:00:56
%item-modified-dt% => 42515.6256593403


{.time|mm/dd/yy|when=%item-modified-dt%.}


http://rejetto.com/wiki/index.php?title=HFS:_Time_format#Text_formatting

Code: [Select]
[+file]
<td>%item-size%B<td>{.time|mm/dd/yy|when=%item-modified-dt%.}<td>%item-dl-count%

[+folder]
<td class='nosize'>folder<td>{.time|m/d/yy|when=%item-modified-dt%.}<td>%item-dl-count%

it is possible to have the date and time on two lines using separate macros

Code: [Select]
[+file]
<td>%item-size%B<td>{.time|mm/dd/yy|when=%item-modified-dt%.}<p>{.time|hh:nn:ss|when=%item-modified-dt%.}<td>%item-dl-count%

[+folder]
<td class='nosize'>folder<td>{.time|mm/dd/yy|when=%item-modified-dt%.}<p>{.time|hh:nn:ss|when=%item-modified-dt%.}<td>%item-dl-count%

by creating a personal alias this can give more clarity to the template

[+special:alias]
mtime=time|mm/dd/yy|when=%item-modified-dt%
htime=time|hh:nn:ss|when=%item-modified-dt%

Code: [Select]
[+file]
<td>%item-size%B<td>{.mtime.}<p>{.htime.}<td>%item-dl-count%

[+folder]
<td class='nosize'>folder<td>{.mtime.}<p>{.htime.}<td>%item-dl-count%

one to preserve the standardized format using the macro cut proposed by LeoNeeson

[+special:alias]
mtime=cut||10|%item-modified%
htime=cut|12||%item-modified%

there are multiple possibilities  ;)
Title: Re: Throwback (retro) template (experimental revision)
Post by: danny on May 25, 2018, 02:32:39 AM
...
I still have to see how to hide columns on small screen sizes (too much work for today, perhaps I'll do it on the next few days).  (I've uploaded a new revision, here. (http://rejetto.com/forum/index.php?topic=12055.msg1062792#msg1062792) Report any bugs, if you find them)
I have rewritten it to do what you described, not by slower macros, but by speeding it up with some old school HTML4T, utilizing the table logic anchored diagonally.  The stopwatch likes this solution. 
Extra columns get out of the way, and filenames display on one line. 
I also took the liberty of changing the color theme to match Royale Noir. 

Edit:
This was incorporated into release 7 after revising the delete and upload functions. 
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on May 25, 2018, 09:52:20 AM
Hey Danny,

thought it was worth a mention
* Required downloading a php exe and set cgi /cli path
http://php.net/manual/en/migration5.cli-cgi.php

https://windows.php.net/download/

Although, php is somewhat aviable, but not officially supported, but is capable:
http://rejetto.com/forum/index.php?action=profile;u=9522;area=showposts;sa=topics;start=30

thx raybob
Title: Update. Phone friendly.
Post by: danny on May 26, 2018, 12:19:15 AM
The update is located at the first post in this thread.

Throwback7.tpl has single-line listings and will move extra columns out of the way, as needed.     

Kudos and thanks to LeoNeeson for samples and ideas. 

Title: Re: Update. Phone friendly.
Post by: LeoNeeson on May 26, 2018, 09:15:35 PM
@Mars: thanks for the explanation! (I've found very interesting how '[+special:alias]' work, especially on how we can combine macro code with an alias (an alias that works almost the same as a 'variable'). It surely gives endless possibilities and makes the code more easy to handle.

@Danny: I've tested the new Throwback7.tpl and this is getting better and better (that gradient background looks great). By the way, I don't see any more enhancements available without slowing down the server, so, it's done for me, at least for now.

Cheers,
Leo.-
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Chris Harris on May 27, 2018, 04:51:40 AM
I just installed this template. It works except for one folder whose name is "1" all the sub folders the folder names and the file names (except one) are NOT shown. The folders and files are there with an icon. If I hover the cursor over the icon, the correct folder/file name is shown and and clicking the icon gives the correct response.

In the lower folders most of the folder/file names are also NOT shown.

What have I done wrong?

Chris
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on May 27, 2018, 10:09:19 AM
What browser are you using?  Phone, Tablet, PC, Mac?  Which specific template file are you using?   
Try adding a{color:#8D8} to the bottom of the [style] section in the template.
Try version 4 or 6 of this template, to see if there's a difference.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Chris Harris on May 28, 2018, 02:47:13 AM
I was using Throwback7.tpl. I tried Throwback6x.tpl with same effect.

I see the problem on Android 7.1 with Google Chrome and Samsung Internet and on Windows 10 with Google Chrome and Microsoft Edge.

I tried adding a{color:#8D8} to the style section of Throwback7.tpl  will same problem.

I am going back to using mobil-light_wo_pic.zip  from http://rejetto.com/forum/index.php?topic=11754. I added the text to the diff template the root directory. This provides a responsive screen and I can turn the menu on and off.

Chris

Title: error
Post by: danny on May 28, 2018, 06:56:25 PM
. . . I see the problem on Android 7.1 with Google Chrome and Samsung Internet and on Windows 10 with Google Chrome and Microsoft Edge.. . . diff template the root directory.. . .
Thanks Chris! 
I found possibilities for the error.  It doesn't happen in normal conditions.  Version 7 didn't have contingencies to handle rare events, such as unclassified items in diff template and adaptive tables still drawing after css finishes.  Those are possible.

To remedy this, I've added fallback code and rewritten the css to half size for version 8.
That took all day. 
And still working on it.

For preview, here is the version 8 core.
Because it is a re-write, the extra features haven't been added at this time.
(A macro that provisions a delete feature costs 28% of the speed. It is not added yet) 
So, if you want to find out how fast HFS is supposed to go, try this:
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Chris Harris on May 29, 2018, 05:41:09 PM
I tired TB6-phone.tpl. Some problem.

I think the problem starts with a folder called "1". For any reason could this cause a problem?
Chris
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Chris Harris on May 29, 2018, 05:44:58 PM
Still a problem with TB8-Core.tpl
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on May 30, 2018, 01:08:38 AM
I tired TB6-phone.tpl. Some problem. I think the problem starts with a folder called "1". For any reason could this cause a problem?...Still a problem with TB8-Core.tpl
Thanks Chris! 

The most likely trouble is a diff-template has blocked some display rendering. 

First: right-click the root folder, properties, remove anything in the diff-template tab. 
Second: right-click the 1 folder, properties, remove anything in the diff-template tab.
Third: Menu, Save file system.

How to:
The throwback is a replacement main template (not for use as a diff-template). 
To use a new main template, you'd save the tpl file in the same folder as hfs.exe, and then:
Menu
HTML-template
Change-file
Throwback7.tpl

Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Chris Harris on May 30, 2018, 03:08:28 AM
Hi

I just checked, I have used TB8-Core.tpl as main template. It is in the hfs directory and changed the template file to it.

I checked that there is nothing in the diff template area for the root or any other directories

The problem seem to happen on one subfolder of the listed folder. Most BUT not all folders and files have no names shown. .mp3, .mp4 , .mkv and .flv files have names displayed.


Chris
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on May 30, 2018, 01:56:55 PM
If you have a file named hfs.diff.tpl or hfs.filelist.tpl, in that "1" folder, it will display differently.
Are you using an up to date HFS build 299 or 300 (2.3K or 2.3L)?
299-1/2:  https://drive.google.com/open?id=12GRINYSKe8H-VZtpsbvJkabvdTrB48F3
 
So, if I understand correctly, ordinary file types and folders fail the css/style color in your folder named "1" but not in your other folders and not on other HFS servers. That may be in the VFS, possibly fixable by making a new folder and copying the content into it.

Since the hover color works, but the main color doesn't, you can try this: 
Edit the [file] section. 
replace %item-name%
with <font color="#88DD88">%item-name%</font>

More specifically.
Find this:  <a href="%item-url%"><font color="white">&#9671;</font>&nbsp;%item-name%</a></td>
Change to: <a href="%item-url%"><font color="white">&#9671;</font>&nbsp;<font color="#88DD88">%item-name%</font></a></td>
Or: <font color="white">&#9671;</font>&nbsp;<a href="%item-url%" style="color:#88DD88">%item-name%</a></td>

That latter method with the inline style is preferred, because the hover/highlight color still works.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Chris Harris on May 31, 2018, 12:54:34 AM
Oops!!

I just found file hfs.diff.tpl in "1". I deleted it and now I can see everything.
My apologies.

Chris
Title: Just for fun, template in 1990's html. phone friendly
Post by: danny on May 31, 2018, 02:49:03 PM
So, I wrote one with no classes, no jquery, no stylesheet and no static sizing.  It fits the phone screen better. 

Back when the web was new, sites had a sharp clarity look. The blue&silver colors probably help too. 
The 90's style of HTML forces more attention to detail, like using a little paint brush instead of a big paint brush. 

I was curious to see if there would be a difference.  There is!  It really gets a lot of files onto the phone screen. 

But, I was really wondering if there would be a significant functional difference.  There isn't.

Anyway, enjoy the brand new antique. 
(attached below)
Title: Need help with file delete feature.
Post by: danny on May 31, 2018, 10:15:44 PM
. . . I don't see any more enhancements available without slowing down the server. . .
That does need refined.

The problem:
Slowdowns are caused by a feature inside file list loop (load*files*users).
Macros and server side scripts are disaster when magnified times the number of files.

Example:
Currently, the delete feature costs 28% of the speed when done like this:
   {.if|{.get|can delete.}|<td class=rw align=center><form method='post' id='filelist'><input type='hidden' name='selection' value='%item-url%'><button type='submit' name='action' value='delete' class='del' onclick='return confirm("Delete %item-name%?")'>X</button></form></td>.}
if 40 users browsing 1000 files, the code gets 40,000 times bigger, and you get a broken server

The solution:
Instead, if it could be moved, then it would cost less than 9% for this:
<td><a href="somewhere-else">X</a></td>

That difference would move a lot of bulk and some cpu load, outside of the file listing.  But, how do I do it?
At least, how do we move most of that, outside the loop? 


Title: Re: Need help with file delete feature.
Post by: LeoNeeson on June 01, 2018, 10:22:36 PM
Back when the web was new, sites had a sharp clarity look. The blue&silver colors probably help too. The 90's style of HTML forces more attention to detail, like using a little paint brush instead of a big paint brush.
+1 for using <marquee><b>HFS</b></marquee>, that gives the nostalgic touch. :)

The problem:
Slowdowns are caused by a feature inside file list loop (load*files*users).
Macros and server side scripts are disaster when magnified times the number of files.

Example:
Currently, the delete feature costs 28% of the speed when done like this:
   {.if|{.get|can delete.}|<td class=rw align=center><form method='post' id='filelist'><input type='hidden' name='selection' value='%item-url%'><button type='submit' name='action' value='delete' class='del' onclick='return confirm("Delete %item-name%?")'>X</button></form></td>.}
if 40 users browsing 1000 files, the code gets 40,000 times bigger, and you get a broken server
Sometime ago, I was thinking in another approach: removing the delete button, and adding a "+" button instead, which when clicked, it opens a modal screen (in dark grey color) with three nice and big buttons, giving options like: Rename, Delete and Move (and we could even add a 'Send to' when using a mobile). This way, the 'server side' check (to verify if we could delete the file), is only processed on-demand when that "+" button is clicked. I think this could be a win-win situation to solve this, not only because we don't overload the server, but we also add more options. The hard part is coding it... :-[
Title: Re: Need help with file delete feature.
Post by: danny on June 03, 2018, 12:37:18 AM
Sometime ago, I was thinking in another approach: removing the delete button, and adding a "+" button instead, which when clicked, it opens a modal screen (in dark grey color) with three nice and big buttons, giving options like: Rename, Delete and Move (and we could even add a 'Send to' when using a mobile). This way, the 'server side' check (to verify if we could delete the file), is only processed on-demand when that "+" button is clicked. I think this could be a win-win situation to solve this, not only because we don't overload the server, but we also add more options. The hard part is coding it... :-[
Somehow, the "+" icon, when clicked, has to transport that particular %item-url% to a separate page with the delete, rename, move (management) options on it.

I wonder if there is an example with at least as much as carrying the specific %item-url% to another page?

Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on June 10, 2018, 09:31:52 PM
Classic elegance, some new features, and a lot more speed. . .
Tested with HFS 2.3K and 2.3L

Features:
Phone and Tablet screen-support, including good tap targets and easily readable fonts. 
Tested with both iPhone and Android.

Much faster file listings in lengthy folders because there's no slow checkboxes.
Efficient and colorful unicode icons display twice as fast.

Automated error correction for users.  When needed, it displays very polite messages briefly, and then quickly sends the user back to what they wanted to do.  It maintains the appearance of good working order.  So, you're free to use options like the "max connections" and "maximum simultaneous downloads from single address" limits to manage your bandwidth. 

Quickly disconnects hack scans; and that feature lowers the cpu load, improving speed.

Easy for users, with simplified interface, column layout, black background, and readable fonts.  Classic! 
So, easy to use that it is Cat-operable on a tablet, apparently.

Works nicely on a variety of screen sizes, from pocket size to wall size displays.

How to use: Save the tpl file in the same folder as hfs.exe, and then: Menu, HTML-template, Change-file, and choose the tpl file.

i saw alot of template chages, and revision, i was not able to save them all, but i thought it woth to downlaod at the time. so here are your tempaltes older veriosn that i have downlaoed and never touched:

https://drive.google.com/drive/folders/1AIU5-jPJm2yr5CU8fbeT-sbQmq6dK0Xy?usp=sharing
Title: The really fast Throwback (retro) template. versions
Post by: danny on June 11, 2018, 06:54:02 AM
i saw alot of template chages, and revision, i was not able to save them all. . .
Development was in phases.  You only need versions 4 and 7.

Versions 1, 2, 3, 4 are the first phase, cumulating in Throwback4. 
Throwback4 is a good reference classic template and is PC-centric.

Versions 5, 6, 7 are the second phase, cumulating in Throwback7.
Throwback7 is refined to work well on the PC, tablet and phone.

7 is current.
Versions 8 and 1998 are development versions for a possible third phase. 
Version 9, not yet published, uses the guidelines revealed by the '98 version and most of the code from version 8, with the result of sharper looking tables and web browsing speed that is quicker than local file browsing.  I'm still working on that.

No progress so far on feature provisioning by an ordinary link carrying %item-url% to a separate page for management and media functions.  However, I have a huge list of other templates to look through to see if there is any similar code.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on June 16, 2018, 11:16:45 PM
Thx Danny.

BTW, haven't tested but have an idea for login page

After reviewing old posts:
http://rejetto.com/forum/index.php?topic=4288.0
http://rejetto.com/forum/index.php?topic=2690.0

Why not add a folder called login via vfs (vitural folder not real)
Right mouse click / properties / different template

This code:
Code: [Select]
%login-link%
%loggedin%

???
Not tested, but would add a web link to a login only page???