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