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

0 Members and 2 Guests are viewing this topic.

Offline danny

  • Tireless poster
  • ****
  • Posts: 194
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #90 on: August 03, 2019, 06:11:06 AM »
DJ,
I was wondering how to add mp3 play function to a many file icons, such as 🔊 after the %list% finished drawing? 

Edit: Oh my gosh.  LOLZ!!!  Yes, it does already exist.  Thank you!
« Last Edit: August 05, 2019, 08:01:08 PM by danny »

Offline dj

  • Tireless poster
  • ****
  • Posts: 155
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - audioplayer
« Reply #91 on: August 03, 2019, 07:37:44 AM »
@danny
code from audioplayer:
Code: [Select]
  //audioplayer for all (click on audio icon)
if I understand the question, have you tryed to click on any audio file icon?
it already exists

Follow members gave a thank to your post:


Offline danny

  • Tireless poster
  • ****
  • Posts: 194
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #92 on: August 03, 2019, 09:49:14 AM »
Oh my gosh.  LOLZ!!!  Yes, it does already exist.  Thank you!

Offline danny

  • Tireless poster
  • ****
  • Posts: 194
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #93 on: August 05, 2019, 04:29:34 AM »
DJ,
I was wondering how do I add a delete for only Empty folders?  (avoid red x if the folder has files)
I couldn't use the nofiles nor size filters, because null search results is also nofile/size0, even if the folder is full. 
« Last Edit: August 05, 2019, 10:13:45 PM by danny »

Offline danny

  • Tireless poster
  • ****
  • Posts: 194
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #94 on: August 20, 2019, 05:44:02 PM »
@DJ
I need some help with a modification of search results.
Code: [Select]
<script type="text/javascript">function searchQuery() {frm = document.searchForm;if(frm.query.value.length < 3) {alert("Search requires 3 or more characters");} else {frm.recursive.checked ? recursive ="&recursive" : recursive ="";for(x=0; x<frm.choice.length; x++) {if(frm.choice[x].checked ==1) {if(frm.choice[x].value =="file") {searchMode ="?files-filter=";filter="&folders-filter=%5C";} else if(frm.choice[x].value =="folder") {searchMode ="?folders-filter=";filter="&files-filter=%5C";} else {searchMode ="?filter=";filter="";}}}for(c=0; c<frm.root.length; c++) {if(frm.root[c].checked ==1) {frm.root[c].value =="current" ? searchFrom ="http://%host%%folder%": searchFrom = "http://%host%";}}document.location.href = searchFrom+searchMode+"*"+frm.query.value+"*"+recursive+filter;}}</script>The modification that I need is:  If no file found, refresh to ordinary list in 1 second or less.  Or, prompt 'not found', without changing/doing any file list.

Purpose:  I want to put a Folder Delete function in the [nofiles] section, because I think it fine to delete empty folders.  However, this is not quite safe because negative search results also lands on the nofiles page, and thus user might think there are no files, but there is a surprise instead.

edit:
So I tried
if('{.%number% < 1.}') setTimeout(function () {window.location.href= './'; }, 700);
However, it blocks access to the [nofiles] section no matter if it was from search or normal browsing. 
Well, I'd like normal browsing to use the [nofiles] page, but not search. 

Edit: 
Is there a better search script to use, perhaps ending in a Modal response 'not found' instead of landing on the nofiles page? 
« Last Edit: August 25, 2019, 02:10:36 PM by danny »

