rejetto forum

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

Offline dj

  • Tireless poster
  • ****
  • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« 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 »

Follow members gave a thank to your post:


Thank-o-Matic 3.0 By Adk Team