Starlio/Starlio-web
1
0
Fork 0
mirror of https://github.com/Starlio-app/Starlio-web.git synced 2025-03-03 14:31:25 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: placeholder for img wallpaper
Some checks failed
Create and publish a Docker image / build-and-push-image (push) Has been cancelled
Details

Browse source
This commit is contained in:
Данил 2025-02-25 10:59:49 +03:00
parent f56b6b2ff0
commit 923cd87a73
3 changed files with 41 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/web/html/wallpaper.html
View file

@ -35,6 +35,7 @@
</head>
<body>
<div class="wallpaper">
<div class="wallpaper-placeholder"></div>
<img alt="{{info.title}}"
src="{{info.url}}"
onclick="window.open('{{info.hdurl}}')"
@ -61,5 +62,6 @@
</div>
</div>
</div>
<script src="/static/script/placeholder.js"></script>
</body>
</html>

32
src/web/static/css/wallpaper.css
View file

@ -9,11 +9,20 @@ img {
cursor: pointer;
}
.wallpaper-placeholder {
border-radius: 16px;
display: block;
background-color: #8C8C8C;
}
@media (min-width: 0) {
.wallpaper-placeholder {
width: 85%;
}
.wallpaper-img{
width: 85%;
border-radius: 16px;
display: block;
display: none;
margin-left: auto;
margin-right: auto
}
@ -60,6 +69,9 @@ img {
}
@media (min-width: 768px) {
.wallpaper-placeholder {
min-width: 30%
}
.get-it-on {
display: flex;
margin: 5% auto 3% auto;
@ -92,10 +104,15 @@ img {
box-sizing: border-box;
}
.wallpaper-placeholder {
width: 30%;
display: block;
}
.wallpaper-img {
width: 30%;
border-radius: 16px;
display: block;
display: none;
margin-left: auto;
margin-right: auto;
object-fit: cover;
@ -135,10 +152,15 @@ img {
}
@media (min-width: 1200px) {
.wallpaper-placeholder {
width: 30%;
}
.wallpaper-img {
width: 30%;
border-radius: 16px;
float: left;
display: none;
}
.wallpaper-text {
@ -162,7 +184,11 @@ img {
}
@media (min-width: 1400px) {
.wallpaper-img {
.wallpaper-placeholder {
min-width: 20%;
}
.wallpaper-img {
min-width: 20%;
display: none;
}
}

9
src/web/static/script/placeholder.js Normal file
View file

@ -0,0 +1,9 @@
const wallpaper = document.querySelector('.wallpaper-img');
const placeholder = document.querySelector('.wallpaper-placeholder');
const image = new Image();
image.src = wallpaper.src;
image.onload = function() {
placeholder.style.display = 'none';
wallpaper.style.display = 'block'
}