Offline danny

  • Tireless poster
  • ****
  • Posts: 194
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #95 on: September 02, 2019, 03:07:28 PM »
In case it was puzzling for Android phone users to exit the slideshow via the phone's power switch,
here is "full-window" (not fullscreen) version of the slideshow.  The control icons stay viewable/usable.
Code: [Select]
<script type="text/javascript"> //DJ's pictureplayer for all
function addon(){
var compatible=1  //edit here
if (window.NodeList && !NodeList.prototype.forEach) {  //IE11
 NodeList.prototype.forEach = function (callback, thisArg) {thisArg = thisArg || window; for (var i=0; i<this.length; i++) {callback.call(thisArg, this[i], i, this)}} }
var pls=[]
var it=document.querySelectorAll('#files a[href]')  //td
it.forEach(function(item) {
 if(!(['.jpg','.webp','.png','.gif'].indexOf(item.getAttribute('href').slice(-4))+1)) return
 pls.push(item.getAttribute('href'))
 var bu=item.firstElementChild || (compatible? item:item.parentNode.parentNode.previousElementSibling)
 bu.addEventListener('click',function(e){e.preventDefault(); show(item.getAttribute('href'))}) })
if(!pls.length) return
var mod = document.createElement("img"), t
mod.style = 'position:fixed;top:0px;max-height:100%;height:100vh;width:100vw;image-orientation:from-image;z-index:2;background:rgba(0,0,0,0.85);object-fit:contain';
function slide() {t=setInterval(function(){show(pls[pls.indexOf(mod.getAttribute("src"))+1])},'{.urlvar|dur.}'*1000||7000); return false}
mod.alt = "end"
mod.hidden = true
mod.onclick = function(evt) {if (evt.clientX < 180) {if(pls.indexOf(this.getAttribute("src"))) show(pls[pls.indexOf(this.getAttribute("src"))-1]); } else show(pls[pls.indexOf(this.getAttribute("src"))+1])}
document.body.appendChild(mod)
var cls = document.createElement("span")
cls.style = 'position:fixed;top:0px;left:0px;color:green;cursor:pointer;font-size:22px;font-weight:bold;z-index:2;text-shadow:1px 0px 1px #FFFEEE, -1px 0px 1px gray;padding:12px 20px 4px'  //left:
cls.textContent='\u00D7'
cls.hidden = true
cls.onclick = function(evt) {this.hidden = true; mod.hidden = true; clearInterval(t); cls2.hidden=true}
document.body.appendChild(cls)
var cls2 = document.createElement("span")
cls2.style = 'position:fixed;top:51px;left:0px;color:green;cursor:pointer;font-size:23px;z-index:2;text-shadow:1px 0px 1px #FFFEEE, -1px 0px 1px gray;padding:4px 20px 8px'
if('{.%connections% < 50.}') cls2.textContent='\u25B6'
cls2.hidden = true
cls2.onclick = function(evt) {slide()}
document.body.appendChild(cls2)
function show(that) {
mod.src = that
cls.hidden = false; mod.hidden = false; cls2.hidden = false;   //
mod.title = that} }; if(!document.querySelector('main')) addon()  //hfs2.4
</script>

Offline danny

  • Tireless poster
  • ****
  • Posts: 194
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #96 on: September 05, 2019, 05:24:35 AM »
I would like to see your template and accessories all in One file.  This method could help: 

</body>
<script type="text/javascript" src="/~audioplayer.js"></script>
</html>

[audioplayer.js]
function addon(){
var playall=1, m3uall=1, compatible=1, player=0, dur=0, shuffle=1, repeat=1  //edit here. . .


If all in one file, the ease of use would make your template more delightful.
« Last Edit: September 05, 2019, 05:18:11 PM by danny »

Offline dj

  • Tireless poster
  • ****
  • Posts: 155
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #97 on: September 06, 2019, 04:27:11 AM »
I would like to see your template and accessories all in One file.  This method could help: 

yes, you can also run the batchfile in the zip
it creates a template with viewthumbs included

Offline danny

  • Tireless poster
  • ****
  • Posts: 194
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #98 on: September 06, 2019, 05:33:23 PM »
yes, you can also run the batchfile in the zip
it creates a template with viewthumbs included
I couldn't figure out how to put the [files] section back inside the template (so there's no separate filelist.tpl). 
Maybe CSS isn't working; because, text and background same/similar, is so hard to read.

So, howabout "click-once-go," a 1 file instantly ready-to-use template?
And, not like the attachment...
« Last Edit: September 07, 2019, 05:16:28 AM by danny »

Offline dj

  • Tireless poster
  • ****
  • Posts: 155
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #99 on: September 07, 2019, 05:29:05 AM »
the filelist.tpl ist not installed in your screenshot

I couldn't figure out how to put the [files] section back inside the template (so there's no separate filelist.tpl). 
So, howabout "click-once-go," a 1 file instantly ready-to-use template?

version 4 never reloads the page. It's fast because it only updates the filelist and not the template.


Maybe CSS isn't working; because, text and background same/similar, is so hard to read

you use the dark theme
you can change the theme with rightclick on files

