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

0 Members and 1 Guest are viewing this topic.

Offline bmartino1

  • Tireless poster
  • ****
  • Posts: 893
  • I'm only trying to help i mean no offense.
    • View Profile
    • My HFS Google Drive Shared Link
Re: Responsive small screen template - pictureviewer
« Reply #60 on: July 11, 2019, 12:41:08 PM »
That might take a while--Can you recommend a website that seems effective at teaching me how to read javascript?

w3 schools???

https://www.w3schools.com/jsref/event_oncontextmenu.asp

https://www.w3schools.com/js/
« Last Edit: July 11, 2019, 02:02:54 PM by bmartino1 »
Files i try to keep and share can be found on my google drive:

https://drive.google.com/drive/folders/1FOWi3Gqaldld6JLXvZ-biDv4RSguf0IC

Follow members gave a thank to your post:


Offline dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - pictureviewer
« Reply #61 on: July 15, 2019, 03:53:14 AM »
center on screen with with object-fit zooms small images
Exit from fullscreen with Esc Button (or back button on android ◁ )

P.S. to dim the background add
Code: [Select]
outline: 9999px solid rgba(0,0,0,0.5)
update: v2 centers images
« Last Edit: July 15, 2019, 06:19:12 AM by dj »

Follow members gave a thank to your post:


Offline dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #62 on: July 15, 2019, 05:43:28 AM »
@danny set the last audio.preload to 'none' (untested at the moment)

« Last Edit: July 15, 2019, 07:49:48 PM by dj »

Follow members gave a thank to your post:


Offline dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #63 on: July 15, 2019, 04:11:03 PM »
That solved the problem of doing stuff before play clicked.  New problem:  downloading songs twice while playing.
don't have the mistake
can you post the template?
what does network analysis say in the browser?
« Last Edit: July 15, 2019, 04:24:28 PM by dj »

Offline dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #64 on: July 15, 2019, 08:21:47 PM »
The double-download problem is intermittent.  Also the number of get requests varies.
I don't know. I think, theres no double-download, the browser downloads parts (can see in browser network analysis) (it's the filesize of your song 2M?)
stackoverflow don't help really
the multiple requests have status 206 (partial content load)


update: yes, you make a mistake in the editing (changing the play button is not nessary)
« Last Edit: July 16, 2019, 03:04:09 PM by dj »

Follow members gave a thank to your post:


Offline dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #65 on: July 17, 2019, 04:35:39 PM »
@danny replace audio.onerror

Code: [Select]
audio.onerror=function(){audio.onended()}
P.S.
Also, it can play playlists (m3u) and webradio


I'm on holidays next week's
latest template+audioplayer+pictureviewer


« Last Edit: July 19, 2019, 03:19:10 AM by dj »

Follow members gave a thank to your post:


Offline bmartino1

  • Tireless poster
  • ****
  • Posts: 893
  • I'm only trying to help i mean no offense.
    • View Profile
    • My HFS Google Drive Shared Link
Re: Responsive small screen template
« Reply #66 on: July 23, 2019, 08:21:41 PM »
i like the new html content and template desing, but i'm having a hard time following where the current version for the template are and go.

can you link the attachment or tell me what post on the thread to download them at?
Files i try to keep and share can be found on my google drive:

https://drive.google.com/drive/folders/1FOWi3Gqaldld6JLXvZ-biDv4RSguf0IC

Offline dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - pictureviewer
« Reply #67 on: July 24, 2019, 03:01:44 AM »
time to present your vacation photos

update: v2.2 swipe to next image
update: v3 works with mobil-light_4.6 & viewthumbs|audioplayer

@bmartino1 latest template here
changelog: fixed multiple urlvars

update: videoplayer_addon only useful if you want to show subtitles
subtitle must have the same name (tuxi9.ogg.vtt)
you also need video5.htm
« Last Edit: August 03, 2019, 07:21:45 AM by dj »

Follow members gave a thank to your post:


Offline dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - audioplayer
« Reply #68 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 dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #69 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 dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #70 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 dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #71 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 dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - modified by danny
« Reply #72 on: September 11, 2019, 04:16:27 AM »
a bug: the month is not displayed: 21.01.2019 18
it should be displayed like this

be carefully with cutting the date. It depends on OS. What's your OS language? En?
use ISO-dateformat in HFS to remove seconds
« Last Edit: September 11, 2019, 04:58:42 AM by dj »

Follow members gave a thank to your post:


Offline dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #73 on: September 11, 2019, 04:03:31 PM »
Otherwise, there could be need of progress indicator after click, such as "Please Wait" or perhaps a whirl animation.

you can use waiting_cssonly
the streaming load can possibly be done with the streaming API, but this is a greater thing (Edit: a first test sounds promising)
« Last Edit: September 13, 2019, 11:12:12 AM by dj »

Offline dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - update
« Reply #74 on: September 13, 2019, 11:11:43 AM »
changelog: (thaks danny for the hints)

stream filelist (for slow connections)
blank file size for virtual folder
higher contrast for dark theme

Add hfs.filelist.tpl from zip to folder, that contains hfs.exe


changelog audioplayer: reduce traffic (load from cache)
« Last Edit: September 19, 2019, 03:17:52 AM by dj »