rejetto forum

Responsive small screen template

Chris Harris · 154 · 846297
« previous next »
Pages: 1 2 3 ... 11

0 Members and 1 Guest are viewing this topic.

Offline Chris Harris

  • Occasional poster
  • *
    • Posts: 38
    • View Profile
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

Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
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
« Last Edit: February 20, 2021, 05:44:07 AM by dj »

Offline Chris Harris

  • Occasional poster
  • *
    • Posts: 38
    • View Profile
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

Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
Reply #3 on: June 06, 2016, 09:41:10 AM
rename mobil-ligh.tpl to hfs.diff.tpl and add it.
« Last Edit: June 06, 2016, 02:56:28 PM by dj »

Offline Mars

  • Operator
  • Tireless poster
  • *****
    • Posts: 2068
    • View Profile
Reply #4 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


Offline Chris Harris

  • Occasional poster
  • *
    • Posts: 38
    • View Profile
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


Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
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
« Last Edit: June 06, 2016, 03:32:43 PM by dj »

Offline Chris Harris

  • Occasional poster
  • *
    • Posts: 38
    • View Profile
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

Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
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>
« Last Edit: June 07, 2016, 12:54:07 PM by dj »

Offline Chris Harris

  • Occasional poster
  • *
    • Posts: 38
    • View Profile
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

Offline bmartino1

  • Tireless poster
  • ****
    • Posts: 911
  • I'm only trying to help i mean no offense.
    • View Profile
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...
With the move to hfs 3.0 and github. I'm using Unraid and HFS 3 as a docker. Any File Mentioned is now removed from my google drive.

Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
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
« Last Edit: August 26, 2016, 06:58:19 AM by dj »

Offline Chris Harris

  • Occasional poster
  • *
    • Posts: 38
    • View Profile
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

Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
Reply #13 on: June 20, 2016, 08:14:50 AM
Corrected

Offline Chris Harris

  • Occasional poster
  • *
    • Posts: 38
    • View Profile
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
« Last Edit: June 20, 2016, 12:08:30 PM by harrisc »

Pages: 1 2 3 ... 11