the css for dark theme you find in line 31 and 32
Code: [Select]
.dark {background:#555; color:white}
@media (prefers-color-scheme: dark) {  body {   background-color: #555;   color: white;  }}

todo: better contrast for dark theme
update: replace body with body, a
this will go to mobil-light_V4.6.4:
Code: [Select]
@media (prefers-color-scheme: dark) {  body, li a, li span, small a {   background-color: #555;   color: white;  }}
« Last Edit: September 08, 2019, 06:12:13 AM by dj »

Offline danny

  • Tireless poster
  • ****
  • Posts: 194
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #100 on: September 07, 2019, 06:33:26 AM »
Oi!  So, I would like to see your template in a click, ready, go, form.
« Last Edit: September 07, 2019, 06:35:01 AM by danny »

Offline danny

  • Tireless poster
  • ****
  • Posts: 194
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #101 on: September 07, 2019, 06:36:09 AM »
Oi!  So, I would like to see your template in a click, ready, go, form.

Offline danny

  • Tireless poster
  • ****
  • Posts: 194
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #102 on: September 07, 2019, 02:44:48 PM »
Here's some icon goodies: 
a[href$=".mp3"]::before, a[href$=".aac"]::before, a[href$=".m4a"]::before, a[href$=".ogg"]::before {content:"\1f3b5"}
a[href$=".jpg"]::before, a[href$=".jpeg"]::before, a[href$=".webp"]::before, a[href$=".gif"]::before {content:"\1f304 "}
a[href$=".mp4"]::before, a[href$=".avi"]::before, a[href$=".webm"]::before, a[href$=".mkv"]::before {content:"\1f4fa"}
a[href$=".tar"]::before, a[href$=".rar"]::before, a[href$=".7z"]::before, a[href$=".zip"]::before {content:"\1f381  "}
a[href$=".exe"]::before, a[href$=".vbs"]::before, a[href$=".bat"]::before, a[href$=".ps1"]::before, a[href$=".js"]::before {content:"\1f537"}

Edit-x2;
This line makes the upload button a non-adaptive fixed size: 
#upload {width:74px; background: no-repeat -74px linear-gradient(#cde,#cde), #f0f0f0; transition:none}

Edit-x2;
error handlers, automated:
Code: [Select]
[not found]
<h1>Not found</h1><a href="/">&#x2302; Home</a><script>setTimeout(function () {window.location.href= '../'; }, 1000);</script>
[unauthorized]
<a href="/~login"><h1>Unauthorized</h1>&#x26d4; wrong username or password. Click to login</a><br><br><br><br><br>If phone doesn't log in, try Firefox Mobile.
[overload]
<h1>Service Unavailable</h1>overloaded. Retry later.<script>setTimeout(function () {window.location.href= './'; }, 2000);</script>
[max contemp downloads]
{.redirect|/.}
[deny]
<h1>No</h1><script>setTimeout(function () {window.location.href= './'; }, 1000);</script>
[ban]
{.disconnect.}

Edit;
N/A is displayed as file size for virtual folder.  Need blank instead of N/A. (I didn't figure how to)

Edit;
Need mouse pointer animation/progress after clicking on folder or search. (I didn't figure how to)

Edit;
On PC screen, item.size makes a zigzag down the center of the screen.  A possible fix is to remove </span><span> from in-between size and date, so that they are together on the right.


Edit-x3;
Windows, Apple, Linux & Android unicode fonts for filenames
and adaptive sizes
Code: [Select]
body{font-size:calc(0.9em + 0.15vw);margin:1px;margin:0.8vw;border:0}
a{color:darkgreen;text-decoration:none;font-size:1.13em;font-family:"Arial Unicode MS","Lucida Sans Unicode","DejaVu Sans",sans-serif;}

Edit-x4;
Template attached, with non-glare light theme Two new color schemes.
They are #B7B6B7 or #FFF0D4 backgrounds, with darkgreen text.
« Last Edit: September 10, 2019, 05:33:12 PM by danny »

Offline dj

  • Tireless poster
  • ****
  • Posts: 155
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #103 on: September 08, 2019, 05:04:26 PM »
On PC screen, item.size makes a zigzag down the center of the screen.  A possible fix is to remove </span><span> from in-

replace li span {margin-left:auto}
with li a+span {margin:0px 10px 0px auto}


Edit:
perhaps this line is not needed:
#upload {width:74px; background: no-repeat -74px linear-gradient(#cde,#cde), #f0f0f0; transition:none}
it's for upload progress

N/A is displayed as file size for virtual folder.  Need blank instead of N/A. (I didn't figure out how to do that)
will be fixed in next version

Edit:
the #FFF0D4 gradient background is nice
you have two more themes, if you set OS color to light

what is margins="0" in the body tag?
« Last Edit: September 09, 2019, 04:41:53 PM by dj »

Follow members gave a thank to your post:


Offline danny

  • Tireless poster
  • ****
  • Posts: 194
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #104 on: September 09, 2019, 10:33:42 PM »
...what is margins="0" in the body tag?
<body margins="0">Is fallback, just in case margin:0.8vw wasn't supported by a browser.
I did it old style. More modern way is to include the fallback like: margin:0;margin:0.8vw;
Either way, if 0.8vw wasn't supported, then margins are 0.  Seems like vh, vw, calc, may need fallbacks.
...the #FFF0D4 gradient background is nice...
Thanks! 
I was researching attractive, non-stark, real items and copying the color scheme.
Lightmode 30's,40's teapot
Darkmode Austrian jacket
« Last Edit: September 10, 2019, 03:09:20 AM by danny »