phil/plcom
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wallpaper: display placeholder while image loads

Browse source
This commit is contained in:
Philippe Loctaux 2023-05-18 16:57:45 +02:00
parent 9d28c7e8f4
commit c072599d6c
1 changed files with 45 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/wallpaper.astro
View file

@ -1,5 +1,4 @@
--- ---
import wallpapers from "../../public/wallpapers.json"; import wallpapers from "../../public/wallpapers.json";
const wallpaper = wallpapers[Math.floor(Math.random() * wallpapers.length)]; const wallpaper = wallpapers[Math.floor(Math.random() * wallpapers.length)];
@ -11,12 +10,11 @@ const [location1, ...locationRest] = wallpaper.location.split(",");
const location2 = locationRest.join(","); const location2 = locationRest.join(",");
--- ---
<div <div class="bg-gradient-to-r from-red-900 via-teal-900 to-fuchsia-900">
id="wallpaper" <div
class="relative text-white w-full h-almostscreen bg-center bg-fixed bg-cover" class="relative text-white w-full h-almostscreen bg-center bg-fixed bg-cover"
style=`background-image: url(${wallpaper.file});` style=`background-image: url(${wallpaper.file});`
> >
<!-- Content inside --> <!-- Content inside -->
<slot /> <slot />
@ -24,7 +22,6 @@ const location2 = locationRest.join(",");
<div <div
class="absolute bottom-3 sm:bottom-5 left-2 sm:left-5 inline-block backdrop-blur-lg backdrop-brightness-75 rounded-xl shadow-2xl p-2 space-y-0.5 sm:space-y-2" class="absolute bottom-3 sm:bottom-5 left-2 sm:left-5 inline-block backdrop-blur-lg backdrop-brightness-75 rounded-xl shadow-2xl p-2 space-y-0.5 sm:space-y-2"
> >
<!-- Location --> <!-- Location -->
<div class="flex"> <div class="flex">
<div class="inline-flex items-center"> <div class="inline-flex items-center">
@ -39,7 +36,11 @@ const location2 = locationRest.join(",");
d="M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765 11.842 11.842 0 00.976.544l.062.029.018.008.006.003zM10 11.25a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5z" d="M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765 11.842 11.842 0 00.976.544l.062.029.018.008.006.003zM10 11.25a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5z"
clip-rule="evenodd"></path> clip-rule="evenodd"></path>
</svg> </svg>
<span class="ml-1 text-sm">{location1}<span class="hidden md:inline">,{location2}</span></span> <span class="ml-1 text-sm"
>{location1}<span class="hidden md:inline"
>,{location2}</span
></span
>
</div> </div>
</div> </div>
@ -61,4 +62,5 @@ const location2 = locationRest.join(",");
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>