Author Topic: Responsive small screen template  (Read 2513 times)

0 Members and 1 Guest are viewing this topic.

Offline harrisc

  • Occasional poster
  • *
  • Posts: 13
    • View Profile
Responsive small screen template
« on: June 04, 2016, 04: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

  • Experienced poster
  • ***
  • Posts: 40
    • View Profile
Re: Responsive small screen template
« Reply #1 on: June 05, 2016, 11:33:36 PM »
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.

Offline harrisc

  • Occasional poster
  • *
  • Posts: 13
    • View Profile
Re: Responsive small screen template
« Reply #2 on: June 06, 2016, 02: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

  • Experienced poster
  • ***
  • Posts: 40
    • View Profile
Re: Responsive small screen template
« Reply #3 on: June 06, 2016, 03:41:10 AM »
rename mobil-ligh.tpl to hfs.diff.tpl and add it.
« Last Edit: June 06, 2016, 08:56:28 AM by dj »

Offline Mars

  • Operator
  • Insane poster
  • *****
  • Posts: 1794
    • View Profile
Re: Responsive small screen template
« Reply #4 on: June 06, 2016, 05: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

FRENCH MEMBER : Si vous comprenez la langue française,  n'hésitez pas à l'utiliser pour une meilleure aide de ma part

Offline harrisc

  • Occasional poster
  • *
  • Posts: 13
    • View Profile
Re: Responsive small screen template
« Reply #5 on: June 06, 2016, 07:24:17 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

  • Experienced poster
  • ***
  • Posts: 40
    • View Profile
Re: Responsive small screen template
« Reply #6 on: June 06, 2016, 08:52:56 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
« Last Edit: June 06, 2016, 09:32:43 AM by dj »

Offline harrisc

  • Occasional poster
  • *
  • Posts: 13
    • View Profile
Re: Responsive small screen template
« Reply #7 on: June 06, 2016, 10:21:38 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

  • Experienced poster
  • ***
  • Posts: 40
    • View Profile
Re: Responsive small screen template
« Reply #8 on: June 07, 2016, 05: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, 06:54:07 AM by dj »

Offline harrisc

  • Occasional poster
  • *
  • Posts: 13
    • View Profile
Re: Responsive small screen template
« Reply #9 on: June 07, 2016, 06:41:18 AM »
Hi

This sort option works.
Thanks
Chris

PS
The </select>  code is on line 33 in hfs.diff.tpl

Follow members gave a thank to your post:


Offline bmartino1

  • Insane poster
  • *****
  • Posts: 721
  • I'm only trying to help i mean no offense.
    • View Profile
    • none - google translate
Re: Responsive small screen template
« Reply #10 on: June 07, 2016, 02: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...
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Offline dj

  • Experienced poster
  • ***
  • Posts: 40
    • View Profile
Re: Responsive small screen template
« Reply #11 on: June 19, 2016, 11:02:44 PM »
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, 12:58:19 AM by dj »

Follow members gave a thank to your post:


Offline harrisc

  • Occasional poster
  • *
  • Posts: 13
    • View Profile
Re: Responsive small screen template
« Reply #12 on: June 20, 2016, 12: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

  • Experienced poster
  • ***
  • Posts: 40
    • View Profile
Re: Responsive small screen template
« Reply #13 on: June 20, 2016, 02:14:50 AM »
Corrected

Offline harrisc

  • Occasional poster
  • *
  • Posts: 13
    • View Profile
Re: Responsive small screen template
« Reply #14 on: June 20, 2016, 05: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, 06:08:30 AM by harrisc »

Follow members gave a thank to your post: