Responsive small screen template

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

dj · **Reply #1 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.
The dialogs are not located below the file list, but you can show/hide them.

Edit: latest version

Features:
never reloads the page
logout(Edge)
searchcategorie
web-app-capable
generate thumbnails on upload
build-in pictureviewer(chrome77)
build-in audioplayer
only 10k

Chris Harris · **Reply #2 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

dj · **Reply #3 on:** June 06, 2016, 09:41:10 AM

~~rename mobil-ligh.tpl to hfs.diff.tpl and~~ add it.

Mars · **Reply #4 on:** June 06, 2016, 11:25:55 AM

in the default template the main, section contain those lines

Quote

<body>
<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>

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

Chris Harris · **Reply #5 on:** June 06, 2016, 01:24:17 PM

Quote from: dj on June 06, 2016, 09:41:10 AM

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

dj · **Reply #6 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

Chris Harris · **Reply #7 on:** June 07, 2016, 04:21:38 AM

Quote from: 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

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

dj · **Reply #8 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>

Chris Harris · **Reply #9 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

bmartino1 · **Reply #10 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...

dj · **Reply #11 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

Chris Harris · **Reply #12 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

dj · **Reply #13 on:** June 20, 2016, 08:14:50 AM

Corrected

Chris Harris · **Reply #14 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

Responsive small screen template

Chris Harris

Responsive small screen template

dj

Re: Responsive small screen template

Chris Harris

Re: Responsive small screen template

dj

Re: Responsive small screen template

Mars

Re: Responsive small screen template

Chris Harris

Re: Responsive small screen template

dj

Re: Responsive small screen template

Chris Harris

Re: Responsive small screen template

dj

Re: Responsive small screen template

Chris Harris

Re: Responsive small screen template

bmartino1

Re: Responsive small screen template

dj

Re: Responsive small screen template

Chris Harris

Re: Responsive small screen template

dj

Re: Responsive small screen template

Chris Harris

Re: Responsive small screen template