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

0 Members and 3 Guests are viewing this topic.

Offline Fysack

  • Tireless poster
  • ****
  • Posts: 644
  • present picture
    • View Profile
    • Admin
Re: Responsive small screen template - addon
« Reply #90 on: January 04, 2020, 02:40:14 AM »

halloween has enchanted the date  :-[
show relative date as
/
Its photoshopped  ;)
GOD CAN READ YOUR MIND

Offline dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #91 on: January 06, 2020, 12:43:42 PM »
(deleted)
Could you help me do only-on-demand thumbnails for this version of Throwback?

Replace
Code: [Select]
document.addEventListener("DOMContentLoaded", function() {with
Code: [Select]
document.addEventListener("click", function(e) {if(!e.target.href||!e.target.href.endsWith('.jpg')) return;e.preventDefault();or (with a extra button)
Code: [Select]
document.querySelector('#mylazyloadbutton').addEventListener("click", function() {
« Last Edit: February 09, 2020, 11:39:33 AM by dj »

Follow members gave a thank to your post:


Offline Fysack

  • Tireless poster
  • ****
  • Posts: 644
  • present picture
    • View Profile
    • Admin
Re: Responsive small screen template
« Reply #92 on: January 11, 2020, 01:27:57 AM »
danny.. dj.. hardcore..  8) 8) 8)
GOD CAN READ YOUR MIND

Offline dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #93 on: January 16, 2020, 03:36:20 PM »
Mobil-Light with several add-ons pre-installed. 
Mint theme, and a new hfs.filelist.tpl which provides short-date.
Why hide time on large screens?
I recommend to use formatmodified instead of changing hfs.filelist.tpl
« Last Edit: January 25, 2020, 09:48:01 AM by dj »

Offline dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #94 on: January 18, 2020, 05:01:13 AM »
But, just imagine that full file thumbnails ARE needed via mobile data, but only as needed.
In lazyimages for V5.4 full file thumbnails are also shown on mobile, if they are cached

Show a image, refresh folder and you will see the thumbnail.
Or load a page on wifi, then turn wifi off (go to mobile), refresh and you will see thumbnails.
This works currently only in FF for Android, because Chrome native lazy load.
I've re-uploaded file, which also works with Chrome Android.

P.S. Edge79 (I don't have it yet) supports native lazy loading via flag


Edit: Listen to music offline

load the music folder over WiFi with urlvar /?cacheAll=1
then jogging in a forest without cell phone reception and listen to music
and let others know in advance where you go :)


Edit: Select songs for playlist
queue_audio will build-in in next version (probably in mid-February)


Edit: Review: MP_theme is a clone from dannys Throwback

« Last Edit: February 12, 2020, 03:37:25 AM by dj »

Online danny

  • Occasional poster
  • *
  • Posts: 89
    • View Profile
Re: Responsive small screen template
« Reply #95 on: February 13, 2020, 10:55:40 PM »
...Edit: Review: MP_theme is a clone from dannys Throwback
See the attached file.  It has the looks and it has your older music player which is far-out better for music. I like it ever so much. 
« Last Edit: February 14, 2020, 08:14:06 AM by danny »

Offline dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - update
« Reply #96 on: February 14, 2020, 04:38:43 AM »
changelog:
select songs, topbanner
« Last Edit: February 14, 2020, 04:42:27 AM by dj »

Follow members gave a thank to your post:


Online danny

  • Occasional poster
  • *
  • Posts: 89
    • View Profile
Re: Responsive small screen template
« Reply #97 on: February 28, 2020, 07:19:27 PM »
Here's a css color icon example, which looks similar on both Firefox and Chrome.

\FE0E turns off the Firefox emoticon feature, so that you can theme the icon.
The ;color: is for Chrome, so that it doesn't monochrome all of the icons.

If those are used together, that icon appears the same on firefox/chrome/edge/opera, etc...
Or, if the Firefox emoticon is useful, Chrome still needs the color.
Code: [Select]
li a[href$="/"]::before {content:"\1f4c1\FE0E  ";color:#FB0}
a[href*="."]::before {content:"\1f4c4  ";color:#BCC}
a[href$=".jpg"]::before, a[href$=".jpeg"]::before, a[href$=".webp"]::before, a[href$=".png"]::before, a[href$=".gif"]::before{content:"\1f4f7  ";color:black}
a[href$=".mp3"]::before, a[href$=".aac"]::before, a[href$=".m4a"]::before, a[href$=".ogg"]::before {content:"\1f50a\FE0E  ";color:green}
a[href$=".mp4"]::before, a[href$=".avi"]::before, a[href$=".webm"]::before, a[href$=".mkv"]::before {content:"\1f4fa  ";color:teal}
a[href$=".tar"]::before, a[href$=".rar"]::before, a[href$=".7z"]::before, a[href$=".zip"]::before {content:"\1f381  ";color:brown}
a[href$=".exe"]::before, a[href$=".vbs"]::before, a[href$=".bat"]::before, a[href$=".ps1"]::before, a[href$=".js"]::before, a[href$=".apk"]::before {content:"\1f537  ";color:#5AE}
nav a[href*="."]::before {content:""}
img+div a[href$=".jpg"]::before, a[href$=".jpeg"]::before, a[href$=".webp"]::before, a[href$=".png"]::before, a[href$=".gif"]::before{content:""}
It is an efficient solution, utilizing icons already present in the client.
« Last Edit: March 01, 2020, 06:25:35 PM by danny »

Offline dj

  • Tireless poster
  • ****
  • Posts: 171
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #98 on: February 29, 2020, 07:57:26 AM »
if you need more file-icons
Code: [Select]
[+]
<script>
var style = document.createElement('style')
style.innerHTML = `
li a::before {font: normal normal normal 16px/1 FontAwesome; color:black}
a[href$=".xls"]::before {content:"\\f1c3  "}
a[href$=".pdf"]::before {content:"\\f1c1  "}
a[href$=".doc"]::before {content:"\\f1c2  "}
`
document.head.appendChild(style)

var style = document.createElement('link')
style.rel='stylesheet'
style.href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'
document.head.appendChild(style)
</script>
« Last Edit: February 29, 2020, 08:02:38 AM by dj »