Starlio/Starlio-web
1
0
Fork 0
mirror of https://github.com/Starlio-app/Starlio-web.git synced 2025-03-03 22:41: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> </head>
<body> <body>
<div class="wallpaper"> <div class="wallpaper">
<div class="wallpaper-placeholder"></div>
<img alt="{{info.title}}" <img alt="{{info.title}}"
src="{{info.url}}" src="{{info.url}}"
onclick="window.open('{{info.hdurl}}')" onclick="window.open('{{info.hdurl}}')"
@ -61,5 +62,6 @@
</div> </div>
</div> </div>
</div> </div>
<script src="/static/script/placeholder.js"></script>
</body> </body>
</html> </html>

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

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